Josh Knapp
b511a6684d
Includes new page templates (fitness-gym, nonprofit, online-course, photography-studio, real-estate, startup-company, travel-blog, wedding-invitation) with thumbnail SVGs, test specs, documentation files, and minor updates to index.html, router.php, and playwright config. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
94 lines
8.8 KiB
HTML
94 lines
8.8 KiB
HTML
<!-- Navigation -->
|
|
<nav style="display:flex;align-items:center;justify-content:space-between;padding:18px 48px;background-color:#1e293b;position:sticky;top:0;z-index:100;">
|
|
<a href="#" style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#f59e0b;text-decoration:none;">Wanderlust Diaries</a>
|
|
<div style="display:flex;gap:32px;align-items:center;">
|
|
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">Destinations</a>
|
|
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">About</a>
|
|
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">Contact</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section style="position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;background-image:url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=1600');background-size:cover;background-position:center;">
|
|
<div class="bg-overlay" style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(30,41,59,0.6);"></div>
|
|
<div style="position:relative;z-index:1;text-align:center;max-width:800px;padding:40px 24px;">
|
|
<p style="font-family:'Inter',sans-serif;font-size:14px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;margin-bottom:16px;">Travel Blog & Stories</p>
|
|
<h1 style="font-family:'Playfair Display',serif;font-size:56px;font-weight:700;color:#ffffff;line-height:1.15;margin-bottom:24px;">Explore the World, One Story at a Time</h1>
|
|
<p style="font-family:'Inter',sans-serif;font-size:18px;color:#fffbeb;line-height:1.7;margin-bottom:40px;">Personal tales from far-flung corners of the globe, travel tips you can actually use, and photos that will fuel your wanderlust.</p>
|
|
<a href="#" style="display:inline-block;padding:16px 40px;background-color:#f59e0b;color:#1e293b;font-family:'Inter',sans-serif;font-size:16px;font-weight:600;text-decoration:none;border-radius:6px;">Start Reading</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Posts -->
|
|
<section style="padding:96px 48px;background-color:#fffbeb;">
|
|
<div style="max-width:1100px;margin:0 auto;">
|
|
<p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;text-align:center;margin-bottom:8px;">Latest Stories</p>
|
|
<h2 style="font-family:'Playfair Display',serif;font-size:40px;font-weight:700;color:#1e293b;text-align:center;margin-bottom:56px;">Featured Posts</h2>
|
|
<div style="display:flex;gap:32px;flex-wrap:wrap;">
|
|
<!-- Card 1: Santorini -->
|
|
<div style="flex:1;min-width:280px;background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
|
|
<img src="https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?w=600" alt="Santorini" style="width:100%;height:240px;object-fit:cover;display:block;" />
|
|
<div style="padding:28px;">
|
|
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:8px;">Greece</p>
|
|
<h3 style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;">Santorini Sunsets & Hidden Gems</h3>
|
|
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Beyond the iconic blue domes lies a quieter island waiting to be explored. My week wandering through villages untouched by crowds.</p>
|
|
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Read More →</a>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2: Kyoto -->
|
|
<div style="flex:1;min-width:280px;background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
|
|
<img src="https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=600" alt="Kyoto" style="width:100%;height:240px;object-fit:cover;display:block;" />
|
|
<div style="padding:28px;">
|
|
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:8px;">Japan</p>
|
|
<h3 style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;">Kyoto in Cherry Blossom Season</h3>
|
|
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Temples draped in pink, quiet tea ceremonies, and the art of slowing down in Japan's ancient capital during its most magical season.</p>
|
|
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Read More →</a>
|
|
</div>
|
|
</div>
|
|
<!-- Card 3: Patagonia -->
|
|
<div style="flex:1;min-width:280px;background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
|
|
<img src="https://images.unsplash.com/photo-1531761535209-180857e963b9?w=600" alt="Patagonia" style="width:100%;height:240px;object-fit:cover;display:block;" />
|
|
<div style="padding:28px;">
|
|
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:8px;">Argentina</p>
|
|
<h3 style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;">Trekking Through Patagonia</h3>
|
|
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Glaciers, granite towers, and endless windswept plains. A 10-day trek through one of the last true wildernesses on Earth.</p>
|
|
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Read More →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Newsletter -->
|
|
<section style="padding:80px 48px;background-color:#1e293b;">
|
|
<div style="max-width:640px;margin:0 auto;text-align:center;">
|
|
<h2 style="font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#ffffff;margin-bottom:12px;">Join 10,000+ Travelers</h2>
|
|
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#94a3b8;line-height:1.7;margin-bottom:32px;">Get destination guides, travel tips, and story updates delivered to your inbox every week. No spam, just wanderlust.</p>
|
|
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
|
|
<input type="email" placeholder="Your email address" style="flex:1;min-width:240px;padding:14px 20px;border:2px solid #334155;background-color:#0f172a;color:#fffbeb;font-family:'Inter',sans-serif;font-size:15px;border-radius:6px;outline:none;" />
|
|
<button style="padding:14px 32px;background-color:#f59e0b;color:#1e293b;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;border:none;border-radius:6px;cursor:pointer;">Subscribe</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Instagram-Style Grid -->
|
|
<section style="padding:64px 48px;background-color:#fffbeb;">
|
|
<div style="max-width:1100px;margin:0 auto;">
|
|
<p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;text-align:center;margin-bottom:8px;">@wanderlustdiaries</p>
|
|
<h2 style="font-family:'Playfair Display',serif;font-size:32px;font-weight:700;color:#1e293b;text-align:center;margin-bottom:40px;">Follow the Journey</h2>
|
|
<div style="display:flex;gap:16px;flex-wrap:wrap;justify-content:center;">
|
|
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400" alt="Beach" style="width:calc(25% - 12px);min-width:160px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;" />
|
|
<img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=400" alt="Mountains" style="width:calc(25% - 12px);min-width:160px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;" />
|
|
<img src="https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=400" alt="Market" style="width:calc(25% - 12px);min-width:160px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;" />
|
|
<img src="https://images.unsplash.com/photo-1528127269322-539801943592?w=400" alt="Temple" style="width:calc(25% - 12px);min-width:160px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer style="padding:48px;background-color:#1e293b;text-align:center;">
|
|
<p style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#f59e0b;margin-bottom:8px;">Wanderlust Diaries</p>
|
|
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#94a3b8;margin-bottom:24px;">Follow the journey. Fuel the wanderlust.</p>
|
|
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#64748b;">© 2026 Wanderlust Diaries. All rights reserved.</p>
|
|
</footer>
|