Un codice del testo

Apri nell'Editor Pubblica il Tuo Codice

Un codice del testo

Consigliato

14 May 2025

Un codice di cyrillsemah

13 June 2025

Un codice di ashimadison8

24 May 2025

Un codice per neumorfismo

HTML

<!DOCTYPE html>

<html lang="tr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Epicure | Premium Gurme Deneyimi</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

<style>

:root {

--dark-bg: rgba(22, 25, 37, 0.85);

--glass-bg: rgba(255, 255, 255, 0.08);

--glass-border: rgba(255, 255, 255, 0.1);

--accent-yellow: #FFD43B;

--accent-green: #51CF66;

--text-light: #F8F9FA;

--text-muted: #ADB5BD;

--card-radius: 16px;

--shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.2);

--transition: all 0.3s ease;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Inter', sans-serif;

background: linear-gradient(135deg, #1a1f2e 0%, #252b3d 100%);

color: var(--text-light);

line-height: 1.6;

overflow-x: hidden;

}

.container {

width: 100%;

max-width: 1400px;

margin: 0 auto;

padding: 0 20px;

}

/* Navigation Bar */

.navbar {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 1000;

background: var(--dark-bg);

backdrop-filter: blur(20px);

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

border-bottom: 1px solid var(--glass-border);

padding: 15px 0;

}

.nav-container {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-family: 'Playfair Display', serif;

font-size: 28px;

font-weight: 700;

color: var(--accent-yellow);

text-decoration: none;

}

.nav-search {

flex: 1;

max-width: 500px;

margin: 0 30px;

position: relative;

}

.nav-search input {

width: 100%;

padding: 12px 20px;

border-radius: 50px;

border: none;

background: var(--glass-bg);

color: var(--text-light);

font-size: 15px;

backdrop-filter: blur(10px);

border: 1px solid var(--glass-border);

}

.nav-search input::placeholder {

color: var(--text-muted);

}

.nav-search i {

position: absolute;

right: 20px;

top: 50%;

transform: translateY(-50%);

color: var(--text-muted);

}

.nav-actions {

display: flex;

align-items: center;

}

.nav-icon {

width: 40px;

height: 40px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

margin-left: 15px;

background: var(--glass-bg);

color: var(--text-light);

text-decoration: none;

position: relative;

transition: var(--transition);

}

.nav-icon:hover {

background: rgba(255, 255, 255, 0.15);

color: var(--accent-yellow);

}

.notification-badge {

position: absolute;

top: -2px;

right: -2px;

width: 18px;

height: 18px;

border-radius: 50%;

background: var(--accent-green);

color: var(--dark-bg);

font-size: 10px;

display: flex;

align-items: center;

justify-content: center;

font-weight: 600;

}

.user-avatar {

width: 45px;

height: 45px;

border-radius: 50%;

overflow: hidden;

margin-left: 15px;

border: 2px solid var(--accent-yellow);

}

.user-avatar img {

width: 100%;

height: 100%;

object-fit: cover;

}

/* Hero Section */

.hero {

margin-top: 80px;

position: relative;

height: 85vh;

border-radius: var(--card-radius);

overflow: hidden;

box-shadow: var(--shadow-soft);

}

.hero-image {

width: 100%;

height: 100%;

object-fit: cover;

}

.hero-content {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

padding: 60px 40px;

background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));

}

.hero-badge {

display: inline-block;

padding: 8px 20px;

background: var(--accent-green);

color: var(--dark-bg);

border-radius: 50px;

font-weight: 600;

font-size: 14px;

margin-bottom: 20px;

}

.hero-title {

font-family: 'Playfair Display', serif;

font-size: 3.5rem;

font-weight: 700;

margin-bottom: 15px;

line-height: 1.2;

}

.hero-description {

font-size: 1.2rem;

max-width: 600px;

margin-bottom: 30px;

color: var(--text-light);

opacity: 0.9;

}

.hero-actions {

display: flex;

gap: 15px;

}

