How to log in and Register HTML CSS JS
Add the following link to the in your index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Login | Register</title>
<!-- add styles -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="hero">
<div class="form-box">
<div class="div button-box">
<div id="btn"></div>
<button type="button" class="toggle-btn" onclick="login()">Log In</button>
<button type="button" class="toggle-btn" onclick="register()">Register</button>
</div>
<div class="social-container">
<a href="#" class="social">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="social">
<i class="fa fa-youtube-play"></i>
</a>
<a href="#" class="social">
<i class="fa fa-linkedin"></i>
</a>
</div>
<form id="login" class="input-group">
<input type="text" class="input-field" placeholder="Username" required>
<input type="password" class="input-field" placeholder="Password" required>
<input type="checkbox" class="check-box"><span>Remember Password</span>
<button class="submit-btn" type="submit">Log In</button>
</form>
<form id="register" class="input-group">
<input type="text" class="input-field" placeholder="Username" required>
<input type="email" class="input-field" placeholder="Email" required>
<input type="password" class="input-field" placeholder="Password" required>
<input type="checkbox" class="check-box"><span>I agree to the terms & conditions</span>
<button class="submit-btn" type="submit">Register</button>
</form>
</div>
</div>
<!-- add internal js -->
<script type="text/javascript" src="js/internal.js"></script>
</body>
</html>Add the following link to your CSS/style.css file
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
background: #eee;
}
.fa-facebook {
color: #2196F3;
}
.fa-youtube-play {
color: red;
}
.fa-linkedin {
color: #03A9F4;
}
.form-box {
width: 380px;
height: 480px;
margin: 6% auto;
padding: 5px;
overflow: hidden;
position: relative;
border-radius: 20px;
background: #eeeeee;
box-shadow: 11px 11px 22px #b3b3b3, -11px -11px 22px #ffffff;
}
.button-box {
width: 220px;
margin: 35px auto;
position: relative;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
border-radius: 30px;
}
.toggle-btn {
padding: 10px 30px;
font-weight: bolder;
cursor: pointer;
background: transparent;
border: 0;
outline: none;
position: relative;
}
#btn {
top: 0;
left: 0;
position: absolute;
width: 110px;
height: 100%;
background: linear-gradient(to right, rgb(238 238 238) 0%, rgb(224 224 224) 96%);
border-radius: 30px;
transition: 0.5s;
}
.social-container {
margin: 20px 100px;
}
.social-container a {
border: 1px solid #eee;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
text-decoration: none;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
}
.input-group {
top: 180px;
position: absolute;
width: 280px;
transition: 0.5s;
}
.input-field {
width: 100%;
border-radius: 25px;
padding: 10px 1em;
margin: 5px 0;
border-left: 0;
border-top: 0;
border-right: 0;
border-bottom: 1px solid #999;
outline: none;
border: none;
background: #f2f2f2;
box-shadow: inset 5px 5px 10px #d1cdc7, inset -2.5px -2.5px 5px #ffffff;
}
.submit-btn {
width: 85%;
padding: 10px 30px;
font-weight: bolder;
cursor: pointer;
display: block;
margin: auto;
background: linear-gradient(to right, rgb(220 220 220) 0%, rgb(244 244 244) 96%);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
transition: transform 80ms ease-in;
border: 0;
outline: none;
border-radius: 30px;
}
.check-box {
margin: 30px 10px 30px 0;
}
span {
color: #777;
font-size: 12px;
bottom: 68px;
position: absolute;
}
#login {
left: 50px;
}
#register {
left: 450px;
}
Add the following link to the in your internal.js file
var x = document.getElementById("login");
var y = document.getElementById("register");
var z = document.getElementById("btn");
function register()
{
x.style.left = "-400px";
y.style.left = "50px";
z.style.left = "110px";
}
function login()
{
x.style.left = "50px";
y.style.left = "450px";
z.style.left = "0px";
}
0 Comments
CAN FEEDBACK
Emoji