|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Life in the Czech Republic | Exploring Bohemian Culture</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@300;400;600&display=swap'); |
|
|
|
body { |
|
font-family: 'Source Sans Pro', sans-serif; |
|
} |
|
|
|
.title-font { |
|
font-family: 'Playfair Display', serif; |
|
} |
|
|
|
.hero-image { |
|
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1519671482749-fd81be79d5f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); |
|
background-size: cover; |
|
background-position: center; |
|
} |
|
|
|
.flag-stripe { |
|
height: 4px; |
|
} |
|
|
|
.flag-red { |
|
background-color: #D7141A; |
|
} |
|
|
|
.flag-white { |
|
background-color: white; |
|
} |
|
|
|
.flag-blue { |
|
background-color: #11457E; |
|
} |
|
|
|
.post-hover:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.transition-all { |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.text-balance { |
|
text-wrap: balance; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-50"> |
|
|
|
<div class="flag-stripe flag-red"></div> |
|
<div class="flag-stripe flag-white"></div> |
|
<div class="flag-stripe flag-blue"></div> |
|
|
|
|
|
<nav class="bg-white shadow-md"> |
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
<a href="#" class="flex items-center space-x-2"> |
|
<img src="https://cdn-icons-png.flaticon.com/512/197/197576.png" alt="Czech Flag" class="w-8 h-8"> |
|
<span class="title-font text-xl font-bold text-gray-800">Český Život</span> |
|
</a> |
|
|
|
<div class="hidden md:flex space-x-8"> |
|
<a href="#" class="text-gray-700 hover:text-red-600">Home</a> |
|
<a href="#" class="text-gray-700 hover:text-red-600">Culture</a> |
|
<a href="#" class="text-gray-700 hover:text-red-600">Food</a> |
|
<a href="#" class="text-gray-700 hover:text-red-600">Travel</a> |
|
<a href="#" class="text-gray-700 hover:text-red-600">Language</a> |
|
</div> |
|
|
|
<div class="flex items-center space-x-4"> |
|
<button class="md:hidden text-gray-700"> |
|
<i class="fas fa-bars text-xl"></i> |
|
</button> |
|
<button class="hidden md:block bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-full transition-all"> |
|
Subscribe |
|
</button> |
|
</div> |
|
</div> |
|
</nav> |
|
|
|
|
|
<header class="hero-image h-96 flex items-center justify-center text-white"> |
|
<div class="text-center px-4 max-w-3xl"> |
|
<h1 class="title-font text-4xl md:text-6xl font-bold mb-4">Life in the Heart of Europe</h1> |
|
<p class="text-xl md:text-2xl mb-8">Discover the charm, culture, and daily rhythms of the Czech Republic</p> |
|
<button class="bg-white text-red-600 hover:bg-gray-100 px-6 py-3 rounded-full font-semibold transition-all"> |
|
Explore Czech Culture <i class="fas fa-chevron-right ml-2"></i> |
|
</button> |
|
</div> |
|
</header> |
|
|
|
|
|
<section class="py-12 bg-white"> |
|
<div class="container mx-auto px-4"> |
|
<h2 class="title-font text-3xl font-bold text-center mb-12">Featured Stories</h2> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
<article class="bg-gray-50 rounded-lg overflow-hidden shadow-md post-hover transition-all"> |
|
<img src="https://images.unsplash.com/photo-1577285505333-4afdb92a68a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Prague streets" class="w-full h-48 object-cover"> |
|
<div class="p-6"> |
|
<div class="flex items-center space-x-2 mb-3"> |
|
<span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded">Culture</span> |
|
<span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 5 min read</span> |
|
</div> |
|
<h3 class="title-font text-xl font-bold mb-2 text-balance">Navigating Prague: A Local's Guide to the City</h3> |
|
<p class="text-gray-600 mb-4">Discover hidden gems beyond Charles Bridge and Prague Castle that most tourists never see.</p> |
|
<div class="flex items-center justify-between"> |
|
<div class="flex items-center"> |
|
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2"> |
|
<span class="text-sm text-gray-700">Anna Nováková</span> |
|
</div> |
|
<button class="text-red-600 hover:text-red-700 text-sm font-medium"> |
|
Read More <i class="fas fa-chevron-right ml-1"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</article> |
|
|
|
|
|
<article class="bg-gray-50 rounded-lg overflow-hidden shadow-md post-hover transition-all"> |
|
<img src="https://images.unsplash.com/photo-1590803240176-a23642f38537?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Czech food" class="w-full h-48 object-cover"> |
|
<div class="p-6"> |
|
<div class="flex items-center space-x-2 mb-3"> |
|
<span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">Food</span> |
|
<span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 7 min read</span> |
|
</div> |
|
<h3 class="title-font text-xl font-bold mb-2 text-balance">Beyond Goulash: Czech Cuisine Explained</h3> |
|
<p class="text-gray-600 mb-4">From svíčková to trdelník, explore the rich flavors that define Czech culinary tradition.</p> |
|
<div class="flex items-center justify-between"> |
|
<div class="flex items-center"> |
|
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2"> |
|
<span class="text-sm text-gray-700">Jan Dvořák</span> |
|
</div> |
|
<button class="text-red-600 hover:text-red-700 text-sm font-medium"> |
|
Read More <i class="fas fa-chevron-right ml-1"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</article> |
|
|
|
|
|
<article class="bg-gray-50 rounded-lg overflow-hidden shadow-md post-hover transition-all"> |
|
<img src="https://images.unsplash.com/photo-1549877452-9c387954fbc2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Czech countryside" class="w-full h-48 object-cover"> |
|
<div class="p-6"> |
|
<div class="flex items-center space-x-2 mb-3"> |
|
<span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded">Travel</span> |
|
<span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 6 min read</span> |
|
</div> |
|
<h3 class="title-font text-xl font-bold mb-2 text-balance">The Bohemian Countryside: Escaping the City</h3> |
|
<p class="text-gray-600 mb-4">Why weekends in Český Krumlov, Karlštejn, and beyond should be on every expat's calendar.</p> |
|
<div class="flex items-center justify-between"> |
|
<div class="flex items-center"> |
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2"> |
|
<span class="text-sm text-gray-700">Eva Svobodová</span> |
|
</div> |
|
<button class="text-red-600 hover:text-red-700 text-sm font-medium"> |
|
Read More <i class="fas fa-chevron-right ml-1"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</article> |
|
</div> |
|
|
|
<div class="text-center mt-12"> |
|
<button class="border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white px-6 py-2 rounded-full font-medium transition-all"> |
|
View All Articles <i class="fas fa-arrow-right ml-2"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-12 bg-gray-100"> |
|
<div class="container mx-auto px-4"> |
|
<h2 class="title-font text-3xl font-bold text-center mb-12">Czech Republic at a Glance</h2> |
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center"> |
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
<div class="text-red-600 text-4xl mb-3"> |
|
<i class="fas fa-beer"></i> |
|
</div> |
|
<h3 class="font-bold mb-1">Cheapest Beer</h3> |
|
<p class="text-gray-600 text-sm">World's lowest beer prices at ~$1.50/pint</p> |
|
</div> |
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
<div class="text-red-600 text-4xl mb-3"> |
|
<i class="fas fa-landmark"></i> |
|
</div> |
|
<h3 class="font-bold mb-1">2000+ Castles</h3> |
|
<p class="text-gray-600 text-sm">Highest castle density in the world</p> |
|
</div> |
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
<div class="text-red-600 text-4xl mb-3"> |
|
<i class="fas fa-language"></i> |
|
</div> |
|
<h3 class="font-bold mb-1">Čeština</h3> |
|
<p class="text-gray-600 text-sm">Czech is considered a difficult language</p> |
|
</div> |
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
<div class="text-red-600 text-4xl mb-3"> |
|
<i class="fas fa-heart"></i> |
|
</div> |
|
<h3 class="font-bold mb-1">High Happiness</h3> |
|
<p class="text-gray-600 text-sm">Ranked among world's happiest nations</p> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-12 bg-white"> |
|
<div class="container mx-auto px-4"> |
|
<div class="flex flex-col md:flex-row justify-between items-center mb-12"> |
|
<h2 class="title-font text-3xl font-bold mb-4 md:mb-0">Latest Articles</h2> |
|
<div class="flex space-x-2"> |
|
<button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-all">Culture</button> |
|
<button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-all">Travel</button> |
|
<button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-all">Food</button> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
|
|
|
<article class="border-2 border-gray-200 rounded-lg overflow-hidden flex flex-col md:flex-row"> |
|
<img src="https://images.unsplash.com/photo-1574629810360-7efbbe195018?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1493&q=80" alt="Czech Christmas" class="w-full md:w-1/2 h-64 md:h-auto object-cover"> |
|
<div class="p-6 md:w-1/2 flex flex-col justify-between"> |
|
<div> |
|
<span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded mb-3 inline-block">Holidays</span> |
|
<h3 class="title-font text-xl font-bold mb-3">Czech Christmas Traditions Explained</h3> |
|
<p class="text-gray-600 mb-4">From carp in the bathtub to golden pig predictions, Czech Christmas traditions are wonderfully unique. Learn what makes the holidays special here.</p> |
|
</div> |
|
<div class="flex items-center justify-between"> |
|
<div class="flex items-center"> |
|
<img src="https://randomuser.me/api/portraits/women/24.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2"> |
|
<span class="text-sm text-gray-700">Lucie Králová</span> |
|
</div> |
|
<span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 8 min read</span> |
|
</div> |
|
</div> |
|
</article> |
|
|
|
|
|
<div class="space-y-6"> |
|
<article class="border-b pb-6"> |
|
<span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded mb-2 inline-block">Transportation</span> |
|
<h3 class="title-font text-lg font-bold mb-2">Mastering Czech Public Transport</h3> |
|
<p class="text-gray-600 mb-3">From PID tickets to night trams, learn how to navigate Prague's excellent transport system like a local.</p> |
|
<div class="flex items-center text-sm text-gray-500"> |
|
<span>Petr Malý</span> |
|
<span class="mx-2">•</span> |
|
<span>Dec 12, 2023</span> |
|
<span class="mx-2">•</span> |
|
<span>4 min read</span> |
|
</div> |
|
</article> |
|
|
|
<article class="border-b pb-6"> |
|
<span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded mb-2 inline-block">Money</span> |
|
<h3 class="title-font text-lg font-bold mb-2">Cost of Living in Czech Republic</h3> |
|
<p class="text-gray-600 mb-3">How much does it really cost to live comfortably in Prague and other Czech cities? A detailed breakdown.</p> |
|
<div class="flex items-center text-sm text-gray-500"> |
|
<span>Jana Horáková</span> |
|
<span class="mx-2">•</span> |
|
<span>Nov 28, 2023</span> |
|
<span class="mx-2">•</span> |
|
<span>9 min read</span> |
|
</div> |
|
</article> |
|
|
|
<article> |
|
<span class="bg-purple-100 text-purple-600 text-xs px-2 py-1 rounded mb-2 inline-block">Language</span> |
|
<h3 class="title-font text-lg font-bold mb-2">Essential Czech Phrases for Beginners</h3> |
|
<p class="text-gray-600 mb-3">You don't need fluency, but these 20+ phrases will earn you smiles from locals.</p> |
|
<div class="flex items-center text-sm text-gray-500"> |
|
<span>Martin Čech</span> |
|
<span class="mx-2">•</span> |
|
<span>Nov 15, 2023</span> |
|
<span class="mx-2">•</span> |
|
<span>5 min read</span> |
|
</div> |
|
</article> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-12 bg-red-600 text-white"> |
|
<div class="container mx-auto px-4 text-center max-w-2xl"> |
|
<h2 class="title-font text-3xl font-bold mb-4">Get Bohemian Insights</h2> |
|
<p class="text-xl mb-8">Join our newsletter for monthly updates on Czech culture, language tips, and hidden travel gems.</p> |
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center"> |
|
<input type="email" placeholder="Your email address" class="px-4 py-3 rounded-full w-full sm:w-96 text-gray-800 focus:outline-none focus:ring-2 focus:ring-red-300"> |
|
<button class="bg-white text-red-600 hover:bg-gray-100 px-6 py-3 rounded-full font-semibold whitespace-nowrap transition-all"> |
|
Subscribe Now <i class="fas fa-paper-plane ml-2"></i> |
|
</button> |
|
</div> |
|
|
|
<p class="text-red-100 mt-4 text-sm">We respect your privacy. Unsubscribe at any time.</p> |
|
</div> |
|
</section> |
|
|
|
|
|
<footer class="bg-gray-900 text-white pt-12 pb-6"> |
|
<div class="container mx-auto px-4"> |
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|
<div> |
|
<h3 class="title-font text-lg font-bold mb-4">Český Život</h3> |
|
<p class="text-gray-400">Exploring Czech culture, traditions, and daily life through the eyes of locals and expats.</p> |
|
<div class="flex space-x-4 mt-4"> |
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> |
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> |
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest"></i></a> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<h4 class="font-bold mb-4">Explore</h4> |
|
<ul class="space-y-2"> |
|
<li><a href="#" class="text-gray-400 hover:text-white">Prague Living</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white">Regional Guides</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white">Czech Traditions</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white">Expats Resources</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white">Photo Essays</a></li> |
|
</ul> |
|
</div> |
|
|
|
<div> |
|
<h4 class="font-bold mb-4">About</h4> |
|
<ul class="space-y-2"> |
|
<li><a href="#" class="text-gray-400 hover:text-white">Our Story</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white">Contributors</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white">Work With Us</a></li> |
|
</ul> |
|
</div> |
|
|
|
<div> |
|
<h4 class="font-bold mb-4">Popular Tags</h4> |
|
<div class="flex flex-wrap gap-2"> |
|
<a href="#" class="bg-gray-800 hover:bg-red-600 text-gray-100 px-3 py-1 rounded-full text-sm">History</a> |
|
<a href="#" class="bg-gray-800 hover:bg-red-600 text-gray-100 px-3 py-1 rounded-full text-sm">Festivals</a> |
|
<a href="#" class="bg-gray-800 hover:bg-red-600 text-gray-100 px-3 py-1 rounded-full text-sm">Hiking</a> |
|
<a href="#" class="bg-gray-800 hover:bg-red-600 text-gray-100 px-3 py-1 rounded-full text-sm">Beer</a> |
|
<a href="#" class="bg-gray-800 hover:bg-red-600 text-gray-100 px-3 py-1 rounded-full text-sm">Language</a> |
|
<a href="#" class="bg-gray-800 hover:bg-red-600 text-gray-100 px-3 py-1 rounded-full text-sm">Visa Guide</a> |
|
<a href="#" class="bg-gray-800 hover:bg-red-600 text-gray-100 px-3 py-1 rounded-full text-sm">Shopping</a> |
|
<a href="#" class="bg-gray-800 hover:bg-red-600 text-gray-100 px-3 py-1 rounded-full text-sm">Nature</a> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center"> |
|
<p class="text-gray-400 text-sm mb-2 md:mb-0">© 2023 Český Život. All rights reserved.</p> |
|
<div class="text-gray-400 text-sm"> |
|
Made with <i class="fas fa-heart text-red-400"></i> in Prague |
|
</div> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
const mobileMenuButton = document.querySelector('.md\\:hidden'); |
|
|
|
mobileMenuButton.addEventListener('click', function() { |
|
alert('Mobile menu would open here in a full implementation'); |
|
}); |
|
|
|
|
|
const observerOptions = { |
|
threshold: 0.1, |
|
rootMargin: '0px 0px -50px 0px' |
|
}; |
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
entries.forEach(entry => { |
|
if (entry.isIntersecting) { |
|
entry.target.classList.add('animate-fadeIn'); |
|
observer.unobserve(entry.target); |
|
} |
|
}); |
|
}, observerOptions); |
|
|
|
document.querySelectorAll('.post-hover').forEach(card => { |
|
observer.observe(card); |
|
}); |
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Enjii/http-shirendev-enkhtsetseg-huggingface-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |