Enjii's picture
life in the czech republic blog - Initial Deployment
ad47fdd verified
<!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">
<!-- Flag stripes -->
<div class="flag-stripe flag-red"></div>
<div class="flag-stripe flag-white"></div>
<div class="flag-stripe flag-blue"></div>
<!-- Navigation -->
<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>
<!-- Hero Section -->
<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>
<!-- Featured Posts -->
<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">
<!-- Post 1 -->
<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>
<!-- Post 2 -->
<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>
<!-- Post 3 -->
<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>
<!-- Quick Facts 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>
<!-- Latest Posts -->
<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">
<!-- Large Featured Post -->
<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>
<!-- Smaller Posts -->
<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>
<!-- Newsletter -->
<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 -->
<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>
// Simple mobile menu toggle functionality
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.querySelector('.md\\:hidden');
// In a real implementation, you would add menu toggle functionality here
mobileMenuButton.addEventListener('click', function() {
alert('Mobile menu would open here in a full implementation');
});
// Add animation to cards when they come into view
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>