Gradient Multi-color Login Page Design for Bigginers
HTML CODE :
<html>
<body>
<h1> How Is It?</h1>
<div id="box">
<h1> Login </h1><br>
Email<br>
<input type="text" placeholder="Enter Email" id="txt">
<br><br>
<body>
<h1> How Is It?</h1>
<div id="box">
<h1> Login </h1><br>
Email<br>
<input type="text" placeholder="Enter Email" id="txt">
<br><br>
Password<br>
<input type="password" placeholder="Enter Password" id="txt">
<br><br>
<center>
<input type="submit" value="Login"id="btn">
</center> <br><br>
<a href="#" id="link1"> Create an Account</a>
<a href="#" id="link2"> Forgot Password?</a>
<input type="password" placeholder="Enter Password" id="txt">
<br><br>
<center>
<input type="submit" value="Login"id="btn">
</center> <br><br>
<a href="#" id="link1"> Create an Account</a>
<a href="#" id="link2"> Forgot Password?</a>
</div>
</body>
</html>
</body>
</html>
CSS CODE :
*{
margin:0;
padding:0;
}
body{
background :
}
#box{
background-color:white;
width:300px;
height:350px;
margin:auto;
margin-top:100px;
padding:20px;
}
#txt{
width:300px;
padding:10px;
}
#box { background-image: linear-gradient(90deg, red, blue), linear-gradient(90deg, red, blue);
background-position: 0 0px, 100% 100%;
background-repeat: no-repeat;
background-size: 100% 5px;
border-left: 5px solid red;
border-right: 5px solid blue;
padding: 10px 5px;
}
#link1{
float:left;
text-decoration:none;
padding:5px;
background:#d22d2d;
color:white;
}
#link2{
float:right;
text-decoration:none;
padding:5px;
background:#8080ff;
color:white;
}
#btn{
padding:10px;
width:200px;
border:none;
height:40px;
background:linear-gradient(90deg, red,purple,blue);
color:white;
font-weight:bold;
box-shadow:2px 2px grey;
}
h1{
text-align:center;
}
margin:0;
padding:0;
}
body{
background :
}
#box{
background-color:white;
width:300px;
height:350px;
margin:auto;
margin-top:100px;
padding:20px;
}
#txt{
width:300px;
padding:10px;
}
#box { background-image: linear-gradient(90deg, red, blue), linear-gradient(90deg, red, blue);
background-position: 0 0px, 100% 100%;
background-repeat: no-repeat;
background-size: 100% 5px;
border-left: 5px solid red;
border-right: 5px solid blue;
padding: 10px 5px;
}
#link1{
float:left;
text-decoration:none;
padding:5px;
background:#d22d2d;
color:white;
}
#link2{
float:right;
text-decoration:none;
padding:5px;
background:#8080ff;
color:white;
}
#btn{
padding:10px;
width:200px;
border:none;
height:40px;
background:linear-gradient(90deg, red,purple,blue);
color:white;
font-weight:bold;
box-shadow:2px 2px grey;
}
h1{
text-align:center;
}
If you have any questions or queries please aka me anything regarding web development in comment section 😊 thanks.
0 Comments