https://pastein.ru/t/PWB
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Торты</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--cream: #F9F3EC;
--warm-white: #FDF9F5;
--chocolate: #2C1A0E;
--mocha: #5C3D2E;
--caramel: #C4862B;
--blush: #E8C4A0;
--muted: #8C6E5A;
}
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--chocolate); font-family: 'Inter', sans-serif; font-weight: 300; overflow-x: hidden; }
/* HERO */
.hero {
min-height: 100vh;
display: flex; flex-direction: column; justify-content: center; align-items: center;
text-align: center; padding: 40px 24px; position: relative; overflow: hidden;
}
.hero::before {
content: ''; position: absolute;
width: 600px; height: 600px; border-radius: 50%;
background: radial-gradient(circle, rgba(196,134,43,0.13) 0%, transparent 70%);
top: 50%; left: 50%; transform: translate(-50%,-50%);
animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse {
0%,100% { transform: translate(-50%,-50%) scale(1); opacity:.6; }
50% { transform: translate(-50%,-50%) scale(1.15); opacity:1; }
}
.hero-eyebrow {
font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
color: var(--caramel); margin-bottom: 24px;
opacity:0; animation: fadeUp 1s ease forwards .3s;
}
.hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(52px,10vw,120px); font-weight: 300;
line-height: .9; color: var(--chocolate); letter-spacing: -.02em;
opacity:0; animation: fadeUp 1s ease forwards .5s;
}
.hero-title em { font-style: italic; color: var(--caramel); }
.hero-sub {
font-size: 14px; color: var(--muted); margin-top: 28px; letter-spacing: .05em;
opacity:0; animation: fadeUp 1s ease forwards .8s;
}
.hero-scroll {
position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 8px;
opacity:0; animation: fadeUp 1s ease forwards 1.2s;
}
.hero-scroll span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.scroll-line {
width: 1px; height: 50px;
background: linear-gradient(to bottom, var(--caramel), transparent);
animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
0% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
51% { transform: scaleY(1); transform-origin: bottom; }
100%{ transform: scaleY(0); transform-origin: bottom; }
}
@keyframes fadeUp {
from { opacity:0; transform: translateY(30px); }
to { opacity:1; transform: translateY(0); }
}
/* SECTION */
.cakes-section { padding: 80px 24px 120px; max-width: 1200px; margin: 0 auto; }
.section-label { font-size: 10px; letter-spacing: .35em; text-transform: uppercase; color: var(--caramel); margin-bottom: 60px; text-align: center; }
.divider { width: 1px; height: 60px; background: linear-gradient(to bottom, transparent, var(--caramel), transparent); margin: 0 auto 80px; }
/* CARD */
.cake-card {
display: grid; grid-template-columns: 1fr 1fr;
margin-bottom: 120px; background: var(--warm-white);
border-radius: 2px; overflow: hidden;
box-shadow: 0 2px 40px rgba(44,26,14,.06);
opacity:0; transform: translateY(50px);
transition: opacity .8s ease, transform .8s ease;
}
.cake-card.visible { opacity:1; transform: translateY(0); }
.cake-card:nth-child(even) .cake-image { order: 2; }
.cake-card:nth-child(even) .cake-content { order: 1; }
.cake-image {
position: relative; min-height: 440px; overflow: hidden;
background: var(--blush);
}
.cake-image img {
width: 100%; height: 100%; object-fit: cover;
position: absolute; inset: 0;
transition: transform .8s cubic-bezier(.25,.46,.45,.94);
}
.cake-card:hover .cake-image img { transform: scale(1.05); }
/* placeholder when no image */
.cake-image .no-img {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--muted); font-size: 12px; letter-spacing: .15em;
text-transform: uppercase; opacity: .4;
}
.cake-content { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.cake-num {
font-family: 'Cormorant Garamond', serif;
font-size: 80px; font-weight: 300; color: var(--blush); line-height: 1;
}
.cake-name {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(26px,3.5vw,40px); font-weight: 400;
color: var(--chocolate); line-height: 1.2;
border-bottom: 1px solid var(--blush); padding-bottom: 12px;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field-lbl { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--caramel); }
.field-val { font-size: 14px; color: var(--mocha); line-height: 1.7; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tag {
font-size: 12px; color: var(--mocha);
background: rgba(196,134,43,.08); border: 1px solid rgba(196,134,43,.2);
border-radius: 20px; padding: 4px 14px;
}
footer { text-align: center; padding: 40px 24px; border-top: 1px solid rgba(196,134,43,.15); color: var(--muted); font-size: 12px; letter-spacing: .1em; }
@media (max-width: 768px) {
.cake-card { grid-template-columns: 1fr; }
.cake-card:nth-child(even) .cake-image { order: 0; }
.cake-card:nth-child(even) .cake-content { order: 0; }
.cake-image { min-height: 280px; }
.cake-content { padding: 32px 24px; }
.cake-num { font-size: 56px; }
}
</style>
</head>
<body>
<section class="hero">
<p class="hero-eyebrow">Авторская кондитерская</p>
<h1 class="hero-title">Каждый<br><em>торт</em> —<br>история</h1>
<p class="hero-sub">Вкус · Текстура · Настроение</p>
<div class="hero-scroll">
<div class="scroll-line"></div>
<span>Смотреть</span>
</div>
</section>
<section class="cakes-section">
<p class="section-label">Коллекция</p>
<div class="divider"></div>
<!-- ============================================================
ТОРТ 1 — меняй только содержимое между тегами
img src: путь к фото (можно просто положить рядом с файлом)
============================================================ -->
<article class="cake-card">
<div class="cake-image">
<!-- ФОТО: замени src на путь к своей картинке, например: src="tort1.jpg" -->
<!-- <img src="tort1.jpg" alt="Торт 1"> -->
<div class="no-img">фото</div>
</div>
<div class="cake-content">
<div class="cake-num">01</div>
<h2 class="cake-name">Название торта</h2>
<div class="field">
<span class="field-lbl">Вкус</span>
<p class="field-val">Шоколад, банан, карамель</p>
</div>
<div class="field">
<span class="field-lbl">Описание</span>
<p class="field-val">Нежные коржи с пропиткой, шоколадный мусс и хрустящий слой пралине.</p>
</div>
<div class="field">
<span class="field-lbl">На что похоже</span>
<p class="field-val">Тёплый осенний вечер с кружкой какао</p>
</div>
<div class="tags">
<span class="tag">сладкий</span>
<span class="tag">насыщенный</span>
<span class="tag">шоколадный</span>
</div>
</div>
</article>
<!-- ============================================================
ТОРТ 2
============================================================ -->
<article class="cake-card">
<div class="cake-image">
<!-- <img src="tort2.jpg" alt="Торт 2"> -->
<div class="no-img">фото</div>
</div>
<div class="cake-content">
<div class="cake-num">02</div>
<h2 class="cake-name">Название торта</h2>
<div class="field">
<span class="field-lbl">Вкус</span>
<p class="field-val">Вишня, тёмный шоколад</p>
</div>
<div class="field">
<span class="field-lbl">Описание</span>
<p class="field-val">Сочная вишнёвая начинка, горький шоколад и воздушный ганаш.</p>
</div>
<div class="field">
<span class="field-lbl">На что похоже</span>
<p class="field-val">Летний сад после дождя</p>
</div>
<div class="tags">
<span class="tag">кисло-сладкий</span>
<span class="tag">ягодный</span>
<span class="tag">горький</span>
</div>
</div>
</article>
<!-- ============================================================
ТОРТ 3
============================================================ -->
<article class="cake-card">
<div class="cake-image">
<!-- <img src="tort3.jpg" alt="Торт 3"> -->
<div class="no-img">фото</div>
</div>
<div class="cake-content">
<div class="cake-num">03</div>
<h2 class="cake-name">Название торта</h2>
<div class="field">
<span class="field-lbl">Вкус</span>
<p class="field-val">Варёная сгущёнка, орехи</p>
</div>
<div class="field">
<span class="field-lbl">Описание</span>
<p class="field-val">Хрустящие грецкие орехи, нежный крем-брюле и тонкие карамельные коржи.</p>
</div>
<div class="field">
<span class="field-lbl">На что похоже</span>
<p class="field-val">Бабушкина кухня в воскресенье</p>
</div>
<div class="tags">
<span class="tag">карамельный</span>
<span class="tag">ореховый</span>
<span class="tag">домашний</span>
</div>
</div>
</article>
<!-- ============================================================
ТОРТ 4
============================================================ -->
<article class="cake-card">
<div class="cake-image">
<!-- <img src="tort4.jpg" alt="Торт 4"> -->
<div class="no-img">фото</div>
</div>
<div class="cake-content">
<div class="cake-num">04</div>
<h2 class="cake-name">Название торта</h2>
<div class="field">
<span class="field-lbl">Вкус</span>
<p class="field-val">Арахис, солёная карамель, крекер</p>
</div>
<div class="field">
<span class="field-lbl">Описание</span>
<p class="field-val">Хрустящая основа из крекера, плотный арахисовый крем и тонкая солёная карамель.</p>
</div>
<div class="field">
<span class="field-lbl">На что похоже</span>
<p class="field-val">Snickers, только лучше</p>
</div>
<div class="tags">
<span class="tag">солёно-сладкий</span>
<span class="tag">хрустящий</span>
<span class="tag">арахис</span>
</div>
</div>
</article>
<!-- Копируй блок выше чтобы добавить торт -->
</section>
<footer>© 2025 · Авторские торты</footer>
<script>
// Анимация карточек при скролле
const cards = document.querySelectorAll('.cake-card');
const obs = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } });
}, { threshold: 0.12 });
cards.forEach(c => obs.observe(c));
</script>
</body>
</html>
