https://pastein.ru/t/XP8
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure Lite — Cards Component</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
/* ─── твои переменные (из styles.css) ─── */
:root {
--bg-primary: #000000;
--bg-secondary: #080808;
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
--text-muted: #606060;
--accent-gold-glow: #e5a93b;
--border-color: rgba(255,255,255,0.08);
--border-hover: rgba(255,255,255,0.25);
--font-display: 'Syne', sans-serif;
--font-body: 'Inter', sans-serif;
--transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
--transition-fast: all 0.2s ease;
}
/* ─── минимальный reset для превью ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font-body);
background: var(--bg-primary);
color: var(--text-primary);
padding: 3rem 4%;
-webkit-font-smoothing: antialiased;
}
/* ═══════════════════════════════════════
СЕКЦИЯ + ЗАГОЛОВОК — вставляй как есть
═══════════════════════════════════════ */
.listings-section {
width: 100%;
max-width: 1160px;
margin: 0 auto;
}
.listings-header {
display: flex;
align-items: baseline;
gap: 1rem;
margin-bottom: 2.5rem;
}
.listings-title {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 800;
text-transform: lowercase;
letter-spacing: -1px;
}
.listings-count {
font-size: 0.85rem;
color: var(--text-muted);
font-weight: 500;
}
/* ═══════════════════════════════════════
GRID СЕТКА
═══════════════════════════════════════ */
.listings-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 1.5rem;
}
/* ═══════════════════════════════════════
КАРТОЧКА
═══════════════════════════════════════ */
.listing-card {
background: rgba(255,255,255,0.03);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid var(--border-color);
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: var(--transition-smooth);
}
.listing-card:hover {
border-color: var(--border-hover);
transform: translateY(-4px);
box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}
/* ── Картинка ── */
.listing-card__img-wrap {
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--border-color);
aspect-ratio: 16 / 9;
}
.listing-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(1);
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
}
.listing-card:hover .listing-card__img {
transform: scale(1.05);
filter: grayscale(0); /* цвет открывается при наведении */
}
.listing-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
}
/* Бейдж над картинкой */
.listing-card__badge {
position: absolute;
top: 14px;
left: 14px;
background: rgba(255,255,255,0.07);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.13);
border-radius: 30px;
padding: 5px 13px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-primary);
pointer-events: none;
}
/* ── Контент ── */
.listing-card__body {
padding: 1.4rem 1.5rem 1.6rem;
display: flex;
flex-direction: column;
gap: 0.8rem;
flex: 1;
}
.listing-card__title {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 800;
text-transform: lowercase;
letter-spacing: -0.8px;
line-height: 1.15;
margin: 0;
}
.listing-card__desc {
font-size: 0.95rem;
line-height: 1.65;
color: var(--text-secondary);
}
/* Список фич */
.listing-card__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.listing-card__list li {
font-size: 0.9rem;
color: rgba(255,255,255,0.75);
position: relative;
padding-left: 18px;
line-height: 1.45;
}
.listing-card__list li::before {
content: '•';
position: absolute;
left: 0;
top: 0;
color: #ffffff;
font-weight: 700;
font-size: 1rem;
line-height: 1;
}
/* ── Кнопки — те же классы что в твоём .ad-btn ── */
.listing-card__actions {
display: flex;
gap: 0.8rem;
margin-top: auto;
padding-top: 0.4rem;
}
.ad-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 600;
border-radius: 30px;
text-decoration: none;
cursor: pointer;
transition: var(--transition-smooth);
border: none;
}
.btn-details {
background-color: var(--text-primary);
color: var(--bg-primary);
border: 1px solid var(--text-primary);
flex: 1;
justify-content: center;
}
.btn-details:hover {
background-color: transparent;
color: var(--text-primary);
box-shadow: 0 0 15px rgba(255,255,255,0.15);
}
.btn-call {
background-color: transparent;
color: var(--text-primary);
border: 1px solid var(--border-color);
flex: 1;
justify-content: center;
}
.btn-call:hover {
background-color: rgba(255,255,255,0.05);
border-color: var(--border-hover);
color: #4cd964;
box-shadow: 0 0 15px rgba(76,217,100,0.15);
}
/* Прыгающий ? */
.btn-question-jumping {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.2rem;
display: inline-block;
animation: btn-bounce-jump 1.2s infinite ease-in-out;
}
@keyframes btn-bounce-jump {
0%, 100% { transform: translateY(2px); }
50% { transform: translateY(-4px); }
}
/* ═══════════════════════════════════════
МОБИЛКА
═══════════════════════════════════════ */
@media (max-width: 768px) {
.listings-grid {
grid-template-columns: 1fr;
max-width: 480px;
margin: 0 auto;
}
.listing-card__title { font-size: 1.3rem; }
.ad-btn {
padding: 8px 14px;
font-size: 0.8rem;
}
}
</style>
</head>
<body>
<!-- ═══════════════════════════════
ВСТАВЬ ЭТОТ БЛОК В index.html
═══════════════════════════════ -->
<section class="listings-section">
<div class="listings-header">
<h2 class="listings-title">бизнесы тульского</h2>
<span class="listings-count">5 объявлений</span>
</div>
<div class="listings-grid">
<!-- ── Карточка: Такси ── -->
<div class="listing-card">
<div class="listing-card__img-wrap">
<img src="assets/images/taxi-main.jpg" alt="Такси Тульский" class="listing-card__img">
<div class="listing-card__overlay"></div>
<span class="listing-card__badge">Такси</span>
</div>
<div class="listing-card__body">
<h3 class="listing-card__title">такси тульский</h3>
<p class="listing-card__desc">Быстрое и комфортное такси по районам и межгород. Работаем круглосуточно.</p>
<ul class="listing-card__list">
<li>По городу от 100 ₽</li>
<li>Межгород, аэропорт, вокзал</li>
<li>Круглосуточно, без выходных</li>
</ul>
<div class="listing-card__actions">
<a href="taxi.html" class="ad-btn btn-details">подробнее <span class="btn-question-jumping">?</span></a>
<a href="tel:+79000000000" class="ad-btn btn-call">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.19 19.79 19.79 0 01.03 5.6 2 2 0 012 3.42h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.91 11a16 16 0 006.29 6.29l1.9-1.28a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 18.3v1.62z"/>
</svg>
позвонить
</a>
</div>
</div>
</div>
<!-- ── Карточка: Гостевой дом ── -->
<div class="listing-card">
<div class="listing-card__img-wrap">
<img src="assets/images/gazebo-post/main-feature.png" alt="Гостевой дом" class="listing-card__img">
<div class="listing-card__overlay"></div>
<span class="listing-card__badge">Отдых</span>
</div>
<div class="listing-card__body">
<h3 class="listing-card__title">гостевой дом</h3>
<p class="listing-card__desc">Посуточная аренда с подогреваемой купелью и беседкой в Тульском.</p>
<ul class="listing-card__list">
<li>До 6 человек</li>
<li>Купель включена</li>
<li>Сауна: 1 500 ₽/ч</li>
</ul>
<div class="listing-card__actions">
<a href="guest-house.html" class="ad-btn btn-details">подробнее <span class="btn-question-jumping">?</span></a>
<a href="tel:+79384762047" class="ad-btn btn-call">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.19 19.79 19.79 0 01.03 5.6 2 2 0 012 3.42h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.91 11a16 16 0 006.29 6.29l1.9-1.28a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 18.3v1.62z"/>
</svg>
позвонить
</a>
</div>
</div>
</div>
<!-- ── Карточка: Джанбург ── -->
<div class="listing-card">
<div class="listing-card__img-wrap">
<img src="assets/images/jamburg/5440c9b5-fc7c-40a0-a382-2150b7182d9e.jpg" alt="Джанбург" class="listing-card__img">
<div class="listing-card__overlay"></div>
<span class="listing-card__badge">Еда</span>
</div>
<div class="listing-card__body">
<h3 class="listing-card__title">джанбург</h3>
<p class="listing-card__desc">Уютная закусочная с разнообразным стрит-фуд меню в Тульском.</p>
<ul class="listing-card__list">
<li>Шаурма от 250 ₽, бургеры от 160 ₽</li>
<li>Пицца от 520 ₽</li>
<li>Кофе, молочные коктейли</li>
</ul>
<div class="listing-card__actions">
<a href="janburg.html" class="ad-btn btn-details">подробнее <span class="btn-question-jumping">?</span></a>
<a href="tel:+79615389992" class="ad-btn btn-call">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.19 19.79 19.79 0 01.03 5.6 2 2 0 012 3.42h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.91 11a16 16 0 006.29 6.29l1.9-1.28a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 18.3v1.62z"/>
</svg>
позвонить
</a>
</div>
</div>
</div>
<!-- ── Карточка: Родниковка ── -->
<div class="listing-card">
<div class="listing-card__img-wrap">
<img src="assets/images/rodnikovka-main.jpg" alt="Рыбалка в Родниковке" class="listing-card__img">
<div class="listing-card__overlay"></div>
<span class="listing-card__badge">Отдых</span>
</div>
<div class="listing-card__body">
<h3 class="listing-card__title">рыбалка в родниковке</h3>
<p class="listing-card__desc">Рыбалка и отдых у воды с уютными беседками в Тульском.</p>
<ul class="listing-card__list">
<li>Оплата по весу рыбы</li>
<li>Беседки с мангалами</li>
<li>Дневная и ночная рыбалка</li>
</ul>
<div class="listing-card__actions">
<a href="rodnikovka-fishing.html" class="ad-btn btn-details">подробнее <span class="btn-question-jumping">?</span></a>
<a href="https://maps.app.goo.gl/ywjLfYWrxWSXb7BAA" target="_blank" class="ad-btn btn-call">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/>
</svg>
карта
</a>
</div>
</div>
</div>
<!-- ── Карточка: ЮгЗеленСтрой ── -->
<div class="listing-card">
<div class="listing-card__img-wrap">
<img src="assets/images/yugzelenstroi-main.jpg" alt="ЮгЗеленСтрой" class="listing-card__img">
<div class="listing-card__overlay"></div>
<span class="listing-card__badge">Услуги</span>
</div>
<div class="listing-card__body">
<h3 class="listing-card__title">югзеленстрой</h3>
<p class="listing-card__desc">Профессиональный ландшафтный дизайн и благоустройство под ключ.</p>
<ul class="listing-card__list">
<li>Проектирование и озеленение</li>
<li>Рулонные газоны и автополив</li>
<li>Дренажные системы под ключ</li>
</ul>
<div class="listing-card__actions">
<a href="yugzelenstroi.html" class="ad-btn btn-details">подробнее <span class="btn-question-jumping">?</span></a>
<a href="tel:+79082293999" class="ad-btn btn-call">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.19 19.79 19.79 0 01.03 5.6 2 2 0 012 3.42h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.91 11a16 16 0 006.29 6.29l1.9-1.28a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 18.3v1.62z"/>
</svg>
позвонить
</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
