<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruity Bites - Fruit Recipes & Cooking</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary: #ff6b6b;
--secondary: #4caf50;
--accent: #ffa726;
--light: #fff9e6;
--dark: #333;
--text: #444;
}
body {
background-color: #f9f9f9;
color: var(--text);
line-height: 1.6;
}
header {
background: linear-gradient(135deg, var(--primary), var(--accent));
color: white;
padding: 1rem 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo h1 {
font-size: 1.8rem;
font-weight: 700;
}
.logo i {
font-size: 2rem;
}
nav ul {
display: flex;
list-style: none;
gap: 2rem;
}
nav a {
color: white;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
padding: 0.5rem 0;
position: relative;
}
nav a:hover {
color: var(--light);
}
nav a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: white;
bottom: 0;
left: 0;
transition: width 0.3s ease;
}
nav a:hover::after {
width: 100%;
}
.hero {
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1490474418585-ba9bad8fd0ea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
background-size: cover;
background-position: center;
color: white;
padding: 6rem 0;
text-align: center;
}
.hero h2 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 2rem;
}
.btn {
display: inline-block;
background: var(--secondary);
color: white;
padding: 0.8rem 1.5rem;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn:hover {
background: #3d8b40;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.section-title {
text-align: center;
margin: 3rem 0 2rem;
color: var(--dark);
position: relative;
}
.section-title::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: var(--primary);
margin: 10px auto;
border-radius: 2px;
}
.recipes {
padding: 2rem 0;
}
.recipe-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.recipe-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.recipe-card:hover {
transform: translateY(-10px);
}
.recipe-img {
height: 200px;
width: 100%;
object-fit: cover;
}
.recipe-content {
padding: 1.5rem;
}
.recipe-content h3 {
margin-bottom: 0.5rem;
color: var(--dark);
}
.recipe-meta {
display: flex;
justify-content: space-between;
margin: 1rem 0;
font-size: 0.9rem;
color: #777;
}
.recipe-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.tag {
background: var(--light);
color: var(--dark);
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
}
.seasonal {
background: var(--light);
padding: 3rem 0;
}
.seasonal-fruits {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
}
.fruit-card {
background: white;
border-radius: 10px;
padding: 1.5rem;
text-align: center;
width: 200px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.fruit-card:hover {
transform: scale(1.05);
}
.fruit-icon {
font-size: 3rem;
color: var(--secondary);
margin-bottom: 1rem;
}
.newsletter {
background: var(--light);
padding: 4rem 0;
text-align: center;
}
.newsletter-form {
max-width: 500px;
margin: 2rem auto 0;
display: flex;
gap: 0.5rem;
}
.newsletter-form input {
flex: 1;
padding: 0.8rem 1rem;
border: none;
border-radius: 5px;
font-size: 1rem;
}
footer {
background: var(--dark);
color: white;
padding: 3rem 0 1.5rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-column h3 {
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-column h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 2px;
background: var(--primary);
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 0.8rem;
}
.footer-column a {
color: #ddd;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column a:hover {
color: var(--primary);
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.social-links a:hover {
background: var(--primary);
transform: translateY(-3px);
}
.copyright {
text-align: center;
padding-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.1);
font-size: 0.9rem;
color: #aaa;
}
.mobile-menu {
display: none;
font-size: 1.5rem;
cursor: pointer;
}
@media (max-width: 768px) {
.header-content {
flex-direction: column;
gap: 1rem;
}
nav ul {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.mobile-menu {
display: block;
}
.hero h2 {
font-size: 2.2rem;
}
.newsletter-form {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="header-content">
<div class="logo">
<i class="fas fa-apple-alt"></i>
<h1>FRUITY BITES</h1>
</div>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#recipes">Recipes</a></li>
<li><a href="#seasonal">Seasonal Fruits</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<div class="mobile-menu">
<i class="fas fa-bars"></i>
</div>
</div>
</div>
</header>
<section class="hero" id="home">
<div class="container">
<h2>Delicious Fruit Recipes for Every Season</h2>
<p>Discover healthy, vibrant, and mouth-watering recipes that celebrate the natural sweetness and nutrition of fruits.</p>
<a href="#recipes" class="btn">Explore Recipes</a>
</div>
</section>
<section class="recipes" id="recipes">
<div class="container">
<h2 class="section-title">Featured Recipes</h2>
<div class="recipe-grid">
<div class="recipe-card">
<img src="https://images.unsplash.com/photo-1488477181946-6428a0291777?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Berry Smoothie Bowl" class="recipe-img">
<div class="recipe-content">
<h3>Tropical Berry Smoothie Bowl</h3>
<p>A refreshing and nutritious breakfast bowl packed with antioxidants and vitamins.</p>
<div class="recipe-meta">
<span><i class="far fa-clock"></i> 10 mins</span>
<span><i class="fas fa-user-friends"></i> 1 serving</span>
</div>
<div class="recipe-tags">
<span class="tag">Breakfast</span>
<span class="tag">Vegan</span>
<span class="tag">Quick</span>
</div>
</div>
</div>
<div class="recipe-card">
<img src="https://images.unsplash.com/photo-1570197788417-0e82375c9371?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=686&q=80" alt="Grilled Peach Salad" class="recipe-img">
<div class="recipe-content">
<h3>Grilled Peach & Arugula Salad</h3>
<p>Sweet grilled peaches paired with peppery arugula and a tangy vinaigrette.</p>
<div class="recipe-meta">
<span><i class="far fa-clock"></i> 20 mins</span>
<span><i class="fas fa-user-friends"></i> 2 servings</span>
</div>
<div class="recipe-tags">
<span class="tag">Salad</span>
<span class="tag">Summer</span>
<span class="tag">Vegetarian</span>
</div>
</div>
</div>
<div class="recipe-card">
<img src="https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Apple Crumble" class="recipe-img">
<div class="recipe-content">
<h3>Classic Apple Crumble</h3>
<p>Warm, comforting apple crumble with a crispy oat topping - perfect for autumn.</p>
<div class="recipe-meta">
<span><i class="far fa-clock"></i> 45 mins</span>
<span><i class="fas fa-user-friends"></i> 6 servings</span>
</div>
<div class="recipe-tags">
<span class="tag">Dessert</span>
<span class="tag">Fall</span>
<span class="tag">Comfort Food</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="seasonal" id="seasonal">
<div class="container">
<h2 class="section-title">Seasonal Fruits Spotlight</h2>
<div class="seasonal-fruits">
<div class="fruit-card">
<i class="fas fa-strawberry fruit-icon"></i>
<h3>Strawberries</h3>
<p>Spring/Summer</p>
</div>
<div class="fruit-card">
<i class="fas fa-apple-alt fruit-icon"></i>
<h3>Apples</h3>
<p>Fall/Winter</p>
</div>
<div class="fruit-card">
<i class="fas fa-lemon fruit-icon"></i>
<h3>Citrus</h3>
<p>Winter</p>
</div>
<div class="fruit-card">
<i class="fas fa-watermelon fruit-icon"></i>
<h3>Watermelon</h3>
<p>Summer</p>
</div>
</div>
</div>
</section>
<section class="newsletter">
<div class="container">
<h2 class="section-title">Join Our Fruit Community</h2>
<p>Subscribe to our newsletter for seasonal recipes, fruit tips, and exclusive content.</p>
<form class="newsletter-form">
<input type="email" placeholder="Your email address" required>
<button type="submit" class="btn">Subscribe</button>
</form>
</div>
</section>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>Fruity Bites</h3>
<p>Celebrating the delicious and nutritious world of fruits through recipes, tips, and community.</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-pinterest"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#recipes">Recipes</a></li>
<li><a href="#seasonal">Seasonal Guide</a></li>
<li><a href="#about">About Us</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Categories</h3>
<ul>
<li><a href="#">Breakfast</a></li>
<li><a href="#">Desserts</a></li>
<li><a href="#">Smoothies</a></li>
<li><a href="#">Salads</a></li>
<li><a href="#">Preserves</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Contact</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> KPK, Pakistan</li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2023 Fruity Bites. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.querySelector('.mobile-menu').addEventListener('click', function() {
document.querySelector('nav ul').classList.toggle('show');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>