HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
300x451
90.5 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>HORO | Luxury Timepieces</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <!-- GSAP for Professional Animations -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,500;1,300&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0b0b0b;
            color: #f5f5f7;
            overflow-x: hidden;
        }
        .serif {
            font-family: 'Cormorant Garamond', serif;
        }
        /* Custom smooth scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0b0b0b;
        }
        ::-webkit-scrollbar-thumb {
            background: #222;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #333;
        }
    </style>
</head>
<body>

    <!-- Dynamic Background Glows -->
    <div class="fixed top-0 left-1/4 w-[500px] h-[500px] bg-emerald-900/10 rounded-full blur-[120px] pointer-events-none z-0"></div>
    <div class="fixed bottom-0 right-1/4 w-[600px] h-[600px] bg-amber-900/10 rounded-full blur-[150px] pointer-events-none z-0"></div>

    <!-- Navigation -->
    <nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-black/30 border-b border-white/5 px-8 py-6 flex justify-between items-center">
        <div class="text-2xl tracking-[0.3em] font-light serif text-amber-400 nav-item opacity-0">HORO</div>
        <div class="hidden md:flex space-x-12 text-xs tracking-widest uppercase font-light text-gray-400">
            <a href="#rolex" class="hover:text-amber-400 transition nav-item opacity-0">Rolex</a>
            <a href="#sveston" class="hover:text-amber-400 transition nav-item opacity-0">Sveston</a>
            <a href="#heritage" class="hover:text-amber-400 transition nav-item opacity-0">Our Heritage</a>
        </div>
        <button class="border border-amber-500/30 px-6 py-2 text-xs tracking-widest uppercase text-amber-400 hover:bg-amber-500/10 transition rounded-sm nav-item opacity-0">
            Discover
        </button>
    </nav>

    <!-- Hero Section -->
    <section class="relative min-h-screen flex flex-col justify-center items-center px-4 pt-20 overflow-hidden z-10">
        <div class="text-center max-w-4xl">
            <p id="hero-sub" class="text-xs tracking-[0.4em] uppercase text-amber-500/80 mb-4 opacity-0 transform translate-y-4">Crafting Eternity</p>
            <h1 id="hero-title" class="serif text-5xl md:text-8xl font-light tracking-tight leading-tight mb-8 opacity-0 transform translate-y-8">
                The Ultimate Definition <br><span class="italic text-gray-400">of Prestige.</span>
            </h1>
        </div>

        <!-- Hero Watch Showcase (Centerpiece) -->
        <div id="hero-watch-container" class="relative w-72 h-96 md:w-96 md:h-[450px] mt-6 opacity-0 transform scale-95 flex justify-center">
            <!-- Hyper-realistic lighting effect behind watch -->
            <div class="absolute inset-0 bg-gradient-to-t from-amber-500/20 to-transparent blur-3xl rounded-full opacity-60 mix-blend-screen"></div>
            <!-- Placeholder for Premium Watch Image -->
            <img src="https://images.unsplash.com/photo-1547996160-81dfa63595aa?auto=format&fit=crop&q=80&w=800" 
                 alt="Luxury Watch Showcase" 
                 class="h-full object-contain drop-shadow-[0_35px_35px_rgba(0,0,0,0.8)] filter brightness-110 contrast-105">
        </div>
    </section>

    <hr class="border-white/5 my-0">

    <!-- Rolex Brand Section -->
    <section id="rolex" class="py-32 px-8 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center relative z-10">
        <div class="space-y-8 scroll-anim-left">
            <div class="flex items-center space-x-4">
                <span class="h-[1px] w-12 bg-emerald-600"></span>
                <span class="text-xs uppercase tracking-widest text-emerald-500 font-semibold">The Crown Standard</span>
            </div>
            <h2 class="serif text-4xl md:text-6xl font-light tracking-wide">Rolex Oyster Perpetual</h2>
            <p class="text-gray-400 font-light leading-relaxed max-w-md text-sm md:text-base">
                An icon of architectural excellence and horological dominance. Built to withstand the deepest oceans while commanding the highest boardrooms. Crafted in patented Oystersteel for unrivaled luster and durability.
            </p>
            <div class="pt-4">
                <button class="bg-emerald-800/20 hover:bg-emerald-800/40 border border-emerald-500/30 text-emerald-400 px-8 py-4 text-xs uppercase tracking-widest font-semibold transition-all">
                    Explore Rolex Collection
                </button>
            </div>
        </div>
        <div class="relative justify-self-center lg:justify-self-end scroll-anim-right">
            <div class="absolute -inset-4 bg-emerald-950/20 rounded-xl blur-2xl -z-10"></div>
            <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&q=80&w=800" 
                 alt="Rolex Showcase" 
                 class="w-80 md:w-[420px] rounded-sm shadow-2xl border border-white/5 object-cover h-[500px] filter grayscale contrast-125 hover:grayscale-0 transition-all duration-700">
        </div>
    </section>

    <!-- Sveston Brand Section -->
    <section id="sveston" class="py-32 px-8 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center relative z-10">
        <div class="order-2 lg:order-1 relative justify-self-center lg:justify-self-start scroll-anim-left">
            <div class="absolute -inset-4 bg-amber-950/20 rounded-xl blur-2xl -z-10"></div>
            <img src="https://images.unsplash.com/photo-1614162692292-7ac56d7f7f1e?auto=format&fit=crop&q=80&w=800" 
                 alt="Sveston Showcase" 
                 class="w-80 md:w-[420px] rounded-sm shadow-2xl border border-white/5 object-cover h-[500px] filter brightness-90 contrast-110 hover:brightness-100 transition-all duration-700">
        </div>
        <div class="space-y-8 order-1 lg:order-2 lg:pl-16 scroll-anim-right">
            <div class="flex items-center space-x-4">
                <span class="h-[1px] w-12 bg-amber-500"></span>
                <span class="text-xs uppercase tracking-widest text-amber-400 font-semibold">Contemporary Luxury</span>
            </div>
            <h2 class="serif text-4xl md:text-6xl font-light tracking-wide">Sveston Masterpiece</h2>
            <p class="text-gray-400 font-light leading-relaxed max-w-md text-sm md:text-base">
                Merging avant-garde design metrics with accessible haute horology. Bold geometric silhouettes meeting precise Japanese quartz and automatic movements designed for the modern trendsetter.
            </p>
            <div class="pt-4">
                <button class="bg-amber-500/10 hover:bg-amber-500/20 border border-amber-500/30 text-amber-400 px-8 py-4 text-xs uppercase tracking-widest font-semibold transition-all">
                    Explore Sveston Collection
                </button>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="border-t border-white/5 bg-black/40 py-12 px-8 text-center text-xs text-gray-500 tracking-widest uppercase relative z-10">
        &copy; 2026 HORO Timepieces. All Rights Reserved. Prototype Experience.
    </footer>

    <!-- GSAP Professional Animation Scripts -->
    <script>
        // Register ScrollTrigger Plugin
        gsap.registerPlugin(ScrollTrigger);

        // --- 1. HERO ENTRANCE ANIMATION (On Load) ---
        window.addEventListener('DOMContentLoaded', () => {
            const tl = gsap.timeline();

            // Nav Items cascade in smoothly
            tl.to('.nav-item', {
                opacity: 1,
                y: 0,
                duration: 0.8,
                stagger: 0.1,
                ease: 'power3.out'
            });

            // Text elements reveal
            tl.to('#hero-sub', {
                opacity: 1,
                y: 0,
                duration: 0.6,
                ease: 'power2.out'
            }, '-=0.4');

            tl.to('#hero-title', {
                opacity: 1,
                y: 0,
                duration: 1,
                ease: 'power4.out'
            }, '-=0.4');

            // The centerpiece watch floats and scales elegantly into view
            tl.to('#hero-watch-container', {
                opacity: 1,
                scale: 1,
                duration: 1.4,
                ease: 'power3.out'
            }, '-=0.6');

            // Continuous micro-floating animation for the hero watch
            gsap.to('#hero-watch-container img', {
                y: -12,
                duration: 3,
                repeat: -1,
                yoyo: true,
                ease: 'sine.inOut'
            });
        });

        // --- 2. SCROLL ANIMATIONS (Trigger on Scroll down) ---
        
        // Left column sliding elements
        gsap.utils.toArray('.scroll-anim-left').forEach(element => {
            gsap.fromTo(element, 
                { opacity: 0, x: -50 },
                { 
                    opacity: 1, 
                    x: 0, 
                    duration: 1, 
                    ease: 'power3.out',
                    scrollTrigger: {
                        trigger: element,
                        start: 'top 80%', // Starts animation when element is 80% from the top of viewport
                        toggleActions: 'play none none none'
                    }
                }
            );
        });

        // Right column sliding elements
        gsap.utils.toArray('.scroll-anim-right').forEach(element => {
            gsap.fromTo(element, 
                { opacity: 0, x: 50 },
                { 
                    opacity: 1, 
                    x: 0, 
                    duration: 1, 
                    ease: 'power3.out',
                    scrollTrigger: {
                        trigger: element,
                        start: 'top 80%',
                        toggleActions: 'play none none none'
                    }
                }
            );
        });
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
405KB
Transfer Size
689KB
Content Size
437.0ms
Dom Content Loaded
904.0ms
First Paint
818.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