HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

1880x864

809 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VOGUE | Modern Apparel</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <style>
        .product-card:hover img { transform: scale(1.05); }
        .cart-dot { display: none; }
    </style>
</head>
<body class="bg-white text-gray-900 font-sans">

    <nav class="flex justify-between items-center px-10 py-6 sticky top-0 bg-white/80 backdrop-blur-md z-50">
        <h1 class="text-2xl font-bold tracking-tighter">VOGUE.</h1>
        <div class="hidden md:flex space-x-8 font-medium">
            <a href="#" class="hover:text-gray-500">Shop All</a>
            <a href="#" class="hover:text-gray-500">Collections</a>
            <a href="#" class="hover:text-gray-500">About</a>
        </div>
        <div class="flex items-center space-x-5">
            <button id="cartBtn" class="relative">
                Cart (0)
            </button>
        </div>
    </nav>

    <section class="h-[80vh] flex items-center justify-center bg-gray-100 mx-5 rounded-3xl overflow-hidden relative">
        <img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=1600&q=80" 
             class="absolute inset-0 w-full h-full object-cover opacity-80" alt="Hero">
        <div class="relative text-center z-10">
            <h2 id="heroText" class="text-6xl md:text-8xl font-bold mb-6 opacity-0 translate-y-10">ESSENTIALS 2026</h2>
            <button class="bg-black text-white px-8 py-4 rounded-full hover:bg-gray-800 transition">Shop New Arrivals</button>
        </div>
    </section>

    <main class="max-w-7xl mx-auto px-10 py-20">
        <h3 class="text-3xl font-bold mb-10">Trending Now</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-10" id="productGrid">
            <div class="product-card group cursor-pointer overflow-hidden">
                <div class="aspect-[3/4] overflow-hidden bg-gray-200 rounded-xl mb-4">
                    <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=800&q=80" 
                         class="w-full h-full object-cover transition duration-500">
                </div>
                <h4 class="font-bold">Minimalist Wool Coat</h4>
                <p class="text-gray-500">$240.00</p>
            </div>
            </div>
    </main>

    <script>
        // Animations
        window.onload = () => {
            gsap.to("#heroText", { opacity: 1, y: 0, duration: 1, ease: "power4.out" });
            gsap.from(".product-card", { opacity: 0, y: 30, duration: 0.8, stagger: 0.2, delay: 0.5 });
        };
    </script>
</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

374KB

Transfer Size

692KB

Content Size

415.0ms

Dom Content Loaded

528.0ms

First Paint

416.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests