Skip to content

Commit 83485fc

Browse files
ParulPrasharParulPrashar
committed
Added a new Log in Page and within this page created a link to new sign in page. Designed a new Sign in page fully.
1 parent 6be9c8b commit 83485fc

8 files changed

+219
-0
lines changed

‎assets/FacebookLogo.png

53.5 KB
Loading

‎assets/InstagramLogo.jpg

46.4 KB
Loading

‎assets/LinkedinLogo.png

40.1 KB
Loading

‎green-background.jpg

67.1 KB
Loading

‎index.html

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ <h1>Waste Management</h1>
2424
<li><a href="#features">Features</a></li>
2525
<li><a href="#feedback">Feedback</a></li>
2626
<li><a href="#footer">Contact</a></li>
27+
<li><a href="login.html">Log In</a></li>
2728
<li class="theme-switch" id="theme-switch"></li>
2829
</ul>
2930
</nav>

‎login.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!-- Log in page -->
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Waste Management</title>
8+
<link rel="icon" href="./assets/logo.png">
9+
<link rel="stylesheet" href="styles.css">
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap" rel="stylesheet">
11+
</head>
12+
<div id="progress-bar"></div>
13+
14+
<header>
15+
<h1>Waste Management</h1>
16+
<nav>
17+
<ul>
18+
<li><a href="#upload">Upload</a></li>
19+
<li><a href="#features">Features</a></li>
20+
<li><a href="#feedback">Feedback</a></li>
21+
<li><a href="#footer">Contact</a></li>
22+
<li><a href="login.html">Log In</a></li>
23+
<li class="theme-switch" id="theme-switch"></li>
24+
</ul>
25+
</nav>
26+
</header>
27+
<body>
28+
<div class="main-area">
29+
30+
<div class="main-contents">
31+
32+
<div class="section-1">
33+
<h1 class="login-heading">Login to Your Account</h1>
34+
35+
<div class="socials">
36+
<div class="text">
37+
<h3>Login using social networks</h3>
38+
</div>
39+
<div class="logo-group">
40+
<img class="logo" src="assets\FacebookLogo.png" alt="Facebook">
41+
<img class="logo" src="assets\InstagramLogo.jpg" alt="Instagram">
42+
<img class="logo" src="assets\LinkedinLogo.png" alt="Linkedin">
43+
</div>
44+
</div>
45+
<div class="details">
46+
47+
<div class="form-contents">
48+
<p style="text-align: center; font-weight: 50;">OR</p>
49+
<input type="text" placeholder="User Name" class="indv-detail username ">
50+
<input type="email" placeholder="Email" class=" indv-detail email ">
51+
<input type="password" placeholder="Password" class="indv-detail password" required>
52+
</div>
53+
<button>SIGN IN</button>
54+
</div>
55+
</div>
56+
<div class="section-2">
57+
58+
<h1 style="text-align: center; padding-top: 100px; padding-left: 70px;">New Here?</h1>
59+
<div class="text2" style="padding-left: 70px;">
60+
<p>Sign Up and discover a great amount of new opportunities!</p>
61+
</div>
62+
<a href="signUp.html" style="text-decoration: none;"><button style="margin-left: 150px;">SIGN UP</button></a>
63+
</div>
64+
65+
</div>
66+
</div>
67+
</body>
68+
</html>

