Skip to content

Commit efd9661

Browse files
Krishna100604Krishna100604
committed
updated ride page
1 parent acee50e commit efd9661

File tree

2 files changed

+134
-48
lines changed

2 files changed

+134
-48
lines changed

‎.vscode/settings.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"git.ignoreLimitWarning": true
2+
"git.ignoreLimitWarning": true,
3+
"liveServer.settings.port": 5501
34
}

‎ride.html

+132-47
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
6-
<meta name="viewprot" content="width=device-width, initial-scale=1.0" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Cabshare</title>
88
<!-- Link to CSS -->
9-
<link rel="stylesheet" href="style.css" />
109
<link
1110
rel="stylesheet"
1211
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
@@ -18,73 +17,154 @@
1817
crossorigin="anonymous"
1918
/>
2019
<style>
21-
/* For screens smaller than 576px (extra small devices) */
20+
body {
21+
font-family: Arial, sans-serif;
22+
background-color: #f8f9fa;
23+
}
24+
25+
header {
26+
display: flex;
27+
align-items: center;
28+
justify-content: space-between;
29+
padding: 5px 3px;
30+
background-color: #00162d;
31+
color: #fff;
32+
height: 50px;
33+
}
34+
35+
.logo img {
36+
max-width: 150px;
37+
height: 40px;
38+
}
39+
40+
.navbar {
41+
display: flex;
42+
list-style: none;
43+
padding: 0;
44+
margin: 0;
45+
}
46+
47+
.navbar li {
48+
margin-left: 20px;
49+
}
50+
51+
.navbar a {
52+
text-decoration: none;
53+
color: #fff;
54+
font-weight: 500;
55+
padding: 10px 15px;
56+
border-radius: 5px;
57+
transition: background-color 0.3s ease, color 0.3s ease;
58+
}
59+
60+
.navbar a:hover {
61+
background-color: #007bff;
62+
color: #fff;
63+
}
64+
65+
.header-btn a {
66+
background-color: #007bff;
67+
color: #fff;
68+
padding: 10px 20px;
69+
border-radius: 5px;
70+
text-decoration: none;
71+
transition: background-color 0.3s ease;
72+
}
73+
74+
.header-btn a:hover {
75+
background-color: #0056b3;
76+
}
77+
78+
.form {
79+
max-width: 600px;
80+
margin: 100px auto;
81+
padding: 20px;
82+
background-color: #fff;
83+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
84+
border-radius: 10px;
85+
}
86+
87+
h1 {
88+
text-align: center;
89+
margin-bottom: 20px;
90+
font-size: 2rem;
91+
font-weight: 600;
92+
}
93+
94+
label {
95+
font-weight: bold;
96+
}
97+
98+
input[type="submit"] {
99+
background-color: #007bff;
100+
color: #fff;
101+
border: none;
102+
padding: 10px 20px;
103+
border-radius: 5px;
104+
cursor: pointer;
105+
width: 100%;
106+
transition: background-color 0.3s ease;
107+
}
108+
109+
input[type="submit"]:hover {
110+
background-color: #0056b3;
111+
}
112+
22113
@media (max-width: 575.98px) {
23114
.form {
24115
width: 90%;
25-
margin: 0 auto;
26116
}
117+
27118
h1 {
28119
font-size: 1.5rem;
29-
margin-left: 30%;
30120
}
31121
}
32122

33-
/* For screens between 576px and 767.98px (small devices) */
34123
@media (min-width: 576px) and (max-width: 767.98px) {
35124
.form {
36125
width: 70%;
37-
margin: 0 auto;
38126
}
127+
39128
h1 {
40129
font-size: 1.8rem;
41-
margin-left: 25%;
42130
}
43131
}
44132

45-
/* For screens between 768px and 991.98px (medium devices) */
46133
@media (min-width: 768px) and (max-width: 991.98px) {
47134
.form {
48135
width: 60%;
49-
margin: 0 auto;
50136
}
137+
51138
h1 {
52139
font-size: 2rem;
53-
margin-left: 20%;
54140
}
55141
}
56142

