Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ferrari vs F1 - The Legendary Journey</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --ferrari-red: #DC143C; | |
| --ferrari-dark: #8B0000; | |
| --ferrari-gold: #FFD700; | |
| --dark-bg: #0a0a0a; | |
| --card-bg: rgba(255, 255, 255, 0.05); | |
| --text-primary: #ffffff; | |
| --text-secondary: #b0b0b0; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); | |
| color: var(--text-primary); | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| } | |
| /* Header */ | |
| header { | |
| background: linear-gradient(90deg, var(--ferrari-dark) 0%, var(--ferrari-red) 100%); | |
| padding: 1rem 2rem; | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| box-shadow: 0 4px 20px rgba(220, 20, 60, 0.3); | |
| } | |
| .header-content { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| } | |
| .logo i { | |
| font-size: 2rem; | |
| color: var(--ferrari-gold); | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| } | |
| nav a { | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| transition: all 0.3s; | |
| padding: 0.5rem 1rem; | |
| border-radius: 25px; | |
| } | |
| nav a:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| transform: translateY(-2px); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| margin-top: 80px; | |
| height: 70vh; | |
| background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)), | |
| url('https://picsum.photos/seed/ferrarif1/1920/1080.jpg'); | |
| background-size: cover; | |
| background-position: center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, var(--ferrari-red), transparent); | |
| animation: sweep 3s infinite; | |
| } | |
| @keyframes sweep { | |
| 0% { left: -100%; } | |
| 100% { left: 100%; } | |
| } | |
| .hero-content { | |
| text-align: center; | |
| z-index: 1; | |
| animation: fadeInUp 1s; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .hero h1 { | |
| font-size: 4rem; | |
| margin-bottom: 1rem; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.8); | |
| background: linear-gradient(45deg, var(--ferrari-red), var(--ferrari-gold)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero p { | |
| font-size: 1.5rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 2rem; | |
| } | |
| .cta-button { | |
| background: linear-gradient(45deg, var(--ferrari-red), var(--ferrari-dark)); | |
| color: white; | |
| padding: 1rem 2rem; | |
| border: none; | |
| border-radius: 50px; | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4); | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 20px rgba(220, 20, 60, 0.6); | |
| } | |
| /* Stats Section */ | |
| .stats-section { | |
| padding: 4rem 2rem; | |
| background: linear-gradient(180deg, var(--dark-bg), #1a1a1a); | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .section-title { | |
| text-align: center; | |
| font-size: 2.5rem; | |
| margin-bottom: 3rem; | |
| position: relative; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 100px; | |
| height: 3px; | |
| background: linear-gradient(90deg, var(--ferrari-red), var(--ferrari-gold)); | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 4rem; | |
| } | |
| .stat-card { | |
| background: var(--card-bg); | |
| border: 1px solid rgba(220, 20, 60, 0.3); | |
| border-radius: 15px; | |
| padding: 2rem; | |
| text-align: center; | |
| transition: all 0.3s; | |
| backdrop-filter: blur(10px); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--ferrari-red); | |
| box-shadow: 0 10px 30px rgba(220, 20, 60, 0.3); | |
| } | |
| .stat-number { | |
| font-size: 3rem; | |
| font-weight: bold; | |
| background: linear-gradient(45deg, var(--ferrari-red), var(--ferrari-gold)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .stat-label { | |
| color: var(--text-secondary); | |
| margin-top: 0.5rem; | |
| } | |
| /* Timeline */ | |
| .timeline-section { | |
| padding: 4rem 2rem; | |
| background: linear-gradient(180deg, #1a1a1a, var(--dark-bg)); | |
| } | |
| .timeline { | |
| position: relative; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 50%; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(180deg, var(--ferrari-red), var(--ferrari-gold)); | |
| transform: translateX(-50%); | |
| } | |
| .timeline-item { | |
| position: relative; | |
| width: 50%; | |
| padding: 2rem; | |
| opacity: 0; | |
| animation: fadeIn 1s forwards; | |
| } | |
| .timeline-item:nth-child(odd) { | |
| left: 0; | |
| text-align: right; | |
| } | |
| .timeline-item:nth-child(even) { | |
| left: 50%; | |
| } | |
| .timeline-content { | |
| background: var(--card-bg); | |
| border: 1px solid rgba(220, 20, 60, 0.3); | |
| border-radius: 10px; | |
| padding: 1.5rem; | |
| backdrop-filter: blur(10px); | |
| transition: all 0.3s; | |
| } | |
| .timeline-content:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 5px 20px rgba(220, 20, 60, 0.4); | |
| } | |
| .timeline-dot { | |
| position: absolute; | |
| top: 2rem; | |
| width: 20px; | |
| height: 20px; | |
| background: var(--ferrari-red); | |
| border: 3px solid var(--ferrari-gold); | |
| border-radius: 50%; | |
| box-shadow: 0 0 20px rgba(220, 20, 60, 0.5); | |
| } | |
| .timeline-item:nth-child(odd) .timeline-dot { | |
| right: -10px; | |
| } | |
| .timeline-item:nth-child(even) .timeline-dot { | |
| left: -10px; | |
| } | |
| @keyframes fadeIn { | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| /* Drivers Section */ | |
| .drivers-section { | |
| padding: 4rem 2rem; | |
| background: linear-gradient(180deg, var(--dark-bg), #1a1a1a); | |
| } | |
| .drivers-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .driver-card { | |
| background: var(--card-bg); | |
| border: 1px solid rgba(220, 20, 60, 0.3); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| transition: all 0.3s; | |
| backdrop-filter: blur(10px); | |
| } | |
| .driver-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 40px rgba(220, 20, 60, 0.4); | |
| } | |
| .driver-image { | |
| height: 200px; | |
| background: linear-gradient(135deg, var(--ferrari-red), var(--ferrari-dark)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 4rem; | |
| color: var(--ferrari-gold); | |
| } | |
| .driver-info { | |
| padding: 1.5rem; | |
| } | |
| .driver-name { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .driver-stats { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 1rem; | |
| padding-top: 1rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .driver-stat { | |
| text-align: center; | |
| } | |
| .driver-stat-value { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| color: var(--ferrari-red); | |
| } | |
| .driver-stat-label { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Comparison Section */ | |
| .comparison-section { | |
| padding: 4rem 2rem; | |
| background: linear-gradient(180deg, #1a1a1a, var(--dark-bg)); | |
| } | |
| .comparison-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .comparison-tabs { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 3rem; | |
| } | |
| .tab-button { | |
| background: var(--card-bg); | |
| border: 1px solid rgba(220, 20, 60, 0.3); | |
| color: var(--text-primary); | |
| padding: 1rem 2rem; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .tab-button.active { | |
| background: linear-gradient(45deg, var(--ferrari-red), var(--ferrari-dark)); | |
| border-color: var(--ferrari-red); | |
| } | |
| .tab-button:hover { | |
| transform: translateY(-2px); | |
| } | |
| .tab-content { | |
| display: none; | |
| animation: fadeInUp 0.5s; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .comparison-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| } | |
| .compare-card { | |
| background: var(--card-bg); | |
| border: 1px solid rgba(220, 20, 60, 0.3); | |
| border-radius: 15px; | |
| padding: 2rem; | |
| backdrop-filter: blur(10px); | |
| } | |
| .compare-title { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--ferrari-gold); | |
| } | |
| .progress-bar { | |
| background: rgba(255, 255, 255, 0.1); | |
| height: 30px; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| margin-bottom: 1rem; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--ferrari-red), var(--ferrari-gold)); | |
| border-radius: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| padding-right: 10px; | |
| color: white; | |
| font-weight: bold; | |
| transition: width 1s ease; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: linear-gradient(90deg, var(--ferrari-dark), var(--ferrari-red)); | |
| padding: 2rem; | |
| text-align: center; | |
| } | |
| .footer-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .social-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 2rem; | |
| margin-top: 1rem; | |
| } | |
| .social-links a { | |
| color: var(--text-primary); | |
| font-size: 1.5rem; | |
| transition: all 0.3s; | |
| } | |
| .social-links a:hover { | |
| color: var(--ferrari-gold); | |
| transform: translateY(-3px); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| nav ul { | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .timeline::before { | |
| left: 30px; | |
| } | |
| .timeline-item { | |
| width: 100%; | |
| left: 0 ; | |
| padding-left: 60px; | |
| text-align: left ; | |
| } | |
| .timeline-dot { | |
| left: 20px ; | |
| } | |
| .comparison-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .drivers-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Loading Animation */ | |
| .loader { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--dark-bg); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s; | |
| } | |
| .loader.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .loader-circle { | |
| width: 60px; | |
| height: 60px; | |
| border: 3px solid transparent; | |
| border-top-color: var(--ferrari-red); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Scroll to top button */ | |
| .scroll-top { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| background: linear-gradient(45deg, var(--ferrari-red), var(--ferrari-dark)); | |
| color: white; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| opacity: 0; | |
| transition: all 0.3s; | |
| z-index: 999; | |
| } | |
| .scroll-top.visible { | |
| opacity: 1; | |
| } | |
| .scroll-top:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 5px 20px rgba(220, 20, 60, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Loader --> | |
| <div class="loader" id="loader"> | |
| <div class="loader-circle"></div> | |
| </div> | |
| <!-- Header --> | |
| <header> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-flag-checkered"></i> | |
| <span>Ferrari vs F1</span> | |
| </div> | |
| <nav> | |
| <ul> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#stats">Statistics</a></li> | |
| <li><a href="#timeline">Timeline</a></li> | |
| <li><a href="#drivers">Drivers</a></li> | |
| <li><a href="#comparison">Comparison</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: white; text-decoration: none; font-size: 0.9rem;">Built with anycoder</a> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="hero-content"> | |
| <h1>The Legend Continues</h1> | |
| <p>Ferrari: The Heart and Soul of Formula 1</p> | |
| <button class="cta-button" onclick="scrollToSection('stats')">Explore Legacy</button> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="stats-section" id="stats"> | |
| <div class="container"> | |
| <h2 class="section-title">Historic Achievements</h2> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-number" data-target="16">0</div> | |
| <div class="stat-label">Constructors' Championships</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" data-target="15">0</div> | |
| <div class="stat-label">Drivers' Championships</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" data-target="241">0</div> | |
| <div class="stat-label">Race Wins</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" data-target="1950">0</div> | |
| <div class="stat-label">Year Founded</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" data-target="1000">0</div> | |
| <div class="stat-label">+ Grands Prix</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" data-target="77">0</div> | |
| <div class="stat-label">Years in F1</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Timeline Section --> | |
| <section class="timeline-section" id="timeline"> | |
| <div class="container"> | |
| <h2 class="section-title">Ferrari F1 Journey</h2> | |
| <div class="timeline"> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="timeline-content"> | |
| <h3>1950</h3> | |
| <p>Ferrari enters Formula 1 in its inaugural season</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="timeline-content"> | |
| <h3>1952</h3> | |
| <p>First Drivers' Championship with Alberto Ascari</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="timeline-content"> | |
| <h3>1961</h3> | |
| <p>Phil Hill secures Drivers' Championship</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="timeline-content"> | |
| <h3>1975-1977</h3> | |
| <p>Niki Lauda era - 2 World Championships</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="timeline-content"> | |
| <h3>2000-2004</h3> | |
| <p>Dominant era with Michael Schumacher - 5 consecutive titles</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="timeline-content"> | |
| <h3>2023</h3> | |
| <p>Continuing the legacy with Charles Leclerc & Carlos Sainz</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Drivers Section --> | |
| <section class="drivers-section" id="drivers"> | |
| <div class="container"> | |
| <h2 class="section-title">Legendary Drivers</h2> | |
| <div class="drivers-grid"> | |
| <div class="driver-card"> | |
| <div class="driver-image"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="driver-info"> | |
| <h3 class="driver-name">Michael Schumacher</h3> | |
| <p>1996-2006, 2010-2012</p> | |
| <div class="driver-stats"> | |
| <div class="driver-stat"> | |
| <div class="driver-stat-value">72</div> | |
| <div class="driver-stat-label">Wins</div> | |
| </div> | |
| <div class="driver-stat"> | |
| <div class="driver-stat-value">5</div> | |
| <div class="driver-stat-label">Titles</div> | |
| </div> | |
| <div class="driver-stat"> | |
| <div class="driver-stat-value">116</div> | |
| <div class="driver-stat-label">Podiums</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="driver-card"> | |
| <div class="driver-image"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="driver-info"> | |
| <h3 class="driver-name">Niki Lauda</h3> | |
| <p>1974-1977</p> | |
| <div class="driver-stats"> | |
| <div class="driver-stat"> | |
| <div class="driver-stat-value">15</div> | |
| <div class="driver-stat-label">Wins</div> | |
| </div> | |
| <div class="driver-stat"> | |
| <div class="driver-stat-value">2</div> | |
| <div class="driver-stat-label">Titles</div> | |
| </div> | |
| <div class="driver-stat"> | |
| <div class="driver-stat-value">35</div> | |
| <div class="driver-stat-label">Podiums</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="driver-card"> | |
| <div class="driver-image"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="driver-info"> | |
| <h3 class="driver-name">Alberto Ascari</h3> | |
| <p>1950-1955</p> | |
| <div class="driver-stats"> | |
| <div class="driver-stat"> | |
| <div class="driver-stat-value">13</div> | |
| <div class="driver-stat-label">Wins</div> | |
| </div> | |
| <div class="driver-stat"> | |
| <div class="driver-stat-value">2</div> | |
| <div class="driver-stat-label">Titles</div> | |
| </div> | |
| <div class="driver-stat"> | |
| <div class="driver-stat-value">17</div> | |
| <div class="driver-stat-label">Podiums</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Comparison Section --> | |
| <section class="comparison-section" id="comparison"> | |
| <div class="comparison-container"> | |
| <h2 class="section-title">Ferrari vs Other Teams</h2> | |
| <div class="comparison-tabs"> | |
| <button class="tab-button active" onclick="switchTab('championships')">Championships</button> | |
| <button class="tab-button" onclick="switchTab('wins')">Race Wins</button> | |
| <button class="tab-button" onclick="switchTab('history')">Legacy</button> | |
| </div> | |
| <div class="tab-content active" id="championships"> | |
| <div class="comparison-grid"> | |
| <div class="compare-card"> | |
| <h3 class="compare-title"><i class="fas fa-trophy"></i> Ferrari</h3> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 100%">16</div> | |
| </div> | |
| <p>Most Constructors' Championships</p> | |
| </div> | |
| <div class="compare-card"> | |
| <h3 class="compare-title"><i class="fas fa-trophy"></i> McLaren</h3> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 50%">8</div> | |
| </div> | |
| <p>8 Constructors' Championships</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="wins"> | |
| <div class="comparison-grid"> | |
| <div class="compare-card"> | |
| <h3 class="compare-title"><i class="fas fa-flag-checkered"></i> Ferrari</h3> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 100%">241</div> | |
| </div> | |
| <p>Most Race Wins in F1 History</p> | |
| </div> | |
| <div class="compare-card"> | |
| <h3 class="compare-title"><i class="fas fa-flag-checkered"></i> Mercedes</h3> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 45%">125</div> | |
| </div> | |
| <p>125 Race Wins</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="history"> | |
| <div class="comparison-grid"> | |
| <div class="compare-card"> | |
| <h3 class="compare-title"><i class="fas fa-history"></i> Ferrari</h3> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 100%">77 Years</div> | |
| </div> | |
| <p>Oldest and most historic team in F1</p> | |
| </div> | |
| <div class="compare-card"> | |
| <h3 class="compare-title"><i class="fas fa-history"></i> Red Bull</h3> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 24%">18 Years</div> | |
| </div> | |
| <p>Joined F1 in 2005</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-content"> | |
| <p>© 2024 Ferrari vs F1. The Prancing Horse Legacy.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-facebook"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Scroll to top button --> | |
| <div class="scroll-top" id="scrollTop" onclick="scrollToTop()"> | |
| <i class="fas fa-arrow-up"></i> | |
| </div> | |
| <script> | |
| // Loader | |
| window.addEventListener('load', () => { | |
| setTimeout(() => { | |
| document.getElementById('loader').classList.add('hidden'); | |
| }, 1000); | |
| }); | |
| // Animated counter | |
| const counters = document.querySelectorAll('.stat-number'); | |
| const speed = 200; | |
| const countUp = () => { | |
| counters.forEach(counter => { | |
| const target = +counter.getAttribute('data-target'); | |
| const count = +counter.innerText; | |
| const increment = target / speed; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + increment); | |
| setTimeout(countUp, 10); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| }); | |
| }; | |
| // Intersection Observer for stats animation | |
| const statsSection = document.querySelector('.stats-section'); | |
| const observerOptions = { | |
| threshold: 0.5 | |
| }; | |
| const statsObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| countUp(); | |
| statsObserver.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| statsObserver.observe(statsSection); | |
| // Smooth scrolling | |
| function scrollToSection(sectionId) { | |
| const section = document.getElementById(sectionId); | |
| section.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Tab switching | |
| function switchTab(tabName) { | |
| const tabs = document.querySelectorAll('.tab-button'); | |
| const contents = document.querySelectorAll('.tab-content'); | |
| tabs.forEach(tab => tab.classList.remove('active')); | |
| contents.forEach(content => content.classList.remove('active')); | |
| event.target.classList.add('active'); | |
| document.getElementById(tabName).classList.add('active'); | |
| // Animate progress bars | |
| const progressBars = document.querySelectorAll('#' + tabName + ' .progress-fill'); | |
| progressBars.forEach(bar => { | |
| const width = bar.style.width; | |
| bar.style.width = '0'; | |
| setTimeout(() => { | |
| bar.style.width = width; | |
| }, 100); | |
| }); | |
| } | |
| // Scroll to top | |
| const scrollTopBtn = document.getElementById('scrollTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| scrollTopBtn.classList.add('visible'); | |
| } else { | |
| scrollTopBtn.classList.remove('visible'); | |
| } | |
| }); | |
| function scrollToTop() { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| } | |
| // Timeline animation on scroll | |
| const timelineItems = document.querySelectorAll('.timeline-item'); | |
| const timelineObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.animationDelay = '0.2s'; | |
| entry.target.style.animationPlayState = 'running'; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| timelineItems.forEach(item => { | |
| item.style.animationPlayState = 'paused'; | |
| timelineObserver.observe(item); | |
| }); | |
| // Add parallax effect to hero section | |
| window.addEventListener('scroll', () => { | |
| const scrolled = window.pageYOffset; | |
| const hero = document.querySelector('.hero'); | |
| hero.style.transform = `translateY(${scrolled * 0.5}px)`; | |
| }); | |
| // Dynamic year update | |
| const currentYear = new Date().getFullYear(); | |
| const yearsInF1 = currentYear - 1950; | |
| document.querySelector('[data-target="77"]').setAttribute('data-target', yearsInF1); | |
| </script> | |
| </body> | |
| </html> |