| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Pirate Dance Party</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> |
| <style> |
| .ship-wheel { |
| animation: spin 8s linear infinite; |
| } |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| .pirate-dance { |
| animation: dance 2s ease-in-out infinite alternate; |
| } |
| @keyframes dance { |
| 0% { transform: translateY(0) rotate(-5deg); } |
| 100% { transform: translateY(-20px) rotate(5deg); } |
| } |
| .wave { |
| animation: wave 3s ease-in-out infinite; |
| } |
| @keyframes wave { |
| 0%, 100% { transform: rotate(0deg); } |
| 25% { transform: rotate(5deg); } |
| 75% { transform: rotate(-5deg); } |
| } |
| </style> |
| </head> |
| <body class="bg-amber-50 font-serif"> |
| |
| <div class="fixed inset-0 bg-blue-900 opacity-10 -z-10"></div> |
| |
| |
| <div class="container mx-auto px-4 py-12"> |
| |
| <header class="text-center mb-16" data-aos="fade-down"> |
| <div class="flex justify-center mb-6"> |
| <div class="ship-wheel"> |
| <i data-feather="compass" class="w-16 h-16 text-amber-800"></i> |
| </div> |
| </div> |
| <h1 class="text-5xl md:text-7xl font-bold text-amber-800 mb-4">Pirate Dance Party</h1> |
| <p class="text-xl text-amber-600">The most swashbuckling dance moves on the seven seas!</p> |
| </header> |
|
|
| |
| <section class="mb-20" data-aos="fade-up"> |
| <div class="bg-amber-100 rounded-xl p-8 shadow-xl border-2 border-amber-300 max-w-4xl mx-auto"> |
| <div class="aspect-w-16 aspect-h-9 bg-black rounded-lg overflow-hidden relative"> |
| |
| <div class="absolute inset-0 flex items-center justify-center pirate-dance"> |
| <img src="http://static.photos/vintage/1024x576/42" alt="Pirate dancing" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
| <button class="play-button bg-red-600 hover:bg-red-700 text-white rounded-full p-4 shadow-lg transform transition hover:scale-110"> |
| <i data-feather="play" class="w-8 h-8"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="mt-6 text-center"> |
| <h2 class="text-3xl font-bold text-amber-800 mb-2">"The Jolly Roger Jig"</h2> |
| <p class="text-amber-700 mb-4">Watch Captain Blackbeard's legendary dance moves that sank a thousand ships!</p> |
| <div class="flex justify-center space-x-4"> |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-full font-bold flex items-center"> |
| <i data-feather="download" class="mr-2"></i> Download |
| </button> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-bold flex items-center"> |
| <i data-feather="share-2" class="mr-2"></i> Share |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-20"> |
| <h2 class="text-4xl font-bold text-center text-amber-800 mb-12" data-aos="fade-up">Signature Moves</h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white p-6 rounded-xl shadow-lg border border-amber-200 transform transition hover:scale-105" data-aos="fade-up" data-aos-delay="100"> |
| <div class="text-amber-600 mb-4"> |
| <i data-feather="anchor" class="w-10 h-10"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-amber-800 mb-2">The Anchor Drop</h3> |
| <p class="text-amber-700">A sudden drop to the deck that'll make your crew cheer "Yo ho ho!"</p> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-lg border border-amber-200 transform transition hover:scale-105" data-aos="fade-up" data-aos-delay="200"> |
| <div class="text-amber-600 mb-4"> |
| <i data-feather="trending-up" class="w-10 h-10"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-amber-800 mb-2">The Plank Walk</h3> |
| <p class="text-amber-700">A precarious side-to-side that'll have you walking the line between disaster and delight.</p> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-lg border border-amber-200 transform transition hover:scale-105" data-aos="fade-up" data-aos-delay="300"> |
| <div class="text-amber-600 mb-4"> |
| <i data-feather="wind" class="w-10 h-10"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-amber-800 mb-2">The Cannonball</h3> |
| <p class="text-amber-700">Explosive energy that launches you across the dance floor like a shot from a cannon.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-20" data-aos="fade-up"> |
| <div class="bg-amber-800 text-amber-50 rounded-xl p-8 md:p-12 max-w-4xl mx-auto"> |
| <h2 class="text-3xl font-bold mb-8 text-center">What the Crew Says</h2> |
| <div class="grid md:grid-cols-2 gap-8"> |
| <div class="flex items-start"> |
| <img src="http://static.photos/people/200x200/5" alt="First Mate" class="w-16 h-16 rounded-full border-2 border-amber-300 mr-4 wave"> |
| <div> |
| <p class="italic mb-2">"I've seen many dances in me time, but none as mighty as the Captain's!"</p> |
| <p class="font-bold">- One-Eyed Jack</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <img src="http://static.photos/people/200x200/7" alt="Quartermaster" class="w-16 h-16 rounded-full border-2 border-amber-300 mr-4 wave"> |
| <div> |
| <p class="italic mb-2">"Even the mermaids come up to watch when he starts his jig!"</p> |
| <p class="font-bold">- Salty Sally</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="text-center" data-aos="fade-up"> |
| <h2 class="text-4xl font-bold text-amber-800 mb-6">Ready to Dance Like a Pirate?</h2> |
| <p class="text-xl text-amber-600 mb-8 max-w-2xl mx-auto">Join our newsletter for exclusive pirate dance tutorials, sea shanties, and treasure maps to the best dance floors!</p> |
| <div class="max-w-md mx-auto flex"> |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg border-2 border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500"> |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-r-lg font-bold"> |
| Aye Aye! |
| </button> |
| </div> |
| </section> |
| </div> |
|
|
| |
| <footer class="bg-amber-900 text-amber-100 py-8"> |
| <div class="container mx-auto px-4 text-center"> |
| <div class="flex justify-center space-x-6 mb-6"> |
| <a href="#" class="hover:text-amber-300"><i data-feather="facebook"></i></a> |
| <a href="#" class="hover:text-amber-300"><i data-feather="twitter"></i></a> |
| <a href="#" class="hover:text-amber-300"><i data-feather="instagram"></i></a> |
| <a href="#" class="hover:text-amber-300"><i data-feather="youtube"></i></a> |
| </div> |
| <p class="text-sm">© 2023 Pirate Dance Party. All rights reserved. | <a href="#" class="hover:underline">Terms</a> | <a href="#" class="hover:underline">Privacy</a></p> |
| </div> |
| </footer> |
|
|
| <script> |
| AOS.init({ |
| duration: 800, |
| once: true |
| }); |
| feather.replace(); |
| |
| |
| document.querySelector('.play-button').addEventListener('click', function() { |
| this.innerHTML = '<i data-feather="loader" class="w-8 h-8 animate-spin"></i>'; |
| feather.replace(); |
| |
| |
| setTimeout(() => { |
| alert("Ahoy matey! The pirate dance video would play here in a real implementation!"); |
| this.innerHTML = '<i data-feather="play" class="w-8 h-8"></i>'; |
| feather.replace(); |
| }, 1500); |
| }); |
| |
| |
| window.addEventListener('scroll', function() { |
| const scrollPosition = window.scrollY; |
| const pirate = document.querySelector('.pirate-dance'); |
| if (pirate) { |
| pirate.style.transform = `translateY(${-20 + scrollPosition * 0.1}px) rotate(${5 + scrollPosition * 0.05}deg)`; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
