Login page Design
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color:#b30000;
border:solid 10px #f1f1f1;
border-radius:9px;
width:35%;
margin-left:auto;
margin-right:auto;
}
h1{
color:green;
text-align:center;
}
label{
color:black;
}
.btn{
border:none;
padding: 16px 20px;
width:100%;
background-color:green;
color:white;
border-radius:15px;
}
.btn:hover {
opacity: 1;
}
* {
box-sizing: border-box;
}
hr {
border: 2px solid #f1f1f1;
margin-bottom:35px;
}
input[type="text"],input[type="password"]{
padding:16px 20px;
width:100%;
border:none;
background-color:#f1f1f1;
margin:5px 0 22px 0;
display:inline-block;
border-radius:15px;
}
input[type="text"]:focus,input[type="password"]:focus{
outline:none;
background-color:#f2f2f2;
}
.Col{
padding:20px;
background-color:white;
}
.NewAccount{
text-align:center;
}
</style>
</head>
<body>
<form action="/action_page.php" id="" name="myLogin" onsubmit="return validateForm()">
<div class="Col">
<h1>Login Form</h1>
<hr>
<label><b>User Name</b></label><br><br>
<input type="text" name="username" id="username" placeholder="Enter user Name/Email" required><br><br>
<label><b>Password</b></label><br><br>
<input type="password" name="password" id="password" placeholder="Enter password" required>
<hr>
<div class="NewAccount">
<a href="#">Forgot Password</a>
</div>
<div>
<br><br>
<button type="submit" name="submit" id="submit" class="btn" ><b>Login</b></button><br><br>
<div class="NewAccount">
<a href="#"><b>Create New Account</b></a>
</div>
</div>
</div>
</form>
</body>
</html>
RUN CODE
You did well. The login form, that you have designed is perfect.
ReplyDeleteLearn CSS code more...vv