Update header.html

The implemented changes enhance the header's design and functionality for a better user experience. Additional CSS styling improves the visual appeal, ensuring a cohesive and modern look. The header is now fully responsive, maintaining its functionality across different screen sizes using Bootstrap's utilities. The search bar has been redesigned with rounded corners and a prominent search icon, making it more user-friendly. The login button is updated to stand out with clear text and easy clickability. The navigation bar now features dropdown indicators for expandable sections, improving readability and usability. The brand logo is consistently sized for better visibility. Utility links, such as "Become a Seller," "More," and the cart section, are enhanced with icons for improved interaction and refined spacing for a cleaner layout. Overall, these changes make the header more attractive, user-friendly, and functional, significantly enhancing the website's user experience.
arghadipmanna101 · Jun 7, 2024 · 588c8e2 · 588c8e2
1 parent 0c7a9c2
commit 588c8e2
Showing 1 changed file with 59 additions and 6 deletions.
diff --git a/header/header.html b/header/header.html
@@ -9,6 +9,59 @@
   <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="../css/header.css">
+  <style>
+    .navbar-brand img {
+      width: 80px;
+    }
+
+    .searchBar_h {
+      display: flex;
+      align-items: center;
+    }
+
+    .searchBar_h input {
+      width: 300px;
+      padding: 5px 10px;
+      border-radius: 5px 0 0 5px;
+      border: 1px solid #ccc;
+    }
+
+    .searchBar_h i {
+      padding: 5px 10px;
+      border-radius: 0 5px 5px 0;
+      background-color: #fff;
+      border: 1px solid #ccc;
+      cursor: pointer;
+    }
+
+    .btn-primary a {
+      color: #fff;
+      text-decoration: none;
+    }
+
+    .b_a_s, #more_h, .cartLogoandname {
+      margin-left: 15px;
+    }
+
+    .cartLogoandname img {
+      width: 24px;
+    }
+
+    .secondNav .nav-link {
+      display: flex;
+      align-items: center;
+      padding: 8px 15px;
+      color: #000;
+    }
+
+    .secondNav .nav-link i {
+      margin-left: 5px;
+    }
+
+    .navbar-toggler-icon {
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28155,155,155,1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+    }
+  </style>
 </head>
 
 <body>
@@ -20,11 +73,10 @@
         <nav class="navbar bg-body-tertiary">
           <div class="container-fluid">
             <a class="navbar-brand" href="../">
-              <img src="../img/flipcartlogo.PNG" width="80px">
+              <img src="../img/flipcartlogo.PNG" alt="Brand Logo">
             </a>
             <div class="searchBar_h">
-              <input id="inputField_h" type="text" autocomplete="off"
-                placeholder="Search for products, brands and more">
+              <input id="inputField_h" type="text" autocomplete="off" placeholder="Search for products, brands and more">
               <i id="fetchButton_h" class="bi bi-search btn"></i>
             </div>
             <div>
@@ -38,7 +90,7 @@
             </div>
             <div class="text-white cartLogoandname">
               <a href="../viewcart/">
-                <img src="../img/svg/cart_h.svg" alt="" ><span class="cart_h">Cart </span><span id="cartItems"></span>
+                <img src="../img/svg/cart_h.svg" alt="Cart"><span class="cart_h">Cart</span><span id="cartItems"></span>
               </a>
             </div>
           </div>
@@ -99,9 +151,10 @@
       </div>
     </nav>
   </header>
-  <!-- javaScript -->
+
+  <!-- JavaScript -->
   <script src="../js/bootstrap.bundle.min.js"></script>
   <script src="../js/header_bluebg.js"></script>
 </body>
 
-</html>
+</html>