199 lines
14 KiB
HTML
199 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Autumn Reads: Cozy Bookstore Campaign</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom configuration for Tailwind to ensure smooth transitions */
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'book-cream': '#FAF6E6',
|
|
'deep-maroon': '#5D4037',
|
|
'warm-gold': '#D4AF37',
|
|
'moss-green': '#6B8E23',
|
|
},
|
|
fontFamily: {
|
|
serif: ['Playfair Display', 'serif'],
|
|
sans: ['Inter', 'sans-serif'],
|
|
},
|
|
animation: {
|
|
fadeIn: 'fadeIn 1s ease-in-out',
|
|
slideIn: 'slideIn 0.8s ease-out',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
slideIn: {
|
|
'0%': { opacity: '0', transform: 'translateX(-50px)' },
|
|
'100%': { opacity: '1', transform: 'translateX(0)' },
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-book-cream text-gray-800 font-sans antialiased">
|
|
|
|
<!-- Navigation Bar -->
|
|
<header class="sticky top-0 z-50 bg-white shadow-md backdrop-blur-sm bg-opacity-90 border-b border-gray-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex-shrink-0">
|
|
<a href="#" class="text-3xl font-serif font-bold text-deep-maroon tracking-wider hover:text-warm-gold transition duration-300">
|
|
Autumn Pages
|
|
</a>
|
|
</div>
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a href="#featured" class="text-gray-600 hover:text-deep-maroon font-medium transition duration-150">Featured Reads</a>
|
|
<a href="#collections" class="text-gray-600 hover:text-deep-maroon font-medium transition duration-150">Seasonal Collections</a>
|
|
<a href="#bestsellers" class="text-gray-600 hover:text-deep-maroon font-medium transition duration-150">Bestsellers</a>
|
|
<a href="#join" class="bg-warm-gold text-white px-4 py-2 rounded-full hover:bg-yellow-600 transition duration-300 shadow-lg">
|
|
Join Newsletter
|
|
</a>
|
|
</nav>
|
|
<div class="md:hidden">
|
|
<button class="text-gray-600 hover:text-deep-maroon p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-warm-gold">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative h-[60vh] md:h-[75vh] flex items-center justify-center overflow-hidden bg-cover bg-center" style="background-image: url('https://images.pexels.com/photos/34744054/pexels-photo-34744054.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200');">
|
|
<!-- Overlay for text readability -->
|
|
<div class="absolute inset-0 bg-deep-maroon bg-opacity-40"></div>
|
|
|
|
<div class="relative z-10 text-center px-4 max-w-4xl animate-fadeIn">
|
|
<h1 class="text-5xl md:text-7xl font-serif text-white mb-4 leading-tight drop-shadow-lg">
|
|
Cozy Up This Season
|
|
</h1>
|
|
<p class="text-xl md:text-2xl text-warm-gold mb-8 font-medium drop-shadow">
|
|
Discover your perfect escape with our handpicked collection of autumn literary treasures.
|
|
</p>
|
|
<a href="#featured" class="inline-block bg-warm-gold text-white text-lg font-semibold py-3 px-8 rounded-lg shadow-xl hover:bg-yellow-500 transition duration-300 transform hover:scale-[1.02]">
|
|
Explore Autumn Picks
|
|
</a>
|
|
<p class="mt-4 text-sm text-gray-300">Photo by Nguyen Duc Toan on Pexels</p>
|
|
<a href="https://www.pexels.com/photo/cozy-bookstore-interior-with-shelves-and-customers-34744054/" class="text-sm text-warm-gold hover:text-white mt-1 inline-block underline">View Photo on Pexels →</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Books Section -->
|
|
<section id="featured" class="py-16 md:py-24 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-4xl font-serif text-center mb-12 text-deep-maroon border-b-4 border-warm-gold inline-block pb-1 mx-auto">
|
|
Featured This Season
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<!-- Book Card 1 -->
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:-translate-y-1 border border-gray-100 group">
|
|
<div class="h-48 bg-gray-200 rounded-lg mb-4 overflow-hidden">
|
|
<img src="https://via.placeholder.com/400x550?text=Mystery+Novel" alt="The Midnight Library" class="w-full h-full object-cover group-hover:opacity-90 transition duration-300">
|
|
</div>
|
|
<h3 class="text-xl font-serif text-deep-maroon mb-2">The Midnight Library</h3>
|
|
<p class="text-gray-600 mb-3 line-clamp-3">A heartwarming story about second chances and the magic found between the pages.</p>
|
|
<span class="inline-block bg-moss-green text-white text-xs font-semibold px-3 py-1 rounded-full">New Release</span>
|
|
</div>
|
|
|
|
<!-- Book Card 2 -->
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:-translate-y-1 border border-gray-100 group">
|
|
<div class="h-48 bg-gray-200 rounded-lg mb-4 overflow-hidden">
|
|
<img src="https://via.placeholder.com/400x550?text=Historical+Fiction" alt="The Gilded Age Secrets" class="w-full h-full object-cover group-hover:opacity-90 transition duration-300">
|
|
</div>
|
|
<h3 class="text-xl font-serif text-deep-maroon mb-2">The Gilded Age Secrets</h3>
|
|
<p class="text-gray-600 mb-3 line-clamp-3">Immerse yourself in the opulent and intricate drama of a bygone era.</p>
|
|
<span class="inline-block bg-moss-green text-white text-xs font-semibold px-3 py-1 rounded-full">Staff Pick</span>
|
|
</div>
|
|
|
|
<!-- Book Card 3 -->
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:-translate-y-1 border border-gray-100 group">
|
|
<div class="h-48 bg-gray-200 rounded-lg mb-4 overflow-hidden">
|
|
<img src="https://via.placeholder.com/400x550?text=Cozy+Romance" alt="Whispers in the Rain" class="w-full h-full object-cover group-hover:opacity-90 transition duration-300">
|
|
</div>
|
|
<h3 class="text-xl font-serif text-deep-maroon mb-2">Whispers in the Rain</h3>
|
|
<p class="text-gray-600 mb-3 line-clamp-3">Perfect for a quiet evening with a warm beverage and a captivating romance.</p>
|
|
<span class="inline-block bg-moss-green text-white text-xs font-semibold px-3 py-1 rounded-full">Staff Pick</span>
|
|
</div>
|
|
|
|
<!-- Book Card 4 -->
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:-translate-y-1 border border-gray-100 group">
|
|
<div class="h-48 bg-gray-200 rounded-lg mb-4 overflow-hidden">
|
|
<img src="https://via.placeholder.com/400x550?text=Literary+Fiction" alt="The Quiet Observer" class="w-full h-full object-cover group-hover:opacity-90 transition duration-300">
|
|
</div>
|
|
<h3 class="text-xl font-serif text-deep-maroon mb-2">The Quiet Observer</h3>
|
|
<p class="text-gray-600 mb-3 line-clamp-3">A profound look at observation, solitude, and the beauty of simple moments.</p>
|
|
<span class="inline-block bg-moss-green text-white text-xs font-semibold px-3 py-1 rounded-full">New Release</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Seasonal Collection Highlight -->
|
|
<section id="collections" class="py-16 md:py-24 bg-deep-maroon text-white">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-4xl font-serif mb-4">The Autumn Harvest Collection</h2>
|
|
<p class="text-xl opacity-90 mb-10 max-w-3xl mx-auto">
|
|
Curated selections blending thrilling mysteries, deep historical narratives, and comforting romance to create the perfect reading atmosphere for crisp fall days.
|
|
</p>
|
|
|
|
<div class="flex justify-center space-x-6">
|
|
<div class="p-6 bg-white/10 backdrop-blur-sm rounded-lg shadow-2xl border border-warm-gold/50 transition duration-500 hover:scale-105">
|
|
<h3 class="text-2xl font-serif text-warm-gold mb-3">Mystery & Thriller</h3>
|
|
<p class="text-sm opacity-90">Unravel dark secrets and keep you guessing through the season.</p>
|
|
</div>
|
|
<div class="p-6 bg-white/10 backdrop-blur-sm rounded-lg shadow-2xl border border-warm-gold/50 transition duration-500 hover:scale-105">
|
|
<h3 class="text-2xl font-serif text-warm-gold mb-3">Classic Romance</h3>
|
|
<p class="text-sm opacity-90">Warm hearts and enduring stories for those quiet, cozy moments.</p>
|
|
</div>
|
|
<div class="p-6 bg-white/10 backdrop-blur-sm rounded-lg shadow-2xl border border-warm-gold/50 transition duration-500 hover:scale-105">
|
|
<h3 class="text-2xl font-serif text-warm-gold mb-3">Literary Journeys</h3>
|
|
<p class="text-sm opacity-90">Explore rich prose and deep themes perfect for reflective reading.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Newsletter Signup -->
|
|
<section id="join" class="py-16 bg-book-cream">
|
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-3xl font-serif text-deep-maroon mb-4">Never Miss a New Release</h2>
|
|
<p class="text-lg text-gray-600 mb-6">Subscribe to our newsletter for exclusive early access to seasonal book launches and reader discounts.</p>
|
|
|
|
<form class="flex flex-col sm:flex-row justify-center gap-3">
|
|
<input type="email" placeholder="Enter your email address" class="flex-grow p-3 border-2 border-gray-300 rounded-lg focus:border-deep-maroon focus:ring-deep-maroon transition duration-200 shadow-inner" required>
|
|
<button type="submit" class="bg-moss-green text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-green-700 transition duration-300 transform hover:scale-105">
|
|
Subscribe Now
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-deep-maroon text-white py-8">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<p class="text-sm mb-2">© 2023 Autumn Pages. All rights reserved.</p>
|
|
<div class="space-x-4 mt-2">
|
|
<a href="#" class="text-gray-400 hover:text-warm-gold text-sm">Privacy Policy</a>
|
|
<a href="#" class="text-gray-400 hover:text-warm-gold text-sm">Contact Us</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Simple JavaScript for subtle scroll effect on load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const hero = document.querySelector('section:first-of-type');
|
|
hero.style.opacity = 0;
|
|
setTimeout(() => {
|
|
hero.style.opacity = 1;
|
|
}, 100); // Slight delay for animation trigger<div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 18.85s</div> |