सुपर बाउल LIX काउंटडाउन टाइमर और फैन ज़ोन

355 Gemini123

संपादक में खोलें Video अपना कोड प्रकाशित करें

सुपर बाउल LIX काउंटडाउन टाइमर और फैन ज़ोन

अनुशंसित

25 November 2025

मूवी वेबसाइट HTML टेम्पलेट | उत्तरदायी और फ़िल्टर करने योग्य

25 September 2025

SVG और जावास्क्रिप्ट के साथ एनिमेटेड CSS चेकबॉक्स

12 December 2025

अंतरिक्ष तथ्य: ब्रह्मांड अन्वेषण और समयरेखा

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>

अनुशंसित

मूवी वेबसाइट HTML टेम्पलेट | उत्तरदायी और फ़िल्टर करने योग्य

SVG और जावास्क्रिप्ट के साथ एनिमेटेड CSS चेकबॉक्स

अंतरिक्ष तथ्य: ब्रह्मांड अन्वेषण और समयरेखा

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS