Download Breathing Login Page Design 2020 || Best Login page Design 2020Using Html Css
HTML CODE :
<!DOCTYPE html>
<html>
<html>
<body>
<h2> How is it? </h2>
<div class="dcoder">
<h1> Login<br></h1>
<br><input type="text" placeholder="Email"id="txt"><br>
<br><input type="text" placeholder="Password" id="txt"><br><br>
<input type="submit"value="LogIn" id="btn"><br><br>
<a href="#" id="link"> Create an Account</a>
</div
<img src="">
</body>
</html>
<h2> How is it? </h2>
<div class="dcoder">
<h1> Login<br></h1>
<br><input type="text" placeholder="Email"id="txt"><br>
<br><input type="text" placeholder="Password" id="txt"><br><br>
<input type="submit"value="LogIn" id="btn"><br><br>
<a href="#" id="link"> Create an Account</a>
</div
<img src="">
</body>
</html>
Css Code :
*{
margin:0;
padding:0;
}
body{
background:linear-gradient(pink,purple);
background-repeat:no-repeat;
background-size:cover;
height:100vh;
}
h1{
color: red;
text-align:center;
animation:2s blink infinite;
}
.dcoder{
color: black;
background-color:white;
padding:10px;
text-align:center;
margin-top:200px;
width:300px;
height:230px;
margin-left:40px;
border-left:5px solid red;
box-shadow:5px 5px grey;
border-radius:0px 20px 20px 0px;
}
#btn{
background-color: red;
color: white;
padding:5px;
width:80px;
border:none;
border-radius:0px 20px 0px 20px;
}
#txt{
padding:5px;
border:none;
border-bottom:2px solid red;
border-left:2px solid blue;
}
#link{
text-decoration:none;
color: red;
padding:5px;
}
@keyframes blink{
0%{
color:blue;
padding:5px;
}
50%{
color:red;
padding:0px;
}
100%{
color:green;
padding:5px;
}
}
margin:0;
padding:0;
}
body{
background:linear-gradient(pink,purple);
background-repeat:no-repeat;
background-size:cover;
height:100vh;
}
h1{
color: red;
text-align:center;
animation:2s blink infinite;
}
.dcoder{
color: black;
background-color:white;
padding:10px;
text-align:center;
margin-top:200px;
width:300px;
height:230px;
margin-left:40px;
border-left:5px solid red;
box-shadow:5px 5px grey;
border-radius:0px 20px 20px 0px;
}
#btn{
background-color: red;
color: white;
padding:5px;
width:80px;
border:none;
border-radius:0px 20px 0px 20px;
}
#txt{
padding:5px;
border:none;
border-bottom:2px solid red;
border-left:2px solid blue;
}
#link{
text-decoration:none;
color: red;
padding:5px;
}
@keyframes blink{
0%{
color:blue;
padding:5px;
}
50%{
color:red;
padding:0px;
}
100%{
color:green;
padding:5px;
}
}
If you have any questions please mention in comment section. I will answer you as soon as possible. Please share & support thanks 😊
0 Comments