product.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact - ThreadCo</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>
        <nav aria-label="breadcrumb">
            <a href="index.html">Home</a>
            &rsaquo;
            <a href="products.html">Products</a>
            &rsaquo;
            Oversized Drop Tee Vol.3
        </nav>

        <section id="product-detail">
            <figure>
                <img src="images/product 1.jpg" alt="ThreadCo Oversized Drop Tee Vol.3 - front view, black colorway">
                <figcaption>Oversized Drop Tee Vol.3 - Black Colorway</figcaption>
            </figure>

            <div class="product-detail-left">
                <h2>Oversized Drop Tee Vol.3</h2>
                <p>
                    The Vol.3 drops harder than the ones before it. Heavyweight 240 GSM cotton,
                    a chest graphic designed by <strong>Delhi-based artist Arjun Mehra</strong>,
                    and a boxy cut that pairs with everything.
                    <em>This is the one everyone is waiting for.</em>
                </p>

                <p>
                    <strong>&#8377; 799</strong>
                    &nbsp;
                    <s>&#8377; 1199</s>
                    &nbsp;
                    <mark>33% OFF</mark>
                </p>

                <p><small>Inclusive of all taxes. Free delivery above &#8377; 499.</small></p>

                <label for="size-select">Select Size:</label>
                <select id="size-select" name="size">
                    <option value="">-- Choose Size --</option>
                    <option value="S">S</option>
                    <option value="M">M</option>
                    <option value="L">L</option>
                    <option value="XL">XL</option>
                    <option value="XXL">XXL</option>
                </select>
                <a href="#size-chart">Size Guide</a>

                <br><br>

                <label for="quantity">Quantity:</label>
                <input type="number" id="quantity" name="quantity" value="1" min="1" max="10">

                <br><br>

                <div class="product-detail-btns">
                    <button type="button">Add to Cart</button>
                    <button type="button">Buy Now</button>
                </div>

                <br><br>

                <ul>
                    <li>&#10003; Free delivery on orders above &#8377; 499</li>
                    <li>&#10003; Ships within 48 hours</li>
                    <li>&#10003; Free returns within 7 days</li>
                    <li>&#10003; Cash on delivery available</li>
                </ul>
            </div>
        </section>


        <section id="size-chart" class="best-sellers">
            <h2>Size Guide</h2>
            <p>ThreadCo tees run <strong>oversized by design</strong>. If you prefer a fitted look, size down.</p>
            <div class="table-scroll">
                <table>
                    <caption>ThreadCo Oversized Fit &mdash; All measurements in inches</caption>
                    <tr>
                        <th colspan="4">Oversized Drop Tee - Size Chart</th>
                    </tr>
                    <tr>
                        <th>Size</th>
                        <th>Chest (inches)</th>
                        <th>Length (inches)</th>
                        <th>Shoulder (inches)</th>
                    </tr>
                    <tr>
                        <td>S</td>
                        <td>42</td>
                        <td>28</td>
                        <td>18</td>
                    </tr>
                    <tr>
                        <td>M</td>
                        <td>44</td>
                        <td>29</td>
                        <td>19</td>
                    </tr>
                    <tr>
                        <td>L</td>
                        <td>46</td>
                        <td>30</td>
                        <td>20</td>
                    </tr>
                    <tr>
                        <td>XL</td>
                        <td>48</td>
                        <td>31</td>
                        <td>21</td>
                    </tr>
                    <tr>
                        <td>XXL</td>
                        <td>50</td>
                        <td>32</td>
                        <td>22</td>
                    </tr>
                </table>
            </div>
            <p><small>Measurements are approximate and may vary by &#177; 0.5 inches.</small></p>
        </section>

        <section id="product-details">
            <h2>Product Details</h2>
            <dl>
                <div>
                    <dt>Material</dt>
                    <dd>100% Cotton - 240 GSM heavyweight</dd>
                </div>

                <div>
                    <dt>Fit</dt>
                    <dd>Oversized / Boxy cut</dd>
                </div>

                <div>
                    <dt>Neckline</dt>
                    <dd>Ribbed crew neck</dd>
                </div>

                <div>
                    <dt>Colors Available</dt>
                    <dd>Black, White, Washed Grey, Olive</dd>
                </div>

                <div>
                    <dt>Care Instructions</dt>
                    <dd>Machine wash cold (30&deg;C), inside out. Do not tumble dry.</dd>
                </div>

                <div>
                    <dt>Country of Origin</dt>
                    <dd>Made in India &#127470;&#127475;</dd>
                </div>

                <div>
                    <dt>Artist</dt>
                    <dd>Graphic by Arjun Mehra, New Delhi</dd>
                </div>

                <div>
                    <dt>SKU</dt>
                    <dd>TC-OT-VOL3-BLK</dd>
                </div>
            </dl>
        </section>

        <section class="customer-reviews">
            <h2>Customer Reviews</h2>
            <p>
                <strong>4.9 / 5</strong>
                &#9733;&#9733;&#9733;&#9733;&#9733;
                based on 247 reviews
            </p>

            <div class="customer-reviews-details">
                <article>
                    <h3>Rahul K. &mdash; Delhi</h3>
                    <p>&#9733;&#9733;&#9733;&#9733;&#9733;</p>
                    <p>
                        Bhai yeh tee bahut solid hai. The graphic is fire, quality is exactly what
                        you expect at this price. Already ordered 2 more colors.
                        <em>Highly recommend.</em>
                    </p>
                    <small>Purchased: October 12, 2025 &nbsp;|&nbsp; Size: L</small>
                </article>

                <article>
                    <h3>Priya S. &mdash; Bangalore</h3>
                    <p>&#9733;&#9733;&#9733;&#9733;&#9733;</p>
                    <p>
                        Obsessed with this tee. The oversized fit is perfect - not too boxy,
                        not too loose. Wore it to a concert and got <strong>three compliments</strong> in one night.
                        The fabric is soft and hasn't shrunk after 5 washes.
                    </p>
                    <small>Purchased: October 10, 2025 &nbsp;|&nbsp; Size: M</small>
                </article>

                <article>
                    <h3>Aryan M. &mdash; Mumbai</h3>
                    <p>&#9733;&#9733;&#9733;&#9733;&#9734;</p>
                    <p>
                        Really good quality for the price. Shipping was fast, delivered in 2 days.
                        Minus one star only because I wish there were more color options.
                        Otherwise <em>absolutely worth it.</em>
                    </p>
                    <small>Purchased: October 8, 2025 &nbsp;|&nbsp; Size: XL</small>
                </article>
            </div>

        </section>

        <section class="might-also-like">
            <h3>You Might Also Like</h3>

            <div class="also-like-items">
                <article>
                    <figure>
                        <img src="images/product 2.jpg" alt="ThreadCo Street Hoodie in Olive">
                        <figcaption>Street Hoodie - Olive</figcaption>
                    </figure>
                    <h4>Street Hoodie - Olive</h4>
                    <p><strong>&#8377; 1499</strong> <s>&#8377; 1999</s></p>
                    <a href="product.html">View Details</a>
                </article>

                <article>
                    <figure>
                        <img src="images/product 3.jpg" alt="ThreadCo TC 6-Panel Cap in Black">
                        <figcaption>TC 6-Panel Cap - Black</figcaption>
                    </figure>
                    <h4>TC 6-Panel Cap - Black</h4>
                    <p><strong>&#8377; 499</strong> <s>&#8377; 699</s></p>
                    <a href="product.html">View Details</a>
                </article>

                <article>
                    <figure>
                        <img src="images/product 4.jpg" alt="ThreadCo Acid Wash Tee in White">
                        <figcaption>Acid Wash Tee - White</figcaption>
                    </figure>
                    <h4>Acid Wash Tee - White</h4>
                    <p><strong>&#8377; 899</strong> <s>&#8377; 1299</s></p>
                    <a href="product.html">View Details</a>
                </article>
            </div>
        </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>