187 lines
12 KiB
HTML
187 lines
12 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 Reading Nook | Harvest Book Campaign</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
--color-deep-maroon: #800000;
|
|
--color-burnt-orange: #cc5500;
|
|
--color-cream: #f5f5dc;
|
|
}
|
|
body {
|
|
background-color: #fef9f4; /* Very light beige/off-white for cozy feel */
|
|
font-family: 'Georgia', serif;
|
|
}
|
|
.header-bg {
|
|
background-color: var(--color-deep-maroon);
|
|
}
|
|
.accent-color {
|
|
color: var(--color-burnt-orange);
|
|
}
|
|
.shadow-book {
|
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.05);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.shadow-book:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2), 0 8px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.fade-in-up {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
animation: fadeIn 1s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
/* Custom focus styles for accessibility */
|
|
.focus-visible:focus {
|
|
outline: 3px solid var(--color-burnt-orange);
|
|
outline-offset: 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen">
|
|
|
|
<header class="header-bg shadow-lg">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex justify-between items-center">
|
|
<h1 class="text-4xl font-serif font-bold text-white tracking-wider">
|
|
The Autumn Quill
|
|
</h1>
|
|
<nav>
|
|
<a href="#collection" class="text-white text-lg hover:text-gray-200 mx-3 transition duration-150">New Arrivals</a>
|
|
<a href="#campaign" class="text-white text-lg hover:text-gray-200 mx-3 transition duration-150">Autumn Deals</a>
|
|
<a href="#about" class="text-white text-lg hover:text-gray-200 mx-3 transition duration-150">Our Story</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
|
|
<!-- Hero Section -->
|
|
<section class="text-center mb-16 bg-cover bg-center rounded-xl shadow-xl"
|
|
style="background-image: url('https://images.unsplash.com/photo-1543723810-1441a9e3a01b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxhY3R1bmJhJTIwcmVkaW5nJTIwYm9vayUyMHB1cnR8ZW58MVwxMjM0NTYyNTYwfDA&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxhY3R1bmJhJTIwYm9vayUyMHB1cnR8ZW58MVwxMjM0NTYyNTYwfDA')"
|
|
aria-label="Cozy Autumn Reading Scene">
|
|
<div class="bg-black bg-opacity-40 p-8 rounded-xl">
|
|
<h2 class="text-5xl md:text-7xl font-serif text-white mb-4 tracking-tight leading-snug fade-in-up" style="animation-delay: 0.2s;">
|
|
Settle In. Turn The Page.
|
|
</h2>
|
|
<p class="text-xl text-white mb-8 max-w-3xl mx-auto fade-in-up" style="animation-delay: 0.4s;">
|
|
As the leaves turn gold and the air grows crisp, discover your perfect companion for the season. Our Autumn Reading Collection awaits.
|
|
</p>
|
|
<a href="#collection" class="bg-orange-600 text-white text-xl font-semibold py-4 px-10 rounded-full shadow-2xl hover:bg-orange-700 focus-visible transition duration-300 transform hover:scale-105 fade-in-up" style="animation-delay: 0.6s;">
|
|
Explore The Harvest
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Campaign Focus Section -->
|
|
<section id="campaign" class="mb-20 bg-white p-8 lg:p-12 rounded-3xl border-4 border-orange-200 shadow-2xl fade-in-up" style="animation-delay: 0.8s;">
|
|
<div class="grid lg:grid-cols-3 gap-10 items-start">
|
|
|
|
<div class="lg:col-span-2">
|
|
<h2 class="text-5xl font-serif text-deep-maroon mb-4 border-b-4 border-burnt-orange pb-2">
|
|
The Autumn Reading Pledge
|
|
</h2>
|
|
<p class="text-lg text-gray-700 mb-6 leading-relaxed">
|
|
This season, we encourage you to embrace the slow rhythm of reading. Whether it's a sweeping historical epic, a cozy mystery nestled by a fireside, or profound nature writing, we have curated selections designed to deepen your connection with the pages. Our Autumn Campaign celebrates the comfort, the introspection, and the rich, muted beauty of this season.
|
|
</p>
|
|
|
|
<div class="grid md:grid-cols-3 gap-6 mt-8">
|
|
<div class="bg-amber-50 p-6 rounded-xl border-l-8 border-burnt-orange shadow-book">
|
|
<h4 class="text-2xl font-semibold text-deep-maroon mb-2">Cozy Mysteries</h4>
|
|
<p class="text-sm text-gray-600">Small towns, whispered secrets, and the smell of woodsmoke. Perfect for curling up.</p>
|
|
</div>
|
|
<div class="bg-amber-50 p-6 rounded-xl border-l-8 border-burnt-orange shadow-book">
|
|
<h4 class="text-2xl font-semibold text-deep-maroon mb-2">Literary Depth</h4>
|
|
<p class="text-sm text-gray-600">Books that linger long after the final page is turned. Deep thought for quiet evenings.</p>
|
|
</div>
|
|
<div class="bg-amber-50 p-6 rounded-xl border-l-8 border-burnt-orange shadow-book">
|
|
<h4 class="text-2xl font-semibold text-deep-maroon mb-2">Seasonal Reads</h4>
|
|
<p class="text-sm text-gray-600">Stories infused with the harvest, changing light, and turning seasons.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Card -->
|
|
<div class="bg-deep-maroon bg-opacity-90 p-8 rounded-xl shadow-2xl flex flex-col justify-between">
|
|
<div>
|
|
<h3 class="text-3xl text-white font-bold mb-3">🍁 Autumn Special Offer 🍁</h3>
|
|
<p class="text-white mb-6 text-base">
|
|
Receive 15% off any book bundle featuring a thematic seasonal read this month. Use code: HARVEST24 at checkout.
|
|
</p>
|
|
<ul class="text-white space-y-2 text-sm mb-8">
|
|
<li class="flex items-center"><span class="accent-color mr-2 text-xl">✓</span> Curated Selection</li>
|
|
<li class="flex items-center"><span class="accent-color mr-2 text-xl">✓</span> Shipping Discount</li>
|
|
<li class="flex items-center"><span class="accent-color mr-2 text-xl">✓</span> Cozy Vibes Guaranteed</li>
|
|
</ul>
|
|
</div>
|
|
<a href="#collection" class="bg-white text-deep-maroon text-center text-lg font-bold py-3 rounded-lg hover:bg-gray-100 transition duration-200 focus-visible">
|
|
Shop The Collection Now
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Collection Grid -->
|
|
<section id="collection" class="pt-10">
|
|
<h2 class="text-5xl font-serif text-center text-deep-maroon mb-12 tracking-wide fade-in-up" style="animation-delay: 1.0s;">
|
|
Our Featured Autumn Reads
|
|
</h2>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
|
|
<!-- Book Card 1 -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-book flex flex-col fade-in-up" style="animation-delay: 1.2s;">
|
|
<img src="https://images.unsplash.com/photo-1540466841326-8a1c45048098?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxmb29yZGVyJTIwbG9naW5nJTIwYm9vayUyMHB1cnR8ZW58MVwxMjM0NTYyNTYwfDA&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxmb29yZGVyJTIwbG9naW5nJTIwYm9vayUyMHB1cnR8ZW58MVwxMjM0NTYyNTYwfDA"
|
|
alt="Book cover image: Fireside reading" class="w-full h-64 object-cover">
|
|
<div class="p-5 flex flex-col flex-grow">
|
|
<h3 class="text-2xl font-semibold text-deep-maroon mb-1">The Hearthside Mystery</h3>
|
|
<p class="text-sm text-gray-500 mb-3">A Cozy Classic</p>
|
|
<p class="text-gray-600 mb-4 text-sm flex-grow">When the fog rolls in, the secrets of the small town begin to surface. A perfect autumn puzzle.</p>
|
|
<div class="flex justify-between items-center mt-auto pt-2 border-t border-gray-100">
|
|
<span class="text-3xl font-bold accent-color">$14.99</span>
|
|
<button class="bg-burnt-orange text-white py-2 px-4 rounded-lg text-sm hover:bg-orange-700 transition focus-visible">
|
|
Add to Cart
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Book Card 2 -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-book flex flex-col fade-in-up" style="animation-delay: 1.4s;">
|
|
<img src="https://images.unsplash.com/photo-1517690132093-4a9b97d4552e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxjb2F5JTIwbmV0ZXJufGVufDB8fHx8MTcxMDc4NjMwMnww&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxjb2F5JTIwbmV0ZXJufGVufDB8fHx8MTcxMDc4NjMwMnww"
|
|
alt="Book cover image: Nature and harvest" class="w-full h-64 object-cover">
|
|
<div class="p-5 flex flex-col flex-grow">
|
|
<h3 class="text-2xl font-semibold text-deep-maroon mb-1">Whispers of the Orchard</h3>
|
|
<p class="text-sm text-gray-500 mb-3">Literary Fiction</p>
|
|
<p class="text-gray-600 mb-4 text-sm flex-grow">A beautifully written narrative following a family through a harvest season of change.</p>
|
|
<div class="flex justify-between items-center mt-auto pt-2 border-t border-gray-100">
|
|
<span class="text-3xl font-bold accent-color">$18.99</span>
|
|
<button class="bg-burnt-orange text-white py-2 px-4 rounded-lg text-sm hover:bg-orange-700 transition focus-visible">
|
|
Add to Cart
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Book Card 3 -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-book flex flex-col fade-in-up" style="animation-delay: 1.6s;">
|
|
<img src="https://images.unsplash.com/photo-1498348662635-63d750e1b060?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxjb2F5JTIwZGVwZW50cml8ZW58MVwxMjM0NTYyNTYwfDA&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxjb2F5JTIwZGVwZW50cml8ZW58MVwxMjM0NTYyNTYwfDA"
|
|
alt="Book cover image: Moody landscape" class="w-full h-64 object-cover">
|
|
<div class="p-5 flex flex-col flex-grow">
|
|
<h3 class="text-2xl font-semibold text-deep-maroon mb-1">Shadows Over Willow Creek</h3>
|
|
<p class="text-sm text-gray-500 mb-3">Gothic Fiction</p>
|
|
<p class="text-gray-600 mb-4 text-sm flex-grow">Atmospheric prose exploring the mysteries that cling to old, autumnal landscapes.</p>
|
|
<div class="flex justify-between items-center mt-auto pt-2 border-t border-gray-100">
|
|
<span class="text-3xl font-bold accent-color">$16.50</span>
|
|
<button class="bg-burnt-orange text-white py-2 px-4 rounded-lg text-sm hover:bg-orange-700 transition focus-visible">
|
|
Add to Cart
|
|
</button>
|
|
</div><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 29.75s</div> |