Skip to content

Commit 3cef447

Browse files
nilajcodernilajcoder
committed
Login register using javascript
1 parent a4933bc commit 3cef447

4 files changed

Lines changed: 428 additions & 0 deletions

File tree

‎Login Register Demo/bg.jpg‎

123 KB
Loading

‎Login Register Demo/index.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Website with Login Registration Form</title>
7+
<link rel="stylesheet" href="style.css"/>
8+
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
9+
</head>
10+
<body>
11+
<header class="header">
12+
<nav class="navbar">
13+
<a href="#">Home</a>
14+
<a href="#">About</a>
15+
<a href="#">Service</a>
16+
<a href="#">Contact</a>
17+
</nav>
18+
<form action="#" class="search-bar">
19+
<input type="text" placeholder="Search..
20+
" >
21+
<button type="submit"><i class='bx bx-search' ></i></button>
22+
</form>
23+
</header>
24+
25+
26+
<div class="background"></div>
27+
<div class="container">
28+
<div class="content">
29+
<h2 class="logo"><i class='bx bxs-hot'></i>Designed by Nilaj</h2>
30+
<div class="text-sci">
31+
<h2>Welcome!<br><span>To our New Website</span></h2>
32+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
33+
Possimus provident magnam enim, nisi maiores qu
34+
od dolores dolorem ullam sunt cumque vitae
35+
harum aliquid dolore, tempore inventore illo. Nobis, illum ratione.
36+
</p>
37+
<div class="social-icons">
38+
<a href="#"><i class='bx bxl-linkedin'></i></a>
39+
<a href="#"><i class='bx bxl-facebook' ></i></a>
40+
<a href="#"><i class='bx bxl-instagram' ></i></a>
41+
<a href="#"><i class='bx bxl-twitter' ></i></a>
42+
</div>
43+
44+
</div>
45+
</div>
46+
47+
<div class="logreg-box">
48+
<div class="form-box login">
49+
<form action="#">
50+
<h2> Sign In</h2>
51+
52+
<div class="input-box">
53+
<span class="icon"><i class='bx bxs-envelope' ></i>
54+
</span>
55+
<input type="email" required>
56+
<label>Email</label>
57+
</div>
58+
59+
<div class="input-box">
60+
<span class="icon"><i class='bx bxs-lock-alt' ></i>
61+
</span>
62+
<input type="password" required>
63+
<label>Password</label>
64+
</div>
65+
<div class="remember-forgot">
66+
<label><input type="checkbox">Remember me</label>
67+
<a href="#">Forgot password?</a>
68+
</div>
69+
70+
<button type="submit" class="btn">Sign In</button>
71+
<div class="login-register">
72+
<p>Don't have an account?<a href="#" class="register-link">Sign up</a></p>
73+
</div>
74+
</form>
75+
</div>
76+
77+
<div class="form-box register">
78+
<form action="#">
79+
<h2> Sign Up</h2>
80+
81+
<div class="input-box">
82+
<span class="icon"><i class='bx bxs-user' ></i>
83+
</span>
84+
<input type="text" required>
85+
<label>Name</label>
86+
</div>
87+
88+
<div class="input-box">
89+
<span class="icon"><i class='bx bxs-envelope' ></i>
90+
</span>
91+
<input type="email" required>
92+
<label>Email</label>
93+
</div>
94+
95+
<div class="input-box">
96+
<span class="icon"><i class='bx bxs-lock-alt' ></i>
97+
</span>
98+
<input type="password" required>
99+
<label>Password</label>
100+
</div>
101+
<div class="remember-forgot">
102+
<label><input type="checkbox">I agree to the terms & conditions</label>
103+
104+
</div>
105+
106+
<button type="submit" class="btn">Sign Up</button>
107+
<div class="login-register">
108+
<p>Already have an account?<a href="#" class="login-link">Sign in</a></p>
109+
</div>
110+
</form>
111+
</div>
112+
113+
114+
115+
</div>
116+
</div>
117+
<script src="scripts.js"></script>
118+
</body>
119+
</html>

‎Login Register Demo/scripts.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const logregBox=document.querySelector('.logreg-box');
2+
const loginLink=document.querySelector('.login-link');
3+
const registerLink=document.querySelector('.register-link');
4+
5+
registerLink.addEventListener('click',()=>{
6+
logregBox.classList.add('active');
7+
});
8+
9+
loginLink.addEventListener('click',()=>{
10+
logregBox.classList.remove('active');
11+
});

0 commit comments

Comments
 (0)