.btn {

padding: 14px 30px;

border-radius: 50px;

font-weight: 600;

font-size: 16px;

cursor: pointer;

transition: var(--transition);

border: none;

display: inline-flex;

align-items: center;

gap: 10px;

}

.btn-primary {

background: var(--accent-yellow);

color: var(--dark-bg);

}

.btn-primary:hover {

background: #FFC107;

transform: translateY(-3px);

box-shadow: 0 10px 20px rgba(255, 212, 59, 0.3);

}

.btn-secondary {

background: transparent;

color: var(--text-light);

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

}

.btn-secondary:hover {

background: rgba(255, 255, 255, 0.1);

border-color: rgba(255, 255, 255, 0.5);

}

/* Categories Slider */

.section {

padding: 80px 0;

}

.section-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 40px;

}

.section-title {

font-family: 'Playfair Display', serif;

font-size: 2.5rem;

font-weight: 700;

}

.section-link {

color: var(--accent-yellow);

text-decoration: none;

font-weight: 600;

display: flex;

align-items: center;

gap: 8px;

}

.categories-slider {

display: flex;

gap: 20px;

overflow-x: auto;

padding: 10px 5px;

scrollbar-width: none;

}

.categories-slider::-webkit-scrollbar {

display: none;

}

.category-card {

min-width: 280px;

height: 350px;

border-radius: var(--card-radius);

overflow: hidden;

position: relative;

box-shadow: var(--shadow-soft);

flex-shrink: 0;

}

.category-image {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.5s ease;

}

.category-card:hover .category-image {

transform: scale(1.05);

}

.category-content {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

padding: 25px;

background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));

}

.category-title {

font-size: 1.5rem;

font-weight: 600;

margin-bottom: 8px;

}

.category-count {

font-size: 14px;

color: var(--text-muted);

}

/* Recipe Detail Preview */

.recipe-detail-preview {

background: var(--dark-bg);

border-radius: var(--card-radius);

overflow: hidden;

box-shadow: var(--shadow-soft);

margin-bottom: 80px;

}

.recipe-cover {

width: 100%;

height: 400px;

object-fit: cover;

}

.recipe-content {

padding: 40px;

}

.recipe-header {

display: flex;

justify-content: space-between;

align-items: flex-start;

margin-bottom: 30px;

}

.recipe-title {

font-family: 'Playfair Display', serif;

font-size: 2.5rem;

font-weight: 700;

margin-bottom: 10px;

}

.recipe-meta {

display: flex;

gap: 20px;

margin-bottom: 20px;

}

.meta-item {

display: flex;

align-items: center;

gap: 8px;

color: var(--text-muted);

font-size: 14px;

}

.ingredients-card {

background: var(--glass-bg);

border-radius: var(--card-radius);

padding: 25px;

margin-bottom: 30px;

border: 1px solid var(--glass-border);

}

.card-title {

font-size: 1.2rem;

font-weight: 600;

margin-bottom: 20px;

display: flex;

align-items: center;

gap: 10px;

}

.ingredients-list {

list-style: none;

display: grid;

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

gap: 12px;

}

.ingredient-item {

display: flex;

align-items: center;

gap: 10px;

padding: 8px 0;

}

.ingredient-checkbox {

width: 18px;

height: 18px;

border-radius: 4px;

border: 1px solid var(--text-muted);

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

}

.ingredient-checkbox.checked {

background: var(--accent-green);

border-color: var(--accent-green);

}

.ingredient-checkbox.checked:after {

content: "✓";

color: var(--dark-bg);

font-size: 12px;

font-weight: bold;

}

.steps-section {

margin-top: 40px;

}

.step-item {

display: flex;

margin-bottom: 30px;

}

.step-number {

width: 40px;

height: 40px;

border-radius: 50%;

background: var(--accent-yellow);

color: var(--dark-bg);

display: flex;

align-items: center;

justify-content: center;

font-weight: 700;

margin-right: 20px;

flex-shrink: 0;

}

.step-content {

flex: 1;

}

.step-image {

width: 100%;

height: 200px;

object-fit: cover;

border-radius: var(--card-radius);

margin-top: 15px;

}

