HTML CSS Animated Login Form (Pure CSS)
ANIMATED LOGIN FORM LAST PROJECT
This is animated login html css login form it is very beautiful With Clear Interface it consist of two inputs and one submit button One Input Field is for Username and other is password and button is for login
It have also the option of Forgot password.
You may also like Delete snapchat account 2022
In This Article You Will How To Create Login Animated Form in Pure HTML and CSS
PROJECT CODE:
First of all Create INDEX.HTML File and copy this code:
<!DOCTYPE html>
<html>
<head>
<title>Animated Login Form</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img class="wave" src="img/wave.png">
<div class="container">
<div class="img">
<img src="img/bg.svg">
</div>
<div class="login-content">
<form action="index.html">
<img src="img/avatar.svg">
<h2 class="title">Welcome</h2>
<div class="input-div one">
<div class="i">
<i class="fas fa-user"></i>
</div>
<div class="div">
<h5>Username</h5>
<input type="text" class="input">
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fas fa-lock"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" class="input">
</div>
</div>
<a href="#">Forgot Password?</a>
<input type="submit" class="btn" value="Login">
</form>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Then Create CSS Folder In Folder Create style.css File and copy the code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
overflow: hidden;
}
.wave{
position: fixed;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
}
.container{
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap :7rem;
padding: 0 2rem;
}
.img{
display: flex;
justify-content: flex-end;
align-items: center;
}
.login-content{
display: flex;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.img img{
width: 500px;
}
form{
width: 360px;
}
.login-content img{
height: 100px;
}
.login-content h2{
margin: 15px 0;
color: #333;
text-transform: uppercase;
font-size: 2.9rem;
}
.login-content .input-div{
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin: 25px 0;
padding: 5px 0;
border-bottom: 2px solid #d9d9d9;
}
.login-content .input-div.one{
margin-top: 0;
}
.i{
color: #d9d9d9;
display: flex;
justify-content: center;
align-items: center;
}
.i i{
transition: .3s;
}
.input-div > div{
position: relative;
height: 45px;
}
.input-div > div > h5{
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 18px;
transition: .3s;
}
.input-div:before, .input-div:after{
content: '';
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #38d39f;
transition: .4s;
}
.input-div:before{
right: 50%;
}
.input-div:after{
left: 50%;
}
.input-div.focus:before, .input-div.focus:after{
width: 50%;
}
.input-div.focus > div > h5{
top: -5px;
font-size: 15px;
}
.input-div.focus > .i > i{
color: #38d39f;
}
.input-div > div > input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.7rem;
font-size: 1.2rem;
color: #555;
font-family: 'poppins', sans-serif;
}
.input-div.pass{
margin-bottom: 4px;
}
a{
display: block;
text-align: right;
text-decoration: none;
color: #999;
font-size: 0.9rem;
transition: .3s;
}
a:hover{
color: #38d39f;
}
.btn{
display: block;
width: 100%;
height: 50px;
border-radius: 25px;
outline: none;
border: none;
background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
background-size: 200%;
font-size: 1.2rem;
color: #fff;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
margin: 1rem 0;
cursor: pointer;
transition: .5s;
}
.btn:hover{
background-position: right;
}
@media screen and (max-width: 1050px){
.container{
grid-gap: 5rem;
}
}
@media screen and (max-width: 1000px){
form{
width: 290px;
}
.login-content h2{
font-size: 2.4rem;
margin: 8px 0;
}
.img img{
width: 400px;
}
}
@media screen and (max-width: 900px){
.container{
grid-template-columns: 1fr;
}
.img{
display: none;
}
.wave{
display: none;
}
.login-content{
justify-content: center;
}
}
INCLUDE JS FILE
Then Create JS Folder and Create Main.js
const inputs = document.querySelectorAll(".input");
function addcl(){
let parent = this.parentNode.parentNode;
parent.classList.add("focus");
}
function remcl(){
let parent = this.parentNode.parentNode;
if(this.value == ""){
parent.classList.remove("focus");
}
}
inputs.forEach(input => {
input.addEventListener("focus", addcl);
input.addEventListener("blur", remcl);
});
Thanks For Reading The Article
Team Amaos3
amaos3.blogspot.com
In Hindi:
एनिमेटेड लॉगिन फॉर्म अंतिम परियोजना
यह एनिमेटेड लॉगिन है html सीएसएस लॉगिन फॉर्म यह बहुत सुंदर है स्पष्ट इंटरफ़ेस के साथ इसमें दो इनपुट और एक सबमिट बटन होता है एक इनपुट फ़ील्ड उपयोगकर्ता नाम के लिए है और दूसरा पासवर्ड है और बटन लॉगिन के लिए है
इसमें फॉरगॉट पासवर्ड का विकल्प भी है।
इस लेख में आप शुद्ध HTML और CSS में लॉगिन एनिमेटेड फॉर्म कैसे बनायेंगे?
परियोजना का कोड:
सबसे पहले INDEX.HTML फाइल बनाएं और इस कोड को कॉपी करें:
यहां यह प्रोजेक्ट एचटीएमएल सीएसएस एनिमेटेड लॉग इन फॉर्म (शुद्ध सीएसएस) पूरा हो गया है।
लेख पढ़ने के लिए धन्यवाद
टीम आमोस3
IN URDU:
Translation is too long to be saved
اینیمیٹڈ لاگ ان فارم آخری پروجیکٹ
یہ اینیمیٹڈ لاگ ان ہے html سی ایس ایس لاگ ان فارم یہ بہت خوبصورت ہے واضح انٹرفیس کے ساتھ آپ کو دو اور ایک جمع کرنے کے لئے ایک بٹن فراہم کرنے والے صارف کے نام کے لئے اور دوسرا پاس ورڈ ہے اور بٹن لاگ ان کرنے کے لئے
کیا فارگٹ پاس ورڈ کا آپشن بھی ہے۔
اس مضمون میں آپ کو صاف HTML اور CSS میں لاگ ان اینیمیٹڈ فارم کیسے بنائیں گے؟
پروجیکٹ کا کوڈ:
سب سے پہلے INDEX.HTML فائل کو بحال کریں اور اس کوڈ کو کاپی کریں:
یہاں یہ پروجیکٹ ایچ ٹی ایم ایل سی ایس ایس ایم ایل ان فارم (پاک سی ایس ایس) مکمل ہو گیا ہے۔
مضمون پڑھنے کے لیے شکریہ
amaos3.blogspot.com
Other Use Full Articles
0 Comments