Merge pull request #18 from KavyaBS123/master

Enhancement of how it works section

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

index.html

@@ -54,8 +54,52 @@ <h1><br>Want to <span>Share</span> or <span>Rent</span> <br>a cab.</h1>
                 </form>
             </div>
         </section>
+        <section class="how-it-works">
+            <div class="container">
+                <h2 class="section-title">HOW IT WORKS</h2>
+                <p class="section-description">Share/Rent a Car in 3 Easy Steps</p>
+                <div class="steps">
+                    <div class="step">
+                        <div class="step-content">
+                            <div class="step-icon">
+                                <img src="logo2.png" alt="Icon 1">
+                            </div>
+                            <div class="step-details">
+                                <h3 class="step-title">Step 1</h3>
+                                <p class="step-description">Depart. Time</p>
+                                <p>Choose a convenient departure time for your journey. We offer flexible timings to accommodate your schedule.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="step">
+                        <div class="step-content">
+                            <div class="step-icon">
+                                <img src="logo1 (1).png" alt="Icon 2">
+                            </div>
+                            <div class="step-details">
+                                <h3 class="step-title">Step 2</h3>
+                                <p class="step-description">Choose a location</p>
+                                <p>Select your starting point and destination. We provide a wide range of locations to choose from for your convenience.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="step">
+                        <div class="step-content">
+                            <div class="step-icon">
+                                <img src="logo3.png" alt="Icon 3">
+                            </div>
+                            <div class="step-details">
+                                <h3 class="step-title">Step 3</h3>
+                                <p class="step-description">Travelling Date</p>
+                                <p>Pick your preferred travel date to complete the booking process. Ensure the date fits your plan for a smooth journey.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
         <!-- Ride-->
-        <section class="ride" id="ride">
+        <!-- <section class="ride" id="ride">
             <div class="heading">
                 <span>How It Works</span>
                 <h1>Share/Rent <i class='bx bx-taxi'></i> in 3 Easy Steps</h1>
@@ -75,7 +119,7 @@ <h2>Travelling Date</h2>
                 <h2>Depart. Time</h2>
                 <p>Lorem ipsu Possimus, doloremque. Aspernatur alias neque</p>
             </div>
-        </section>
+        </section> -->
         <!-- Services -->
         <section class="services" id="services">
             <div class="heading">

style.css

@@ -126,6 +126,142 @@ header{
     align-items: center;
     grid-template-columns: repeat(2,lfr);
 }
+ .how-it-works {
+    padding: 60px 0;
+    background-color: #fff;
+    text-align: center;
+}
+
+.container {
+    width: 80%;
+    margin: 0 auto;
+}
+
+.section-title {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.section-description {
+    font-size: 1.5em;
+    margin-bottom: 40px;
+    color: #555;
+}
+
+.steps {
+    position: relative;
+    margin: 0 auto;
+    width: 60%;
+}
+
+.step {
+    background-color: #f1f1f1;
+    padding: 20px;
+    border-radius: 10px;
+    margin-bottom: 40px;
+    transition: transform 0.3s, box-shadow 0.3s;
+    text-align: left;
+    position: relative;
+    width: 100%;
+}
+
+.step:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.step-content {
+    display: flex;
+    align-items: center;
+}
+
+.step-icon {
+    margin-right: 20px;
+    flex-shrink: 0;
+}
+
+.step-icon img {
+    width: 60px;
+    height: 60px;
+}
+
+.step-details {
+    flex-grow: 1;
+}
+
+.step-title {
+    font-size: 1.25em;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+.step-description {
+    font-size: 1em;
+    color: #666;
+    line-height: 1.5em;
+}
+
+.steps::before, .steps::after {
+    content: '';
+    position: absolute;
+    width: 2px;
+    height: 100%;
+    background-color: #ccc;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    z-index: -1;
+}
+
+.step::after {
+    content: '';
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: #fff;
+    border: 2px solid #ccc;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.step:nth-child(odd)::after {
+    left: 100%;
+    transform: translate(-50%, -50%);
+    border-left: 2px solid #ccc;
+}
+
+.step:nth-child(even)::after {
+    left: 0;
+    transform: translate(-50%, -50%);
+    border-right: 2px solid #ccc;
+}
+
+.step:nth-child(odd)::before, .step:nth-child(even)::before {
+    content: '';
+    position: absolute;
+    width: 50%;
+    height: 2px;
+    background-color: #ccc;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: -1;
+}
+
+.step:nth-child(odd)::before {
+    left: 50%;
+}
+
+.step:nth-child(even)::before {
+    left: 0;
+    transform: translateX(50%);
+} 
+
+
+
+
 .carweb img{
     left: 1400px;
     width: 100%;