.video-section {

margin-top: 40px;

position: relative;

border-radius: var(--card-radius);

overflow: hidden;

}

.video-placeholder {

width: 100%;

height: 400px;

background: linear-gradient(45deg, #2d3748, #4a5568);

display: flex;

align-items: center;

justify-content: center;

position: relative;

}

.play-button {

width: 80px;

height: 80px;

border-radius: 50%;

background: var(--accent-yellow);

display: flex;

align-items: center;

justify-content: center;

color: var(--dark-bg);

font-size: 24px;

cursor: pointer;

transition: var(--transition);

z-index: 2;

}

.play-button:hover {

transform: scale(1.1);

box-shadow: 0 0 30px rgba(255, 212, 59, 0.5);

}

/* Chef Profile Preview */

.chef-profile {

background: var(--dark-bg);

border-radius: var(--card-radius);

overflow: hidden;

box-shadow: var(--shadow-soft);

padding: 40px;

display: flex;

gap: 40px;

margin-bottom: 80px;

}

.chef-portrait {

width: 300px;

height: 400px;

border-radius: var(--card-radius);

object-fit: cover;

flex-shrink: 0;

}

.chef-info {

flex: 1;

}

.chef-name {

font-family: 'Playfair Display', serif;

font-size: 2.5rem;

font-weight: 700;

margin-bottom: 15px;

}

.chef-title {

font-size: 1.2rem;

color: var(--accent-yellow);

margin-bottom: 20px;

}

.chef-bio {

margin-bottom: 30px;

line-height: 1.7;

}

.chef-stats {

display: flex;

gap: 30px;

margin-bottom: 30px;

}

.stat-item {

text-align: center;

}

.stat-value {

font-size: 1.8rem;

font-weight: 700;

color: var(--accent-yellow);

}

.stat-label {

font-size: 14px;

color: var(--text-muted);

}

.signature-recipes {

margin-top: 40px;

}

.recipes-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

gap: 20px;

margin-top: 20px;

}

.recipe-card {

border-radius: var(--card-radius);

overflow: hidden;

background: var(--glass-bg);

border: 1px solid var(--glass-border);

transition: var(--transition);

}

.recipe-card:hover {

transform: translateY(-5px);

box-shadow: var(--shadow-soft);

}

.recipe-card-image {

width: 100%;

height: 180px;

object-fit: cover;

}

.recipe-card-content {

padding: 15px;

}

.recipe-card-title {

font-weight: 600;

margin-bottom: 8px;

font-size: 1.1rem;

}

.recipe-card-meta {

display: flex;

justify-content: space-between;

color: var(--text-muted);

font-size: 13px;

}

/* Footer */

.footer {

background: var(--dark-bg);

padding: 60px 0 30px;

margin-top: 80px;

border-top: 1px solid var(--glass-border);

}

.footer-content {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 40px;

margin-bottom: 40px;

}

.footer-column h3 {

font-family: 'Playfair Display', serif;

font-size: 1.5rem;

margin-bottom: 20px;

color: var(--accent-yellow);

}

.footer-links {

list-style: none;

}

.footer-links li {

margin-bottom: 12px;

}

.footer-links a {

color: var(--text-muted);

text-decoration: none;

transition: var(--transition);

}

.footer-links a:hover {

color: var(--accent-yellow);

}

.footer-bottom {

text-align: center;

padding-top: 30px;

border-top: 1px solid var(--glass-border);

color: var(--text-muted);

font-size: 14px;

}

/* Responsive Design */

@media (max-width: 1024px) {

.hero-title {

font-size: 2.8rem;

}

.chef-profile {

flex-direction: column;

}

.chef-portrait {

width: 100%;

max-width: 400px;

margin: 0 auto;

}

}

@media (max-width: 768px) {

.nav-search {

display: none;

}

.hero-title {

font-size: 2.2rem;

}

.hero-description {

font-size: 1rem;

}

.section-title {

font-size: 2rem;

}

.recipe-header {

flex-direction: column;

}

.ingredients-list {

grid-template-columns: 1fr;

}

}

