Hi, I will provide a free code for all of you on my YouTube channel, in learn Animated Awesome Login Form using HTML CSS and Javascript. The learning is very easy, simple and easy to understand for beginners, good luck, good luck, my advice is don't forget to keep learning and repeat until you can, happy coding. have a nice day friend.
This is my post for the previous one, you just have to learn it properly, and I will provide the latest updates about teaching web design quickly and easily
The best way is to always learn and practice directly, don't get hung up on confusing code, if you enter the wrong code, don't panic
This is the code HTML and CSS you need learn :
1. HTML and Javascript Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>login form</title>
<script src="https://cdnjs.cloudflare.com/ajax/
libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/
ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="index.html" class="login">
<h1>Log in</h1>
<div class="hero">
<input type="text">
<span data-placeholder="E-mail"></span>
</div>
<div class="hero">
<input type="password">
<span data-placeholder="Password">
</span>
</div>
<p> Forgot Your Password?</p>
<input type="submit" class="herobtn"
value="Login">
<div class="bottom">
Don't have a account? <a href="#">
Sign up</a>
</div>
<div class="share">
<h4>follow us :</h4>
<a href="#" class="fab fa-youtube"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</form>
<script type="text/javascript">
$('.hero input').on('focus',function(){
$(this).addClass('focus');
});
$('.hero input').on('blur',function(){
if($(this).val() == '')
$(this).removeClass('focus');
});
</script>
</body>
</html>
2. C S S
*{
padding: 0;
margin: 0;
font-family: 'nunito',sans-serif;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-image: linear-gradient(120deg,
#16213E, #3120E0);
}
.login {
width: 350px;
background: linear-gradient(315deg,
#d7e1ec, #ffffff);
height: 540px;
padding: 50px 30px;
border-radius: 10px;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.login h1 {
text-align: center;
margin-bottom: 50px;
color: #1a0da3;
text-transform: none;
}
.login p {
font-size: 13px;
text-align: right;
padding-bottom: 10px;
cursor: pointer;
}
.hero {
border-bottom: 2px solid #adadad;
position: relative;
margin: 30px 0;
}
.hero input {
font-size: 15px;
color: #333;
border: none;
width: 100%;
background: none;
padding: 0 5px;
height: 40px;
outline: none;
}
.hero span::before {
content: attr(data-placeholder);
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
z-index: -1;
transition: .5s;
}
.hero span::after {
content: '';
position: absolute;
width: 0%;
height: 2px;
background: linear-gradient(120deg,
#16213E, #3120E0);
transition: .5s;
transform: translate(-100%);
margin-top: 40px;
}
.focus + span::before {
top: -5px;
}
.focus + span::after {
width: 100%;
}
.herobtn {
font-size: 15px;
display: block;
width: 100%;
height: 50px;
border: none;
background: linear-gradient(120deg,
#16213E, #3120E0);
background-size: 200%;
color: #fff;
outline: none;
cursor: pointer;
transition: .5s;
}
.herobtn:hover {
background-position: right;
}
.bottom {
margin-top: 15px;
text-align: center;
font-size: 13px;
}
.login .share{
margin-top: 30px;
text-align: center;
font-size: 13px;
}
.login .share p {
padding-bottom: 5px;
}
.login .share a{
line-height: 5px;
font-size: 20px ;
color:#fff;
margin: 5px;
transition: .5s;
background: linear-gradient(50deg,
#16213E, #3120E0);
padding: 20px 12px;
border-radius: 5px;
}
.login .share a:hover {
color: #f58515;
}
For more details, you can see the link YouTube below :
Support my channel. Comment, like and subscribe, success for all of us, happy world hereafter. Amin, Good Luck. 😀
Download Free Code ZIP : DOWNLOAD NOW
Postingan terkait:
Belum ada tanggapan untuk "Animated Awesome Login Form using HTML CSS and Javascript"
Post a Comment