I created this today and someone could finish it off.
Credits:
Me for coding all of it.
Yoshi, For the person icon.
HTML doc.
CSS doc
Credits:
Me for coding all of it.
Yoshi, For the person icon.
HTML doc.
Code:
<!DOCTYPE html>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<head>
</head>
<body>
<div id="headerMenu">
<form action="search.php?" method="GET">
<input type="text" name="search" placeholder="Search Now" />
</form>
<div id="line">
</div>
<button>Register</button>
</div>
<div id="Login">
<img src="images/Login.jpg">
<input type="text" name="Username" Placeholder="Username"><br>
<input type="password" name="Password" Placeholder="Password"><br>
<input type="submit" name="submit" value="Log in">
</div>
</body>
</html>CSS doc
Code:
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
font-family: arial, helvetica, sans-serif;
}
#headerMenu {
background-color: white;
box-shadow: 0 1px 4px #ccc;
height: 50px;
width: 100%;
}
#headerMenu input[type="text"] {
background-color: #f2f2f2;
margin-top: 10px;
margin-left: 350px;
border-radius: 4px;
border: 1px solid #ccc;
height: 25px;
4px;
text-indent: 10px;
width: 500px;
outline: 0;
}
#headerMenu input[type="text"]:hover {
background-color: white;
}
#line {
background-color: #ccc;
height: 25px;
width: 1px;
margin-left: 880px;
margin-top: -26px;
}
#headerMenu button {
height: 30px;
background-color: #81BEF7;
margin-left: 900px;
margin-top: -27px;
color: white;
position: absolute;
border: 1px solid #ccc;
border-radius: 4px;
width:100px;
outline: 0;
}
#headerMenu button:hover {
background-color: #58ACFA;
}
#Login {
background-color: white;
height: 400px;px;
margin-top: 20px;
border-radius: 15px;
width: 400px;
margin-left: 400px;
box-shadow: 0 1px 4px 4px #ccc;
}
#Login img {
margin-left: 80px;
}
#Login input[name="Username"] {
width: 250px;
border-radius:
4px;
height: 30px;
background-color: #f2f2f2;
margin-top: 10px;
outline: 0;
margin-left: 75px;
text-indent: 10px;
border: 1px solid #ccc;
}
#Login input[name="Password"]{
width: 250px;
background-color: #f2f2f2;
border-radius: 4px;
height: 30px;
text-indent: 10px;
margin-top: 10px;
border: 1px solid #ccc;
outline: 0;
margin-left: 75px;
}
#Login input[type="submit"] {
width: 125px;
height: 30px;
margin-top:10px;
background-color: #81BEF7;
border-radius: 4px;
border:1px solid #ccc;
color: white;
margin-left: 140px;
}
#Login input[type="submit"]:hover {
background-color: #58ACFA;
}
