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 | Home</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 src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></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; | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| .text-shadow { | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | |
| } | |
| .text-glow { | |
| text-shadow: 0 0 10px rgba(180, 216, 140, 0.7); | |
| } | |
| .hover-glow:hover { | |
| box-shadow: 0 0 15px rgba(180, 216, 140, 0.7); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-eerie-900 text-sage-100 font-garamond min-h-screen"> | |
| <div id="vanta-bg" class="fixed inset-0 -z-10"></div> | |
| <!-- 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-300">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> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center overflow-hidden"> | |
| <div class="absolute inset-0 bg-black bg-opacity-60"></div> | |
| <div class="relative z-10 text-center px-4"> | |
| <h1 class="text-5xl md:text-7xl font-creepster text-sage-400 mb-6 text-shadow">UNVEILING THE UNSEEN</h1> | |
| <p class="text-xl md:text-2xl text-sage-200 mb-8 max-w-3xl mx-auto text-shadow"> | |
| Exploring the boundary between our world and the unknown. Documenting paranormal phenomena with scientific rigor and respect. | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="contact.html" class="bg-sage-600 hover:bg-sage-700 text-eerie-900 font-bold py-3 px-6 rounded-lg transition duration-300 hover-glow"> | |
| Join Our Investigation | |
| </a> | |
| <a href="blog.html" class="border-2 border-sage-600 hover:border-sage-400 text-sage-300 font-bold py-3 px-6 rounded-lg transition duration-300 hover-glow"> | |
| Read Our Findings | |
| </a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-0 right-0 flex justify-center"> | |
| <a href="#about" class="animate-bounce text-sage-300"> | |
| <i data-feather="chevron-down" class="w-10 h-10"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-eerie-800 bg-opacity-80"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-creepster text-sage-400 mb-4 text-shadow">WHO WE ARE</h2> | |
| <div class="w-24 h-1 bg-sage-500 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <p class="text-lg text-sage-200 mb-6"> | |
| White Sage Paranormal is a dedicated team of researchers, investigators, and sensitives committed to exploring and documenting paranormal activity across the country. | |
| </p> | |
| <p class="text-lg text-sage-200 mb-6"> | |
| Founded in 2010, we approach each investigation with a balanced perspective, combining scientific methodology with intuitive techniques to better understand the phenomena we encounter. | |
| </p> | |
| <p class="text-lg text-sage-200"> | |
| Our team includes former forensic scientists, historians, tech experts, and individuals with psychic sensitivity, creating a well-rounded approach to paranormal research. | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <img src="http://static.photos/black/1024x576/13" alt="Ghostly encounter" class="rounded-lg shadow-xl hover-glow transition duration-500"> | |
| <div class="absolute -inset-4 border-2 border-sage-600 rounded-lg z-0 opacity-70"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Investigations --> | |
| <section class="py-20 bg-eerie-900 bg-opacity-90"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-creepster text-sage-400 mb-4 text-shadow">FEATURED INVESTIGATIONS</h2> | |
| <div class="w-24 h-1 bg-sage-500 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Investigation 1 --> | |
| <div class="bg-eerie-800 rounded-lg overflow-hidden shadow-lg hover-glow transition duration-500"> | |
| <img src="http://static.photos/vintage/640x360/23" alt="Haunted location" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-sage-300 mb-2">The Willowbrook Asylum</h3> | |
| <p class="text-sage-200 mb-4">Documented over 47 EVPs during our 3-night investigation of this abandoned mental hospital.</p> | |
| <a href="blog.html" class="text-sage-400 hover:text-sage-300 font-semibold inline-flex items-center"> | |
| Read Report <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Investigation 2 --> | |
| <div class="bg-eerie-800 rounded-lg overflow-hidden shadow-lg hover-glow transition duration-500"> | |
| <img src="http://static.photos/indoor/640x360/42" alt="Haunted location" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-sage-300 mb-2">The Blackwood Farm</h3> | |
| <p class="text-sage-200 mb-4">Multiple team members experienced physical contact from unseen entities during this intense investigation.</p> | |
| <a href="blog.html" class="text-sage-400 hover:text-sage-300 font-semibold inline-flex items-center"> | |
| Read Report <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Investigation 3 --> | |
| <div class="bg-eerie-800 rounded-lg overflow-hidden shadow-lg hover-glow transition duration-500"> | |
| <img src="http://static.photos/outdoor/640x360/37" alt="Haunted location" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-sage-300 mb-2">The Holloway Bridge</h3> | |
| <p class="text-sage-200 mb-4">Captured thermal anomalies and disembodied voices at this legendary suicide bridge.</p> | |
| <a href="blog.html" class="text-sage-400 hover:text-sage-300 font-semibold inline-flex items-center"> | |
| Read Report <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="gallery.html" class="inline-flex items-center px-6 py-3 border-2 border-sage-600 text-sage-300 font-bold rounded-lg hover:bg-sage-800 hover:bg-opacity-30 transition duration-300 hover-glow"> | |
| View All Investigations | |
| <i data-feather="chevrons-right" class="ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-eerie-800 bg-opacity-80"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-creepster text-sage-400 mb-4 text-shadow">CLIENT TESTIMONIALS</h2> | |
| <div class="w-24 h-1 bg-sage-500 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-eerie-700 p-8 rounded-lg relative"> | |
| <div class="absolute top-0 left-0 w-full h-1 bg-sage-500"></div> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/12" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="text-sage-300 font-bold">Sarah J.</h4> | |
| <p class="text-sage-400 text-sm">Homeowner</p> | |
| </div> | |
| </div> | |
| <p class="text-sage-200 italic"> | |
| "White Sage Paranormal provided answers when no one else could. Their professionalism and sensitivity made a terrifying situation manageable. They identified the spirit in my home and helped it move on." | |
| </p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-eerie-700 p-8 rounded-lg relative"> | |
| <div class="absolute top-0 left-0 w-full h-1 bg-sage-500"></div> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/45" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="text-sage-300 font-bold">Michael T.</h4> | |
| <p class="text-sage-400 text-sm">Business Owner</p> | |
| </div> | |
| </div> | |
| <p class="text-sage-200 italic"> | |
| "Our historic hotel was losing guests due to paranormal activity. White Sage's thorough investigation revealed the source and provided solutions that allowed us to coexist with our spectral residents." | |
| </p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-eerie-700 p-8 rounded-lg relative"> | |
| <div class="absolute top-0 left-0 w-full h-1 bg-sage-500"></div> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/67" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="text-sage-300 font-bold">Emily R.</h4> | |
| <p class="text-sage-400 text-sm">Historic Site Manager</p> | |
| </div> | |
| </div> | |
| <p class="text-sage-200 italic"> | |
| "Their historical research combined with paranormal investigation techniques gave us incredible insight into our property's past. The documentation they provided is invaluable." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Call to Action --> | |
| <section class="py-20 bg-eerie-900 bg-opacity-90"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-4xl font-creepster text-sage-400 mb-6 text-shadow">HAVE YOU EXPERIENCED THE UNEXPLAINED?</h2> | |
| <p class="text-xl text-sage-200 mb-8 max-w-3xl mx-auto"> | |
| We're always looking for new locations to investigate and stories to document. If you've had paranormal experiences, we want to hear from you. | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="contact.html" class="bg-sage-600 hover:bg-sage-700 text-eerie-900 font-bold py-4 px-8 rounded-lg transition duration-300 text-lg hover-glow"> | |
| Report Your Experience | |
| </a> | |
| <a href="media.html" class="border-2 border-sage-600 hover:border-sage-400 text-sage-300 font-bold py-4 px-8 rounded-lg transition duration-300 text-lg hover-glow"> | |
| Watch Our Investigations | |
| </a> | |
| </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">CONTACT</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center text-sage-400"><i data-feather="mail" class="mr-2 w-4 h-4"></i> contact@whitesagepara.com</li> | |
| <li class="flex items-center text-sage-400"><i data-feather="phone" class="mr-2 w-4 h-4"></i> (555) 123-4567</li> | |
| <li class="flex items-center text-sage-400"><i data-feather="map-pin" class="mr-2 w-4 h-4"></i> Portland, OR</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="facebook" 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="youtube" 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> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-sm text-sage-500"> | |
| Subscribe to our newsletter for investigation updates | |
| </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> | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x5c7a4a, | |
| backgroundColor: 0x0c0c0c, | |
| points: 10.00, | |
| maxDistance: 22.00, | |
| spacing: 18.00 | |
| }); | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |