Webleb - UI Elements - Metenin bir kodu

HTML

<!DOCTYPE html>

<head>

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

<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>

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

</div>

</a>

</a>

</div>

</nav>

<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>

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

</button>

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

</button>

</div>

</section>

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

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

</a>

</div>

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

</section>

<div>

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

</div>

<span>4 kişilik</span>

</div>

<span>Orta zorluk</span>

</div>

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

</button>

</div>

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

</h3>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

</ul>

</div>

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

</h3>

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

</div>

<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>

</div>

</div>

</section>

<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="stat-label">Tarif</div>

</div>

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

</div>

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

</div>

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

</button>

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

</h3>

</div>

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

</div>

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

<span>Kolay</span>

</div>

</section>

<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>

<h3>Keşfet</h3>

<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>

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

<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>

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

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

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

</ul>

</a>

</a>

</a>

</a>

</div>

</div>

</footer>

// 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

Metenin bir kodu

Recommended