Spaces:
Running
Running
Design a website for the paranormal research team named White Sage Paranormal. The website should feature a dark, macabre, or spooky theme to it. The website should include a page for contact information, a page for blogs and updates about the research team and our projects, as well as a gallery to post evidence and a media page for uploaded videos of our investigations and other content.
c19288b verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>White Sage Paranormal | Media</title> | |
| <link rel="icon" type="image/x-icon" href="favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| eerie: { | |
| 100: '#d8d8d8', | |
| 200: '#b0b0b0', | |
| 300: '#898989', | |
| 400: '#616161', | |
| 500: '#3a3a3a', | |
| 600: '#2e2e2e', | |
| 700: '#232323', | |
| 800: '#171717', | |
| 900: '#0c0c0c', | |
| }, | |
| sage: { | |
| 100: '#f0f7e8', | |
| 200: '#e1efd1', | |
| 300: '#d2e8ba', | |
| 400: '#c3e0a3', | |
| 500: '#b4d88c', | |
| 600: '#90ad70', | |
| 700: '#6c8254', | |
| 800: '#485638', | |
| 900: '#242b1c', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Creepster&family=EB+Garamond:ital,wght@0,400;0,700;1,400&display=swap'); | |
| .font-creepster { font-family: 'Creepster', cursive; } | |
| .font-garamond { font-family: 'EB Garamond', serif; } | |
| .text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } | |
| .hover-glow:hover { box-shadow: 0 0 15px rgba(180, 216, 140, 0.7); } | |
| .video-container { | |
| position: relative; | |
| padding-bottom: 56.25%; | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .video-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-eerie-900 text-sage-100 font-garamond min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-eerie-800 bg-opacity-90 border-b border-sage-700 sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="wind" class="text-sage-500"></i> | |
| <a href="index.html" class="text-2xl font-creepster text-sage-400 hover:text-sage-300 transition duration-300">WHITE SAGE PARANORMAL</a> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="index.html" class="text-sage-300 hover:text-sage-100 text-lg transition duration-300">Home</a> | |
| <a href="blog.html" class="text-sage-300 hover:text-sage-100 text-lg transition duration-300">Blog</a> | |
| <a href="gallery.html" class="text-sage-300 hover:text-sage-100 text-lg transition duration-300">Gallery</a> | |
| <a href="media.html" class="text-sage-400 hover:text-sage-100 text-lg transition duration-300">Media</a> | |
| <a href="contact.html" class="text-sage-300 hover:text-sage-100 text-lg transition duration-300">Contact</a> | |
| </div> | |
| <button class="md:hidden text-sage-300 focus:outline-none" id="mobile-menu-button"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden pt-4" id="mobile-menu"> | |
| <div class="flex flex-col space-y-2"> | |
| <a href="index.html" class="block px-3 py-2 rounded hover:bg-eerie-700 text-sage-300">Home</a> | |
| <a href="blog.html" class="block px-3 py-2 rounded hover:bg-eerie-700 text-sage-300">Blog</a> | |
| <a href="gallery.html" class="block px-3 py-2 rounded hover:bg-eerie-700 text-sage-300">Gallery</a> | |
| <a href="media.html" class="block px-3 py-2 rounded hover:bg-eerie-700 text-sage-400">Media</a> | |
| <a href="contact.html" class="block px-3 py-2 rounded hover:bg-eerie-700 text-sage-300">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Media Header --> | |
| <section class="relative py-20 bg-eerie-900 bg-opacity-90"> | |
| <div class="absolute inset-0 bg-[url('http://static.photos/black/1024x576/66')] bg-cover bg-center opacity-30"></div> | |
| <div class="container mx-auto px-4 relative z-10 text-center"> | |
| <h1 class="text-5xl md:text-7xl font-creepster text-sage-400 mb-6 text-shadow">PARANORMAL MEDIA</h1> | |
| <p class="text-xl md:text-2xl text-sage-200 mb-8 max-w-3xl mx-auto text-shadow"> | |
| Watch our most compelling evidence and investigation footage captured during our explorations. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Video Section --> | |
| <section class="py-16 bg-eerie-800 bg-opacity-80"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Featured Video --> | |
| <div class="col-span-2"> | |
| <h2 class="text-3xl font-creepster text-sage-400 mb-6 text-shadow">FEATURED INVESTIGATION</h2> | |
| <div class="video-container hover-glow rounded-lg overflow-hidden"> | |
| <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="text-xl font-bold text-sage-300">Willowbrook Asylum Full Investigation</h3> | |
| <p class="text-sage-200 mt-2">Our complete 3-night investigation of the infamous Willowbrook Asylum, including EVP sessions, spirit box communication attempts, and thermal anomalies.</p> | |
| </div> | |
| </div> | |
| <!-- Video Playlist --> | |
| <div> | |
| <h3 class="text-2xl font-creepster text-sage-400 mb-6 text-shadow">RECENT VIDEOS</h3> | |
| <div class="space-y-6"> | |
| <div class="flex gap-4 hover:bg-eerie-700 p-3 rounded-lg transition duration-300"> | |
| <div class="w-1/3 relative"> | |
| <img src="http://static.photos/black/320x180/23" alt="Video thumbnail" class="rounded-lg"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i data-feather="play" class="text-sage-300 w-8 h-8"></i> | |
| </div> | |
| </div> | |
| <div class="w-2/3"> | |
| <h4 class="font-bold text-sage-300">Blackwood Farm Shadow Figure</h4> | |
| <p class="text-sm text-sage-400">October 2023</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-4 hover:bg-eerie-700 p-3 rounded-lg transition duration-300"> | |
| <div class="w-1/3 relative"> | |
| <img src="http://static.photos/black/320x180/45" alt="Video thumbnail" class="rounded-lg"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i data-feather="play" class="text-sage-300 w-8 h-8"></i> | |
| </div> | |
| </div> | |
| <div class="w-2/3"> | |
| <h4 class="font-bold text-sage-300">EVPs at Holloway Bridge</h4> | |
| <p class="text-sm text-sage-400">September 2023</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-4 hover:bg-eerie-700 p-3 rounded-lg transition duration-300"> | |
| <div class="w-1/3 relative"> | |
| <img src="http://static.photos/black/320x180/67" alt="Video thumbnail" class="rounded-lg"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i data-feather="play" class="text-sage-300 w-8 h-8"></i> | |
| </div> | |
| </div> | |
| <div class="w-2/3"> | |
| <h4 class="font-bold text-sage-300">Equipment Test: Spirit Box</h4> | |
| <p class="text-sm text-sage-400">August 2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Podcast Section --> | |
| <div> | |
| <h3 class="text-2xl font-creepster text-sage-400 mb-6 text-shadow">PODCAST EPISODES</h3> | |
| <div class="bg-eerie-700 p-6 rounded-lg hover-glow transition duration-500"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="headphones" class="text-sage-400 mr-3 w-6 h-6"></i> | |
| <h4 class="text-xl font-bold text-sage-300">Beyond the Veil Podcast</h4> | |
| </div> | |
| <audio controls class="w-full mt-4"> | |
| <source src="podcast.mp3" type="audio/mpeg"> | |
| Your browser does not support the audio element. | |
| </audio> | |
| <h5 class="text-lg font-bold text-sage-300 mt-4">Episode 42: Shadow People</h5> | |
| <p class="text-sage-200 mt-2">We discuss our experiences with shadow entities and theories about their origins.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-eerie-800 border-t border-sage-800 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-creepster text-sage-400 mb-4">WHITE SAGE PARANORMAL</h3> | |
| <p class="text-sage-300"> | |
| Documenting the paranormal with respect, integrity, and scientific methodology since 2010. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-sage-300 mb-4">QUICK LINKS</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-sage-400 hover:text-sage-200 transition duration-300">Home</a></li> | |
| <li><a href="blog.html" class="text-sage-400 hover:text-sage-200 transition duration-300">Blog</a></li> | |
| <li><a href="gallery.html" class="text-sage-400 hover:text-sage-200 transition duration-300">Gallery</a></li> | |
| <li><a href="media.html" class="text-sage-400 hover:text-sage-200 transition duration-300">Media</a></li> | |
| <li><a href="contact.html" class="text-sage-400 hover:text-sage-200 transition duration-300">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-sage-300 mb-4">MEDIA CATEGORIES</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-sage-400 hover:text-sage-200 transition duration-300">Full Investigations</a></li> | |
| <li><a href="#" class="text-sage-400 hover:text-sage-200 transition duration-300">EVP Sessions</a></li> | |
| <li><a href="#" class="text-sage-400 hover:text-sage-200 transition duration-300">Thermal Footage</a></li> | |
| <li><a href="#" class="text-sage-400 hover:text-sage-200 transition duration-300">Equipment Guides</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-sage-300 mb-4">FOLLOW US</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-sage-400 hover:text-sage-200 transition duration-300"> | |
| <i data-feather="youtube" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="text-sage-400 hover:text-sage-200 transition duration-300"> | |
| <i data-feather="instagram" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="text-sage-400 hover:text-sage-200 transition duration-300"> | |
| <i data-feather="twitter" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="text-sage-400 hover:text-sage-200 transition duration-300"> | |
| <i data-feather="facebook" class="w-6 h-6"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-sm text-sage-500"> | |
| Subscribe to our YouTube for investigation videos | |
| </p> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="bg-eerie-700 text-sage-200 px-3 py-2 rounded-l focus:outline-none focus:ring-1 focus:ring-sage-500 w-full"> | |
| <button class="bg-sage-600 hover:bg-sage-700 text-eerie-900 px-4 py-2 rounded-r transition duration-300"> | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-sage-800 mt-12 pt-8 text-center text-sage-500"> | |
| <p>© 2023 White Sage Paranormal. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |