For clarifying any doubt:-
HTML codes are written in green color and CSS codes are written in red color please mind it.
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<style>
body
{
margin: 0;
padding: 0;
background-color:lightgreen;
font-family: 'Arial';
}
.login{
width: 382px;
overflow: hidden;
margin: auto;
margin: 20 0 0 450px;
padding: 80px;
background: blue;
border-radius: 15px ;
}
h2{
text-align: center;
color: #277582;
padding: 20px;
}
label{
color: #08ffd1;
font-size: 17px;
}
#Uname{
width: 300px;
height: 30px;
border: none;
border-radius: 3px;
padding-left: 8px;
}
#Pass{
width: 300px;
height: 30px;
border: none;
border-radius: 3px;
padding-left: 8px;
}
#log{
width: 300px;
height: 30px;
border: none;
border-radius: 17px;
padding-left: 7px;
color: blue;
}
span{
color: white;
font-size: 17px;
}
a{
float: right;
background-color: grey;
}
</style>
<body>
<h2>Login Page</h2><br>
<div class="login">
<form id="login" method="get" action="login.php">
<label><b>User Name
</b>
</label>
<input type="text" name="Uname" id="Uname" placeholder="Username">
<br><br>
<label><b>Password
</b>
</label>
<input type="Password" name="Pass" id="Pass" placeholder="Password">
<br><br>
<input type="button" name="log" id="log" value="Log In Here">
<br><br>
<input type="checkbox" id="check">
<span>Remember me</span>
<br><br>
Forgot <a href="#">Password</a>
</form>
</div>
</body>
</html>
Before applying CSS;-
And the preview of same form/code just after applying some CSS Styles:-
Hope you enjoyed the Coding session. Learn to grow and make a beautiful career in Coding field.
Good ❤❤👌👌
ReplyDeleteThanks.
Delete