index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ThreadCo - Wear the Code. Live the Street.</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <header>
        <h1>ThreadCo</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="products.html">Products</a></li>
                <li><a href="product.html">Product Detail</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="#">Cart (0)</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="hero">
            <div class="left-hero">
                <h2>New Drop. <br> <span id="gradient-text">Every Friday.</span></h2>
                <p>ThreadCo is not just clothing - it is a statement. Born on the streets of Delhi, built for every city
                    in
                    India. <strong>Limited drops. No restocks. Ever.</strong></p>
                <p>We make streetwear that hits different - 100% cotton, oversized fits, and designs that actually mean
                    something.</p>
                <div id="cta">
                    <a href="products.html" class="btn1">Shop Now</a>
                    <a href="products.html" class="btn2">View Lookbook</a>
                </div>
            </div>
            <div class="right-hero">
                <div class="glow orb1"></div>
                <div class="glow orb2"></div>
                <div class="right-hero-image">
                    <img src="images/product 1.jpg" alt="">
                </div>

            </div>
        </section>


        <section id="week-drop">
            <h2>This Week's Drop</h2>
            <p>Friday 12:00 PM. Set your alarms. These won't last.</p>

            <div class="cards">
                <article>
                    <figure>
                        <img src="images/product 1.jpg" alt="ThreadCo Oversized Drop Tee Vol.3 in Black">
                        <figcaption>Oversized Drop Tee Vol.3</figcaption>
                    </figure>

                    <h3>Oversized Drop Tee Vol.3</h3>
                    <p>Category: <span>T-Shirts</span></p>
                    <p>Price: <strong>&#8377; 799</strong> <s>&#8377; 1199</s> </p>
                    <p><mark>33% OFF</mark></p>

                    <a href="product.html">View Details</a>
                    <button type="button">Add to Cart</button>

                </article>

                <article>
                    <figure>
                        <img src="images/product 2.jpg" alt="ThreadCo Street Hoodie in Olive Green">
                        <figcaption>Street Hoodie - Olive</figcaption>
                    </figure>

                    <h3>Street Hoodie - Olive</h3>
                    <p>Category: <span>Hoodies</span></p>
                    <p>Price: <strong>&#8377; 1499</strong> <s>&#8377; 1999</s></p>
                    <p><mark>25% OFF</mark></p>
                    <a href="product.html">View Details</a>
                    <button type="button">Add to Cart</button>
                </article>

                <article>
                    <figure>
                        <img src="images/product 3.jpg" alt="ThreadCo Cargo Pants in Beige">
                        <figcaption>Utility Cargo - Beige</figcaption>
                    </figure>
                    <h3>Utility Cargo - Beige</h3>
                    <p>Category: <span>Cargo Pants</span></p>
                    <p>Price: <strong>&#8377; 1799</strong> <s>&#8377; 2499</s></p>
                    <p><mark>28% OFF</mark></p>
                    <a href="product.html">View Details</a>
                    <button type="button">Add to Cart</button>

                </article>

                <article>
                    <figure>
                        <img src="images/product 4.jpg" alt="ThreadCo 6-Panel Cap in Black">
                        <figcaption>TC 6-Panel Cap</figcaption>
                    </figure>
                    <h3>TC 6-Panel Cap</h3>
                    <p>Category: <span>Caps</span></p>
                    <p>Price: <strong>&#8377; 499</strong> <s>&#8377; 699</s></p>
                    <p><mark>28% OFF</mark></p>
                    <a href="product.html">View Details</a>
                    <button type="button">Add to Cart</button>
                </article>
            </div>

        </section>

        <section class="best-sellers" id="best-sellers-month">
            <h2>Bestsellers This Month</h2>
            <div class="table-scroll">
                <table>
                    <tr>
                        <th colspan="5">&#127942; ThreadCo Top Picks - October 2025</th>
                    </tr>
                    <tr>
                        <th>Rank</th>
                        <th>Product Name</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Rating</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Oversized Drop Tee Vol.3</td>
                        <td>T-Shirts</td>
                        <td>&#8377; 799</td>
                        <td>&#9733;&#9733;&#9733;&#9733;&#9733; (4.9)</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Street Hoodie - Olive</td>
                        <td>T-Shirts</td>
                        <td>&#8377; 799</td>
                        <td>&#9733;&#9733;&#9733;&#9733;&#9733; (4.9)</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Utility Cargo - Beige</td>
                        <td>T-Shirts</td>
                        <td>&#8377; 799</td>
                        <td>&#9733;&#9733;&#9733;&#9733;&#9733; (4.9)</td>
                    </tr>
                    <tr nishant="hii">
                        <td>4</td>
                        <td>TC 6-Panel Cap</td>
                        <td>T-Shirts</td>
                        <td>&#8377; 799</td>
                        <td>&#9733;&#9733;&#9733;&#9733;&#9733; (4.9)</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Monogram Tote Bag</td>
                        <td>T-Shirts</td>
                        <td>&#8377; 799</td>
                        <td>&#9733;&#9733;&#9733;&#9733;&#9734; (4.9)</td>
                    </tr>
                </table>
            </div>
        </section>


        <section id="why-threadco">

            <h2>Why ThreadCo?</h2>
            <p>Because you deserve more than fast fashion. Here is what we stand for:</p>
            <ul>
                <li><strong>100% Cotton Fabric </strong>- Breathable, soft, and built to last</li>
                <li><strong>Limited Drops </strong>- Never overproduced. Once it is gone, it is gone.</li>
                <li><strong>Ships in 48 Hours</strong> - Order today, wear this weekend</li>
                <li><strong>Free Returns within 7 Days </strong>- No questions asked</li>
                <li><strong>Made in India </strong>- Supporting local manufacturers since Day 1</li>
            </ul>

            <h3>Our Promise</h3>

            <dl>
                <section>
                    <dt>Quality</dt>
                    <dd>Every piece is tested for shrinkage, color fastness, and stitching quality before it ships.</dd>
                </section>
                <section>
                    <dt>Sustainability</dt>
                    <dd>We use GOTS-certified cotton and minimize packaging waste. Planet first.</dd>
                </section>
                <section>
                    <dt>Community</dt>
                    <dd>Every drop supports an independent Indian artist or designer. Style with purpose.</dd>
                </section>
            </dl>
        </section>


        <section id="get-early">
            <h2>Get Early Drop Access</h2>
            <p>Drop notifications go out <strong>24 hours early</strong> to our list. Be first. Never miss a drop.</p>
            <form action="">
                <!-- <label for="email">Your Email:</label> -->
                <input type="email" id="email" name="email" placeholder="you@gmail.com" required>
                <button type="submit">Notify Me</button>
            </form>
            <br>
            <small>No spam. Unsubscribe anytime. We hate spam too.</small>
        </section>
    </main>


    <footer id="footer">
        <h3>&copy; 2025 ThreadCo. All rights reserved.</h3>
        <p><em>Wear the Code. Live the Street.</em></p>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="products.html">Products</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Terms &amp; Conditions</a></li>
            </ul>
        </nav>

        <p>
            <a href="https://instagram.com" target="_blank">Instagram</a>
            &nbsp;|&nbsp;
            <a href="https://twitter.com" target="_blank">Twitter</a>
            &nbsp;|&nbsp;
            <a href="https://youtube.com" target="_blank">YouTube</a>
        </p>
    </footer>

</body>

</html>