‎signUp.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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>Sign Up</title>
7+
<link rel="icon" href="./assets/logo.png">
8+
<link rel="stylesheet" href="styles.css">
9+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap" rel="stylesheet">
10+
</head>
11+
<div id="progress-bar"></div>
12+
13+
<header>
14+
<h1>Waste Management</h1>
15+
<nav>
16+
<ul>
17+
<li><a href="#upload">Upload</a></li>
18+
<li><a href="#features">Features</a></li>
19+
<li><a href="#feedback">Feedback</a></li>
20+
<li><a href="#footer">Contact</a></li>
21+
<li><a href="login.html">Log In</a></li>
22+
<li class="theme-switch" id="theme-switch"></li>
23+
</ul>
24+
</nav>
25+
</header>
26+
<body>
27+
<div class="signUp-mainSec">
28+
29+
<div class="signUp-container">
30+
<h1 style="text-align: center; font-size: 40px; font-weight: 500px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">Sign Up</h1>
31+
32+
<div class="signUp-formContents">
33+
<input type="text" placeholder="Name" class="indv-signUp" required>
34+
<select name="job" id="job" placeholder="Select Occupation" class="indv-signUp" style="width: 44%;border: 1.8px solid black;">
35+
<option value="Student" aria-placeholder="select">Select Occupation</option>
36+
<option value="Student">Student</option>
37+
<option value="Working Professional">Working Professional</option>
38+
<option value="Environmentalist">Environmentalist</option>
39+
<option value="Curious Explorer">Curious Explorer</option>
40+
</select>
41+
<select name="intrest" id="intrest" class="indv-signUp" style="width: 44%; border: 1.8px solid black;">
42+
<option value="Intrest">Intrest</option>
43+
<option value="Waste Disposal">Waste Disposal</option>
44+
<option value="Material Classification">Material Classification</option>
45+
<option value="Recycling">Recycling</option>
46+
<option value="Advanced AI Waste Detection">Advanced AI Waste Detection</option>
47+
48+
</select>
49+
<input type="text" placeholder="User Name" class="indv-signUp" required>
50+
<input type="email" placeholder="Email" class="indv-signUp" required>
51+
<input type="tel" placeholder="Telephone No." class="indv-signUp" required>
52+
<input type="password" placeholder="Password" class="indv-signUp" required>
53+
<input type="password" placeholder="Confirm Password" class="indv-signUp" required>
54+
</div>
55+
<button id="signup-submitButton" style="width:fit-100%;"> Sign Up</button>
56+
</div>
57+
</div>
58+
</body>
59+
</html>

‎styles.css

+91
Original file line numberDiff line numberDiff line change
@@ -992,3 +992,94 @@ footer.dark-mode {
992992
background-color: #004d40; /* Darker teal on hover */
993993
transform: scale(1.05); /* Slight zoom effect on hover */
994994
}
995+
996+
/*Styling for log in page*/
997+
.main-area{
998+
margin:90px;
999+
padding: 20px;
1000+
}
1001+
.main-contents{
1002+
margin:50px;
1003+
display: flex;
1004+
justify-content: space-between;
1005+
}
1006+
.section1{
1007+
width:90%;
1008+
margin-left: 30px;
1009+
align-items: center;
1010+
justify-content: center;
1011+
}
1012+
.login-heading{
1013+
margin:20px;
1014+
}
1015+
.text{
1016+
font-size: 15px;
1017+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
1018+
padding-left: 100px;
1019+
}
1020+
.logo-group{
1021+
display: flex;
1022+
text-align: center;
1023+
padding-left: 40px;
1024+
justify-content: center;
1025+
}
1026+
.logo{
1027+
width:40px;
1028+
padding-right: 20px;
1029+
1030+
}
1031+
.form-contents{
1032+
display: grid;
1033+
}
1034+
.indv-detail{
1035+
padding: 20px;
1036+
margin-bottom: 15px;
1037+
border-radius: 6px;
1038+
width:100%;
1039+
}
1040+
button{
1041+
padding: 20px;
1042+
padding-left: 23%;
1043+
align-items: center;
1044+
display:flex;
1045+
margin: 10px;
1046+
margin-left: 22%;
1047+
background-color: #03b6a1a2;
1048+
border-radius: 10px;
1049+
width: 60%;
1050+
text-align: center;
1051+
}
1052+
/* Hover effect for submit button */
1053+
button:hover {
1054+
background-color: #0056b3;
1055+
}
1056+
.section2{
1057+
width:10%;
1058+
margin: 100px;
1059+
background: url('green-background.jpg') no-repeat center center;
1060+
}
1061+
/*sign up form*/
1062+
.signUp-mainSec{
1063+
margin-top: 60px;
1064+
padding-top: 100px;
1065+
margin: 30px;
1066+
}
1067+
.signUp-formContents{
1068+
display: grid;
1069+
align-items: center;
1070+
justify-items: center;
1071+
padding: 20px;
1072+
border-radius: 4px;
1073+
margin: 20px;
1074+
}
1075+
.indv-signUp{
1076+
width: 40%;
1077+
padding: 20px;
1078+
border-radius: 4px;
1079+
margin: 20px;
1080+
}
1081+
#signup-submitButton{
1082+
align-items: center;
1083+
padding-left: 0%;
1084+
justify-content: space-around;
1085+
}

0 commit comments

Comments
 (0)