| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Steampunk Dreams</title> |
| | <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> |
| | <style> |
| | .steampunk-bg { |
| | background-color: #1a1a1a; |
| | color: #d4af37; |
| | font-family: 'Courier New', monospace; |
| | } |
| | .banner-container { |
| | border: 2px solid #d4af37; |
| | padding: 20px; |
| | margin: 20px 0; |
| | background-color: #2a2a2a; |
| | } |
| | .banner-img { |
| | width: 100%; |
| | max-width: 800px; |
| | height: auto; |
| | border: 1px solid #d4af37; |
| | } |
| | .contact-link { |
| | color: #d4af37; |
| | text-decoration: underline; |
| | } |
| | </style> |
| | </head> |
| | <body class="steampunk-bg"> |
| | <div class="container mx-auto px-4 py-8"> |
| | <h1 class="text-4xl font-bold text-center mb-8" data-aos="fade-down">Steampunk Dreams</h1> |
| | <h2 class="text-2xl font-semibold text-center mb-8" data-aos="fade-down">Campaign Banner Ads</h2> |
| | |
| | <div class="banner-container" data-aos="fade-right"> |
| | <img src="https://huggingface.co/spaces/sativa/steampunk/resolve/main/images/header.png" alt="Steampunk Adventure Banner" class="banner-img mb-4"> |
| | <p class="text-lg mb-4">Embark on a thrilling journey through time with our Steampunk Adventure collection. Gears, goggles, and grandeur await!</p> |
| | </div> |
| | |
| | <div class="banner-container" data-aos="fade-left"> |
| | <img src="https://huggingface.co/spaces/sativa/steampunk/resolve/main/images/Hero.png" alt="Mechanical Wonders Banner" class="banner-img mb-4"> |
| | <p class="text-lg mb-4">Discover the Mechanical Wonders of an alternate Victorian era where brass and steam power extraordinary inventions.</p> |
| | </div> |
| | |
| | <div class="banner-container" data-aos="fade-up"> |
| | <img src="https://huggingface.co/spaces/sativa/steampunk/resolve/main/images/footer.png" alt="Aether Dreams Banner" class="banner-img mb-4"> |
| | <p class="text-lg mb-4">Soar through the clouds in our Aether Dreams series, where airships rule the skies and adventure knows no bounds.</p> |
| | </div> |
| | |
| | <div class="text-center mt-8" data-aos="zoom-in"> |
| | <a href="mailto:designer@steampunkdreams.com" class="contact-link text-xl"> |
| | <i data-feather="mail" class="inline mr-2"></i> Contact the designer for more information |
| | </a> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | AOS.init(); |
| | feather.replace(); |
| | </script> |
| | </body> |
| | </html> |
| |
|
