Temporizador de cuenta regresiva y zona de fanáticos del Super Bowl LIX

924 Gemini123

Abrir en el editor Publica tu código

Temporizador de cuenta regresiva y zona de fanáticos del Super Bowl LIX

Recomendado

20 September 2025

Demostración de girasoles, luciérnagas y fuegos artificiales animados con CSS

15 September 2025

Ejemplo de animación de cuadrícula CSS

19 December 2025

Plantilla de formulario de inicio de sesión HTML con inicio de sesión social

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Super Bowl LIX | Countdown & Fan Zone</title>
    <style>
        :root {
            --nfl-blue: #013369;
            --nfl-red: #D50A0A;
            --nfl-white: #FFFFFF;
            --nfl-silver: #A5ACAF;
            --dark-bg: #111;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial Black', sans-serif;
        }

body {
            background-color: var(--dark-bg);
            color: var(--nfl-white);
            overflow-x: hidden;
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                        url('https://images.unsplash.com/photo-1566577739112-5180d4bf9390?auto=format&fit=crop&q=80&w=1600') center/cover;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
        }

.hero h1 {
            font-size: 4rem;
            text-transform: uppercase;
            margin-bottom: 10px;
            letter-spacing: 2px;
            text-shadow: 3px 3px var(--nfl-red);
        }

.hero p {
            font-size: 1.5rem;
            margin-bottom: 30px;
            color: var(--nfl-silver);
        }

/* Countdown Timer */
        .countdown-container {
            display: flex;
            gap: 20px;
            margin-bottom: 40px;
        }

.time-box {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 20px;
            border-radius: 10px;
            min-width: 120px;
            border-bottom: 5px solid var(--nfl-red);
        }

.time-box span {
            display: block;
            font-size: 3rem;
            color: var(--nfl-white);
        }

.time-box label {
            font-size: 0.8rem;
            text-transform: uppercase;
            color: var(--nfl-silver);
        }

/* Ad Section */
        .ad-section {
            padding: 80px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

.section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 50px;
            color: var(--nfl-white);
        }

.ad-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

.ad-card {
            background: #222;
            border-radius: 15px;
            overflow: hidden;
            transition: transform 0.3s ease;
            border: 1px solid #333;
        }

.ad-card:hover {
            transform: translateY(-10px);
        }

.ad-image {
            height: 200px;
            background-color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: var(--nfl-silver);
            background-size: cover;
            background-position: center;
        }

.ad-content {
            padding: 20px;
        }

.ad-content h3 {
            color: var(--nfl-red);
            margin-bottom: 10px;
        }

.ad-content p {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            margin-bottom: 20px;
            color: #ccc;
        }

.btn {
            display: inline-block;
            padding: 12px 25px;
            background: var(--nfl-blue);
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.3s;
        }

.btn:hover {
            background: #02458d;
        }

footer {
            text-align: center;
            padding: 40px;
            background: #000;
            color: #555;
            font-size: 0.9rem;
        }

@media (max-width: 768px) {
            .hero h1 { font-size: 2.5rem; }
            .countdown-container { gap: 10px; flex-wrap: wrap; justify-content: center; }
            .time-box { min-width: 80px; padding: 10px; }
            .time-box span { font-size: 1.8rem; }
        }
    </style>
</head>
<body>

<section class="hero">
        <p>THE ROAD TO NEW ORLEANS</p>
        <h1>SUPER BOWL LIX</h1>
        
        <div class="countdown-container">
            <div class="time-box">
                <span id="days">00</span>
                <label>Days</label>
            </div>
            <div class="time-box">
                <span id="hours">00</span>
                <label>Hours</label>
            </div>
            <div class="time-box">
                <span id="minutes">00</span>
                <label>Minutes</label>
            </div>
            <div class="time-box">
                <span id="seconds">00</span>
                <label>Seconds</label>
            </div>
        </div>

<a href="#ads" class="btn" style="background: var(--nfl-red);">Explore Game Day Deals</a>
    </section>

<section class="ad-section" id="ads">
        <h2 class="section-title">OFFICIAL PARTNER OFFERS</h2>
        
        <div class="ad-grid">
            
            <div class="ad-card">
                <div class="ad-image" style="background-image: url('https://images.unsplash.com/photo-1566843972142-a7fcb70de55a?auto=format&fit=crop&q=80&w=500')"></div>
                <div class="ad-content">
                    <h3>Official Fan Gear</h3>
                    <p>Get your limited edition Super Bowl LIX jerseys and headwear. 20% off for a limited time.</p>
                    <a href="#" class="btn">Shop Now</a>
                </div>
            </div>

<div class="ad-card">
                <div class="ad-image" style="background-image: url('https://images.unsplash.com/photo-1513135065346-a098a63a71ee?auto=format&fit=crop&q=80&w=500')"></div>
                <div class="ad-content">
                    <h3>Tailgate Catering</h3>
                    <p>Don't cook on game day. Order the "Touchdown Platter" with wings, sliders, and dips.</p>
                    <a href="#" class="btn">Order Feast</a>
                </div>
            </div>

<div class="ad-card">
                <div class="ad-image" style="background-image: url('https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?auto=format&fit=crop&q=80&w=500')"></div>
                <div class="ad-content">
                    <h3>Luxury Suites</h3>
                    <p>Experience the biggest game of the year in ultimate comfort. Inquire about remaining suites.</p>
                    <a href="#" class="btn">Book Suite</a>
                </div>
            </div>
        </div>
    </section>

<footer>
        <p>© 2025 NFL Properties LLC. Super Bowl is a registered trademark. This is a promotional concept page.</p>
    </footer>

const updateCountdown = setInterval(function() {
            const now = new Date().getTime();
            const distance = countdownDate - now;

// Time calculations
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output results
            document.getElementById("days").innerHTML = days.toString().padStart(2, '0');
            document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0');
            document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0');
            document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0');

// If countdown is finished
            if (distance < 0) {
                clearInterval(updateCountdown);
                document.querySelector(".countdown-container").innerHTML = "<h2>GAME TIME!</h2>";
            }
        }, 1000);
    </script>
</body>
</html>

CSS