From eef25b38a34a019bb1e0852c5be23ccf6bb08270 Mon Sep 17 00:00:00 2001
From: Priya Mhapralkar <priyamhapralkar11@gmail.com>
Date: Wed, 30 Jul 2025 23:44:07 -0700
Subject: [PATCH] Enhance header UI with responsive design and improved
 accessibility

---
 header.html | 277 +++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 240 insertions(+), 37 deletions(-)
diff --git a/header.html b/header.html
index 53ba172..7b5640d 100644
--- a/header.html
+++ b/header.html
@@ -1,44 +1,247 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title> HEADER | E-COMMERCE WEBSITE </title>
-    <!-- favicon -->
-    <link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo" type="image/gif" sizes="16x16">
-    <!-- EXTERNAL LINKS -->
-    <link rel="stylesheet" href="css/header.css">
-    <script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
-    <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>SHOPLANE | E-COMMERCE WEBSITE</title>
+
+  <!-- Favicon -->
+  <link
+    rel="icon"
+    href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo"
+    type="image/gif"
+    sizes="16x16"
+  />
+  <!-- Font Awesome -->
+  <script src="https://kit.fontawesome.com/4a3b1f73a2.js" crossorigin="anonymous"></script>
+  <!-- Google Fonts -->
+  <link
+    href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap"
+    rel="stylesheet"
+  />
+
+  <style>
+    /* Reset & Base */
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      font-family: 'Lato', sans-serif;
+      background: #fafafa;
+      color: #333;
+    }
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
+    a:hover,
+    a:focus {
+      color: #0077ff;
+      outline: none;
+    }
+
+    /* Header styles */
+    header {
+      background-color: #fff;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+    }
+    #container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 1rem 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 2rem;
+      flex-wrap: wrap;
+    }
+
+    /* Logo / Shop Name */
+    #shopName a {
+      font-size: 1.8rem;
+      font-weight: 900;
+      color: #222;
+      letter-spacing: 2px;
+      user-select: none;
+    }
+    #shopName a b {
+      color: #0077ff;
+    }
+
+    /* Navigation Collections */
+    #collection {
+      display: flex;
+      gap: 1.5rem;
+      font-weight: 600;
+    }
+    #collection a {
+      padding: 0.5rem 1rem;
+      border-radius: 4px;
+      transition: background-color 0.3s ease;
+      color: #555;
+      font-size: 1rem;
+    }
+    #collection a:hover,
+    #collection a:focus {
+      background-color: #0077ff;
+      color: white;
+      box-shadow: 0 2px 8px rgba(0, 119, 255, 0.3);
+    }
+
+    /* Search */
+    #search {
+      flex: 1 1 300px;
+      display: flex;
+      align-items: center;
+      background-color: #f0f2f5;
+      padding: 0.5rem 1rem;
+      border-radius: 25px;
+      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.07);
+      transition: box-shadow 0.3s ease;
+    }
+    #search:focus-within {
+      box-shadow: 0 0 8px #0077ff;
+      background-color: #fff;
+    }
+    #search i {
+      color: #888;
+      margin-right: 0.75rem;
+      font-size: 1.2rem;
+      pointer-events: none;
+    }
+    #search input {
+      border: none;
+      background: transparent;
+      width: 100%;
+      font-size: 1rem;
+      font-weight: 400;
+      color: #333;
+      outline-offset: 2px;
+    }
+    #search input::placeholder {
+      color: #aaa;
+      font-style: italic;
+    }
+
+    /* User Section */
+    #user {
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+      font-size: 1.4rem;
+      position: relative;
+    }
+    #user a {
+      color: #555;
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+    #user a:hover,
+    #user a:focus {
+      color: #0077ff;
+    }
+
+    /* Cart Badge */
+    #badge {
+      position: absolute;
+      top: -6px;
+      right: -10px;
+      background-color: #ff4757;
+      color: white;
+      font-size: 0.75rem;
+      font-weight: 700;
+      padding: 0 6px;
+      border-radius: 12px;
+      line-height: 1.2;
+      pointer-events: none;
+      user-select: none;
+      box-shadow: 0 0 4px rgba(255, 71, 87, 0.6);
+      transition: transform 0.3s ease;
+    }
+
+    /* Add a subtle pulse animation when badge updates */
+    #badge.updated {
+      animation: pulse 0.6s ease;
+    }
+    @keyframes pulse {
+      0% {
+        transform: scale(1);
+        box-shadow: 0 0 4px rgba(255, 71, 87, 0.6);
+      }
+      50% {
+        transform: scale(1.3);
+        box-shadow: 0 0 10px rgba(255, 71, 87, 1);
+      }
+      100% {
+        transform: scale(1);
+        box-shadow: 0 0 4px rgba(255, 71, 87, 0.6);
+      }
+    }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+      #container {
+        justify-content: center;
+        gap: 1rem;
+      }
+      #collection {
+        order: 3;
+        width: 100%;
+        justify-content: center;
+      }
+      #search {
+        order: 2;
+        width: 100%;
+      }
+      #user {
+        order: 4;
+        gap: 1rem;
+      }
+    }
+  </style>
 </head>
 <body>
-    
-    <header>
-        <section>
-            <!-- MAIN CONTAINER -->
-            <div id="container">
-                <!-- SHOP NAME -->
-                <div id="shopName"><a href="index.html"> <b>SHOP</b>LANE </a></div>
-                    <!-- COLLCETIONS ON WEBSITE -->
-                    <div id="collection">
-                        <div id="clothing"><a href="clothing.html"> CLOTHING </a></div>
-                        <div id="accessories"><a href="accessories.html"> ACCESSORIES </a></div>
-                    </div>
-                    <!-- SEARCH SECTION -->
-                    <div id="search">
-                        <i class="fas fa-search search"></i>
-                        <input type="text" id="input" name="searchBox" placeholder="Search for Clothing and Accessories">
-                    </div>
-                    <!-- USER SECTION (CART AND USER ICON) -->
-                    <div id="user">
-                        <a href="cart.html"> <i class="fas fa-shopping-cart addedToCart"><div id="badge"> 0 </div></i></a>
-                        <a href="#"> <i class="fas fa-user-circle userIcon"></i> </a>
-                    </div>
-            </div>
-
-        </section>
-    </header>
+  <header>
+    <div id="container" role="banner" aria-label="Main header navigation">
+      <!-- Logo -->
+      <div id="shopName">
+        <a href="index.html" aria-label="Go to homepage"><b>SHOP</b>LANE</a>
+      </div>
+
+      <!-- Navigation Links -->
+      <nav id="collection" aria-label="Primary navigation">
+        <a href="clothing.html">CLOTHING</a>
+        <a href="accessories.html">ACCESSORIES</a>
+      </nav>
+
+      <!-- Search -->
+      <div id="search" role="search">
+        <i class="fas fa-search" aria-hidden="true"></i>
+        <input
+          type="search"
+          id="input"
+          name="searchBox"
+          placeholder="Search for Clothing and Accessories"
+          aria-label="Search products"
+        />
+      </div>
 
+      <!-- User Section -->
+      <div id="user" aria-label="User actions">
+        <a href="cart.html" aria-label="View shopping cart">
+          <i class="fas fa-shopping-cart" aria-hidden="true"></i>
+          <div id="badge" aria-live="polite" aria-atomic="true">0</div>
+        </a>
+        <a href="#" aria-label="User profile">
+          <i class="fas fa-user-circle" aria-hidden="true"></i>
+        </a>
+      </div>
+    </div>
+  </header>
 </body>
-</html>
\ No newline at end of file
+</html>
