Beautiful Login And Sign Up Form By Using HTML , CSS And JS:
HTML:
________________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="fontawesome-free-5.11.2-web (1)\fontawesome-free-5.11.2-web\css\all.css" type="text/css"/>
<title>Welcome</title>
</head>
<body>
<div class="main-container">
<div class="sub-container">
<div class="" style="display:block" id="main">
<div class="logo-container">
<div class="logo"><i class="fas fa-house-damage" style="color:black;font-size:20px;padding:8px 0px 0px 8px"></i></div>
<h3 class="logo-text">DiGi</h3>
</div>
<div ><h1 class="wel">Welcome</h1>
<h3 class="ready">Are you ready for great experience?</h3>
<button class="btn-left" id="sign-up-button">Sign Up<i class="fas fa-arrow-right" style="padding-left:6px;"></i></button>
<button class="btn-right" id="sign-in-button"><i class="fas fa-arrow-left" style="padding-right:6px;"></i>Sign In</button>
</div>
</div>
<div class="sign-in" style="display:none;" id="secondView">
<div class="right-sign-in" id='right'>
<h1 class="sign-up-heading">Sign Up</h1>
<h1 class="dots">...</h1>
<div class="sign-up-input">
<input type="text" placeholder="Enter your name" class="txt"/>
<input type="email" placeholder="Enter your email" class="txt"/>
<input type="password" placeholder="Enter your password" class="txt"/>
<input type="password" placeholder="Re-Enter your password" class="txt"/>
<input type="button" value="Sign Up" class="btn"/>
<h3 class="copyright">© Designed & Developed By Waseem</h3>
</div>
</div>
<div class="left-sign-in" id='left'>
<img src="front-end-inner.png" height="300px" width="300px" class="img" alt=""/>
<div class="cont">
<div class="logo"><i class="fas fa-house-damage" style="color:black;font-size:20px;padding:8px 0px 0px 8px"></i></div>
<h3 class="logo-text">DiGi</h3>
</div>
</div>
<div>
</div>
</div>
<div class="log-in" style="display:none" id="thirdView">
<div class="right-sign-in" id='right_sign'>
<h1 class="sign-up-heading">Sign In</h1>
<h1 class="dots">...</h1>
<div class="sign-up-input">
<input type="text" placeholder="Username" class="txt"/>
<input type="password" placeholder="Password" class="txt"/>
<input type="button" value="Sign In" class="btn"/>
<h3 class="copyright">© Designed & Developed By Waseem</h3>
</div>
</div>
<div class="left-sign-in" id='left_sign'>
<img src="4.png" height="300px" width="300px" class="img" alt=""/>
<div class="cont">
<div class="logo"><i class="fas fa-house-damage" style="color:black;font-size:20px;padding:8px 0px 0px 8px"></i></div>
<h3 class="logo-text">DiGi</h3>
</div>
</div>
</div>
</div>
<script>
var btnSignUp=document.getElementById('sign-up-button');
var btnSignIn=document.getElementById('sign-in-button');
var firstView=document.getElementById('main');
var signUpView=document.getElementById('secondView');
var loginView=document.getElementById('thirdView');
var left=document.getElementById('left');
var right=document.getElementById('right');
var left_sign=document.getElementById('left_sign');
var right_sign=document.getElementById('right_sign');
btnSignUp.onclick=function(){
firstView.style.display="none";
signUpView.style.display="block";
var pos1 = -100;
var pos=-100;
var id1 = setInterval(frame, 5);
function frame() {
if (pos1 ==0) {
clearInterval(id1);
// func();
} else {
pos1++;
left.style.left= pos1 + 'px';
pos++;
right.style.right= pos + 'px';
}
}
/*/function func(){
var pos = -100;
var id = setInterval(frame, 10);
function frame() {
if (pos ==0) {
clearInterval(id);
} else {
pos++;
right.style.right= pos + 'px';
}
}//}*/
}
btnSignIn.onclick=function(){
firstView.style.display="none";
thirdView.style.display="block";
var pos2 = -100;
var pos3=-100;
var id2 = setInterval(frame, 5);
function frame() {
if (pos2 ==0) {
clearInterval(id2);
// func();
} else {
pos2++;
left_sign.style.left= pos2 + 'px';
pos3++;
right_sign.style.right= pos3 + 'px';
}
}
}
</script>
</body>
</html>
CSS:
_________________________________________________________________________________
body{
padding:0;
margin:0;
background:linear-gradient(to right, #6E1FDA, #27006A);
}
.main-container{
width:100%;
height:500px;
}
.sub-container{
margin:55px auto;
height:500px;
width:820px;
background-color:#170058;
border-radius:12px;
box-shadow: 1px -3px 12px 7px #36007E;
}
.logo{
padding:9px 7px 8px 0px;
margin:0px 0px 0px 30px;
width:40px;
height:40px;
border-radius:50%;
background-color:#2ADCFF;
}
.logo-text{
text-align:center;
color:#2ADCFF;
font-family:lato;
}
.logo, .logo-text{
display:inline;
}
.logo-container{
padding-top:30px;
}
.wel{
margin-top:85px;
text-align:center;
color:#2ADCFF;
font-family:lato;
font-weight:900;
font-weight:bold;
font-size:50px;
}
@font-face{
font-family:"lato";
src:"Lato-Regular.ttf";
}
.ready{
margin-top:-20px;
text-align:center;
color:white;
font-family:lato;
font-weight:100;
font-size:20px;
font-style:italic;
}
.btn-left{
padding:13px 20px 13px 20px;
border-radius:38px;
border-style:none;
font-weight:900;
font-size:15px;
font-family:lato;
outline:none;
background-color:#2ADCFF;
color:white;
margin-left:275px;
}
.btn-right{
margin-left:20px;
padding:13px 28px 13px 20px;
border-radius:38px;
border-style:none;
font-weight:900;
font-size:15px;
font-family:lato;
outline:none;
background-color:#2ADCFF;
color:white;
}
.btn-left:hover{
background-color:white;
color:#2ADCFF;
}
.btn-right:hover{
background-color:white;
color:#2ADCFF;
}
.right-sign-in{
margin:0px 0px 0px 0px;
width:50%;
height:100%;
float:right;
background-color:white;
box-shadow: 1px -3px 12px 3px #f1e6ff;
border-radius:5px;
position:relative;
right:-100px;
}
.sign-up-heading{
padding-top:10px;
text-align:center;
font-family:lato;
color:#230162;
}
.left-sign-in{
margin:0px 0px 0px 0px;
width:49%;
height:100%;
float:left;
background-color:white;
box-shadow: 1px -3px 12px 3px #f1e6ff;
border-radius:5px;
position:relative;
left:-100px;
}
.sign-in{
height:100%;
width:100%;
}
.dots{
margin-top:-30px;
text-align:center;
font-size:30px;
color:#230162;
}
.txt{
font-family:lato;
display:flex;
margin-top:10px;
padding:15px 130px 15px 20px;
backgroun:none;
background-color:rgba(35, 1, 98, 0.4);
color:#230162;
border-style:solid;
border-radius:30px;
outline:none;
border-color:#230162;
}
.txt:hover{
padding:15px 150px 15px 20px;
transition:10;
background-color:white;
}
.text:focus{
padding:15px 150px 15px 20px;
transition:10;
background-color:white;
color:#230162;
}
::placeholder{
color:#230162;
font-weight:500;
}
.sign-up-input{
margin-left:48px;
}
.btn{
display:flex;
margin-top:15px;
margin-left:60px;
padding:15px 50px 15px 50px;
backgroun:none;
background-color:rgba(35, 1, 98, 0.4);
color:white;
border-style:solid;
border-radius:30px;
outline:none;
border-color:#230162;
text-align:center;
font-family:lato;
color:#230162;
font-size:15px;
font-weight:900;
}
.btn:hover{
background-color:white;
}
.log-in{
height:100%;
width:100%;
}
.copyright{
position:absolute;
top:450px;
font-family:lato;
font-weight:100;
font-size:14px;
margin-top:10px;
margin-left:35px;
color:#230162;
}
.img{
margin:40px 0px 0px 50px;
}
.cont{
margin:20px 0px 0px 140px;
}
_________________________________________________________________________________
1 Comments
I love this blog ... Thanks for sharing this wonderful information...Don't forget to check this Animated Glowing Inputs Login Form in HTML & CSS
ReplyDelete