HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
366x251
96.3 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>Happy Birthday Mom ❤️ - Maria Gonzalez</title>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #ffeef8 0%, #fff5f7 50%, #fef4f8 100%);
            color: #4a4a4a;
            overflow-x: hidden;
            position: relative;
        }

        /* Floating Hearts Animation */
        .hearts {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
        }

        .heart {
            position: absolute;
            color: #ff69b4;
            font-size: 20px;
            animation: float 6s infinite linear;
        }

        @keyframes float {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 1; }
            100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
        }

        /* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), 
                        url('https://images.unsplash.com/photo-1511895352882-4d6322a2b4b0?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover;
            animation: fadeIn 2s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .hero h1 {
            font-family: 'Dancing Script', cursive;
            font-size: clamp(3rem, 8vw, 6rem);
            background: linear-gradient(45deg, #ff69b4, #ffd700, #ff1493);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1rem;
            animation: glow 2s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from { text-shadow: 0 0 20px #ff69b4; }
            to { text-shadow: 0 0 30px #ffd700; }
        }

        .hero p {
            font-size: clamp(1.1rem, 3vw, 1.5rem);
            max-width: 800px;
            line-height: 1.6;
            margin-bottom: 2rem;
            animation: fadeInUp 1s ease-out 0.5s both;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Navigation */
        .nav {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 100;
        }

        .nav a {
            display: inline-block;
            background: rgba(255,255,255,0.9);
            padding: 12px 24px;
            margin: 0 5px;
            border-radius: 50px;
            text-decoration: none;
            color: #ff69b4;
            font-weight: 600;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .nav a:hover {
            background: #ff69b4;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255,105,180,0.4);
        }

        /* Sections */
        section {
            padding: 100px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        h2 {
            font-family: 'Dancing Script', cursive;
            font-size: clamp(2.5rem, 5vw, 4rem);
            text-align: center;
            margin-bottom: 3rem;
            background: linear-gradient(45deg, #ff69b4, #ffd700);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* About Section */
        .about {
            background: rgba(255,255,255,0.7);
            border-radius: 30px;
            padding: 4rem;
            text-align: center;
            backdrop-filter: blur(10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            animation: fadeInUp 1s ease-out;
        }

        .about p {
            font-size: 1.2rem;
            line-height: 1.8;
            max-width: 800px;
            margin: 0 auto;
        }

        /* Photo Gallery */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .gallery-item {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
            transition: all 0.4s ease;
            cursor: pointer;
        }

        .gallery-item:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 25px 50px rgba(255,105,180,0.3);
        }

        .gallery-item img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        .gallery-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
            padding: 2rem 1.5rem 1.5rem;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

        .gallery-item:hover .gallery-caption {
            transform: translateY(0);
        }

        /* Messages */
        .messages {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .message-card {
            background: rgba(255,255,255,0.9);
            padding: 2.5rem;
            border-radius: 25px;
            text-align: center;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.3);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .message-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.5s;
        }

        .message-card:hover::before {
            left: 100%;
        }

        .message-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px rgba(255,105,180,0.2);
        }

        .message-card i {
            font-size: 3rem;
            color: #ff69b4;
            margin-bottom: 1rem;
        }

        /* Timeline */
        .timeline {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(to bottom, #ff69b4, #ffd700);
            transform: translateX(-50%);
        }

        .timeline-item {
            display: flex;
            margin: 3rem 0;
            position: relative;
            animation: fadeInUp 1s ease-out;
        }

        .timeline-item:nth-child(even) {
            flex-direction: row-reverse;
        }

        .timeline-content {
            width: 45%;
            background: rgba(255,255,255,0.95);
            padding: 2rem;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            position: relative;
        }

        .timeline-content h3 {
            color: #ff69b4;
            font-family: 'Dancing Script', cursive;
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }

        .timeline-dot {
            width: 20px;
            height: 20px;
            background: linear-gradient(45deg, #ff69b4, #ffd700);
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 25px;
            transform: translateX(-50%);
            z-index: 1;
            box-shadow: 0 0 0 4px rgba(255,255,255,0.8);
        }

        /* Video Section */
        .video-section {
            text-align: center;
            background: rgba(255,255,255,0.1);
            border-radius: 30px;
            padding: 4rem;
            backdrop-filter: blur(20px);
        }

        .video-container {
            position: relative;
            max-width: 800px;
            margin: 2rem auto;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.2);
        }

        .video-container iframe {
            width: 100%;
            height: 450px;
            border: none;
        }

        /* Surprise Button */
        .surprise-btn {
            display: block;
            margin: 3rem auto;
            padding: 1.5rem 3rem;
            font-size: 1.5rem;
            font-weight: 600;
            background: linear-gradient(45deg, #ff69b4, #ffd700);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(255,105,180,0.4);
            font-family: 'Dancing Script', cursive;
        }

        .surprise-btn:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 20px 40px rgba(255,105,180,0.6);
        }

        .surprise-message {
            display: none;
            background: linear-gradient(135deg, #ff69b4, #ffd700);
            color: white;
            padding: 3rem;
            border-radius: 25px;
            margin: 2rem auto;
            max-width: 600px;
            text-align: center;
            font-size: 1.4rem;
            font-family: 'Dancing Script', cursive;
            animation: surprisePop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        }

        @keyframes surprisePop {
            0% { transform: scale(0) rotate(180deg); opacity: 0; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

        /* Footer */
        footer {
            background: rgba(0,0,0,0.1);
            padding: 3rem 20px;
            text-align: center;
            backdrop-filter: blur(10px);
        }

        footer p {
            font-family: 'Dancing Script', cursive;
            font-size: 1.8rem;
            color: #4a4a4a;
        }

        /* Music Player */
        .music-player {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: rgba(255,255,255,0.95);
            padding: 1rem;
            border-radius: 50px;
            backdrop-filter: blur(20px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            z-index: 1000;
        }

        .music-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: #ff69b4;
            cursor: pointer;
            margin-right: 0.5rem;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .timeline::before { left: 20px; }
            .timeline-item, .timeline-item:nth-child(even) { flex-direction: column; }
            .timeline-content { width: 100%; margin: 2rem 0; }
            .timeline-dot { left: 20px; }
        }

        /* Confetti Animation */
        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            background: #ff69b4;
            animation: confetti-fall 3s linear infinite;
            z-index: 2000;
        }

        @keyframes confetti-fall {
            0% { transform: translateY(0vh) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }
    </style>
</head>
<body>
    <!-- Floating Hearts -->
    <div class="hearts" id="hearts"></div>

    <!-- Navigation -->
    <nav class="nav">
        <a href="#about"><i class="fas fa-heart"></i> About Mom</a>
        <a href="#gallery"><i class="fas fa-images"></i> Photos</a>
        <a href="#messages"><i class="fas fa-comment"></i> Messages</a>
        <a href="#timeline"><i class="fas fa-road"></i> Timeline</a>
        <a href="#video"><i class="fas fa-video"></i> Video</a>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <h1>Happy Birthday, Mom ❤️</h1>
        <p>Dear Mom, today is all about you. Thank you for your endless love, your sacrifices, and your strength. You are the heart of our family, and we are so lucky to have you. This small surprise is just a way to show how much you mean to me.</p>
    </section>

    <!-- About Section -->
    <section id="about" class="about">
        <h2>About My Mom</h2>
        <p><strong>Maria Gonzalez</strong> is the most caring, strong, and loving person I know. She has always been there through every moment — guiding, supporting, and loving unconditionally. Her smile brings comfort, and her strength inspires everyone around her. She is not just my mother, but my role model and my best friend.</p>
    </section>

    <!-- Photo Gallery -->
    <section id="gallery">
        <h2 class="section-title">Photo Gallery</h2>
        <div class="gallery">
            <div class="gallery-item" onclick="openLightbox('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')">
                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Family">
                <div class="gallery-caption">
                    <h3>Beautiful memories together</h3>
                </div>
            </div>
            <div class="gallery-item" onclick="openLightbox('https://images.unsplash.com/photo-1511895352882-4d6322a2b4b0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')">
                <img src="https://images.unsplash.com/photo-1511895352882-4d6322a2b4b0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Mom smiling">
                <div class="gallery-caption">
                    <h3>Mom's happiest moments</h3>
                </div>
            </div>
            <div class="gallery-item" onclick="openLightbox('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')">
                <img src="https://images
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
307KB
Transfer Size
392KB
Content Size
218.0ms
Dom Content Loaded
312.0ms
First Paint
402.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