Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Themeparkify - Ultimate Theme Park Experience</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #FF6B6B; | |
| --secondary-color: #4ECDC4; | |
| --accent-color: #FFE66D; | |
| --dark-color: #2D3436; | |
| --light-color: #F7F9FC; | |
| --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); | |
| --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| line-height: 1.6; | |
| color: var(--dark-color); | |
| overflow-x: hidden; | |
| } | |
| /* Scrollbar Styling */ | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--primary-color); | |
| border-radius: 10px; | |
| } | |
| /* Header & Navigation */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); | |
| z-index: 1000; | |
| transition: all 0.3s ease; | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 5%; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| background: var(--gradient-2); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .logo i { | |
| -webkit-text-fill-color: var(--primary-color); | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--dark-color); | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 3px; | |
| background: var(--primary-color); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary-color); | |
| transform: translateY(-2px); | |
| } | |
| .mobile-menu { | |
| display: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| color: var(--primary-color); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| margin-top: 80px; | |
| height: 100vh; | |
| background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), | |
| url('https://picsum.photos/seed/themepark/1920/1080.jpg') center/cover; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-content { | |
| text-align: center; | |
| color: white; | |
| z-index: 2; | |
| animation: fadeInUp 1s ease; | |
| } | |
| .hero h1 { | |
| font-size: 4rem; | |
| margin-bottom: 1rem; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | |
| } | |
| .hero p { | |
| font-size: 1.5rem; | |
| margin-bottom: 2rem; | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); | |
| } | |
| .cta-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| padding: 1rem 2rem; | |
| border: none; | |
| border-radius: 50px; | |
| font-size: 1.1rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| .btn-primary { | |
| background: var(--gradient-2); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 20px rgba(245, 87, 108, 0.5); | |
| } | |
| .btn-secondary { | |
| background: white; | |
| color: var(--primary-color); | |
| border: 2px solid white; | |
| } | |
| .btn-secondary:hover { | |
| background: transparent; | |
| color: white; | |
| transform: translateY(-3px); | |
| } | |
| /* Floating Animation */ | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, | |
| 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Features Section */ | |
| .features { | |
| padding: 5rem 5%; | |
| background: var(--light-color); | |
| } | |
| .section-title { | |
| text-align: center; | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| background: var(--gradient-1); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .section-subtitle { | |
| text-align: center; | |
| font-size: 1.2rem; | |
| margin-bottom: 3rem; | |
| color: #666; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .feature-card { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 20px; | |
| text-align: center; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 5px; | |
| background: var(--gradient-2); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); | |
| } | |
| .feature-icon { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| background: var(--gradient-3); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .feature-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--dark-color); | |
| } | |
| /* Attractions Section */ | |
| .attractions { | |
| padding: 5rem 5%; | |
| background: white; | |
| } | |
| .attractions-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .attraction-card { | |
| background: white; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .attraction-card:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .attraction-image { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| transition: transform 0.3s ease; | |
| } | |
| .attraction-card:hover .attraction-image { | |
| transform: scale(1.1); | |
| } | |
| .attraction-info { | |
| padding: 1.5rem; | |
| } | |
| .attraction-info h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--dark-color); | |
| } | |
| .attraction-info p { | |
| color: #666; | |
| margin-bottom: 1rem; | |
| } | |
| .attraction-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .thrill-level { | |
| display: flex; | |
| gap: 0.25rem; | |
| } | |
| .thrill-level i { | |
| color: var(--accent-color); | |
| } | |
| /* Ticket Pricing Section */ | |
| .tickets { | |
| padding: 5rem 5%; | |
| background: var(--light-color); | |
| } | |
| .pricing-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .pricing-card { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 2rem; | |
| text-align: center; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .pricing-card.featured { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .pricing-card.featured::before { | |
| content: 'BEST VALUE'; | |
| position: absolute; | |
| top: -15px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--gradient-2); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: bold; | |
| } | |
| .pricing-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); | |
| } | |
| .pricing-card.featured:hover { | |
| transform: scale(1.05) translateY(-10px); | |
| } | |
| .price { | |
| font-size: 3rem; | |
| font-weight: bold; | |
| color: var(--primary-color); | |
| margin: 1rem 0; | |
| } | |
| .price span { | |
| font-size: 1rem; | |
| color: #666; | |
| } | |
| .pricing-features { | |
| list-style: none; | |
| margin: 2rem 0; | |
| } | |
| .pricing-features li { | |
| padding: 0.5rem 0; | |
| color: #666; | |
| } | |
| .pricing-features i { | |
| color: var(--secondary-color); | |
| margin-right: 0.5rem; | |
| } | |
| /* Events Section */ | |
| .events { | |
| padding: 5rem 5%; | |
| background: white; | |
| } | |
| .events-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .event-card { | |
| display: flex; | |
| background: white; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); | |
| margin-bottom: 2rem; | |
| transition: all 0.3s ease; | |
| } | |
| .event-card:hover { | |
| transform: translateX(10px); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); | |
| } | |
| .event-date { | |
| background: var(--gradient-1); | |
| color: white; | |
| padding: 2rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 120px; | |
| } | |
| .event-date .day { | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| } | |
| .event-date .month { | |
| font-size: 1rem; | |
| text-transform: uppercase; | |
| } | |
| .event-details { | |
| padding: 2rem; | |
| flex: 1; | |
| } | |
| .event-details h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--dark-color); | |
| } | |
| .event-details p { | |
| color: #666; | |
| margin-bottom: 1rem; | |
| } | |
| .event-meta { | |
| display: flex; | |
| gap: 2rem; | |
| color: #666; | |
| } | |
| .event-meta i { | |
| color: var(--primary-color); | |
| margin-right: 0.5rem; | |
| } | |
| /* Gallery Section */ | |
| .gallery { | |
| padding: 5rem 5%; | |
| background: var(--light-color); | |
| } | |
| .gallery-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 1rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .gallery-item { | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 15px; | |
| height: 250px; | |
| cursor: pointer; | |
| } | |
| .gallery-item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.3s ease; | |
| } | |
| .gallery-item:hover img { | |
| transform: scale(1.1); | |
| } | |
| .gallery-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); | |
| display: flex; | |
| align-items: flex-end; | |
| padding: 1rem; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .gallery-item:hover .gallery-overlay { | |
| opacity: 1; | |
| } | |
| .gallery-overlay h4 { | |
| color: white; | |
| font-size: 1.2rem; | |
| } | |
| /* Contact Section */ | |
| .contact { | |
| padding: 5rem 5%; | |
| background: white; | |
| } | |
| .contact-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 3rem; | |
| } | |
| .contact-info { | |
| padding: 2rem; | |
| } | |
| .contact-info h3 { | |
| font-size: 2rem; | |
| margin-bottom: 2rem; | |
| color: var(--dark-color); | |
| } | |
| .contact-item { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .contact-item i { | |
| font-size: 1.5rem; | |
| color: var(--primary-color); | |
| margin-right: 1rem; | |
| width: 30px; | |
| } | |
| .contact-form { | |
| background: var(--light-color); | |
| padding: 2rem; | |
| border-radius: 20px; | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| color: var(--dark-color); | |
| font-weight: 500; | |
| } | |
| .form-group input, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 10px; | |
| font-size: 1rem; | |
| transition: border-color 0.3s ease; | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark-color); | |
| color: white; | |
| padding: 3rem 5%; | |
| } | |
| .footer-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .footer-section h4 { | |
| margin-bottom: 1rem; | |
| color: var(--accent-color); | |
| } | |
| .footer-section ul { | |
| list-style: none; | |
| } | |
| .footer-section ul li { | |
| margin-bottom: 0.5rem; | |
| } | |
| .footer-section a { | |
| color: #ccc; | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .footer-section a:hover { | |
| color: var(--primary-color); | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .social-links a { | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| } | |
| .social-links a:hover { | |
| background: var(--primary-color); | |
| transform: translateY(-3px); | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| margin-top: 2rem; | |
| padding-top: 2rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .mobile-menu { | |
| display: block; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| } | |
| .event-card { | |
| flex-direction: column; | |
| } | |
| .contact-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| } | |
| } | |
| /* Mobile Navigation Menu */ | |
| .mobile-nav { | |
| position: fixed; | |
| top: 0; | |
| right: -100%; | |
| width: 80%; | |
| height: 100vh; | |
| background: white; | |
| box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); | |
| transition: right 0.3s ease; | |
| z-index: 1001; | |
| padding: 2rem; | |
| } | |
| .mobile-nav.active { | |
| right: 0; | |
| } | |
| .mobile-nav-links { | |
| list-style: none; | |
| margin-top: 3rem; | |
| } | |
| .mobile-nav-links li { | |
| margin-bottom: 1.5rem; | |
| } | |
| .mobile-nav-links a { | |
| color: var(--dark-color); | |
| text-decoration: none; | |
| font-size: 1.2rem; | |
| font-weight: 500; | |
| transition: color 0.3s ease; | |
| } | |
| .mobile-nav-links a:hover { | |
| color: var(--primary-color); | |
| } | |
| .close-menu { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| color: var(--primary-color); | |
| } | |
| /* Loading Animation */ | |
| .loader { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: white; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s ease; | |
| } | |
| .loader.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .loader-content { | |
| text-align: center; | |
| } | |
| .loader-spinner { | |
| width: 60px; | |
| height: 60px; | |
| border: 5px solid #f3f3f3; | |
| border-top: 5px solid var(--primary-color); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 1rem; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Loading Screen --> | |
| <div class="loader" id="loader"> | |
| <div class="loader-content"> | |
| <div class="loader-spinner"></div> | |
| <h2>Loading Magic...</h2> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <header id="header"> | |
| <nav> | |
| <div class="logo"> | |
| <i class="fas fa-star"></i> | |
| Themeparkify | |
| </div> | |
| <ul class="nav-links"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#attractions">Attractions</a></li> | |
| <li><a href="#tickets">Tickets</a></li> | |
| <li><a href="#events">Events</a></li> | |
| <li><a href="#gallery">Gallery</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| <li><a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" | |
| style="color: var(--primary-color); font-weight: bold;">Built with anycoder</a></li> | |
| </ul> | |
| <div class="mobile-menu" id="mobileMenu"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Mobile Navigation --> | |
| <div class="mobile-nav" id="mobileNav"> | |
| <div class="close-menu" id="closeMenu"> | |
| <i class="fas fa-times"></i> | |
| </div> | |
| <ul class="mobile-nav-links"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#attractions">Attractions</a></li> | |
| <li><a href="#tickets">Tickets</a></li> | |
| <li><a href="#events">Events</a></li> | |
| <li><a href="#gallery">Gallery</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| <li><a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a></li> | |
| </ul> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="hero-content floating"> | |
| <h1>Where Dreams Come to Life</h1> | |
| <p>Experience the ultimate adventure at Themeparkify!</p> | |
| <div class="cta-buttons"> | |
| <a href="#tickets" class="btn btn-primary">Book Tickets Now</a> | |
| <a href="#attractions" class="btn btn-secondary">Explore Rides</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features"> | |
| <h2 class="section-title">Why Choose Themeparkify?</h2> | |
| <p class="section-subtitle">Unforgettable experiences await at every corner</p> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| <h3>Thrilling Rides</h3> | |
| <p>Experience heart-pounding excitement with our world-class roller coasters and attractions.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3>Family Fun</h3> | |
| <p>Create lasting memories with rides and activities for all ages in our family zones.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-ticket-alt"></i> | |
| </div> | |
| <h3>Best Prices</h3> | |
| <p>Get the best value with our flexible ticket options and special seasonal offers.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3>Safety First</h3> | |
| <p>Your safety is our priority with world-class safety measures and trained staff.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Attractions Section --> | |
| <section class="attractions" id="attractions"> | |
| <h2 class="section-title">Featured Attractions</h2> | |
| <p class="section-subtitle">Discover our most popular rides and experiences</p> | |
| <div class="attractions-grid"> | |
| <div class="attraction-card"> | |
| <img src="https://picsum.photos/seed/rollercoaster/400/300.jpg" alt="Thunder Bolt" class="attraction-image"> | |
| <div class="attraction-info"> | |
| <h3>Thunder Bolt</h3> | |
| <p>Experience the ultimate adrenaline rush on our fastest coaster!</p> | |
| <div class="attraction-meta"> | |
| <div class="thrill-level"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span>Min Height: 140cm</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="attraction-card"> | |
| <img src="https://picsum.photos/seed/waterride/400/300.jpg" alt="Splash Mountain" class="attraction-image"> | |
| <div class="attraction-info"> | |
| <h3>Splash Mountain</h3> | |
| <p>Cool down with this refreshing water adventure!</p> | |
| <div class="attraction-meta"> | |
| <div class="thrill-level"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span>Min Height: 120cm</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="attraction-card"> | |
| <img src="https://picsum.photos/seed/ferriswheel/400/300.jpg" alt="Sky Wheel" class="attraction-image"> | |
| <div class="attraction-info"> | |
| <h3>Sky Wheel</h3> | |
| <p>Get a bird's eye view of the entire park!</p> | |
| <div class="attraction-meta"> | |
| <div class="thrill-level"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| <i class="far fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span>All Ages</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="attraction-card"> | |
| <img src="https://picsum.photos/seed/haunted/400/300.jpg" alt="Haunted Mansion" class="attraction-image"> | |
| <div class="attraction-info"> | |
| <h3>Haunted Mansion</h3> | |
| <p>Dare to enter our spooky haunted house!</p> | |
| <div class="attraction-meta"> | |
| <div class="thrill-level"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span>Min Height: 110cm</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="attraction-card"> | |
| <img src="https://picsum.photos/seed/carousel/400/300.jpg" alt="Magic Carousel" class="attraction-image"> | |
| <div class="attraction-info"> | |
| <h3>Magic Carousel</h3> | |
| <p>A classic ride perfect for the little ones!</p> | |
| <div class="attraction-meta"> | |
| <div class="thrill-level"> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| <i class="far fa-star"></i> | |
| <i class="far fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span>All Ages</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="attraction-card"> | |
| <img src="https://picsum.photos/seed/pendulum/400/300.jpg" alt="Giant Pendulum" class="attraction-image"> | |
| <div class="attraction-info"> | |
| <h3>Giant Pendulum</h3> | |
| <p>Swing to new heights on this thrilling ride!</p> | |
| <div class="attraction-meta"> | |
| <div class="thrill-level"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span>Min Height: 130cm</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Ticket Pricing Section --> | |
| <section class="tickets" id="tickets"> | |
| <h2 class="section-title">Ticket Pricing</h2> | |
| <p class="section-subtitle">Choose the perfect ticket for your adventure</p> | |
| <div class="pricing-grid"> | |
| <div class="pricing-card"> | |
| <h3>General Admission</h3> | |
| <div class="price">$49<span>/person</span></div> | |
| <ul class="pricing-features"> | |
| <li><i class="fas fa-check"></i> Full day access</li> | |
| <li><i class="fas fa-check"></i> All general rides</li> | |
| <li><i class="fas fa-check"></i> Park map included</li> | |
| <li><i class="fas fa-check"></i> Free parking</li> | |
| <li><i class="fas fa-times" style="color: #ccc;"></i> Fast pass</li> | |
| </ul> | |
| <button class="btn btn-primary" style="width: 100%;">Buy Now</button> | |
| </div> | |
| <div class="pricing-card featured"> | |
| <h3>Premium Pass</h3> | |
| <div class="price">$79<span>/person</span></div> | |
| <ul class="pricing-features"> | |
| <li><i class="fas fa-check"></i> Full day access</li> | |
| <li><i class="fas fa-check"></i> All rides included</li> | |
| <li><i class="fas fa-check"></i> Fast pass included</li> | |
| <li><i class="fas fa-check"></i> Priority parking</li> | |
| <li><i class="fas fa-check"></i> Meal voucher</li> | |
| </ul> | |
| <button class="btn btn-primary" style="width: 100%;">Buy Now</button> | |
| </div> | |
| <div class="pricing-card"> | |
| <h3>Family Package</h3> | |
| <div class="price">$179<span>/family (4)</span></div> | |
| <ul class="pricing-features"> | |
| <li><i class="fas fa-check"></i> 4 General tickets</li> | |
| <li><i class="fas fa-check"></i> Family fast pass</li> | |
| <li><i class="fas fa-check"></i> Group discounts</li> | |
| <li><i class="fas fa-check"></i> Photo package</li> | |
| <li><i class="fas fa-check"></i> Kids meal included</li> | |
| </ul> | |
| <button class="btn btn-primary" style="width: 100%;">Buy Now</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Events Section --> | |
| <section class="events" id="events"> | |
| <h2 class="section-title">Upcoming Events</h2> | |
| <p class="section-subtitle">Don't miss our special events and celebrations</p> | |
| <div class="events-container"> | |
| <div class="event-card"> | |
| <div class="event-date"> | |
| <div class="day">25</div> | |
| <div class="month">DEC</div> | |
| </div> | |
| <div class="event-details"> | |
| <h3>Winter Wonderland Festival</h3> | |
| <p>Experience the magic of winter with special holiday shows, festive decorations, and seasonal treats!</p> | |
| <div class="event-meta"> | |
| <span><i class="fas fa-clock"></i> 10:00 AM - 10:00 PM</span> | |
| <span><i class="fas fa-ticket-alt"></i> Special pricing</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="event-card"> | |
| <div class="event-date"> | |
| <div class="day">01</div> | |
| <div class="month">JAN</div> | |
| </div> | |
| <div class="event-details"> | |
| <h3>New Year Celebration</h3> | |
| <p>Ring in the new year with spectacular fireworks, live music, and extended park hours!</p> | |
| <div class="event-meta"> | |
| <span><i class="fas fa-clock"></i> 10:00 AM - 1:00 AM</span> | |
| <span><i class="fas fa-ticket-alt"></i> Premium tickets only</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="event-card"> | |
| <div class="event-date"> | |
| <div class="day">14</div> | |
| <div class="month">FEB</div> | |
| </div> | |
| <div class="event-details"> | |
| <h3> |