How To Create Animated Login Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Login Form</title>
</head>
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 50px;
font-family: sans-serif;
overflow: hidden;
background: linear-gradient(45deg, greenyellow, dodgerblue);
}
.card {
padding: 50px;
background-color: white;
border-radius: 10px;
}
.card h1 {
border-left: 7px solid #ffa400;
padding: 2px 10px;
}
.inputbox {
position: relative;
height: 50px;
width: 300px;
margin-bottom: 50px;
}
.inputbox input {
width: 100%;
border: 2px solid black;
padding: 10px;
border-radius: 10px;
font-size: 19px;
}
.inputbox:last-child {
width: 50%;
margin-bottom: 0;
}
.inputbox span {
position: absolute;
top: 14px;
left: 20px;
font-size: 16px;
transition: 0.6s;
}
.inputbox:hover span,
.inputbox input:focus~span,
.inputbox input:valid~span {
transform: translateX(-13px) translateY(-35px);
}
.inputbox [type="button"] {
border: none;
color: white;
background-color: #ff00ff;
}
.inputbox:hover [type="button"] {
background: linear-gradient(45deg, greenyellow, dodgerblue,green,red);
}
@media only screen and (max-width: 600px) {
.card {
padding: 10px;
}
.inputbox {
width: 250px;
}
.inputbox input {
width: 220px;
}
.inputbox [type="button"] {
width: max-content;
border-radius: 5px;
padding: 7px 10px;
}
}
.chijl {
text-decoration: none;
width: 40vw;
padding: 15px;
border-radius: 5px;
text-align: center;
font-size: 20px;
color: #fff;
background-color: #ff0000;
}
</style>
<body>
<div class="card">
<h1>Login.....</h1>
<form>
<div class="inputbox">
<input type="text" required>
<span>Email</span>
</div>
<div class="inputbox">
<input type="password" required>
<span>Password</span>
</div>
<div class="inputbox">
<input type="button" value="Submit">
</div>
</form>
</div>
<a href="https://www.youtube.com/channel/UC-R0Dt24rWVEov_kzDmSLDQ" target="_chijl" class="chijl">Subscribe My You Tube Channel</a>
</body>
</html>
.png)
No comments:
Post a Comment
*******Please Comment, Like and Share******
दोस्तों पूरी पोस्ट पढने के लिए धन्यवाद, आशा करता हूँ आप को यह पोस्ट पसंद आई होगी और भी अधिक जानकारी के लिए या मुझसे जुड़ने के लिए आप मुझे मेरे फेसबुक पेज information & technology computer institutions और इन्स्टाग्राम ID:- satyam_hardoi को फॉलो कर सकते है,
मेरा youtube चैनल itci computer hardoi सर्च करे और पाए कंप्यूटर से सम्बंधित सभी विडियो और हाँ प्लीज नई अपडेट पाने के लिए चैनल को सब्सक्राइब जरुर करें, धन्यवाद | आपका $ सत्यम सर् $