| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Phonk Music - YouTube Channel</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| </head> |
| <body class="bg-black text-white min-h-screen overflow-x-hidden"> |
| <div id="vanta-bg" class="fixed inset-0 -z-10"></div> |
| <cosmic-navbar></cosmic-navbar> |
| |
| <main class="container mx-auto px-4 py-16 relative z-10"> |
| <div class="text-center mb-20"> |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-red-500"> |
| Phonk Waves |
| </h1> |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto opacity-90"> |
| The hottest phonk tracks uploaded to my YouTube channel |
| </p> |
| </div> |
|
|
| <div class="max-w-4xl mx-auto mb-20"> |
| <div class="bg-gray-900 bg-opacity-50 backdrop-blur-lg rounded-2xl p-8"> |
| <div class="aspect-w-16 aspect-h-9 mb-6"> |
| <iframe class="w-full h-96 rounded-xl" src="https://www.youtube.com/embed?listType=playlist&list=YOUR_PLAYLIST_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| </div> |
| <div class="flex flex-col md:flex-row gap-6"> |
| <div class="flex-1"> |
| <h3 class="text-2xl font-bold mb-3">Latest Uploads</h3> |
| <p class="opacity-80 mb-4">Fresh phonk tracks uploaded weekly. Don't forget to like and subscribe!</p> |
| <a href="YOUR_YOUTUBE_CHANNEL_LINK" target="_blank" class="inline-flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full font-medium"> |
| <i data-feather="youtube" class="w-5 h-5"></i> |
| <span>Visit Channel</span> |
| </a> |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-2xl font-bold mb-3">Tracklist</h3> |
| <div class="space-y-3"> |
| <div class="flex items-center gap-4 p-3 hover:bg-gray-800 rounded-lg transition-colors"> |
| <div class="w-12 h-12 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-lg flex items-center justify-center"> |
| <i data-feather="music" class="text-purple-400"></i> |
| </div> |
| <div class="flex-1"> |
| <div class="font-medium">Track Title 1</div> |
| <div class="text-sm opacity-70">Artist Name</div> |
| </div> |
| <button class="text-purple-400 hover:text-purple-300"> |
| <i data-feather="play"></i> |
| </button> |
| </div> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 mb-20"> |
| <div class="bg-gray-900 bg-opacity-50 backdrop-blur-lg rounded-2xl p-8"> |
| <h3 class="text-2xl font-bold mb-4">About Phonk</h3> |
| <p class="opacity-80 mb-6"> |
| Phonk is a subgenre of hip hop and trap music that originated in the 2010s. It's heavily influenced by 1990s Memphis rap and incorporates chopped and screwed vocals, funk and jazz samples, and distorted basslines. |
| </p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-purple-900/50 text-purple-300 px-3 py-1 rounded-full text-sm">Memphis Rap</span> |
| <span class="bg-purple-900/50 text-purple-300 px-3 py-1 rounded-full text-sm">Chopped & Screwed</span> |
| <span class="bg-purple-900/50 text-purple-300 px-3 py-1 rounded-full text-sm">Trap</span> |
| <span class="bg-purple-900/50 text-purple-300 px-3 py-1 rounded-full text-sm">Lo-Fi</span> |
| </div> |
| </div> |
| <div class="bg-gray-900 bg-opacity-50 backdrop-blur-lg rounded-2xl p-8"> |
| <h3 class="text-2xl font-bold mb-4">Follow Me</h3> |
| <p class="opacity-80 mb-6"> |
| Stay updated with my latest phonk uploads and mixes across all platforms. |
| </p> |
| <div class="space-y-3"> |
| <a href="#" class="flex items-center gap-3 p-3 hover:bg-gray-800 rounded-lg transition-colors"> |
| <div class="w-10 h-10 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-lg flex items-center justify-center"> |
| <i data-feather="twitter" class="text-blue-400"></i> |
| </div> |
| <span>Twitter</span> |
| </a> |
| <a href="#" class="flex items-center gap-3 p-3 hover:bg-gray-800 rounded-lg transition-colors"> |
| <div class="w-10 h-10 bg-gradient-to-br from-pink-500/20 to-red-500/20 rounded-lg flex items-center justify-center"> |
| <i data-feather="instagram" class="text-pink-400"></i> |
| </div> |
| <span>Instagram</span> |
| </a> |
| <a href="#" class="flex items-center gap-3 p-3 hover:bg-gray-800 rounded-lg transition-colors"> |
| <div class="w-10 h-10 bg-gradient-to-br from-gray-500/20 to-gray-700/20 rounded-lg flex items-center justify-center"> |
| <i data-feather="github" class="text-gray-400"></i> |
| </div> |
| <span>SoundCloud</span> |
| </a> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <cosmic-footer></cosmic-footer> |
|
|
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| </body> |
| </html> |
