Skip to content

Commit 3784d06

Browse files
KavyaBS123KavyaBS123
committed
howitworks
1 parent f7a994d commit 3784d06

File tree

6 files changed

+185
-2
lines changed

6 files changed

+185
-2
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"git.ignoreLimitWarning": true
3+
}

‎index.html‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,52 @@ <h1><br>Want to <span>Share</span> or <span>Rent</span> <br>a cab.</h1>
5454
</form>
5555
</div>
5656
</section>
57+
<section class="how-it-works">
58+
<div class="container">
59+
<h2 class="section-title">HOW IT WORKS</h2>
60+
<p class="section-description">Share/Rent a Car in 3 Easy Steps</p>
61+
<div class="steps">
62+
<div class="step">
63+
<div class="step-content">
64+
<div class="step-icon">
65+
<img src="logo2.png" alt="Icon 1">
66+
</div>
67+
<div class="step-details">
68+
<h3 class="step-title">Step 1</h3>
69+
<p class="step-description">Depart. Time</p>
70+
<p>Choose a convenient departure time for your journey. We offer flexible timings to accommodate your schedule.</p>
71+
</div>
72+
</div>
73+
</div>
74+
<div class="step">
75+
<div class="step-content">
76+
<div class="step-icon">
77+
<img src="logo1 (1).png" alt="Icon 2">
78+
</div>
79+
<div class="step-details">
80+
<h3 class="step-title">Step 2</h3>
81+
<p class="step-description">Choose a location</p>
82+
<p>Select your starting point and destination. We provide a wide range of locations to choose from for your convenience.</p>
83+
</div>
84+
</div>
85+
</div>
86+
<div class="step">
87+
<div class="step-content">
88+
<div class="step-icon">
89+
<img src="logo3.png" alt="Icon 3">
90+
</div>
91+
<div class="step-details">
92+
<h3 class="step-title">Step 3</h3>
93+
<p class="step-description">Travelling Date</p>
94+
<p>Pick your preferred travel date to complete the booking process. Ensure the date fits your plan for a smooth journey.</p>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
</section>
57101
<!-- Ride-->
58-
<section class="ride" id="ride">
102+
<!-- <section class="ride" id="ride">
59103
<div class="heading">
60104
<span>How It Works</span>
61105
<h1>Share/Rent <i class='bx bx-taxi'></i> in 3 Easy Steps</h1>
@@ -75,7 +119,7 @@ <h2>Travelling Date</h2>
75119
<h2>Depart. Time</h2>
76120
<p>Lorem ipsu Possimus, doloremque. Aspernatur alias neque</p>
77121
</div>
78-
</section>
122+
</section> -->
79123
<!-- Services -->
80124
<section class="services" id="services">
81125
<div class="heading">

‎logo1 (1).png‎

1.79 KB
Loading

‎logo2.png‎

2.13 KB
Loading

‎logo3.png‎

2.19 KB
Loading

‎style.css‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,142 @@ header{
126126
align-items: center;
127127
grid-template-columns: repeat(2,lfr);
128128
}
129+
.how-it-works {
130+
padding: 60px 0;
131+
background-color: #fff;
132+
text-align: center;
133+
}
134+
135+
.container {
136+
width: 80%;
137+
margin: 0 auto;
138+
}
139+
140+
.section-title {
141+
font-size: 2.5em;
142+
margin-bottom: 20px;
143+
color: #333;
144+
}
145+
146+
.section-description {
147+
font-size: 1.5em;
148+
margin-bottom: 40px;
149+
color: #555;
150+
}
151+
152+
.steps {
153+
position: relative;
154+
margin: 0 auto;
155+
width: 60%;
156+
}
157+
158+
.step {
159+
background-color: #f1f1f1;
160+
padding: 20px;
161+
border-radius: 10px;
162+
margin-bottom: 40px;
163+
transition: transform 0.3s, box-shadow 0.3s;
164+
text-align: left;
165+
position: relative;
166+
width: 100%;
167+
}
168+
169+
.step:hover {
170+
transform: translateY(-10px);
171+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
172+
}
173+
174+
.step-content {
175+
display: flex;
176+
align-items: center;
177+
}
178+
179+
.step-icon {
180+
margin-right: 20px;
181+
flex-shrink: 0;
182+
}
183+
184+
.step-icon img {
185+
width: 60px;
186+
height: 60px;
187+
}
188+
189+
.step-details {
190+
flex-grow: 1;
191+
}
192+
193+
.step-title {
194+
font-size: 1.25em;
195+
margin-bottom: 10px;
196+
color: #333;
197+
}
198+
199+
.step-description {
200+
font-size: 1em;
201+
color: #666;
202+
line-height: 1.5em;
203+
}
204+
205+
.steps::before, .steps::after {
206+
content: '';
207+
position: absolute;
208+
width: 2px;
209+
height: 100%;
210+
background-color: #ccc;
211+
left: 50%;
212+
top: 0;
213+
transform: translateX(-50%);
214+
z-index: -1;
215+
}
216+
217+
.step::after {
218+
content: '';
219+
width: 20px;
220+
height: 20px;
221+
border-radius: 50%;
222+
background-color: #fff;
223+
border: 2px solid #ccc;
224+
position: absolute;
225+
left: 50%;
226+
top: 50%;
227+
transform: translate(-50%, -50%);
228+
}
229+
230+
.step:nth-child(odd)::after {
231+
left: 100%;
232+
transform: translate(-50%, -50%);
233+
border-left: 2px solid #ccc;
234+
}
235+
236+
.step:nth-child(even)::after {
237+
left: 0;
238+
transform: translate(-50%, -50%);
239+
border-right: 2px solid #ccc;
240+
}
241+
242+
.step:nth-child(odd)::before, .step:nth-child(even)::before {
243+
content: '';
244+
position: absolute;
245+
width: 50%;
246+
height: 2px;
247+
background-color: #ccc;
248+
top: 50%;
249+
transform: translateY(-50%);
250+
z-index: -1;
251+
}
252+
253+
.step:nth-child(odd)::before {
254+
left: 50%;
255+
}
256+
257+
.step:nth-child(even)::before {
258+
left: 0;
259+
transform: translateX(50%);
260+
}
261+
262+
263+
264+
129265
.carweb img{
130266
left: 1400px;
131267
width: 100%;

0 commit comments

Comments
 (0)