Журнал Тильды
/
Библиотека промптов
/
4 преимущества с крупными цифрами и иконками в асимметричной композиции
Преимущества
4 преимущества с крупными цифрами и иконками в асимметричной композиции
Подходит, чтобы показать ключевые цифры. Например, количество клиентов или продаж, среднюю оценку по отзывам или юбилейную дату.
Промпт
Вы можете скопировать промпт и вставить его в вайб блок в поле ввода. Подробнее в инструкции.
Создай блок преимуществ с четырьмя числовыми показателями на ярко-розовом фоне #EC76D4. Шрифт Arial/Helvetica. Секция на всю ширину, min-height:1000px, padding:0 20px 80px, overflow:hidden; контейнер max-width:1100px по центру.
Заголовок по центру: "A Smarter Way to Show
Your Product’s Value". Белый, font-size:clamp(38px, 5.5vw, 62px), font-weight:500, line-height:1.15, letter-spacing:-.5px, max-width:780px, отступ сверху 155px.
Через 70px четыре карточки в ряд по центру, gap:20px, align-items:flex-start. Карточки 255px, min-height:305px, скругление 12px, padding:52px 24px 28px, содержимое по центру. Зигзаг: вторая и четвёртая опущены на 160px. Нечётные карточки #241321 с белым текстом, чётные #E8FF57 с текстом #241321. Без обводок и теней.
В центре верхнего края карточки розовый круг #EC76D4 68×68px (absolute; top:-34px; left:50%; translateX(-50%)) с белой SVG-звездой 32×32px. Круг сливается с фоном, создавая эффект выемки.
Содержимое карточек по порядку:
1. PERFORMANCE / 68 / "Faster decision-making with
clear benefit highlights"
2. REACH / 5.8 / "Higher engagement with
structured visual content"
3. INTERACTION / 96 / "User actions completed
through optimized journeys"
4. ACCESS / 24 / "Always-available information,
support, and value"
Сохрани переносы
. Метка 11px regular, uppercase, letter-spacing:1.4px, opacity:.75, margin-top:8px. Число 104px regular, line-height:1, letter-spacing:-2px, margin-top:6px. Описание 15px/1.4, max-width:200px, margin-top:12px. Числа статичные, без счётчика и дополнительных единиц.
При появлении 12% секции в окне анимация один раз: заголовок из opacity:0 и translateY(14px) за 700ms; карточки из opacity:0, translateY(20px) scale(.96) в opacity:1, translateY(0) scale(1), с задержками 0/150/300/450ms. Для карточек opacity 700ms, transform 320ms; easing cubic-bezier(.22,1,.36,1). После появления сбрось задержки: hover сразу приподнимает карточку на 5px за 320ms и увеличивает круг до scale(1.05).
≤960px: высота секции auto, низ 70px; заголовок сверху 100px, размер clamp(32px, 5vw, 50px); ряд через 60px, gap:14px; карточки 200px, min-height:260px, padding:50px 18px 24px; чётные ниже на 120px; числа 82px, описания 13px.
≤640px: низ 60px; заголовок сверху 80px, clamp(28px, 7vw, 40px); сетка 2 колонки, max-width:520px, gap:40px 16px, карточки шириной 100%, чётные ниже на 40px; числа 80px.
≤480px: заголовок сверху 60px, clamp(26px, 8vw, 36px); одна колонка max-width:300px, gap:24px, чётные ниже на 40px; числа 90px, описания 14px.
Изолируй CSS/JS внутри блока. Без IntersectionObserver сразу показывай содержимое.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Заголовок по центру: "A Smarter Way to Show
Your Product’s Value". Белый, font-size:clamp(38px, 5.5vw, 62px), font-weight:500, line-height:1.15, letter-spacing:-.5px, max-width:780px, отступ сверху 155px.
Через 70px четыре карточки в ряд по центру, gap:20px, align-items:flex-start. Карточки 255px, min-height:305px, скругление 12px, padding:52px 24px 28px, содержимое по центру. Зигзаг: вторая и четвёртая опущены на 160px. Нечётные карточки #241321 с белым текстом, чётные #E8FF57 с текстом #241321. Без обводок и теней.
В центре верхнего края карточки розовый круг #EC76D4 68×68px (absolute; top:-34px; left:50%; translateX(-50%)) с белой SVG-звездой 32×32px. Круг сливается с фоном, создавая эффект выемки.
Содержимое карточек по порядку:
1. PERFORMANCE / 68 / "Faster decision-making with
clear benefit highlights"
2. REACH / 5.8 / "Higher engagement with
structured visual content"
3. INTERACTION / 96 / "User actions completed
through optimized journeys"
4. ACCESS / 24 / "Always-available information,
support, and value"
Сохрани переносы
. Метка 11px regular, uppercase, letter-spacing:1.4px, opacity:.75, margin-top:8px. Число 104px regular, line-height:1, letter-spacing:-2px, margin-top:6px. Описание 15px/1.4, max-width:200px, margin-top:12px. Числа статичные, без счётчика и дополнительных единиц.
При появлении 12% секции в окне анимация один раз: заголовок из opacity:0 и translateY(14px) за 700ms; карточки из opacity:0, translateY(20px) scale(.96) в opacity:1, translateY(0) scale(1), с задержками 0/150/300/450ms. Для карточек opacity 700ms, transform 320ms; easing cubic-bezier(.22,1,.36,1). После появления сбрось задержки: hover сразу приподнимает карточку на 5px за 320ms и увеличивает круг до scale(1.05).
≤960px: высота секции auto, низ 70px; заголовок сверху 100px, размер clamp(32px, 5vw, 50px); ряд через 60px, gap:14px; карточки 200px, min-height:260px, padding:50px 18px 24px; чётные ниже на 120px; числа 82px, описания 13px.
≤640px: низ 60px; заголовок сверху 80px, clamp(28px, 7vw, 40px); сетка 2 колонки, max-width:520px, gap:40px 16px, карточки шириной 100%, чётные ниже на 40px; числа 80px.
≤480px: заголовок сверху 60px, clamp(26px, 8vw, 36px); одна колонка max-width:300px, gap:24px, чётные ниже на 40px; числа 90px, описания 14px.
Изолируй CSS/JS внутри блока. Без IntersectionObserver сразу показывай содержимое.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Код
Вы можете скопировать код и вставить его в вайб блок в раздел код. Подробнее в инструкции.
<style>
/* ── Reset ─────────────────────────────────────── */
.smv-section,
.smv-section * {
box-sizing: border-box;
}
.smv-section input,
.smv-section textarea,
.smv-section select {
font: inherit;
}
/* ── Section shell ──────────────────────────────── */
.smv-section {
position: relative;
width: 100%;
min-height: 1000px;
background: #EC76D4;
padding: 0 20px 80px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
}
/* ── Inner container ────────────────────────────── */
.smv-inner {
max-width: 1100px;
margin: 0 auto;
position: relative;
}
/* ── Heading ────────────────────────────────────── */
.smv-heading {
padding-top: 155px;
text-align: center;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(38px, 5.5vw, 62px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.5px;
margin: 0 auto;
max-width: 780px;
opacity: 0;
transform: translateY(14px);
transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.smv-heading.smv--visible {
opacity: 1;
transform: translateY(0);
}
/* ── Cards stage ────────────────────────────────── */
.smv-cards {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: 20px;
margin-top: 70px;
}
/* ── Single card ────────────────────────────────── */
.smv-card {
position: relative;
width: 255px;
flex-shrink: 0;
border-radius: 12px;
padding: 52px 24px 28px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
opacity: 0;
transform: translateY(20px) scale(0.96);
/* Delay управляется через JS → card.style.transitionDelay */
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.smv-card.smv--visible {
opacity: 1;
transform: translateY(0) scale(1);
/* После появления — hover реагирует мгновенно (delay = 0ms из JS) */
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Zigzag */
.smv-card--high { margin-top: 0; }
.smv-card--low { margin-top: 160px; }
/* Color variants */
.smv-card--dark {
background: #241321;
color: #fff;
min-height: 305px;
}
.smv-card--lime {
background: #E8FF57;
color: #241321;
min-height: 305px;
}
/* Hover lift */
.smv-card.smv--visible:hover {
transform: translateY(-5px) scale(1);
}
/* ── Star badge ─────────────────────────────────── */
.smv-badge {
position: absolute;
top: -34px;
left: 50%;
transform: translateX(-50%);
width: 68px;
height: 68px;
background: #EC76D4;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.smv-card.smv--visible:hover .smv-badge {
transform: translateX(-50%) scale(1.05);
}
.smv-badge svg {
width: 32px;
height: 32px;
display: block;
}
/* ── Card label ─────────────────────────────────── */
.smv-label {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 1.4px;
text-transform: uppercase;
margin-top: 8px;
opacity: 0.75;
}
/* ── Card number ────────────────────────────────── */
.smv-number {
font-family: Arial, Helvetica, sans-serif;
font-size: 104px;
font-weight: 400;
line-height: 1;
margin-top: 6px;
letter-spacing: -2px;
}
/* ── Card description ───────────────────────────── */
.smv-desc {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.4;
margin-top: 12px;
max-width: 200px;
}
/* ══ RESPONSIVE ══════════════════════════════════════ */
@media (max-width: 960px) {
.smv-section {
min-height: auto;
padding-bottom: 70px;
}
.smv-heading {
padding-top: 100px;
font-size: clamp(32px, 5vw, 50px);
}
.smv-cards {
gap: 14px;
margin-top: 60px;
}
.smv-card {
width: 200px;
min-height: 260px;
padding: 50px 18px 24px;
}
.smv-card--low { margin-top: 120px; }
.smv-number { font-size: 82px; }
.smv-desc { font-size: 13px; }
}
@media (max-width: 640px) {
.smv-section { padding-bottom: 60px; }
.smv-heading {
padding-top: 80px;
font-size: clamp(28px, 7vw, 40px);
}
.smv-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px 16px;
margin-top: 60px;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
.smv-card {
width: 100%;
min-height: 260px;
padding: 50px 18px 24px;
margin-top: 0 !important;
}
.smv-card:nth-child(2) { margin-top: 40px !important; }
.smv-card:nth-child(4) { margin-top: 40px !important; }
.smv-number { font-size: 80px; }
.smv-desc { font-size: 13px; }
}
@media (max-width: 480px) {
.smv-heading {
padding-top: 60px;
font-size: clamp(26px, 8vw, 36px);
}
.smv-cards {
grid-template-columns: 1fr;
gap: 24px;
max-width: 300px;
}
.smv-card:nth-child(2),
.smv-card:nth-child(4) {
margin-top: 40px !important;
}
.smv-card--low { margin-top: 0 !important; }
.smv-number { font-size: 90px; }
.smv-desc { font-size: 14px; }
}
</style>
<section class="smv-section">
<div class="smv-inner">
<h2 class="smv-heading" id="smvHeading">
A Smarter Way to Show<br>Your Product's Value
</h2>
<div class="smv-cards" id="smvCards">
<!-- Карточка 1: меняй цифру прямо здесь ↓ -->
<div class="smv-card smv-card--dark smv-card--high" data-delay="0">
<div class="smv-badge">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="16,3 19.6,12 29.5,12.5 22,19 24.5,29 16,23.5 7.5,29 10,19 2.5,12.5 12.4,12" fill="#ffffff"></polygon>
</svg>
</div>
<span class="smv-label">Performance</span>
<span class="smv-number">68</span>
<p class="smv-desc">Faster decision-making with<br>clear benefit highlights</p>
</div>
<!-- Карточка 2: меняй цифру прямо здесь ↓ -->
<div class="smv-card smv-card--lime smv-card--low" data-delay="150">
<div class="smv-badge">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="16,3 19.6,12 29.5,12.5 22,19 24.5,29 16,23.5 7.5,29 10,19 2.5,12.5 12.4,12" fill="#ffffff"></polygon>
</svg>
</div>
<span class="smv-label">Reach</span>
<span class="smv-number">5.8</span>
<p class="smv-desc">Higher engagement with<br>structured visual content</p>
</div>
<!-- Карточка 3: меняй цифру прямо здесь ↓ -->
<div class="smv-card smv-card--dark smv-card--high" data-delay="300">
<div class="smv-badge">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="16,3 19.6,12 29.5,12.5 22,19 24.5,29 16,23.5 7.5,29 10,19 2.5,12.5 12.4,12" fill="#ffffff"></polygon>
</svg>
</div>
<span class="smv-label">Interaction</span>
<span class="smv-number">96</span>
<p class="smv-desc">User actions completed<br>through optimized journeys</p>
</div>
<!-- Карточка 4: меняй цифру прямо здесь ↓ -->
<div class="smv-card smv-card--lime smv-card--low" data-delay="450">
<div class="smv-badge">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="16,3 19.6,12 29.5,12.5 22,19 24.5,29 16,23.5 7.5,29 10,19 2.5,12.5 12.4,12" fill="#ffffff"></polygon>
</svg>
</div>
<span class="smv-label">Access</span>
<span class="smv-number">24</span>
<p class="smv-desc">Always-available information,<br>support, and value</p>
</div>
</div>
</div>
</section>
<script>
(function () {
'use strict';
var heading = document.getElementById('smvHeading');
var cards = document.querySelectorAll('#smvCards .smv-card');
var section = document.querySelector('.smv-section');
var headingDone = false;
var cardsDone = {};
if (!heading || !cards.length || !section) return;
function revealHeading() {
if (headingDone) return;
headingDone = true;
heading.classList.add('smv--visible');
}
function revealCard(card, index) {
if (cardsDone[index]) return;
cardsDone[index] = true;
var delay = parseInt(card.getAttribute('data-delay'), 10) || 0;
/*
* Ключевое исправление: задержку ставим через transitionDelay ДО
* добавления класса. Оба правила CSS (.smv-card и .smv-card.smv--visible)
* объявляют transition БЕЗ задержки, поэтому inline transitionDelay
* точно перекрывает delay-часть обоих правил и работает надёжно.
*/
card.style.transitionDelay = delay + 'ms';
card.classList.add('smv--visible');
/* После завершения анимации входа сбрасываем задержку —
hover реагирует мгновенно */
setTimeout(function () {
card.style.transitionDelay = '0ms';
}, 700 + delay);
}
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
revealHeading();
cards.forEach(function (card, i) { revealCard(card, i); });
io.unobserve(section);
});
}, { threshold: 0.12 });
io.observe(section);
} else {
revealHeading();
cards.forEach(function (card, i) { revealCard(card, i); });
}
})();
</script>
/* ── Reset ─────────────────────────────────────── */
.smv-section,
.smv-section * {
box-sizing: border-box;
}
.smv-section input,
.smv-section textarea,
.smv-section select {
font: inherit;
}
/* ── Section shell ──────────────────────────────── */
.smv-section {
position: relative;
width: 100%;
min-height: 1000px;
background: #EC76D4;
padding: 0 20px 80px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
}
/* ── Inner container ────────────────────────────── */
.smv-inner {
max-width: 1100px;
margin: 0 auto;
position: relative;
}
/* ── Heading ────────────────────────────────────── */
.smv-heading {
padding-top: 155px;
text-align: center;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(38px, 5.5vw, 62px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.5px;
margin: 0 auto;
max-width: 780px;
opacity: 0;
transform: translateY(14px);
transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.smv-heading.smv--visible {
opacity: 1;
transform: translateY(0);
}
/* ── Cards stage ────────────────────────────────── */
.smv-cards {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: 20px;
margin-top: 70px;
}
/* ── Single card ────────────────────────────────── */
.smv-card {
position: relative;
width: 255px;
flex-shrink: 0;
border-radius: 12px;
padding: 52px 24px 28px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
opacity: 0;
transform: translateY(20px) scale(0.96);
/* Delay управляется через JS → card.style.transitionDelay */
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.smv-card.smv--visible {
opacity: 1;
transform: translateY(0) scale(1);
/* После появления — hover реагирует мгновенно (delay = 0ms из JS) */
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Zigzag */
.smv-card--high { margin-top: 0; }
.smv-card--low { margin-top: 160px; }
/* Color variants */
.smv-card--dark {
background: #241321;
color: #fff;
min-height: 305px;
}
.smv-card--lime {
background: #E8FF57;
color: #241321;
min-height: 305px;
}
/* Hover lift */
.smv-card.smv--visible:hover {
transform: translateY(-5px) scale(1);
}
/* ── Star badge ─────────────────────────────────── */
.smv-badge {
position: absolute;
top: -34px;
left: 50%;
transform: translateX(-50%);
width: 68px;
height: 68px;
background: #EC76D4;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.smv-card.smv--visible:hover .smv-badge {
transform: translateX(-50%) scale(1.05);
}
.smv-badge svg {
width: 32px;
height: 32px;
display: block;
}
/* ── Card label ─────────────────────────────────── */
.smv-label {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 1.4px;
text-transform: uppercase;
margin-top: 8px;
opacity: 0.75;
}
/* ── Card number ────────────────────────────────── */
.smv-number {
font-family: Arial, Helvetica, sans-serif;
font-size: 104px;
font-weight: 400;
line-height: 1;
margin-top: 6px;
letter-spacing: -2px;
}
/* ── Card description ───────────────────────────── */
.smv-desc {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.4;
margin-top: 12px;
max-width: 200px;
}
/* ══ RESPONSIVE ══════════════════════════════════════ */
@media (max-width: 960px) {
.smv-section {
min-height: auto;
padding-bottom: 70px;
}
.smv-heading {
padding-top: 100px;
font-size: clamp(32px, 5vw, 50px);
}
.smv-cards {
gap: 14px;
margin-top: 60px;
}
.smv-card {
width: 200px;
min-height: 260px;
padding: 50px 18px 24px;
}
.smv-card--low { margin-top: 120px; }
.smv-number { font-size: 82px; }
.smv-desc { font-size: 13px; }
}
@media (max-width: 640px) {
.smv-section { padding-bottom: 60px; }
.smv-heading {
padding-top: 80px;
font-size: clamp(28px, 7vw, 40px);
}
.smv-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px 16px;
margin-top: 60px;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
.smv-card {
width: 100%;
min-height: 260px;
padding: 50px 18px 24px;
margin-top: 0 !important;
}
.smv-card:nth-child(2) { margin-top: 40px !important; }
.smv-card:nth-child(4) { margin-top: 40px !important; }
.smv-number { font-size: 80px; }
.smv-desc { font-size: 13px; }
}
@media (max-width: 480px) {
.smv-heading {
padding-top: 60px;
font-size: clamp(26px, 8vw, 36px);
}
.smv-cards {
grid-template-columns: 1fr;
gap: 24px;
max-width: 300px;
}
.smv-card:nth-child(2),
.smv-card:nth-child(4) {
margin-top: 40px !important;
}
.smv-card--low { margin-top: 0 !important; }
.smv-number { font-size: 90px; }
.smv-desc { font-size: 14px; }
}
</style>
<section class="smv-section">
<div class="smv-inner">
<h2 class="smv-heading" id="smvHeading">
A Smarter Way to Show<br>Your Product's Value
</h2>
<div class="smv-cards" id="smvCards">
<!-- Карточка 1: меняй цифру прямо здесь ↓ -->
<div class="smv-card smv-card--dark smv-card--high" data-delay="0">
<div class="smv-badge">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="16,3 19.6,12 29.5,12.5 22,19 24.5,29 16,23.5 7.5,29 10,19 2.5,12.5 12.4,12" fill="#ffffff"></polygon>
</svg>
</div>
<span class="smv-label">Performance</span>
<span class="smv-number">68</span>
<p class="smv-desc">Faster decision-making with<br>clear benefit highlights</p>
</div>
<!-- Карточка 2: меняй цифру прямо здесь ↓ -->
<div class="smv-card smv-card--lime smv-card--low" data-delay="150">
<div class="smv-badge">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="16,3 19.6,12 29.5,12.5 22,19 24.5,29 16,23.5 7.5,29 10,19 2.5,12.5 12.4,12" fill="#ffffff"></polygon>
</svg>
</div>
<span class="smv-label">Reach</span>
<span class="smv-number">5.8</span>
<p class="smv-desc">Higher engagement with<br>structured visual content</p>
</div>
<!-- Карточка 3: меняй цифру прямо здесь ↓ -->
<div class="smv-card smv-card--dark smv-card--high" data-delay="300">
<div class="smv-badge">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="16,3 19.6,12 29.5,12.5 22,19 24.5,29 16,23.5 7.5,29 10,19 2.5,12.5 12.4,12" fill="#ffffff"></polygon>
</svg>
</div>
<span class="smv-label">Interaction</span>
<span class="smv-number">96</span>
<p class="smv-desc">User actions completed<br>through optimized journeys</p>
</div>
<!-- Карточка 4: меняй цифру прямо здесь ↓ -->
<div class="smv-card smv-card--lime smv-card--low" data-delay="450">
<div class="smv-badge">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="16,3 19.6,12 29.5,12.5 22,19 24.5,29 16,23.5 7.5,29 10,19 2.5,12.5 12.4,12" fill="#ffffff"></polygon>
</svg>
</div>
<span class="smv-label">Access</span>
<span class="smv-number">24</span>
<p class="smv-desc">Always-available information,<br>support, and value</p>
</div>
</div>
</div>
</section>
<script>
(function () {
'use strict';
var heading = document.getElementById('smvHeading');
var cards = document.querySelectorAll('#smvCards .smv-card');
var section = document.querySelector('.smv-section');
var headingDone = false;
var cardsDone = {};
if (!heading || !cards.length || !section) return;
function revealHeading() {
if (headingDone) return;
headingDone = true;
heading.classList.add('smv--visible');
}
function revealCard(card, index) {
if (cardsDone[index]) return;
cardsDone[index] = true;
var delay = parseInt(card.getAttribute('data-delay'), 10) || 0;
/*
* Ключевое исправление: задержку ставим через transitionDelay ДО
* добавления класса. Оба правила CSS (.smv-card и .smv-card.smv--visible)
* объявляют transition БЕЗ задержки, поэтому inline transitionDelay
* точно перекрывает delay-часть обоих правил и работает надёжно.
*/
card.style.transitionDelay = delay + 'ms';
card.classList.add('smv--visible');
/* После завершения анимации входа сбрасываем задержку —
hover реагирует мгновенно */
setTimeout(function () {
card.style.transitionDelay = '0ms';
}, 700 + delay);
}
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
revealHeading();
cards.forEach(function (card, i) { revealCard(card, i); });
io.unobserve(section);
});
}, { threshold: 0.12 });
io.observe(section);
} else {
revealHeading();
cards.forEach(function (card, i) { revealCard(card, i); });
}
})();
</script>
Что выбрать, промпт или код?
Копируйте промпт, если хотите получить похожий результат, но ввести информацию о своём бизнесе и задать свои требования. Например, изменить кнопки, тексты, цвета, фотографии или другие элементы.
Копируйте код, если хотите получить точно такой же блок. Чтобы его изменить, придётся отредактировать html-код.
