Trending Login Page Design 2020 for Bigginers
HTML CODE
<html>
<body>
<div>
<h1> Login</h1><br><br>
<input type="text" placeholder="Email">
<br><br>
<input type="text" placeholder="Password">
<br><br>
<input type="submit" value="Login" id="btn">
<br><br>
<a href="#"> Forgot password?</a>
<body>
<div>
<h1> Login</h1><br><br>
<input type="text" placeholder="Email">
<br><br>
<input type="text" placeholder="Password">
<br><br>
<input type="submit" value="Login" id="btn">
<br><br>
<a href="#"> Forgot password?</a>
</div>
</body>
</html>
</body>
</html>
CSS CODE
*{
padding:0;
margin:0;
}
body{
background:linear-gradient(90deg, purple,pink);
}
div{
width :300px;
height:340px;
border-radius:9px;
border:transparent;
margin:auto;
margin-top:100px;
padding:10px;
text-align:center;
background:white;
box-shadow:5px 3px grey;
}
input{
width:250px;
height:50px;
padding:5px;
font-size:20px;
border-radius:8px;
border:none;
border:1px solid purple;
}
#btn{
background:linear-gradient(pink,purple);
color:white;
font-weight:bold;
border:none;
}
a{
text-decoration:none;
padding:5px;
color:purple;
text-shadow:5px 2px 3px pink;
}
h1{
color: purple;
text-shadow:5px 2px 3px pink;
}
padding:0;
margin:0;
}
body{
background:linear-gradient(90deg, purple,pink);
}
div{
width :300px;
height:340px;
border-radius:9px;
border:transparent;
margin:auto;
margin-top:100px;
padding:10px;
text-align:center;
background:white;
box-shadow:5px 3px grey;
}
input{
width:250px;
height:50px;
padding:5px;
font-size:20px;
border-radius:8px;
border:none;
border:1px solid purple;
}
#btn{
background:linear-gradient(pink,purple);
color:white;
font-weight:bold;
border:none;
}
a{
text-decoration:none;
padding:5px;
color:purple;
text-shadow:5px 2px 3px pink;
}
h1{
color: purple;
text-shadow:5px 2px 3px pink;
}
0 Comments