create a login form:-
in this object, I create a login form like a login form in Facebook contains (form, div, input, button, link).
first, we make form structure using HTML.
open <form>
form contain:-
5 <div>
<div>
contain 2 <div>
<div>
contain text input
<input type="text" placeholder="Email or Phone Number">
</div>
<div>
contain password input
<input type="password" placeholder="Password">
</div>
</div>
<div>
contain 1 button
<button class="button"><b>Log In</b></button>
</div>
<div>
conain 1 link
<a href="#">Forget Password?</a>
</div>
<div>
contain text
<b>Create New Account</b>
</div>
close form tag </form>
close div tag </div>
Complete Code (HTML, CSS)
HTML:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<form action="" method="post" class="form-login">
<div>
<div class="input">
<input type="text" placeholder="Email or Phone Number">
</div>
<div class="input">
<input type="password" placeholder="Password">
</div>
</div>
<div class="login-button">
<button class="button"><b>Log In</b></button>
</div>
<div class="forget-account">
<a href="#">Forget Password?</a>
</div>
<div class="hr"></div>
<div class="create-account">
<b>Create New Account</b>
</div>
</form>
</div>
</body>
</html>
CSS cod:-
create css file ==> style.css
body{
background: #f0f2f5;
}
.container{
margin: 100px auto;
text-align: center;
width: 396px;
height: 315px;
background: #fff;
border-radius: 8px;
float: none;
color: #1c1e21;
padding-bottom: 24px;
padding-top: 10px;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
}
.form-login{
margin: 0;
padding: 0;
display: block;
}
div{
display: block;
}
input{
background: #fff;
color: #1c1e21;
font-size: 17px;
padding: 14px 16px;
width: 330px;
border-radius: 6px;
background: #FFFFFF;
border: 1px solid #dddfe2;
color: #1d2129;
margin-top: 16px;
}
.button{
background: #1877f2;
border: none;
border-radius: 6px;
font-size: 22px;
line-height: 48px;
padding: 0 16px;
width: 364px;
cursor: pointer;
display: inline-block;
text-decoration: none;
white-space: nowrap;
color: #fff;
margin-top: 16px;
}
.forget-account{
margin-top: 16px;
}
.forget-account a{
font-family: inherit;
font-size: 14px;
font-weight: 500;
text-decoration: none;
color: #1877f2;
}
.hr{
align-items: center;
border-bottom: 1px solid #dadde1;
display: flex;
margin: 20px 16px;
text-align: center;
}
.create-account{
border: none;
border-radius: 6px;
font-size: 17px;
line-height: 48px;
padding: 0 16px;
display: inline-block;
background: #42b72a;
color: #fff;
}
thanks for reading
channel link :- https://www.youtube.com/channel/UC1DFWpD1k1PtxIzYbdBAj6g
Add your comment
Signature :- Ayoub Shindi (Dev AAS).
Comments
Post a Comment