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

Abrir en el editor Video Publica tu código

Recomendado

2 March 2025

Desplácese para existir

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>

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

Recomendado

Un código del señor Pato

Un código de lebdev

Desplácese para existir

HTML

CSS

JS

Recomendado

Un código del señor Pato

Un código de lebdev

Desplácese para existir

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS