Untitled

<!DOCTYPE html>
<html lang="en">
<head>

<style>

body{
    background-image:url(background.webp);
    font-family: 'Courier New', Courier, monospace;
    color: green;
}

#mainForm{

    background-color: white;
		border:6px double gray;
		max-width: 940px;
        height: 600px;
		margin-left:auto;
		margin-right:auto;

}

#navbar{

	border-bottom: 1px solid black;	
	margin-left: auto;
	margin-right:auto;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
    background-color: rgb(245, 245, 222);
    
}

a{

    text-decoration: none;
		color:black;
		text-transform: uppercase;

}

li{

display: inline;
margin-left: 50px;


}

ul{
    font-size: 20px;

    
}

#left{
    border-right: 2px solid silver;
    float: left;
}

#form{
    margin-left: 65px;
    margin-top: 200px;
    float: left;
    height: 600px;
}

#logo{

font-family: Georgia, 'Times New Roman', Times, serif;
font-size: larger;
text-align: center;
text-transform: uppercase;
font-weight: bold;



}

label{
   
    display:block;

}

button{
    margin-top: 20px;
    margin-left: 130px;
}

</style>

</head>

<body>
    <div id="mainForm">
    <div id="navbar">
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Sign In</a>
            </li>
            <li>
                <a href="#">Sign Up</a>
            </li>
        </ul>
    </div>
    <div id="left">
    <img src="melon.png"/>
    <div id="logo">Welcome to our app!</div>
    </div>
    <div id="form">
            <div >
                <label >Username</label>
                <input>
            </div>
          <div >
            <label>Password</label>
            <input>
          </div>
          <button >Login</button>
    </div>
    </div>
    
</body>
</html>
Editor is loading...