Webleb - UI Elements - Mete'nin kodu

HTML

<!DOCTYPE html>

<head>

<title>Gourmet Haven | Premium Recipes</title>

tailwind.config = {

theme: {

extend: {

colors: {

primary: '#FFD700',

secondary: '#4ADE80',

dark: '#1A1A1A',

glass: 'rgba(30, 30, 30, 0.7)',

},

fontFamily: {

sans: ['Inter', 'sans-serif'],

display: ['Poppins', 'sans-serif'],

},

}

</script>

<style>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

body {

background: linear-gradient(135deg, #121212 0%, #1E1E1E 100%);

color: #F5F5F5;

min-height: 100vh;

}

.glass-card {

background: rgba(30, 30, 30, 0.7);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.1);

}

.recipe-card {

transition: all 0.3s ease;

}

.recipe-card:hover {

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

}

.category-btn {

transition: all 0.2s ease;

}

.category-btn:hover {

transform: scale(1.05);

}

.play-btn {

transition: all 0.3s ease;

}

.play-btn:hover {

transform: scale(1.1);

}

.hero-overlay {

background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);

}

</style>

</head>

<a href="#" class="text-2xl font-display font-bold text-primary">Gourmet<span class="text-secondary">Haven</span></a>

<a href="#" class="text-gray-300 hover:text-primary transition">Recipes</a>

<a href="#" class="text-gray-300 hover:text-primary transition">Chefs</a>

<a href="#" class="text-gray-300 hover:text-primary transition">Collections</a>

</div>

</div>

</button>

</div>

</nav>

</button>

<img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80"

alt="Featured Recipe" class="w-full h-full object-cover">

<div>

<span class="bg-primary text-dark text-sm font-bold px-3 py-1 rounded-full">FEATURED</span>

<h1 class="text-4xl md:text-5xl font-display font-bold mt-3">Avocado Toast with Poached Eggs</h1>

</div>

<span>Breakfast</span>

</div>

</div>

<i class="fas fa-play-circle mr-2"></i> Watch Video

</button>

</div>

</section>

<h2 class="text-2xl font-display font-bold mb-6">Categories</h2>

</button>

<span>Breakfast</span>

</button>

<span>Lunch</span>

</button>

<span>Dinner</span>

</button>

<span>Dessert</span>

</button>

<span>Drinks</span>

</button>

<span>Vegan</span>

</button>

</div>

</section>

<h2 class="text-2xl font-display font-bold">Popular Recipes</h2>

</div>

<img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"

alt="Rainbow Salad" class="w-full h-full object-cover">

</div>

4.9 <i class="fas fa-star ml-1"></i>

</div>

<h3 class="font-display font-bold text-xl mb-2">Rainbow Power Salad</h3>

<p class="text-gray-400 text-sm mb-4">A vibrant mix of fresh vegetables with a tangy lemon dressing</p>

</div>

</button>

</div>

<img src="https://images.unsplash.com/photo-1565557623262-b51c2513a641?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1371&q=80"

alt="Pasta" class="w-full h-full object-cover">

</div>

4.7 <i class="fas fa-star ml-1"></i>

</div>

<h3 class="font-display font-bold text-xl mb-2">Creamy Garlic Pasta</h3>

<p class="text-gray-400 text-sm mb-4">Rich and flavorful pasta with a creamy garlic parmesan sauce</p>

</div>

</button>

</div>

<img src="https://images.unsplash.com/photo-1565299624943-baea1379647c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1381&q=80"

alt="Pizza" class="w-full h-full object-cover">

</div>

4.8 <i class="fas fa-star ml-1"></i>

</div>

<h3 class="font-display font-bold text-xl mb-2">Margherita Pizza</h3>

<p class="text-gray-400 text-sm mb-4">Classic Italian pizza with fresh mozzarella and basil</p>

</div>

</button>

</div>

</section>

<h2 class="text-2xl font-display font-bold mb-8 text-center">Meet Our Featured Chef</h2>

<img src="https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"

alt="Chef Maria Rodriguez" class="w-full h-full object-cover">

</div>

<div>

<h3 class="font-display font-bold text-2xl">Chef Maria Rodriguez</h3>

<p class="text-secondary font-medium">Master Chef | Mediterranean Cuisine</p>

</div>

Follow

</button>

</div>

With over 15 years of culinary experience, Chef Maria brings the vibrant flavors of the Mediterranean to your kitchen.

Her passion for fresh ingredients and simple techniques has earned her multiple awards and a loyal following.

</p>

<p class="text-xs text-gray-400">Recipes</p>

</div>

<p class="text-xs text-gray-400">Followers</p>

</div>

<p class="text-xs text-gray-400">Awards</p>

</div>

<h4 class="font-display font-bold mb-3">Signature Dishes</h4>

<img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80"

alt="Dish 1" class="w-20 h-20 rounded-lg object-cover">

<img src="https://images.unsplash.com/photo-1551183053-bf91a1d81141?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1432&q=80"

alt="Dish 2" class="w-20 h-20 rounded-lg object-cover">

<img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"

alt="Dish 3" class="w-20 h-20 rounded-lg object-cover">

<img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"

alt="Dish 4" class="w-20 h-20 rounded-lg object-cover">

</div>

</section>

<h2 class="text-2xl font-display font-bold">Video Tutorials</h2>

</div>

<img src="https://images.unsplash.com/photo-1482049016688-2d3e1b311543?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1610&q=80"

alt="Video thumbnail" class="w-full h-48 object-cover">

</button>

</div>

12:45

</div>

<h3 class="font-display font-bold text-xl mb-2">Perfect Pancakes Every Time</h3>

<p class="text-gray-400 text-sm">Learn the secrets to fluffy, golden pancakes with Chef Michael</p>

</div>

<img src="https://images.unsplash.com/photo-1540420773420-3366772f4999?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1384&q=80"

alt="Video thumbnail" class="w-full h-48 object-cover">

</button>

</div>

18:22

</div>

<h3 class="font-display font-bold text-xl mb-2">5 Salad Dressings You Need to Know</h3>

<p class="text-gray-400 text-sm">Elevate your salads with these simple yet delicious dressings</p>

</div>

</section>

<h2 class="text-3xl font-display font-bold mb-4">Get Weekly Recipe Inspiration</h2>

Join our newsletter and receive the best recipes, cooking tips, and chef interviews directly to your inbox.

</p>

Subscribe

</button>

</div>

</section>

<div>

<h3 class="text-xl font-display font-bold text-primary mb-4">Gourmet<span class="text-secondary">Haven</span></h3>

Bringing the world's finest recipes to your kitchen with premium quality and expert guidance.

</p>

</div>

<div>

<h4 class="font-display font-bold mb-4">Explore</h4>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Recipes</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Chefs</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Collections</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Meal Plans</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Ingredients</a></li>

</ul>

</div>

<div>

<h4 class="font-display font-bold mb-4">Company</h4>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">About Us</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Careers</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Press</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Partners</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Contact</a></li>

</ul>

</div>

<div>

<h4 class="font-display font-bold mb-4">Support</h4>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Help Center</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Community</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Privacy Policy</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Terms of Service</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Cookie Policy</a></li>

</ul>

</div>

</div>

</footer>

// Simple script for mobile menu toggle

document.addEventListener('DOMContentLoaded', function() {

const mobileMenuBtn = document.querySelector('.fa-bars').parentElement;

const navLinks = document.querySelector('nav .hidden.md\\:flex');

mobileMenuBtn.addEventListener('click', function() {

// This would toggle a mobile menu in a real implementation

alert('Mobile menu would open here in a full implementation');

});

// Add hover effect to recipe cards

const recipeCards = document.querySelectorAll('.recipe-card');

recipeCards.forEach(card => {

card.addEventListener('mouseenter', function() {

this.style.transform = 'translateY(-5px)';

this.style.boxShadow = '0 15px 30px rgba(0, 0, 0, 0.3)';

});

card.addEventListener('mouseleave', function() {

this.style.transform = '';

this.style.boxShadow = '';

});

</script>

</body>

</html>

CSS

JS

Mete'nin kodu

Recommended