Merge pull request #892 from kesava23/main

placed search bar in the webpage
khushi-joshi-05 · Jun 4, 2024 · 7a69d58 · 7a69d58
2 parents 3c65272 + 94d2f30
commit 7a69d58
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -75,12 +75,16 @@
                     <li>
                         <a class="" href="Html-files/cart.html"><i class="fa-solid fa-cart-shopping"></i></a>
                     </li>
+                    <div class="search-bar">
+                        <input type="text" placeholder="Search your food item.." name="search">
+                        <button type="submit">Search</button>
+                    </div>
                 </ul>
             </div>
         </div>
+
     </nav>
 
-
     <section class="hero text-center" aria-label="home" id="home">
         <ul class="hero-slider" data-hero-slider>
             <li class="slider-item active" data-hero-slider-item>
@@ -662,5 +666,4 @@ <h4>Follow Us</h4>
     }
 </script>
 main
-
 </html>
diff --git a/style.css b/style.css
@@ -101,6 +101,32 @@ body {
     max-height: 0.1%;
   }
 }
+.search-bar {
+  position: relative;
+  display: flex; 
+}
+.search-bar input[type="text"] {
+  width: 100%; 
+  padding: 10px; 
+  border: 1px solid #ccc; 
+  border-radius: 5px;
+  margin-top: 10px; 
+}
+
+.search-bar button {
+  padding: 1px; 
+  background-color: #ddd; 
+  border: 1px solid #ccc; 
+  border-radius: 5px; 
+  cursor: pointer; 
+  margin-left: 5px;
+  margin-top: 10px;
+}
+
+.search-bar button:hover {
+  background-color: #ccc; /* Changes button color on hover */
+}
+
 
 .intro_container {
   display: flex;
@@ -1119,8 +1145,7 @@ ul {
   background: #de6262;
   background: -webkit-linear-gradient(to right, #de6262, #ffb88c);
   background: linear-gradient(to right, #de6262, #ffb88c);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+
 }
 
 @keyframes marquee {