HTML ad tag preview - Powered by Ad Reform

Live Preview

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

90x90

5.31 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="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flyer Aniversario El Sistema</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Pacifico&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Montserrat', sans-serif;
            background: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
        .flyer {
            width: 100%;
            max-width: 600px;
            background: linear-gradient(135deg, #fff9e6 0%, #ffefba 100%);
            border: 12px solid #fff;
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
            position: relative;
            overflow: hidden;
            padding: 40px 20px;
            text-align: center;
        }
        /* Decoración de Carnaval */
        .mask-icon {
            position: absolute;
            font-size: 80px;
            opacity: 0.1;
            z-index: 0;
        }
        .title-main {
            font-family: 'Pacifico', cursive;
            color: #d97706;
            text-shadow: 2px 2px 0px rgba(0,0,0,0.05);
        }
        .anniversary-number {
            font-size: 100px;
            font-weight: 900;
            line-height: 1;
            background: linear-gradient(to bottom, #1e3a8a, #3b82f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 10px 0;
        }
        .pentagram {
            border-top: 2px solid #1e3a8a;
            border-bottom: 2px solid #1e3a8a;
            height: 15px;
            margin: 5px 0;
            opacity: 0.3;
        }
        .logo-img {
            max-height: 90px;
            width: auto;
            object-contain: contain;
        }
    </style>
</head>
<body>

    <div class="flyer shadow-2xl rounded-lg">
        <!-- Logos Superiores Ajustados -->
        <div class="flex justify-between items-center mb-8 relative z-10 px-4">
            <!-- Logo Escuela (Izquierda) -->
            <img src="https://i.ibb.co/C5f3gYp/logo-escuela.png" alt="Logo Escuela Vicente Salías" class="logo-img rounded-full bg-white p-1 shadow-sm" onerror="this.src='https://via.placeholder.com/100?text=Escuela'">
            
            <!-- Logo El Sistema (Derecha) -->
            <img src="https://i.ibb.co/3W6nFvB/logo-sistema.png" alt="Logo El Sistema" class="logo-img" onerror="this.src='https://via.placeholder.com/120x80?text=El+Sistema'">
        </div>

        <!-- Encabezado -->
        <h2 class="text-3xl font-bold text-blue-900 mb-2">¡Escuela Vicente Salías!</h2>
        
        <div class="my-6">
            <p class="text-2xl title-main">Celebremos el Carnaval</p>
            <p class="text-lg font-semibold text-gray-700">con el</p>
        </div>

        <!-- Bloque Aniversario -->
        <div class="relative py-4">
            <div class="pentagram"></div>
            <div class="pentagram"></div>
            <h1 class="anniversary-number">51</h1>
            <h3 class="text-4xl font-black text-blue-900 tracking-widest uppercase">Aniversario</h3>
            <div class="pentagram"></div>
            <div class="pentagram"></div>
        </div>

        <!-- Texto Detallado Corregido -->
        <div class="mt-8 px-4 relative z-10">
            <p class="text-xl text-gray-800 leading-relaxed">
                de <span class="font-bold">El Sistema Nacional</span> de Coros <br>
                <span class="text-blue-800 font-bold">Juveniles e Infantiles de Venezuela</span>
            </p>
        </div>

        <!-- Fecha -->
        <div class="mt-10 bg-yellow-400 py-3 rounded-full inline-block px-10 shadow-md">
            <p class="text-2xl font-black text-blue-900">Jueves 12 de Febrero</p>
        </div>

        <!-- Decoraciones Visuales -->
        <div class="mask-icon" style="top: 25%; left: -20px; transform: rotate(15deg);">🎭</div>
        <div class="mask-icon" style="bottom: 15%; right: -20px; transform: rotate(-15deg);">🎻</div>
        
        <!-- Elementos decorativos adicionales -->
        <div class="absolute top-0 left-1/4 w-1 h-20 bg-blue-500 opacity-20 rounded-full"></div>
        <div class="absolute top-10 right-1/4 w-1 h-32 bg-red-500 opacity-20 rounded-full"></div>
        <div class="absolute bottom-5 left-10 text-2xl opacity-30">✨</div>
        <div class="absolute top-20 right-10 text-2xl opacity-30">🎶</div>
    </div>

</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

201KB

Transfer Size

481KB

Content Size

366.0ms

Dom Content Loaded

416.0ms

First Paint

444.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