File size: 6,529 Bytes
75b9697 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | <!DOCTYPE html>
<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> |