@media (max-width: 480px) {

.hero {

height: 70vh;

}

.hero-content {

padding: 30px 20px;

}

.hero-title {

font-size: 1.8rem;

}

.hero-actions {

flex-direction: column;

}

.btn {

width: 100%;

justify-content: center;

}

.recipe-content {

padding: 25px;

}

.recipe-title {

font-size: 1.8rem;

}

}

</style>

</head>

<body>

<nav class="navbar">

<div class="container nav-container">

<a href="#" class="logo">Epicure</a>

<div class="nav-search">

<input type="text" placeholder="Tarif, malzeme veya şef ara...">

<i class="fas fa-search"></i>

</div>

<div class="nav-actions">

<a href="#" class="nav-icon">

<i class="far fa-heart"></i>

</a>

<a href="#" class="nav-icon">

<i class="far fa-bell"></i>

<span class="notification-badge">3</span>

</a>

<div class="user-avatar">

<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Profil">

</div>

</div>

</div>

</nav>

<section class="hero container">

<img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Öne Çıkan Tarif" class="hero-image">

<div class="hero-content">

<span class="hero-badge">Günün Tarifi</span>

<h1 class="hero-title">Truffle Mantarlı Risotto</h1>

<p class="hero-description">Kremasıyla ağızda dağılan risotto, siyah trüf mantarı ve parmesan peyniri ile buluşuyor. Gurme bir İtalyan lezzeti.</p>

<div class="hero-actions">

<button class="btn btn-primary">

<i class="fas fa-play-circle"></i> Tarifi Görüntüle

</button>

<button class="btn btn-secondary">

<i class="far fa-bookmark"></i> Favorilere Ekle

</button>

</div>

</div>

</section>

<section class="section container">

<div class="section-header">

<h2 class="section-title">Kategorileri Keşfedin</h2>

<a href="#" class="section-link">

Tümünü Gör <i class="fas fa-arrow-right"></i>

</a>

</div>

<div class="categories-slider">

<div class="category-card">

<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="İtalyan Mutfağı" class="category-image">

<div class="category-content">

<h3 class="category-title">İtalyan Mutfağı</h3>

<p class="category-count">124 Tarif</p>

</div>

</div>

<div class="category-card">

<img src="https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="Fransız Mutfağı" class="category-image">

<div class="category-content">

<h3 class="category-title">Fransız Mutfağı</h3>

<p class="category-count">87 Tarif</p>

</div>

</div>

<div class="category-card">

<img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="Tatlılar" class="category-image">

<div class="category-content">

<h3 class="category-title">Tatlılar</h3>

<p class="category-count">156 Tarif</p>

</div>

</div>

<div class="category-card">

<img src="https://images.unsplash.com/photo-1546833999-b9f581a1996d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="Vejetaryen" class="category-image">

<div class="category-content">

<h3 class="category-title">Vejetaryen</h3>

<p class="category-count">203 Tarif</p>

</div>

</div>

<div class="category-card">

<img src="https://images.unsplash.com/photo-1598214886806-c87b84b7078b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1025&q=80" alt="Barbekü" class="category-image">

<div class="category-content">

<h3 class="category-title">Barbekü</h3>

<p class="category-count">76 Tarif</p>

</div>

</div>

</div>

</section>

<section class="container">

<div class="recipe-detail-preview">

<img src="https://images.unsplash.com/photo-1476124369491-e7addf5db371?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Truffle Mantarlı Risotto" class="recipe-cover">

<div class="recipe-content">

<div class="recipe-header">

<div>

<h1 class="recipe-title">Truffle Mantarlı Risotto</h1>

<div class="recipe-meta">

<div class="meta-item">

<i class="far fa-clock"></i>

<span>35 dk</span>

</div>

<div class="meta-item">

<i class="fas fa-user-friends"></i>

<span>4 kişilik</span>

</div>

<div class="meta-item">

<i class="fas fa-fire"></i>

<span>Orta zorluk</span>

</div>

</div>

</div>

<button class="btn btn-primary">

