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 | Blog</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> | |
| 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); | |
| } | |
| .blog-post { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .blog-post:hover { | |
| transform: translateY(-5px); | |
| } | |
| </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-400 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-400">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> | |
| <!-- Blog Header --> | |
| <section class="relative py-20 bg-eerie-900 bg-opacity-90"> | |
| <div class="absolute inset-0 bg-[url('http://static.photos/black/1024x576/19')] 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 BLOG</h1> | |
| <p class="text-xl md:text-2xl text-sage-200 mb-8 max-w-3xl mx-auto text-shadow"> | |
| Detailed accounts of our investigations, research findings, and paranormal theories. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Blog Content --> | |
| <section class="py-16 bg-eerie-800 bg-opacity-80"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Blog Post 1 --> | |
| <div class="bg-eerie-700 rounded-lg overflow-hidden shadow-xl blog-post hover-glow"> | |
| <img src="http://static.photos/vintage/640x360/45" alt="Haunted location" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sage-400 text-sm mb-2"> | |
| <i data-feather="calendar" class="mr-1 w-4 h-4"></i> | |
| <span>October 13, 2023</span> | |
| <span class="mx-2">•</span> | |
| <i data-feather="clock" class="mr-1 w-4 h-4"></i> | |
| <span>8 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-sage-300 mb-2">The Shadow Figure of Blackwood Manor</h3> | |
| <p class="text-sage-200 mb-4"> | |
| Our team encountered a humanoid shadow entity that seemed to feed off fear during our overnight... | |
| </p> | |
| <a href="#" class="text-sage-400 hover:text-sage-300 font-semibold inline-flex items-center"> | |
| Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Blog Post 2 --> | |
| <div class="bg-eerie-700 rounded-lg overflow-hidden shadow-xl blog-post hover-glow"> | |
| <img src="http://static.photos/indoor/640x360/56" alt="Haunted location" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sage-400 text-sm mb-2"> | |
| <i data-feather="calendar" class="mr-1 w-4 h-4"></i> | |
| <span>September 29, 2023</span> | |
| <span class="mx-2">•</span> | |
| <i data-feather="clock" class="mr-1 w-4 h-4"></i> | |
| <span>12 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-sage-300 mb-2">EVPs from Beyond: Analyzing Our Findings</h3> | |
| <p class="text-sage-200 mb-4"> | |
| A deep dive into our electronic voice phenomena collection with audio samples and spectral... | |
| </p> | |
| <a href="#" class="text-sage-400 hover:text-sage-300 font-semibold inline-flex items-center"> | |
| Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Blog Post 3 --> | |
| <div class="bg-eerie-700 rounded-lg overflow-hidden shadow-xl blog-post hover-glow"> | |
| <img src="http://static.photos/outdoor/640x360/78" alt="Haunted location" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sage-400 text-sm mb-2"> | |
| <i data-feather="calendar" class="mr-1 w-4 h-4"></i> | |
| <span>September 15, 2023</span> | |
| <span class="mx-2">•</span> | |
| <i data-feather="clock" class="mr-1 w-4 h-4"></i> | |
| <span>6 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-sage-300 mb-2">The Science of Spirit Boxes</h3> | |
| <p class="text-sage-200 mb-4"> | |
| How do spirit boxes work? We examine the technology behind these popular paranormal investigation... | |
| </p> | |
| <a href="#" class="text-sage-400 hover:text-sage-300 font-semibold inline-flex items-center"> | |
| Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Blog Post 4 --> | |
| <div class="bg-eerie-700 rounded-lg overflow-hidden shadow-xl blog-post hover-glow"> | |
| <img src="http://static.photos/black/640x360/34" alt="Haunted location" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sage-400 text-sm mb-2"> | |
| <i data-feather="calendar" class="mr-1 w-4 h-4"></i> | |
| <span>August 30, 2023</span> | |
| <span class="mx-2">•</span> | |
| <i data-feather="clock" class="mr-1 w-4 h-4"></i> | |
| <span>10 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-sage-300 mb-2">Case Study: The Crying Boy Apparition</h3> | |
| <p class="text-sage-200 mb-4"> | |
| Investigating reports of a weeping child spirit in an old farmhouse led us to uncover a tragic... | |
| </p> | |
| <a href="#" class="text-sage-400 hover:text-sage-300 font-semibold inline-flex items-center"> | |
| Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Blog Post 5 --> | |
| <div class="bg-eerie-700 rounded-lg overflow-hidden shadow-xl blog-post hover-glow"> | |
| <img src="http://static.photos/indoor/640x360/89" alt="Haunted location" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sage-400 text-sm mb-2"> | |
| <i data-feather="calendar" class="mr-1 w-4 h-4"></i> | |
| <span>August 12, 2023</span> | |
| <span class="mx-2">•</span> | |
| <i data-feather="clock" class="mr-1 w-4 h-4"></i> | |
| <span>15 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-sage-300 mb-2">Theories of Intelligent Hauntings</h3> | |
| <p class="text-sage-200 mb-4"> | |
| Examining cases where spirits appear to retain consciousness and interact with the living... | |
| </p> | |
| <a href="#" class="text-sage-400 hover:text-sage-300 font-semibold inline-flex items-center"> | |
| Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Blog Post 6 --> | |
| <div class="bg-eerie-700 rounded-lg overflow-hidden shadow-xl blog-post hover-glow"> | |
| <img src="http://static.photos/outdoor/640x360/21" alt="Haunted location" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sage-400 text-sm mb-2"> | |
| <i data-feather="calendar" class="mr-1 w-4 h-4"></i> | |
| <span>July 25, 2023</span> | |
| <span class="mx-2">•</span> | |
| <i data-feather="clock" class="mr-1 w-4 h-4"></i> | |
| <span>7 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-sage-300 mb-2">Equipment Guide: Best Night Vision for Ghost Hunts</h3> | |
| <p class="text-sage-200 mb-4"> | |
| We test and review the latest night vision and full spectrum cameras for paranormal investigation... | |
| </p> | |
| <a href="#" class="text-sage-400 hover:text-sage-300 font-semibold inline-flex items-center"> | |
| Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex justify-center mt-16"> | |
| <nav class="flex items-center space-x-2"> | |
| <a href="#" class="px-4 py-2 border border-sage-700 rounded-md text-sage-300 hover:bg-sage-800 hover:bg-opacity-30 transition duration-300"> | |
| <i data-feather="chevron-left"></i> | |
| </a> | |
| <a href="#" class="px-4 py-2 border border-sage-700 rounded-md bg-sage-700 text-sage-300 font-bold">1</a> | |
| <a href="#" class="px-4 py-2 border border-sage-700 rounded-md text-sage-300 hover:bg-sage-800 hover:bg-opacity-30 transition duration-300">2</a> | |
| <a href="#" class="px-4 py-2 border border-sage-700 rounded-md text-sage-300 hover:bg-sage-800 hover:bg-opacity-30 transition duration-300">3</a> | |
| <span class="px-2 text-sage-400">...</span> | |
| <a href="#" class="px-4 py-2 border border-sage-700 rounded-md text-sage-300 hover:bg-sage-800 hover:bg-opacity-30 transition duration-300">8</a> | |
| <a href="#" class="px-4 py-2 border border-sage-700 rounded-md text-sage-300 hover:bg-sage-800 hover:bg-opacity-30 transition duration-300"> | |
| <i data-feather="chevron-right"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 bg-eerie-900 bg-opacity-90"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto bg-eerie-800 rounded-lg p-8 shadow-xl hover-glow transition duration-500"> | |
| <div class="text-center mb-6"> | |
| <h3 class="text-2xl font-creepster text-sage-400 mb-2">STAY IN THE LOOP</h3> | |
| <p class="text-sage-200">Subscribe to our newsletter for exclusive investigation updates and paranormal news.</p> | |
| </div> | |
| <form class="flex flex-col md:flex-row gap-4"> | |
| <input type="email" placeholder="Your email address" class="flex-grow bg-eerie-700 text-sage-200 px-4 py-3 rounded focus:outline-none focus:ring-1 focus:ring-sage-500"> | |
| <button type="submit" class="bg-sage-600 hover:bg-sage-700 text-eerie-900 font-bold px-6 py-3 rounded transition duration-300"> | |
| Subscribe <i data-feather="send" class="ml-2 inline"></i> | |
| </button> | |
| </form> | |
| </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">CATEGORIES</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-sage-400 hover:text-sage-200 transition duration-300">Investigations</a></li> | |
| <li><a href="#" class="text-sage-400 hover:text-sage-200 transition duration-300">Equipment</a></li> | |
| <li><a href="#" class="text-sage-400 hover:text-sage-200 transition duration-300">Theories</a></li> | |
| <li><a href="#" class="text-sage-400 hover:text-sage-200 transition duration-300">Case Studies</a></li> | |
| <li><a href="#" class="text-sage-400 hover:text-sage-200 transition duration-300">Team Updates</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="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> | |
| </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> | |