login page using Html and Css only
Introduction
HTML stands for HyperText Markup Language. This is the most important markup language that can be used to create a webpage. It is used to display text, image, audio, and video in a webpage.
CSS stands for Cascading Style Sheets. It is used to style HTML documents. CSS can make responsive web pages and is used for styling and its collection of formatting rules. It is used for designing purposes. The CSS extension is (.CSS).
step 1:
Create a new folder and give a name to the folder. In the folder save an HTML and CSS file. After creating the folders, open the vs editor and create html and css file.
now type html code like this
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h2>facebook</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 “>
<br><br>
<input type=”checkbox” id=”check”>
<span>Remember me</span>
<br><br>
Forgot <a href=”#”>Password</a>
</form>
</div>
</body>
</html>
to link we have to link html and css by typing or implementing code as
<link rel=”stylesheet” type=”text/css” href=”style.css”>
after implenenting the above code it’s output lool like
now to make page attractive we can implement css code as
body
{
margin: 0;
padding: 0;
background-color:#dbb1e7ba;
font-family: ‘Arial’;
}
.login{
width: 382px;
overflow: hidden;
margin: auto;
margin: 20 0 0 450px;
padding: 80px;
background: #1c9980;
border-radius: 15px ;
}
h2{
text-align: center;
color: #2453ee;
padding: 20px;
}
label{
color: #1edf2e;
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: rgb(212, 39, 26);
}
#check{
color: #1edf2e;
}
span{
color: white;
font-size: 17px;
}
a{
float: right;
background-color: rgb(194, 212, 110);
}