<i class="far fa-bookmark"></i> Kaydet

</button>

</div>

<div class="ingredients-card">

<h3 class="card-title">

<i class="fas fa-shopping-basket"></i> Malzemeler

</h3>

<ul class="ingredients-list">

<li class="ingredient-item">

<div class="ingredient-checkbox"></div>

<span>1 su bardağı Arborio pirinci</span>

</li>

<li class="ingredient-item">

<div class="ingredient-checkbox"></div>

<span>4 su bardağı tavuk suyu</span>

</li>

<li class="ingredient-item">

<div class="ingredient-checkbox"></div>

<span>1 adet soğan (küp doğranmış)</span>

</li>

<li class="ingredient-item">

<div class="ingredient-checkbox"></div>

<span>2 diş sarımsak (ince kıyılmış)</span>

</li>

<li class="ingredient-item">

<div class="ingredient-checkbox"></div>

<span>1/2 su bardağı beyaz şarap</span>

</li>

<li class="ingredient-item">

<div class="ingredient-checkbox"></div>

<span>1/2 su bardağı rendelenmiş parmesan</span>

</li>

<li class="ingredient-item">

<div class="ingredient-checkbox"></div>

<span>2 yemek kaşığı trüf yağı</span>

</li>

<li class="ingredient-item">

<div class="ingredient-checkbox"></div>

<span>Taze çekilmiş karabiber</span>

</li>

</ul>

</div>

<div class="steps-section">

<h3 class="card-title">

<i class="fas fa-list-ol"></i> Hazırlanışı

</h3>

<div class="step-item">

<div class="step-number">1</div>

<div class="step-content">

<p>Tavuk suyunu bir tencerede kaynatın, ardından ocağın altını kısık ateşe getirip sıcak tutun.</p>

<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="Adım 1" class="step-image">

</div>

</div>

<div class="step-item">

<div class="step-number">2</div>

<div class="step-content">

<p>Geniş bir tavada zeytinyağını ısıtın. Soğanı 5 dakika yumuşayıncaya kadar soteleyin, ardından sarımsağı ekleyip 1 dakika daha pişirin.</p>

<img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Adım 2" class="step-image">

</div>

</div>

</div>

<div class="video-section">

<div class="video-placeholder">

<div class="play-button">

<i class="fas fa-play"></i>

</div>

</div>

</div>

</div>

</div>

</section>

<section class="container">

<div class="chef-profile">

<img src="https://images.unsplash.com/photo-1583394293214-28ded15ee548?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" alt="Şef Marco Bianchi" class="chef-portrait">

<div class="chef-info">

<h2 class="chef-name">Marco Bianchi</h2>

<p class="chef-title">Michelin Yıldızlı Şef & İtalyan Mutfağı Uzmanı</p>

<p class="chef-bio">20 yılı aşkın süredir İtalyan mutfağının inceliklerini öğreten ve uygulayan Marco Bianchi, Milano'da doğup büyüdü. Culinary Institute of America'dan mezun olduktan sonra İtalya'nın çeşitli Michelin yıldızlı restoranlarında çalıştı. Geleneksel İtalyan tariflerini modern tekniklerle birleştirme konusunda uzmanlaşmıştır.</p>

<div class="chef-stats">

<div class="stat-item">

<div class="stat-value">127</div>

<div class="stat-label">Tarif</div>

</div>

<div class="stat-item">

<div class="stat-value">54K</div>

<div class="stat-label">Takipçi</div>

</div>

<div class="stat-item">

<div class="stat-value">12</div>

<div class="stat-label">Yıl Deneyim</div>

</div>

</div>

<button class="btn btn-primary">

<i class="fas fa-user-plus"></i> Takip Et

</button>

<div class="signature-recipes">

<h3 class="card-title">

<i class="fas fa-utensils"></i> İmza Tarifleri

</h3>

<div class="recipes-grid">

<div class="recipe-card">

<img src="https://images.unsplash.com/photo-1621996346565-e3dbc353d2e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" alt="Osso Buco" class="recipe-card-image">

