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

35 Gemini123

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

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

अनुशंसित

18 December 2025

ZIP, URL रीराइट और विज्ञापनों के साथ Unity WebGL लोडर

29 June 2025

तुर्की ब्लॉग और पॉडकास्ट HTML टेम्पलेट

22 September 2025

आँकड़ों और अनुकूलन के साथ 3D क्यूब गेम HTML

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>

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

अनुशंसित

ZIP, URL रीराइट और विज्ञापनों के साथ Unity WebGL लोडर

तुर्की ब्लॉग और पॉडकास्ट HTML टेम्पलेट

आँकड़ों और अनुकूलन के साथ 3D क्यूब गेम HTML

HTML

CSS

JS

अनुशंसित

ZIP, URL रीराइट और विज्ञापनों के साथ Unity WebGL लोडर

तुर्की ब्लॉग और पॉडकास्ट HTML टेम्पलेट

आँकड़ों और अनुकूलन के साथ 3D क्यूब गेम HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS