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>About | Dizzy Wizard Publishing</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> | |
| .timeline-item:not(:last-child):after { | |
| content: ''; | |
| position: absolute; | |
| left: 24px; | |
| top: 32px; | |
| height: calc(100% - 32px); | |
| width: 2px; | |
| background-color: #7e22ce; | |
| } | |
| .dice-icon:hover { | |
| animation: shake 0.5s; | |
| animation-iteration-count: infinite; | |
| } | |
| @keyframes shake { | |
| 0% { transform: rotate(0deg); } | |
| 25% { transform: rotate(5deg); } | |
| 50% { transform: rotate(0deg); } | |
| 75% { transform: rotate(-5deg); } | |
| 100% { transform: rotate(0deg); } | |
| } | |
| </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="index.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 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="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-white 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="py-20 bg-gradient-to-r from-purple-900 to-indigo-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <div class="flex justify-center mb-6" data-aos="zoom-in"> | |
| <div class="bg-purple-600 p-4 rounded-full"> | |
| <i data-feather="zap" class="w-12 h-12 text-white"></i> | |
| </div> | |
| </div> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6" data-aos="fade-up">The Dizzy Wizard's Tale</h1> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| From humble beginnings to RPG revolutionary, this is my journey beyond the 5e veil. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- About Content --> | |
| <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"> | |
| <div class="flex flex-col md:flex-row items-center mb-16"> | |
| <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">Who is the Dizzy Wizard?</h2> | |
| <p class="text-gray-300 mb-4">I'm just a tabletop RPG enthusiast who got tired of seeing amazing game systems languish in obscurity while D&D 5e dominated the conversation. After years of running games across dozens of systems, I realized that most gamers don't know what they're missing.</p> | |
| <p class="text-gray-300 mb-6">Dizzy Wizard Publishing is my attempt to change that. Through my products, blog, and community efforts, I aim to introduce gamers to the incredible diversity of tabletop RPG experiences available beyond the mainstream.</p> | |
| <div class="flex items-center space-x-4"> | |
| <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded-full">Game Designer</span> | |
| <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded-full">System Critic</span> | |
| <span class="bg-red-600 text-white text-xs px-2 py-1 rounded-full">5e Heretic</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Timeline --> | |
| <div class="mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold text-center mb-12">My RPG Journey</h2> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- Timeline Item | |
| </body> | |
| </html> |