<div class="recipe-card-content">

<h4 class="recipe-card-title">Osso Buco</h4>

<div class="recipe-card-meta">

<span>120 dk</span>

<span>Zor</span>

</div>

</div>

</div>

<div class="recipe-card">

<img src="https://images.unsplash.com/photo-1565299507177-b0ac66763828?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1522&q=80" alt="Tiramisu" class="recipe-card-image">

<div class="recipe-card-content">

<h4 class="recipe-card-title">Tiramisu</h4>

<div class="recipe-card-meta">

<span>45 dk</span>

<span>Orta</span>

</div>

</div>

</div>

<div class="recipe-card">

<img src="https://images.unsplash.com/photo-1598866594230-a7c12756260f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1512&q=80" alt="Panna Cotta" class="recipe-card-image">

<div class="recipe-card-content">

<h4 class="recipe-card-title">Panna Cotta</h4>

<div class="recipe-card-meta">

<span>30 dk</span>

<span>Kolay</span>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

<footer class="footer">

<div class="container">

<div class="footer-content">

<div class="footer-column">

<h3>Epicure</h3>

<p>Dünyanın dört bir yanından en seçkin tarifleri bir araya getiriyoruz. Gurme deneyimini herkesle buluşturma misyonuyla yola çıktık.</p>

</div>

<div class="footer-column">

<h3>Keşfet</h3>

<ul class="footer-links">

<li><a href="#">Tarifler</a></li>

<li><a href="#">Şefler</a></li>

<li><a href="#">Kategoriler</a></li>

<li><a href="#">Koleksiyonlar</a></li>

<li><a href="#">Yemek Okulu</a></li>

</ul>

</div>

<div class="footer-column">

<h3>Hakkımızda</h3>

<ul class="footer-links">

<li><a href="#">Biz Kimiz</a></li>

<li><a href="#">Ekibimiz</a></li>

<li><a href="#">Kariyer</a></li>

<li><a href="#">İletişim</a></li>

<li><a href="#">Gizlilik Politikası</a></li>

</ul>

</div>

<div class="footer-column">

<h3>Bize Ulaşın</h3>

<ul class="footer-links">

<li><i class="fas fa-map-marker-alt"></i> İstanbul, Türkiye</li>

<li><i class="fas fa-phone"></i> +90 (212) 123 45 67</li>

<li><i class="far fa-envelope"></i> info@epicure.com</li>

</ul>

<div style="margin-top: 20px; display: flex; gap: 15px;">

<a href="#" class="nav-icon">

<i class="fab fa-instagram"></i>

</a>

<a href="#" class="nav-icon">

<i class="fab fa-facebook-f"></i>

</a>

<a href="#" class="nav-icon">

<i class="fab fa-youtube"></i>

</a>

<a href="#" class="nav-icon">

<i class="fab fa-pinterest"></i>

</a>

</div>

</div>

</div>

<div class="footer-bottom">

<p>© 2023 Epicure. Tüm hakları saklıdır.</p>

</div>

</div>

</footer>

<script>

// Malzeme checkbox işlevselliği

document.querySelectorAll('.ingredient-checkbox').forEach(checkbox => {

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

this.classList.toggle('checked');

});

});

// Video oynatma butonu

document.querySelector('.play-button').addEventListener('click', function() {

alert('Video oynatılıyor...');

});

// Kategori slider kaydırma

const slider = document.querySelector('.categories-slider');

let isDown = false;

let startX;

let scrollLeft;

slider.addEventListener('mousedown', (e) => {

isDown = true;

startX = e.pageX - slider.offsetLeft;

scrollLeft = slider.scrollLeft;

});

slider.addEventListener('mouseleave', () => {

isDown = false;

});

slider.addEventListener('mouseup', () => {

isDown = false;

});

slider.addEventListener('mousemove', (e) => {

if(!isDown) return;

e.preventDefault();

const x = e.pageX - slider.offsetLeft;

const walk = (x - startX) * 2;

slider.scrollLeft = scrollLeft - walk;

});

</script>

</body>

</html>

CSS

JS