Login and registration form in html and CSS

Step 1) Add HTML:​

<!-- code by gscode.in -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a class="gscode" href="gscode.in">click here gscode</a>
<div class="card-box">
<form class="login">
<div class="title"> welcome gs code </div>
<div class="f-body">
<div class="row">
<input type="text" name="" placeholder="username "value="">
</div>
<div class="row">
<input type="password" name="" placeholder="password "value="">
</div>
</div>
<div class="line">
</div>
<div class="footer">
<a>login!</a>
</div>
</form>
</div>

</body>
</html>

Step 2) Add CSS CODE IN style tag

<style media="screen">
@import url('https://fonts.googleapis.com/css?family=Francois+One&display=swap');
body{

background: #fce77d;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.gscode{
position: absolute;
top:50px;
text-transform: capitalize;
font-size: px;
font-family: 'Francois One', sans-serif;
text-decoration: underline;
color: black;
}
.card-box{
width: 500px;
border-radius: 10px;
background: white;
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
}
.title{
padding: 10px ;
background: #f96167;
display: flex;
justify-content: center;
font-weight: 50px;
font-family: 'Francois One', sans-serif;;
border-radius: 10px 10px 0px 0px;
height: 80px;
align-items: center;
text-transform: uppercase;
font-size: 30px;
}
.f-body{
padding: 10px;
align-items: center;
}
.row {
display: flex;
justify-content: space-around;
padding: 10px;
}
.row input[type="text"],.row input[type="password"]{
width: 100%;
margin:0 15px;
height: 35px;
background:#e8ebed;
border: none;
border-radius: 10px;
padding: 5px 15px;

}
.footer {
margin: 0 25px 15px 25px;
padding: 15px 10px;
}
.footer a{
background:#f96167;
display:inline-block;
height: 40px;
line-height: 40px;
border-radius: 5px;
width: 50px;
padding: 5px 0px;
width: 100%;
text-align: center;
text-transform: uppercase;
font-size: 20px;
font-family: 'Francois One', sans-serif;
}
.line{
border: 1px solid #b5b5b1;
margin-left: 35px;
margin-right: 35px;

}

</style>

[everest_form id=”287″]

gscode
No Comments
Posted in:
CSS