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 href="gscode.in">click here gscode</a> <div> <form> <div> welcome gs code </div> <div> <div> <input type="text" name="" placeholder="username "value=""> </div> <div> <input type="password" name="" placeholder="password "value=""> </div> </div> <div> </div> <div> <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″]
