How to make login page with the use of HTML/CSS (BEGINNER'S LEVEL[NO BACKEND USED])
Hey
guys once again welcome to the Decoders blog, I hope you all are doing
well and today I'm present with a beautiful and astonishing login page(with the help of HTML/CSS beginner's level) which
you can create using HTML/CSS, The given code will help you to built it, so
just follow the codes and make your login page easily , and enjoy it with your friends
The view of your login page is given in the above photo
<!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">
<title>index file</title>
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap"
rel="stylesheet">
</head>
<style>
html{
background-image: url(file:///home/sivam/Desktop/hero-square.jpg);
}
body{
padding: 6px;
margin: 0px;
width:29%;
position: relative;
left: 34%;
background-color: white;
top: 70px;
height: 459px;
padding-bottom: 23px;
font-family: 'Indie Flower', cursive;
}
h1{
position: relative;
left: 29%;
}
.one{
width: 140px;
position: relative;
left: 13%;
background-color: #435dc6;
padding-bottom: 16px;
border-radius: 11px;
text-align: center;
}
.two{
width: 140px;
position: relative;
left: 55%;
bottom: 62px;
text-decoration: none;
background-color: #435dc6;
border-radius: 12px;
text-align: center;
margin-bottom: 6.92px;
padding-bottom: 14px;
padding-top: 0px;
margin-top: -10.08px;
}
.two:hover{
background-color: #554fb7c7;
}
a{
text-decoration: none;
color: black;
}
.container{
position: relative;
left: 11%;
bottom:38px;
width: 56%;
padding: 10px;
}
#phone{
width: 96%;
padding: 4px;
border-radius: 5px;
margin-bottom: 17px;
padding-bottom: 20px;
}
#code{
width: 96%;
padding: 4px;
border-radius: 5px;
margin-bottom: 17px;
padding-bottom: 20px;
}
#password{
padding: 190px;
width: 96%;
position: relative;
bottom: 67%;
padding: 4px;
border-radius: 5px;
margin-bottom: 17px;
padding-bottom: 20px;
}
#register{
position: relative;
left: 22%;
margin-bottom: 0px;
border-bottom-width: 2px;
padding-bottom: 9px;
padding-top: 9px;
padding-right: 10px;
padding-left: 9px;
text-align: center;
border-radius: 13px;
margin-right: -47px;
margin-left: -50px;
width: 149%;
bottom: 67%;
background-color: #554fb7c7;
}
#button{
position: relative;
left: 103%;
bottom: 66px;
display: fixed;
}
</style>
<body>
<h1>REGISTER</h1>
<h2 class="one">REGISTER</h2>
<h2 class="two"> <a href="/home/sivam/Desktop/login.html/l.html">LOGIN</a>
</h2>
<form action="#" class="container">
<div>
<input type="text" name="" id="phone" placeholder="Enter your phone
number">
</div>
<div>
<input type="text" name="" id="code" placeholder="Enter the verification
code" >
</div>
<div>
<input type="submit" value="Get code" id="button" >
</div>
<div>
<input type="text" name="" id="password" placeholder="Enter the password">
</div>
<div>
<input type="submit" id="register" value="Register">
</div>
</form>
</body>
</html>
Comments
Post a Comment