Create a website that is focused on tabletop roleplaying games. The company is referred to as "Dizzy Wizard Publishing" and the person running the website is referred to as either the "Dizzy Wizard" or simply "Dizzy". The site should allow the owner to both sell ttrpg products they make, write a blog about their ideas on ttrpg systems and the community as a whole, and propagate and perpetuate the idea that 5e is not the best system and that there are many others worth playing. - Initial Deployment
75b9697 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dizzy Wizard Publishing | Beyond 5e</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| .hero-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%); | |
| } | |
| .nav-link:hover { | |
| color: #c084fc; | |
| } | |
| .dice-roll { | |
| animation: roll 0.5s ease-out; | |
| } | |
| @keyframes roll { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 font-sans"> | |
| <!-- Vanta.js Background --> | |
| <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div> | |
| <!-- Main Content --> | |
| <div class="relative z-10"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-lg sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center"> | |
| <i data-feather="zap" class="text-purple-400 mr-2"></i> | |
| <span class="text-xl font-bold text-purple-300">Dizzy Wizard Publishing</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-white hover:text-purple-300 transition">Home</a> | |
| <a href="products.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-purple-300 transition">Products</a> | |
| <a href="blog.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-purple-300 transition">Blog</a> | |
| <a href="about.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-purple-300 transition">About</a> | |
| <a href="contact.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-purple-300 transition">Contact</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button class="mobile-menu-button p-2 rounded-md text-gray-400 hover:text-white focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-bg bg-opacity-90 text-white py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center" data-aos="fade-up"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Beyond the <span class="text-yellow-300">5e</span> Horizon</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Discover a world of tabletop RPGs beyond the mainstream. The Dizzy Wizard guides you through systems you never knew you'd love.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition transform hover:scale-105"> | |
| Explore Systems | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-lg transition transform hover:scale-105"> | |
| Read the Blog | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="py-16 bg-gray-800 bg-opacity-80"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Dizzy's Latest Creations</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition" data-aos="fade-up" data-aos-delay="100"> | |
| <img src="http://static.photos/fantasy/640x360/1" alt="Product Image" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">System Hack: Shadowbound</h3> | |
| <p class="text-gray-300 mb-4">A narrative-driven dark fantasy RPG that puts storytelling first.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-purple-300 font-bold">$24.99</span> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition" data-aos="fade-up" data-aos-delay="200"> | |
| <img src="http://static.photos/fantasy/640x360/2" alt="Product Image" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">The Tome of Odd Mechanics</h3> | |
| <p class="text-gray-300 mb-4">100+ alternative rules for your favorite RPG systems.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-purple-300 font-bold">$19.99</span> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition" data-aos="fade-up" data-aos-delay="300"> | |
| <img src="http://static.photos/fantasy/640x360/3" alt="Product Image" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Micro RPG Collection</h3> | |
| <p class="text-gray-300 mb-4">10 complete RPG systems, each under 10 pages.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-purple-300 font-bold">$14.99</span> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="products.html" class="inline-block bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition"> | |
| View All Products | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Preview --> | |
| <section class="py-16 bg-gray-900 bg-opacity-90"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">From the Dizzy Wizard's Mind</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Blog Post 1 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded-full">Opinion</span> | |
| <span class="text-gray-400 text-sm ml-2">3 days ago</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Why I Stopped Running 5e After 500 Hours</h3> | |
| <p class="text-gray-300 mb-4">The Dizzy Wizard shares their journey from 5e enthusiast to system explorer, and why they'll never go back...</p> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/1" alt="Author" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="text-sm text-purple-300">The Dizzy Wizard</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Blog Post 2 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded-full">Guide</span> | |
| <span class="text-gray-400 text-sm ml-2">1 week ago</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">5 Underrated RPG Systems You Should Try</h3> | |
| <p class="text-gray-300 mb-4">From narrative gems to mechanical marvels, these systems will change how you think about RPGs...</p> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/1" alt="Author" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="text-sm text-purple-300">The Dizzy Wizard</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="blog.html" class="inline-block bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition"> | |
| Read More Articles | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-16 bg-gray-800 bg-opacity-80"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0" data-aos="fade-right"> | |
| <img src="http://static.photos/people/640x360/1" alt="The Dizzy Wizard" class="rounded-lg shadow-xl w-full max-w-md mx-auto"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12" data-aos="fade-left"> | |
| <h2 class="text-3xl font-bold mb-6">Meet the Dizzy Wizard</h2> | |
| <p class="text-gray-300 mb-4">For over a decade, I've been lost in the labyrinth of tabletop RPG systems, emerging occasionally to share my findings with fellow adventurers.</p> | |
| <p class="text-gray-300 mb-6">Dizzy Wizard Publishing was born from a simple idea: that the RPG world is vast and wonderful, and that 5e is just one tiny corner of it. My mission is to help you discover systems you'll love even more.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-purple-300 hover:text-purple-200 transition"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-purple-300 hover:text-purple-200 transition"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-purple-300 hover:text-purple-200 transition"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| <a href="#" class="text-purple-300 hover:text-purple-200 transition"> | |
| <i data-feather="twitch"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 bg-purple-900 bg-opacity-90"> | |
| <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <div data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-4">Join the Dizzy Coven</h2> | |
| <p class="text-gray-300 mb-6">Get monthly updates on new systems, products, and exclusive content from the Dizzy Wizard's tower.</p> | |
| <form class="flex flex-col sm:flex-row gap-2"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <button type="submit" class="bg-yellow-500 hover:bg-yellow-400 text-gray-900 font-bold px-6 py-3 rounded-lg transition"> | |
| Subscribe | |
| </button> | |
| </form> | |
| <p class="text-xs text-gray-400 mt-2">No spam, just magic. Unsubscribe anytime.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 bg-opacity-90 py-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i data-feather="zap" class="text-purple-400 mr-2"></i> | |
| <span class="text-lg font-bold text-purple-300">Dizzy Wizard Publishing</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-purple-300 transition">Home</a> | |
| <a href="products.html" class="text-gray-400 hover:text-purple-300 transition">Products</a> | |
| <a href="blog.html" class="text-gray-400 hover:text-purple-300 transition">Blog</a> | |
| <a href="about.html" class="text-gray-400 hover:text-purple-300 transition">About</a> | |
| <a href="contact.html" class="text-gray-400 hover:text-purple-300 transition">Contact</a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm"> | |
| <p>© 2023 Dizzy Wizard Publishing. All rights reserved. Made with <i data-feather="heart" class="inline text-red-400 w-4 h-4"></i> and too many dice.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x7e22ce, | |
| backgroundColor: 0x111827, | |
| size: 0.8 | |
| }); | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('.mobile-menu-button'); | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Dice roll animation | |
| const diceElements = document.querySelectorAll('.dice'); | |
| diceElements.forEach(dice => { | |
| dice.addEventListener('click', function() { | |
| this.classList.add('dice-roll'); | |
| setTimeout(() => { | |
| this.classList.remove('dice-roll'); | |
| }, 500); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |