Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEEP DRIP - Streetwear Arsenal</title>
    <style>
        :root {
            --neon-cyan: #00FFE0;
            --deep-space: #0A1F3D;
            --street-gray: #1A1A1A;
        }

        body {
            background: var(--deep-space);
            color: white;
            font-family: 'Bebas Neue', Arial, sans-serif;
            line-height: 1.6;
        }

        .products-grid {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 2rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .product-card {
            background: rgba(26,26,26,0.9);
            border: 2px solid var(--neon-cyan);
            padding: 1.5rem;
            position: relative;
            transition: transform 0.3s ease;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 25px rgba(0,255,224,0.2);
        }

        .product-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-bottom: 3px dashed var(--neon-cyan);
        }

        .size-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 0.8rem;
            margin: 1rem 0;
        }

        .size-btn {
            background: transparent;
            color: white;
            border: 1px solid #444;
            padding: 0.8rem;
            cursor: pointer;
            min-width: 50px;
            transition: all 0.2s ease;
        }

        .size-btn.selected {
            border-color: var(--neon-cyan);
            color: var(--neon-cyan);
        }

        .price-tag {
            font-size: 1.5rem;
            color: var(--neon-cyan);
            margin: 1rem 0;
        }

        .add-to-cart {
            background: var(--neon-cyan);
            color: var(--deep-space);
            border: none;
            padding: 1rem 2rem;
            width: 100%;
            cursor: pointer;
            font-weight: bold;
            text-transform: uppercase;
            transition: all 0.3s ease;
        }

        .add-to-cart:hover {
            transform: skew(-10deg);
        }

        .product-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: var(--neon-cyan);
            color: var(--deep-space);
            padding: 0.3rem 0.8rem;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .products-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
</head>
<body>
    <div class="products-grid">
        
        <div class="product-card">
            <div class="product-badge">LIMITED</div>
            <img src="hoodie.jpg" alt="Cyber Graffiti Hoodie" class="product-image">
            <h2>CYBER GRAFFITI HOODIE</h2>
            <div class="price-tag">$129.99</div>
            <div class="size-selector">
                <button class="size-btn">S</button>
                <button class="size-btn selected">M</button>
                <button class="size-btn">L</button>
                <button class="size-btn">XL</button>
            </div>
            <button class="add-to-cart">ADD TO CART</button>
        </div>

        
        <div class="product-card">
            <div class="product-badge">NEW</div>
            <img src="tees.jpg" alt="Glitch Pattern Tee" class="product-image">
            <h2>GLITCH PATTERN TEE</h2>
            <div class="price-tag">$79.99</div>
            <div class="size-selector">
                <button class="size-btn">S</button>
                <button class="size-btn selected">M</button>
                <button class="size-btn">L</button>
            </div>
            <button class="add-to-cart">ADD TO CART</button>
        </div>

        
        <div class="product-card">
            <img src="joggers.jpg" alt="Tactical Cargo Joggers" class="product-image">
            <h2>TACTICAL CARGO JOGGERS</h2>
            <div class="price-tag">$149.99</div>
            <div class="size-selector">
                <button class="size-btn">28</button>
                <button class="size-btn selected">30</button>
                <button class="size-btn">32</button>
                <button class="size-btn">34</button>
            </div>
            <button class="add-to-cart">ADD TO CART</button>
        </div>
    </div>

    <script>
        // Size selection logic
        document.querySelectorAll('.size-btn').forEach(button => {
            button.addEventListener('click', function() {
                this.parentElement.querySelectorAll('.size-btn').forEach(btn => {
                    btn.classList.remove('selected');
                });
                this.classList.add('selected');
            });
        });

        // Add to cart animation
        document.querySelectorAll('.add-to-cart').forEach(button => {
            button.addEventListener('click', function() {
                this.style.transform = 'scale(0.9)';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                }, 100);
            });
        });
    </script>
</body>
</html>