<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Ancient Magus' Bride</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #f9f7f1;
font-family: 'Merriweather', serif;
}
.parallax {
background-image: url('https://example.com/background-image.jpg'); /* Replace with actual image */
background-attachment: fixed;
background-size: cover;
background-position: center;
}
.branch-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 1s ease, transform 1s ease;
}
.fade-in.show {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body class="relative overflow-x-hidden">
<!-- Header Section -->
<header class="parallax relative h-screen text-center text-white flex items-center justify-center">
<div>
<h1 class="text-4xl md:text-6xl font-bold">The Ancient Magus' Bride</h1>
<p class="mt-4 text-lg">TV Anime | October 2017</p>
</div>
<img src="https://example.com/branches.png" alt="Branches" class="branch-overlay">
</header>
<!-- News Section -->
<section class="py-12 px-6 bg-white relative fade-in" id="news">
<h2 class="text-2xl font-bold text-center mb-6">News</h2>
<ul class="max-w-4xl mx-auto space-y-4">
<li class="bg-gray-100 p-4 rounded shadow">
<p class="text-lg">New episodes airing weekly!</p>
</li>
<li class="bg-gray-100 p-4 rounded shadow">
<p class="text-lg">Special merchandise available now.</p>
</li>
</ul>
</section>
<!-- Twitter Section -->
<section class="py-12 px-6 bg-gray-50 fade-in" id="twitter">
<h2 class="text-2xl font-bold text-center mb-6">Twitter</h2>
<div class="max-w-4xl mx-auto">
<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">Follow us for updates!</p>
<footer>— The Ancient Magus' Bride Official</footer>
</blockquote>
</div>
</section>
<!-- Story Section -->
<section class="py-12 px-6 bg-white fade-in" id="story">
<h2 class="text-2xl font-bold text-center mb-6">Story</h2>
<div class="max-w-4xl mx-auto">
<p class="text-lg leading-relaxed">Chise Hatori has lived a life full of neglect and abuse, devoid of anything resembling love. Far from the warmth of family, she has had her share of troubles and pitfalls. Just when all hope seems lost, a fateful encounter awaits...</p>
</div>
</section>
<!-- Footer Section -->
<footer class="py-6 bg-gray-800 text-white text-center">
<p>© 2023 The Ancient Magus' Bride. All rights reserved.</p>
</footer>
<!-- Optional JavaScript for Parallax and Scroll-triggered Animations -->
<script>
// Add scroll-triggered animations
document.addEventListener('DOMContentLoaded', () => {
const fadeInElements = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('show');
}
});
}, { threshold: 0.1 });
fadeInElements.forEach(el => observer.observe(el));
});
</script>
</body>
</html>