Update index.html

index.html

@@ -1,31 +1,31 @@
-<!DOCTYPE1 html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>House of Screens - Custom Sports Apparel</title>
+    <title>HOUSE OF SCREENS - Custom Basketball & Football Jerseys</title>
     <style>
         * {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
-            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
         }
 
         body {
-            background-color: #000;
-            color: #fff;
+            background-color: #0b0c10;
+            color: #ffffff;
         }
 
-        /* Top Notification Bar */
+        /* Top Announcement Bar */
         .top-bar {
-            background-color: #000;
-            color: #fff;
+            background-color: #1a1a1d;
+            color: #ffffff;
             text-align: center;
-            padding: 8px 0;
-            font-size: 14px;
-            font-weight: 500;
-            border-bottom: 1px solid #222;
+            padding: 8px 15px;
+            font-size: 13px;
+            letter-spacing: 0.5px;
+            border-bottom: 1px solid #282828;
         }
 
         /* Header Navigation */
@@ -33,8 +33,9 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 15px 50px;
-            background-color: #000;
+            padding: 18px 50px;
+            background-color: #0b0c10;
+            border-bottom: 1px solid #1f1f23;
             position: sticky;
             top: 0;
             z-index: 100;
@@ -50,21 +51,22 @@
         nav ul {
             display: flex;
             list-style: none;
-            gap: 25px;
+            gap: 22px;
+            flex-wrap: wrap;
         }
 
         nav a {
-            color: #fff;
+            color: #c5c6c8;
             text-decoration: none;
-            font-size: 14px;
+            font-size: 13px;
             font-weight: 600;
             text-transform: uppercase;
-            letter-spacing: 1px;
-            transition: color 0.3s;
+            letter-spacing: 0.8px;
+            transition: color 0.2s;
         }
 
         nav a:hover {
-            color: #888;
+            color: #ffffff;
         }
 
         .header-icons {
@@ -74,51 +76,48 @@
             cursor: pointer;
         }
 
-        /* Hero Banner */
+        /* Multi-Sport Hero Banner */
         .hero {
             position: relative;
             width: 100%;
-            height: 80vh;
-            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), 
+            height: 75vh;
+            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.8)), 
                         url('https://images.unsplash.com/photo-1546519638-68e109498ffc?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
             display: flex;
+            flex-direction: column;
             align-items: center;
-            justify-content: center;
+            justify-content: flex-end;
+            padding-bottom: 60px;
             text-align: center;
         }
 
-        .hero-content h1 {
-            font-size: 64px;
-            font-weight: 900;
-            text-transform: uppercase;
-            letter-spacing: 3px;
-            margin-bottom: 20px;
-        }
-
-        .btn {
-            display: inline-block;
-            padding: 12px 30px;
-            background-color: #fff;
-            color: #000;
-            font-weight: bold;
+        .hero-btn {
+            background-color: #1f1f23;
+            color: #ffffff;
+            padding: 12px 35px;
             text-decoration: none;
+            font-weight: 700;
+            font-size: 14px;
             text-transform: uppercase;
-            letter-spacing: 1px;
-            transition: background 0.3s, color 0.3s;
+            border-radius: 4px;
+            border: 1px solid #3a3a40;
+            letter-spacing: 1.5px;
+            transition: all 0.3s;
         }
 
-        .btn:hover {
-            background-color: #ddd;
+        .hero-btn:hover {
+            background-color: #3a3a40;
+            border-color: #666;
         }
 
-        /* Modal Overlay (Notice) */
+        /* Modal Pop-up Overlay (Matches Viewport) */
         .modal-overlay {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.7);
+            background: rgba(0, 0, 0, 0.85);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -126,32 +125,38 @@
         }
 
         .modal-box {
-            background-color: #111;
-            border: 1px solid #333;
-            padding: 40px;
+            background-color: #000000;
+            border: 1px solid #222;
+            border-radius: 8px;
+            padding: 40px 30px;
             width: 90%;
-            max-width: 500px;
+            max-width: 440px;
             text-align: center;
             position: relative;
-            border-radius: 8px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.8);
+            box-shadow: 0 10px 40px rgba(0,0,0,0.9);
         }
 
         .close-btn {
             position: absolute;
-            top: 15px;
-            right: 20px;
-            background: none;
+            top: -12px;
+            right: -12px;
+            background: #ffffff;
+            color: #000000;
             border: none;
-            color: #fff;
-            font-size: 24px;
+            border-radius: 50%;
+            width: 28px;
+            height: 28px;
+            font-size: 16px;
             cursor: pointer;
+            line-height: 28px;
+            text-align: center;
+            font-weight: bold;
         }
 
         .modal-title {
-            color: #3b82f6;
-            font-size: 22px;
-            font-weight: bold;
+            color: #2196f3;
+            font-size: 20px;
+            font-weight: 800;
             margin-bottom: 25px;
             letter-spacing: 1.5px;
             text-transform: uppercase;
@@ -160,6 +165,10 @@
         .modal-body {
             font-size: 18px;
             line-height: 1.6;
+            color: #ffffff;
+        }
+
+        .modal-body p {
             margin-bottom: 20px;
         }
 
@@ -167,11 +176,98 @@
             text-underline-offset: 4px;
         }
 
