|
|
<!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/[email protected]/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/[email protected]/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:[email protected]" 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> |
|
|
|
