Skip to content

Commit 47487b6

Browse files
Krest-CoderKrest-Coder
authored
Merge pull request #12 from alisha-pradhan/main
Created a login-registration page
2 parents e235b98 + e649374 commit 47487b6

File tree

6 files changed

+459
-0
lines changed

6 files changed

+459
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎background_image.jpeg

98.7 KB
Loading

‎login.html

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
9+
<title>Login and Registration Page</title>
10+
11+
<link rel="stylesheet" href="login_style.css">
12+
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
13+
</head>
14+
15+
<body>
16+
17+
<!--Created a login and registration page, 2 in 1-->
18+
19+
<header class="header">
20+
<nav class="navbar">
21+
<a href="#">Home</a>
22+
<a href="#">News</a>
23+
<a href="#">About</a>
24+
<a href="#">Contact</a>
25+
</nav>
26+
27+
<form action="" class="search-bar">
28+
<input type="text" placeholder="Search">
29+
<button type="submit"><i class='bx bx-search'></i></button>
30+
</form>
31+
</header>
32+
33+
<div class="background"></div>
34+
35+
<div class="container">
36+
<div class="content">
37+
38+
<h2 class="logo"><i class='bx bxs-graduation' ></i> &nbsp;Institution Name</h2>
39+
<div class="text-sci">
40+
<!-- <h2>Welcome<br>
41+
<span>To the college website.</span></h2>
42+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, doloremque.</p> -->
43+
44+
<div class="social-icons">
45+
<a href="#"><i class='bx bxl-linkedin' ></i></a>
46+
<a href="#"><i class='bx bxl-github' ></i></a>
47+
<a href="#"><i class='bx bxl-youtube' ></i></a>
48+
<a href="#"><i class='bx bxl-instagram' ></i></a>
49+
<a href="#"><i class='bx bxl-twitter' ></i></a>
50+
<a href="#"><i class='bx bxl-meta' ></i></a>
51+
</div>
52+
</div>
53+
</div>
54+
55+
<div class="logreg-box">
56+
<div class="form-box login">
57+
<form action="#">
58+
<h2>Sign In</h2>
59+
60+
<div class="input-box">
61+
<span class="icon"><i class='bx bxs-user' ></i></span>
62+
<input type="text" name="regno" required>
63+
<label>Registration No.</label>
64+
</div>
65+
66+
<div class="input-box">
67+
<span class="icon"><i class='bx bxs-lock-alt' ></i></span>
68+
<input type="password" name="pswd" required>
69+
<label>Password</label>
70+
</div>
71+
72+
<div class="remember-forgot">
73+
<label><input type="checkbox">Remember me</label>
74+
<a href="#">Forgot password?</a>
75+
</div>
76+
77+
<button class="btn" type="submit">Sign In</button>
78+
79+
<div class="login-register">
80+
<p>Don't have an account? <a href="#" class="register-link">Sign Up</a></p>
81+
</div>
82+
83+
</form>
84+
</div>
85+
86+
<div class="form-box register">
87+
<form action="#">
88+
<h2>Sign Up</h2>
89+
90+
<div class="input-box">
91+
<span class="icon"><i class='bx bxs-user' ></i></span>
92+
<input type="text" required>
93+
<label>Registration No.</label>
94+
</div>
95+
96+
<div class="input-box">
97+
<span class="icon"><i class='bx bxs-envelope' ></i></span>
98+
<input type="email" required>
99+
<label>Registered Email</label>
100+
</div>
101+
102+
<div class="input-box">
103+
<span class="icon"><i class='bx bxs-phone'></i></span>
104+
<input type="tel" minlength="10" maxlength="10" name="phno" required>
105+
<label> Registered Phone Number</label>
106+
</div>
107+
108+
<div class="input-box">
109+
<span class="icon"><i class='bx bxs-lock-alt' ></i></span>
110+
<input type="password" name="pswd" required>
111+
<label>Password</label>
112+
</div>
113+
114+
<div class="remember-forgot">
115+
<label><input type="checkbox">I agree to the terms and conditions</label>
116+
</div>
117+
118+
<button class="btn" type="submit">Sign Up</button>
119+
120+
<div class="login-register">
121+
<p>Already have an account? <a href="#" class="login-link">Login</a></p>
122+
</div>
123+
124+
</form>
125+
</div>
126+
127+
</div>
128+
</div>
129+
130+
<script src="login_script.js"></script>
131+
132+
</body>
133+
134+
</html>

‎login_script.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)