-        .modal-body strong {
+        /* Featured Section */
+        .section-container {
+            max-width: 1100px;
+            margin: 70px auto;
+            padding: 0 20px;
+            text-align: center;
+        }
+
+        .product-card {
+            background-color: #121317;
+            border: 1px solid #22252a;
+            border-radius: 8px;
+            padding: 35px;
+            max-width: 420px;
+            margin: 0 auto;
+        }
+
+        .product-card h2 {
+            font-size: 18px;
+            letter-spacing: 1px;
+            margin-bottom: 20px;
+        }
+
+        .btn-add {
+            background-color: #ffffff;
+            color: #000000;
+            padding: 12px 24px;
+            border: none;
+            font-weight: bold;
+            cursor: pointer;
+            text-transform: uppercase;
+            width: 100%;
+            margin-bottom: 15px;
+            border-radius: 2px;
+            transition: background 0.2s;
+        }
+
+        .btn-add:hover {
+            background-color: #dddddd;
+        }
+
+        /* Instagram Section */
+        .instagram-section {
+            border-top: 1px solid #1f1f23;
+            padding: 60px 20px;
+            text-align: center;
+        }
+
+        .instagram-section h3 {
+            font-size: 22px;
+            letter-spacing: 1px;
+            margin-bottom: 8px;
+        }
+
+        /* Newsletter Signup */
+        .newsletter {
+            background-color: #121317;
+            padding: 60px 20px;
+            text-align: center;
+            border-top: 1px solid #1f1f23;
+        }
+
+        .newsletter h3 {
+            font-size: 22px;
+            margin-bottom: 10px;
+            letter-spacing: 1px;
+        }
+
+        .newsletter p {
+            color: #888;
+            font-size: 14px;
+            margin-bottom: 25px;
+        }
+
+        .newsletter-form {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            max-width: 400px;
+            margin: 0 auto;
+        }
+
+        .newsletter-input {
+            padding: 12px 15px;
+            background: #0b0c10;
+            border: 1px solid #22252a;
             color: #fff;
+            width: 100%;
+            border-radius: 4px;
         }
 
-        /* Floating WhatsApp Button */
+        /* Floating WhatsApp Widget */
         .whatsapp-float {
             position: fixed;
             bottom: 25px;
@@ -179,31 +275,35 @@
             background-color: #25d366;
             color: #fff;
             border-radius: 50%;
-            width: 55px;
-            height: 55px;
+            width: 52px;
+            height: 52px;
             display: flex;
             align-items: center;
             justify-content: center;
             text-decoration: none;
-            font-size: 28px;
-            box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
+            font-size: 26px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.6);
             z-index: 999;
         }
 
         /* Footer */
         footer {
-            background-color: #050505;
-            padding: 40px 50px;
-            border-top: 1px solid #222;
+            background-color: #070709;
+            padding: 35px 20px;
+            border-top: 1px solid #1f1f23;
             text-align: center;
-            font-size: 14px;
-            color: #888;
+            font-size: 13px;
+            color: #777;
+        }
+
+        footer nav {
+            margin-top: 15px;
         }
 
         footer a {
-            color: #888;
+            color: #777;
             text-decoration: none;
-            margin: 0 10px;
+            margin: 0 8px;
         }
 
         footer a:hover {
@@ -220,14 +320,17 @@
 
     <!-- Header Navigation -->
     <header>
-        <div class="logo">House of Screens</div>
+        <div class="logo">HOUSE OF SCREENS</div>
         <nav>
             <ul>
-                <li><a href="#">Basketball Fits</a></li>
-                <li><a href="#">Volleyball Fits</a></li>
-                <li><a href="#">Football Fits</a></li>
-                <li><a href="#">Badminton Fits</a></li>
-                <li><a href="#">Pro Basketball</a></li>
+                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Basketball Fits</a></li>
+                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Volleyball Fits</a></li>
+                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Football Fits</a></li>
+                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Badminton Fits</a></li>
+                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">PRO Basketball</a></li>
+                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Zippered Polo</a></li>
+                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Full sleeve Warmups</a></li>
+                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Basketball Tees</a></li>
             </ul>
         </nav>
         <div class="header-icons">
@@ -239,38 +342,60 @@
 
     <!-- Main Hero Banner -->
     <section class="hero">
-        <div class="hero-content">
-            <h1>Elevate Your Game</h1>
-            <a href="#" class="btn">Customize This!</a>
+        <a href="#" class="hero-btn">Customize This!</a>
+    </section>
+
+    <!-- Product Showcase -->
+    <section class="section-container">
+        <div class="product-card">
+            <h2>HOFS ELITE CREDITS GIFT CARD</h2>
+            <button class="btn-add">Add to Cart</button>
+            <br>
+            <a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#" style="color: #888; font-size: 13px;">View full details</a>
         </div>
     </section>
 
-    <!-- Pop-up Modal Notice -->
+    <!-- Instagram Community Section -->
+    <section class="instagram-section">
+        <h3>Our Instagram Community</h3>
+        <p style="color: #888; font-size: 14px; margin-top: 5px;">Follow us on Instagram for trending products</p>
+    </section>
+
+    <!-- Newsletter Section -->
+    <section class="newsletter">
+        <h3>Subscribe to our emails</h3>
+        <p>Be the first to know about new collections and exclusive offers.</p>
+        <form class="newsletter-form" onsubmit="event.preventDefault();">
+            <input type="email" class="newsletter-input" placeholder="Email" required>
+            <button type="submit" class="hero-btn" style="padding: 12px 20px;">→</button>
+        </form>
+    </section>
+
+    <!-- Pop-up Modal Overlay -->
     <div class="modal-overlay" id="noticeModal">
         <div class="modal-box">
-            <button class="close-btn" onclick="closeModal()">&times;</button>
-            <div class="modal-title">Read Before Purchasing</div>
+            <button class="close-btn" onclick="closeModal()">✕</button>
+            <div class="modal-title">READ BEFORE PURCHASING</div>
             <div class="modal-body">
                 <p>All orders will be shipped as per <u><strong>delivery timeline shown on product pages</strong></u>.</p>
-                <br>
-                <p>Please note all orders will take <strong><u>20-25 days</u> to deliver</strong> from the time of order as they are <strong>CUSTOM</strong> made on order.</p>
+                <p>Please note all orders will take <u><strong>20-25 days to deliver</strong></u> from the time of order as they are <strong><u>CUSTOM</u> made on order.</strong></p>
             </div>
         </div>
     </div>
 
-    <!-- Floating Contact Button -->
+    <!-- Floating WhatsApp Button -->
     <a href="#" class="whatsapp-float" title="Contact Us">💬</a>
 
     <!-- Footer -->
     <footer>
-        <p style="margin-bottom: 15px;">© 2026, House of Screens</p>
-        <p>
-            <a href="#">Refund policy</a> |
-            <a href="#">Privacy policy</a> |
-            <a href="#">Terms of service</a> |
-            <a href="#">Shipping policy</a> |
-            <a href="#">Contact information</a>
-        </p>
+        <p>© 2026, [HOUSE OF SCREENS](https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF)</p>
+        <nav>
+            <a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Refund policy</a> ·
+            <a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Privacy policy</a> ·
+            <a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Terms of service</a> ·
+            <a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Shipping policy</a> ·
+            <a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Contact information</a>
+        </nav>
     </footer>
 
     <script>