57-
/* For screens between 992px and 1199.98px (large devices) */
58143
@media (min-width: 992px) and (max-width: 1199.98px) {
59144
.form {
60145
width: 50%;
61-
margin: 0 auto;
62146
}
147+
63148
h1 {
64149
font-size: 2.2rem;
65-
margin-left: 15%;
66150
}
67151
}
68152

69-
/* For screens 1200px and larger (extra large devices) */
70153
@media (min-width: 1200px) {
71154
.form {
72155
width: 40%;
73-
margin: 0 auto;
74156
}
157+
75158
h1 {
76159
font-size: 2.5rem;
77-
margin-left: 10%;
78160
}
79161
}
80162
</style>
81163
</head>
82-
<body class="col-md-12">
83-
<script src="main.js"></script>
164+
<body>
84165
<!-- Header -->
85-
<header style="display: flex !important">
86-
<a href="#" class="logo"><img src="img/logo.png" alt="" /></a>
87-
<div class="bx bx-menu" id="menu-icon"></div>
166+
<header>
167+
<a href="#" class="logo"><img src="img/logo.png" alt="Cabshare Logo" /></a>
88168
<ul class="navbar">
89169
<li><a href="index.html">Home</a></li>
90170
<li><a href="ride.html">Ride</a></li>
@@ -97,39 +177,44 @@
97177
<a href="#" class="sign-up">Admin</a>
98178
</div>
99179
</header>
180+
181+
<!-- Form Section -->
100182
<div class="form">
101-
<h1
102-
style="
103-
display: block;
104-
margin-top: 100px;
105-
margin-left: 4%;
106-
margin-right: 4%;
107-
font-size: 2rem;
108-
font-weight: 600;
109-
"
110-
>
111-
Rider's_Details
112-
</h1>
183+
<h1>Rider's Details</h1>
113184
<form
114185
name="myForm"
115186
action="submit.php"
116187
method="post"
117188
onsubmit="return validateForm()"
118189
>
119-
<label for="name">Name:</label>
120-
<input type="text" id="name" name="name" /><br /><br />
121-
<label for="email">Email:</label>
122-
<input type="email" id="email" name="email" /><br /><br />
123-
<label for="tel">Contact:</label>
124-
<input type="tel" id="tel" name="tel" /><br /><br />
125-
<label for="location">Location:</label>
126-
<input type="location" id="location" name="location" /><br /><br />
127-
<label for="time">Time:</label>
128-
<input type="time" name="time" id="time" /><br /><br />
129-
<label for="date">Date:</label>
130-
<input type="date" name="date" id="date" /><br /><br />
190+
<div class="mb-3">
191+
<label for="name" class="form-label">Name:</label>
192+
<input type="text" class="form-control" id="name" name="name" required />
193+
</div>
194+
<div class="mb-3">
195+
<label for="email" class="form-label">Email:</label>
196+
<input type="email" class="form-control" id="email" name="email" required />
197+
</div>
198+
<div class="mb-3">
199+
<label for="tel" class="form-label">Contact:</label>
200+
<input type="tel" class="form-control" id="tel" name="tel" required />
201+
</div>
202+
<div class="mb-3">
203+
<label for="location" class="form-label">Location:</label>
204+
<input type="text" class="form-control" id="location" name="location" required />
205+
</div>
206+
<div class="mb-3">
207+
<label for="time" class="form-label">Time:</label>
208+
<input type="time" class="form-control" id="time" name="time" required />
209+
</div>
210+
<div class="mb-3">
211+
<label for="date" class="form-label">Date:</label>
212+
<input type="date" class="form-control" id="date" name="date" required />
213+
</div>
131214
<input type="submit" value="Submit" name="submit" />
132215
</form>
133216
</div>
217+
218+
<script src="main.js"></script>
134219
</body>
135220
</html>

0 commit comments

Comments
 (0)