Service section improved

siddharthbaleja7 · Jul 17, 2024 · e38004f · e38004f
1 parent d1408dd
commit e38004f
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 9 deletions.
diff --git a/icons/dining-table.png b/icons/dining-table.png
diff --git a/icons/motorbike.png b/icons/motorbike.png
diff --git a/icons/take-away.png b/icons/take-away.png
diff --git a/index.html b/index.html
@@ -382,6 +382,21 @@ <h1 class="poppins-light pe-5 ps-1 py-1">Get <span> 30% OFF </span> on your firs
 .btn-card:hover {
 	background: #59a10c;
 }
+
+.typing-effect {
+            display: inline-block;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+.highlight-text{
+    color:#D0EEB0;
+}
+
+.service-icon{
+    height:15% !important;
+    width: 15% !important;
+    opacity: 1 !important;
+}
  </style>
 
         <div class="qualities row justify-content-evenly g-3 px-2" data-aos="zoom-out" data-aos-duration="1000" data-aos-offset="170"
@@ -478,26 +493,49 @@ <h2 class="card-title">Innovative Fusion Dishes</h2>
             </div>
             <div class="card-img-overlay row w-100 m-0">
                 <div class="box_main m-auto col-md-9 col-xl-3" data-aos="zoom-out-right" data-aos-duration="1000"
-                    data-aos-offset="170" data-aos-easing="ease-in-out">
-                    <h1>Bringing <br>happiness<br> to you</h1>
-                    <p>Food is more than sustenance; it's a source of pure happiness. From the first bite of a favorite
-                        childhood dish to the thrill of discovering new flavors, food has a unique way of filling
-                        our hearts with joy.</p>
-                </div>
+                data-aos-offset="170" data-aos-easing="ease-in-out">
+                <h1>
+                    <span id="typing-text" class="typing-effect"></span>
+                </h1>
+                <p class="highlight-text">Food is more than sustenance; it's a source of pure happiness. From the first bite of a favorite
+                    childhood dish to the thrill of discovering new flavors, food has a unique way of filling
+                    our hearts with joy.</p>
+            </div>
+        <!-- typing effect  -->
+            <script>
+                document.addEventListener('DOMContentLoaded', function() {
+                    const text = "Bringing \nhappiness\n to you";
+                    const typingText = document.getElementById('typing-text');
+                    let index = 0;
+
+                    function type() {
+                        if (index < text.length) {
+                            typingText.innerHTML += text[index] === '\n' ? '<br>' : text[index];
+                            index++;
+                            setTimeout(type, 100); // Adjust typing speed here
+                        }
+                    }
+
+                    type();
+                });
+            </script>
                 <div class="box my-auto col-md-4 col-xl-3" data-aos="zoom-out-left" data-aos-duration="1000"
                     data-aos-offset="170" data-aos-easing="ease-in-out">
+                    <img src="./icons/motorbike.png" alt="" class="service-icon">
                     <h1>Online <br>Delivery</h1>
-                    <a href="/Html-files/add-address.html" class="btn btn-outline-light">Order Online</a>
+                    <a href="/Html-files/add-address.html" class="btn btn-outline-light border border-light">Order Online</a>
                 </div>
                 <div class="box my-auto col-md-4 col-xl-3" data-aos="zoom-out-left" data-aos-duration="1000"
                     data-aos-offset="170" data-aos-easing="ease-in-out">
+                    <img src="./icons/take-away.png" alt="" class="service-icon">
                     <h1>Click & <br>Collect</h1>
-                    <a href="/Html-files/cart.html" class="btn btn-outline-light">Take out Order</a>
+                    <a href="/Html-files/cart.html" class="btn btn-outline-light border border-light">Take out Order</a>
                 </div>
                 <div class="box my-auto col-md-4 col-xl-3" data-aos="zoom-out-left" data-aos-duration="1000"
                     data-aos-offset="170" data-aos-easing="ease-in-out">
+                    <img src="/icons/dining-table.png" alt="" class="service-icon">
                     <h1>Restaurant<br> Dining</h1>
-                    <a href="/Html-files/book-table.html" class="btn btn-outline-light">Book Table </a>
+                    <a href="/Html-files/book-table.html" class="btn btn-outline-light border border-light">Book Table </a>
                 </div>
             </div>
         </div>