Skip to content

Commit c7f175a

Browse files
07sumit100207sumit1002
authored
Merge pull request #62 from AkshatPandey-2004/main
Issue: #46 made Login And SIgnup Form
2 parents 8423540 + 9e42f51 commit c7f175a

14 files changed

+500
-2
lines changed

‎img/back_button.png

9 KB
Loading

‎img/login_1.jpg

865 KB
Loading

‎img/login_2.jpg

192 KB
Loading

‎img/login_3.jpg

738 KB
Loading

‎img/login_4.jpg

2.36 MB
Loading

‎img/login_5.jpg

1.59 MB
Loading

‎img/login_6.jpg

319 KB
Loading

‎img/login_7.jpg

391 KB
Loading

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
<li><a href="#contact us">Contact</a></li>
3434
</ul>
3535
<div class="header-btn">
36-
<a href="#" class="sign-up">Admin</a>
36+
<a href="login.html" class="sign-up">Login</a>
3737
</div>
3838
</header>
3939
<!-- Home -->

‎login.css

+197
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'Poppins', sans-serif;
6+
}
7+
8+
body {
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
13+
background: linear-gradient(135deg, #f0f0f0, #e5f0ff);
14+
}
15+
16+
.container {
17+
width: 100%;
18+
height: 100%;
19+
background: rgb(240, 240, 240);
20+
display: flex;
21+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
22+
border-radius: 15px;
23+
overflow: hidden;
24+
}
25+
26+
.left-section, .right-section {
27+
padding: 20px;
28+
}
29+
30+
.left-section {
31+
flex: 3;
32+
display: flex;
33+
flex-direction: column;
34+
justify-content: center;
35+
align-items: center;
36+
background: rgb(240, 240, 240); /* Light Green */
37+
text-align: center;
38+
}
39+
40+
.animated-heading {
41+
font-size: 50px;
42+
font-weight: 600;
43+
margin-bottom: 20px;
44+
color: #000000; /* Yellow */
45+
animation: fadeIn 2s ease-in-out;
46+
}
47+
48+
.description {
49+
font-size: 16px;
50+
color: #000000;
51+
margin-bottom: 20px;
52+
line-height: 1.5;
53+
}
54+
55+
.login-form {
56+
display: flex;
57+
flex-direction: column;
58+
gap: 20px;
59+
width: 100%;
60+
max-width: 300px;
61+
margin-bottom: 20px;
62+
}
63+
64+
.input-field {
65+
padding: 12px 20px;
66+
border: 2px solid #000000; /* Yellow */
67+
border-radius: 90px;
68+
font-size: 16px;
69+
outline: none;
70+
transition: border-color 0.3s;
71+
}
72+
73+
.input-field:focus {
74+
border-color: #000000; /* Darker Yellow */
75+
}
76+
77+
.submit-button {
78+
background-color: #000000; /* Yellow */
79+
border: none;
80+
color: white;
81+
padding: 12px 20px;
82+
font-size: 16px;
83+
cursor: pointer;
84+
border-radius: 90px;
85+
transition: background-color 0.3s, color 0.3s, transform 0.3s;
86+
width: 100%;
87+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
88+
}
89+
90+
.submit-button:hover {
91+
background-color: #ffffff; /* Darker Yellow */
92+
transform: scale(1.05);
93+
color: #000000;
94+
border:#000000;
95+
border-style: groove;
96+
}
97+
98+
99+
.right-section {
100+
flex: 7;
101+
display: flex;
102+
justify-content: center;
103+
align-items: center;
104+
background: #f0f0f0;
105+
position: relative;
106+
overflow: hidden;
107+
padding: 0;
108+
}
109+
110+
.transition-image {
111+
position: absolute;
112+
width: 100%;
113+
height: 100%;
114+
object-fit: cover;
115+
opacity: 0;
116+
transition: opacity 1s ease-in-out;
117+
}
118+
119+
.transition-image:first-child {
120+
opacity: 1;
121+
}
122+
123+
@keyframes fadeIn {
124+
0% { opacity: 0; transform: translateY(-20px); }
125+
100% { opacity: 1; transform: translateY(0); }
126+
}
127+
128+
.blinking-cursor {
129+
font-weight: 100;
130+
font-size: 50px;
131+
color: #000000; /* Yellow */
132+
animation: blink 1s step-end infinite;
133+
}
134+
135+
@keyframes blink {
136+
from, to {
137+
color: transparent;
138+
}
139+
50% {
140+
color: #070707; /* Yellow */
141+
}
142+
}
143+
144+
.back-button {
145+
position: absolute;
146+
top: 20px;
147+
left: 20px;
148+
background: rgb(240, 240, 240);
149+
border: none;
150+
color:rgb(240, 240, 240);
151+
padding: 0px;
152+
font-size: 16px;
153+
cursor: pointer;
154+
border-radius: 1%;
155+
transition: background-color 0.3s, color 0.3s, transform 0.3s;
156+
}
157+
158+
.back-button:hover {
159+
transform: scale(1.25);
160+
color: #000000; /* Yellow */
161+
}
162+
.already-signed-up {
163+
font-size: 14px;
164+
color: #000000;
165+
margin-top: 20px;
166+
display: flex;
167+
flex-direction: row;
168+
align-items: center;
169+
text-decoration: none;
170+
gap: 5px; /* Add some space between the text and the link */
171+
}
172+
a{
173+
font-size: 14px;
174+
color: #000000;
175+
text-decoration: none;
176+
display: inline-block;
177+
}
178+
179+
/* .already-signed-up span {
180+
margin-bottom: 10px;
181+
font-weight: 600;
182+
} */
183+
184+
/* .already-signed-up a {
185+
color: #FFA500; /* Yellow */
186+
/* text-decoration: none;
187+
font-weight: 600;
188+
background-color: #E0FFD8;
189+
padding: 10px 20px;
190+
border-radius: 20px;
191+
transition: color 0.3s, background-color 0.3s;
192+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
193+
} */
194+
195+
/* .already-signed-up a:hover {
196+
color: white;
197+
background-color: #FFA500; /* Darker Yellow */

‎login.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Login</title>
8+
<link rel="stylesheet" href="login.css"/>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="left-section">
13+
<button class="back-button" onclick="window.location.href='index.html'"><img src="img/back_button.png" width="50px" height="50px"/></button>
14+
<h1 class="animated-heading">Cab Rental<span class="blinking-cursor">|</span></h1>
15+
<p class="description">
16+
Welcome to Cab Rental, your go-to platform for sharing or renting a cab effortlessly. Whether you're planning a quick trip across town or a long-distance journey, we provide a convenient and cost-effective solution to meet your travel needs.
17+
</p>
18+
<form id="loginForm" class="login-form">
19+
<input type="text" id="username" placeholder="Username" class="input-field">
20+
<input type="password" id="password" placeholder="Password" class="input-field">
21+
<button type="submit" class="submit-button">Login</button>
22+
</form>
23+
<p class="already-signed-up">
24+
Not signed up? <a href="Signup.html">Sign In</a>
25+
</p>
26+
</div>
27+
<div class="right-section">
28+
<img src="./img/login_1.jpg" alt="car_pics" class="transition-image">
29+
<img src="./img/login_2.jpg" alt="car_pics" class="transition-image">
30+
<img src="./img/login_3.jpg" alt="car_pics" class="transition-image">
31+
<img src="./img/login_4.jpg" alt="car_pics" class="transition-image">
32+
<img src="./img/login_5.jpg" alt="car_pics" class="transition-image">
33+
<img src="./img/login_6.jpg" alt="car_pics" class="transition-image">
34+
<img src="./img/login_7.jpg" alt="car_pics" class="transition-image">
35+
</div>
36+
</div>
37+
38+
<script>
39+
const images = document.querySelectorAll('.transition-image');
40+
let currentImageIndex = 0;
41+
42+
function showNextImage() {
43+
images[currentImageIndex].style.opacity = 0;
44+
currentImageIndex = (currentImageIndex + 1) % images.length;
45+
images[currentImageIndex].style.opacity = 1;
46+
}
47+
48+
setInterval(showNextImage, 3000);
49+
</script>
50+
</body>
51+
</html>

‎ride.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@
174174
<li><a href="contact.html">Contact</a></li>
175175
</ul>
176176
<div class="header-btn">
177-
<a href="#" class="sign-up">Admin</a>
177+
<a href="login.html" class="sign-up">Login</a>
178178
</div>
179179
</header>
180180

0 commit comments

Comments
 (0)