Refactor code structure and remove redundant changes
This commit is contained in:
@@ -0,0 +1,255 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mastering Artisan Bread Baking: The Sourdough Journey</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: #A0522D; /* Sienna Brown - Earthy */
|
||||
--color-secondary: #F5DEB3; /* Wheat/Light Tan */
|
||||
--color-accent: #D2B48C; /* Tan */
|
||||
}
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background-color: #FAF0E6; /* Linen background */
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
transition: background-color 0.3s ease, transform 0.1s ease;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #8B4513; /* Darker Brown */
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.btn-primary:focus {
|
||||
outline: 4px solid #FFDAB9; /* Light peach outline for focus */
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.ingredient-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.ingredient-icon:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navigation Header -->
|
||||
<header class="bg-white shadow-md sticky top-0 z-10">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center py-4">
|
||||
<h1 class="text-3xl font-bold text-sienna tracking-wider">
|
||||
The Hearth Guild
|
||||
</h1>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#curriculum" class="text-gray-700 hover:text-sienna font-medium transition duration-150">Curriculum</a>
|
||||
<a href="#instructor" class="text-gray-700 hover:text-sienna font-medium transition duration-150">Instructor</a>
|
||||
<a href="#pricing" class="text-gray-700 hover:text-sienna font-medium transition duration-150">Enroll</a>
|
||||
</nav>
|
||||
<a href="#pricing" class="md:hidden text-gray-700 hover:text-sienna font-semibold">Menu</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-cover bg-center py-20 md:py-32"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1518611396458-d556d950f41a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center bg-black bg-opacity-30 p-8 rounded-xl shadow-2xl">
|
||||
<h2 class="text-5xl md:text-7xl font-extrabold text-white mb-4 leading-tight tracking-tight">
|
||||
Master Artisan Bread Baking
|
||||
</h2>
|
||||
<p class="text-xl md:text-2xl text-sienna mb-10 font-light italic">
|
||||
Transform simple flour, water, and salt into life-changing, naturally leavened loaves.
|
||||
</p>
|
||||
<a href="#pricing" class="btn-primary inline-block px-10 py-4 text-xl text-white font-bold rounded-full shadow-lg uppercase tracking-widest">
|
||||
Start Your Baking Journey
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Curriculum Section -->
|
||||
<section id="curriculum" class="py-20 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-sm uppercase tracking-widest text-sienna mb-2">The Complete Blueprint</h2>
|
||||
<p class="text-5xl font-bold text-gray-800">
|
||||
Course Curriculum
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
<!-- Module 1 -->
|
||||
<div class="bg-white border-t-8 border-sienna p-8 rounded-xl shadow-lg card-hover transition duration-300">
|
||||
<div class="text-4xl mb-4 text-sienna flex items-center">
|
||||
<span class="ingredient-icon mr-3">🌾</span>
|
||||
<h3 class="text-2xl font-bold text-gray-800">Starter Cultivation</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">
|
||||
The foundational science of sourdough. Learn to nurture and maintain a vibrant, active starter from scratch.
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-1 ml-4 text-sm">
|
||||
<li>Hydration Ratios</li>
|
||||
<li>Feeding Schedules</li>
|
||||
<li>Troubleshooting Sluggishness</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Module 2 -->
|
||||
<div class="bg-white border-t-8 border-sienna p-8 rounded-xl shadow-lg card-hover transition duration-300">
|
||||
<div class="text-4xl mb-4 text-sienna flex items-center">
|
||||
<span class="ingredient-icon mr-3">💧</span>
|
||||
<h3 class="text-2xl font-bold text-gray-800">Mixing & Bulk Fermentation</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Mastering the early stages. Techniques for optimal dough development without over-proofing.
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-1 ml-4 text-sm">
|
||||
<li>Autolyse Techniques</li>
|
||||
<li>Stretch & Folds</li>
|
||||
<li>Temperature Control</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Module 3 -->
|
||||
<div class="bg-white border-t-8 border-sienna p-8 rounded-xl shadow-lg card-hover transition duration-300">
|
||||
<div class="text-4xl mb-4 text-sienna flex items-center">
|
||||
<span class="ingredient-icon mr-3">🔥</span>
|
||||
<h3 class="text-2xl font-bold text-gray-800">Baking & Crumb Development</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">
|
||||
The final transformation. Achieving that perfect oven spring and beautiful crust structure.
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-1 ml-4 text-sm">
|
||||
<li>Cold Proofing Science</li>
|
||||
<li>Dutch Oven Mastery</li>
|
||||
<li>Scoring Precision</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Instructor Section -->
|
||||
<section id="instructor" class="py-20 bg-stone-50">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-sm uppercase tracking-widest text-sienna mb-2">Meet The Artisan</h2>
|
||||
<p class="text-5xl font-bold text-gray-800">
|
||||
Learn From A Dedicated Baker
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row items-center gap-10 bg-white p-8 rounded-2xl shadow-xl border-l-8 border-sienna">
|
||||
<!-- Image Placeholder -->
|
||||
<div class="md:w-1/3">
|
||||
<img src="https://images.unsplash.com/photo-1556226423-1f82d582400e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80"
|
||||
alt="Expert bread baker holding sourdough loaf"
|
||||
class="rounded-lg shadow-md w-full h-auto object-cover transition duration-500 hover:shadow-xl">
|
||||
</div>
|
||||
|
||||
<!-- Bio Content -->
|
||||
<div class="md:w-2/3 mt-6 md:mt-0">
|
||||
<h3 class="text-4xl font-bold text-sienna mb-3">Elara Vance</h3>
|
||||
<p class="text-lg text-gray-600 mb-6 italic border-b pb-3 border-sienna">
|
||||
"Baking isn't about following steps; it's about understanding the conversation between water and flour."
|
||||
</p>
|
||||
<p class="text-gray-700 text-lg mb-4 leading-relaxed">
|
||||
Elara has spent the last decade perfecting traditional, slow-fermented bread techniques. A certified culinary artisan, she brings practical, hands-on wisdom to every lesson. Her philosophy centers on respecting the ingredients and the natural processes of fermentation.
|
||||
</p>
|
||||
<p class="text-gray-700 text-lg mb-6 leading-relaxed">
|
||||
She has taught workshops globally, specializing in the subtle art of the long fermentation, ensuring every student leaves with a thriving, robust sourdough culture.
|
||||
</p>
|
||||
<a href="#pricing" class="btn-primary px-6 py-3 text-white font-semibold rounded-lg inline-block">
|
||||
View Course Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing/CTA Section -->
|
||||
<section id="pricing" class="py-24 bg-gray-50">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-sm uppercase tracking-widest text-sienna mb-2">Investment</h2>
|
||||
<p class="text-5xl font-bold text-gray-800">
|
||||
Choose Your Path to Perfect Crust
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 md:p-12 rounded-3xl shadow-2xl border-t-12 border-sienna flex flex-col md:flex-row gap-8 items-start">
|
||||
|
||||
<!-- Pricing Card Content -->
|
||||
<div class="md:w-1/3">
|
||||
<h4 class="text-3xl font-extrabold text-gray-800 mb-2">The Artisan Pass</h4>
|
||||
<p class="text-gray-500 mb-6">
|
||||
Comprehensive access to all modules, video lectures, and downloadable guides.
|
||||
</p>
|
||||
<div class="text-6xl font-bold text-sienna mb-6">
|
||||
$199<span class="text-xl font-medium text-gray-500">/one-time</span>
|
||||
</div>
|
||||
<ul class="space-y-3 mb-8 text-gray-700 text-lg">
|
||||
<li class="flex items-center"><span class="text-green-500 mr-2 text-xl">✓</span> Full Curriculum Access</li>
|
||||
<li class="flex items-center"><span class="text-green-500 mr-2 text-xl">✓</span> Recipe Vault & Guides</li>
|
||||
<li class="flex items-center"><span class="text-green-500 mr-2 text-xl">✓</span> Private Student Forum</li>
|
||||
<li class="flex items-center"><span class="text-green-500 mr-2 text-xl">✓</span> Lifetime Updates</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Card Action -->
|
||||
<div class="md:w-2/3 bg-sienna/5 p-6 rounded-xl border-2 border-sienna shadow-inner">
|
||||
<h3 class="text-3xl font-bold text-sienna mb-4">Ready to Knead the Dough?</h3>
|
||||
<p class="text-gray-700 mb-6">
|
||||
Enroll today and receive a bonus starter kit guide valued at $49. We provide the knowledge; you provide the dedication.
|
||||
</p>
|
||||
<button class="btn-primary w-full py-4 text-white text-xl font-semibold rounded-lg uppercase tracking-widest focus:ring-4 focus:ring-sienna/50">
|
||||
Enroll Now & Bake Better
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-800 text-white py-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<p class="text-lg font-semibold mb-2">The Hearth Guild</p>
|
||||
<p class="text-gray-400 mb-4">© 2024. All rights reserved. Crafted with dedication.</p>
|
||||
<div class="space-x-4">
|
||||
<a href="#curriculum" class="text-gray-400 hover:text-sienna transition duration-150">Curriculum</a>
|
||||
<a href="#instructor" class="text-gray-400 hover:text-sienna transition duration-150">Instructor</a>
|
||||
<a href="#" class="text-gray-400 hover:text-sienna transition duration-150">Privacy Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Simple JS for subtle interaction feedback
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const pricingButton = document.querySelector('#pricing .btn-primary');
|
||||
|
||||
pricingButton.addEventListener('click', () => {
|
||||
alert('Redirecting to secure checkout... Happy Baking!');
|
||||
});
|
||||
|
||||
// Optional: Add subtle animation to the main title on load
|
||||
const heroHeading = document.querySelector('h2');
|
||||
heroHeading.style.opacity = 0;
|
||||
setTimeout(() => {
|
||||
heroHeading.style.transition = 'opacity 1.5s ease-out';
|
||||
heroHeading.style.opacity = 1;
|
||||
}, 100);
|
||||
});
|
||||
</script>
|
||||
|
||||
<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.27s</div></body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user