Обложка в швейцарском стиле
Строгая обложка с огромным заголовком, который выезжает построчно, и видимыми линиями модульной сетки.
Промпт
Вы можете скопировать промпт и вставить его в вайб блок в поле ввода. Подробнее в инструкции.
Сделай обложку лендинга консалтинговой компании в стилистике швейцарского графического дизайна 1960-х.
Учитывай следующий контекст: это первый экран сайта, компания помогает со стратегией, операционной моделью и ростом.
Представь её так:
Обложка на всю высоту экрана. Строгая модульная сетка из 12 колонок, всё выровнено по сетке. Тонкие вертикальные линии колонок видны как часть дизайна.
Палитра: белый фон #FFFFFF, чёрный текст #000000 и один сигнальный красный #E30613 — для крупной цифры и кнопки.
Вверху — строка с названием компании слева и ссылками на разделы страницы справа, под ней тонкая чёрная линия.
Типографика: только нейтральный гротеск в двух-трёх начертаниях. Главный заголовок огромный и жирный, в три строки, набран плотно, с отрицательным межбуквенным интервалом. Справа от заголовка — крупная красная цифра «01», как номер раздела.
Внизу — короткий абзац о компании справа и прямоугольная красная кнопка слева, при наведении кнопка становится чёрной.
Анимация кинетическая и точная: при загрузке строки заголовка по очереди выезжают снизу.
Соблюдай ограничения: без скруглений, теней, градиентов, фото и декоративных иллюстраций, красного немного. На телефоне сетка становится одноколоночной, элементы выстраиваются друг под другом, заголовок и цифра уменьшаются. Если в системе включено уменьшение движения, заголовок появляется без анимации.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Хороший результат: обложка выглядит как плакат швейцарской школы.
Учитывай следующий контекст: это первый экран сайта, компания помогает со стратегией, операционной моделью и ростом.
Представь её так:
Обложка на всю высоту экрана. Строгая модульная сетка из 12 колонок, всё выровнено по сетке. Тонкие вертикальные линии колонок видны как часть дизайна.
Палитра: белый фон #FFFFFF, чёрный текст #000000 и один сигнальный красный #E30613 — для крупной цифры и кнопки.
Вверху — строка с названием компании слева и ссылками на разделы страницы справа, под ней тонкая чёрная линия.
Типографика: только нейтральный гротеск в двух-трёх начертаниях. Главный заголовок огромный и жирный, в три строки, набран плотно, с отрицательным межбуквенным интервалом. Справа от заголовка — крупная красная цифра «01», как номер раздела.
Внизу — короткий абзац о компании справа и прямоугольная красная кнопка слева, при наведении кнопка становится чёрной.
Анимация кинетическая и точная: при загрузке строки заголовка по очереди выезжают снизу.
Соблюдай ограничения: без скруглений, теней, градиентов, фото и декоративных иллюстраций, красного немного. На телефоне сетка становится одноколоночной, элементы выстраиваются друг под другом, заголовок и цифра уменьшаются. Если в системе включено уменьшение движения, заголовок появляется без анимации.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Хороший результат: обложка выглядит как плакат швейцарской школы.
Код
Вы можете скопировать код и вставить его в вайб блок в раздел код. Подробнее в инструкции.
<section id="vb-k7m-intro" class="vb-k7m-intro" data-section-name="Вступление" data-vibeblock-unique-section="yes" aria-labelledby="vb-k7m-title">
<style>
.vb-k7m-intro,.vb-k7m-intro *{box-sizing:border-box}.vb-k7m-intro input,.vb-k7m-intro textarea,.vb-k7m-intro select{font:inherit}
.vb-k7m-intro{--red:#e30613;position:relative;overflow:hidden;background:#fff;color:#000;font-family:var(--t-text-font);min-height:100svh;padding:22px max(20px,calc((100vw - 1440px)/2 + 36px)) 38px}
.vb-k7m-intro__grid,.vb-k7m-intro__guide{position:absolute;inset:0;pointer-events:none}.vb-k7m-intro__grid{left:max(20px,calc((100vw - 1440px)/2 + 36px));right:max(20px,calc((100vw - 1440px)/2 + 36px));display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.vb-k7m-intro__grid span{border-left:1px solid #000;opacity:.12}.vb-k7m-intro__guide{top:auto;height:1px;background:#000;opacity:.25}
.vb-k7m-intro__bar,.vb-k7m-intro__nav,.vb-k7m-intro__content{position:relative;z-index:1}.vb-k7m-intro__bar{display:flex;justify-content:space-between;gap:18px;padding-bottom:17px;border-bottom:1px solid #000;font-size:15px;line-height:1.2}.vb-k7m-intro__brand{font-family:var(--t-headline-font);font-weight:700}.vb-k7m-intro__nav{display:flex;gap:24px}.vb-k7m-intro__link{color:#000;font-family:var(--t-text-font);font-size:15px;text-decoration:none}.vb-k7m-intro__content{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;align-items:end;min-height:calc(100svh - 79px);padding:clamp(76px,12vh,150px) 0 14px}.vb-k7m-intro__title{grid-column:1/11;margin:0;font-family:var(--t-headline-font);font-size:clamp(54px,8.15vw,96px);font-weight:800;letter-spacing:-.04em;line-height:.88;text-wrap:balance}.vb-k7m-intro__line{display:block;overflow:hidden}.vb-k7m-intro__word{display:block;transform:translateY(0);animation:vb-k7m-rise .75s cubic-bezier(.16,1,.3,1) both}.vb-k7m-intro__line:nth-child(2) .vb-k7m-intro__word{animation-delay:.1s}.vb-k7m-intro__line:nth-child(3) .vb-k7m-intro__word{animation-delay:.2s}.vb-k7m-intro__aside{grid-column:9/13;grid-row:2;margin:42px 0 0;font-size:18px;line-height:1.25;text-wrap:pretty}.vb-k7m-intro__action{grid-column:1/5;grid-row:2;align-self:end;margin-top:42px}.vb-k7m-intro__button{display:inline-flex;min-height:52px;align-items:center;background:var(--red);border:1px solid var(--red);border-radius:0;color:#fff;padding:0 18px;text-decoration:none;font-family:var(--t-headline-font);font-weight:700}.vb-k7m-intro__button:hover{background:#000;border-color:#000}.vb-k7m-intro__number{grid-column:11/13;grid-row:1;align-self:start;color:var(--red);font-family:var(--t-headline-font);font-size:clamp(68px,10vw,140px);font-weight:800;letter-spacing:-.07em;line-height:.76;text-align:right}@keyframes vb-k7m-rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
@media(max-width:640px){.vb-k7m-intro{padding:18px 20px 28px}.vb-k7m-intro__grid{left:20px;right:20px;grid-template-columns:1fr}.vb-k7m-intro__grid span:not(:first-child){display:none}.vb-k7m-intro__nav{gap:14px}.vb-k7m-intro__content{display:block;min-height:calc(100svh - 57px);padding-top:18vh}.vb-k7m-intro__title{font-size:clamp(48px,15.5vw,68px)}.vb-k7m-intro__number{margin-top:48px;text-align:left;font-size:96px}.vb-k7m-intro__aside{margin:26px 0 0;max-width:31ch}.vb-k7m-intro__action{margin-top:32px}}@media(prefers-reduced-motion:reduce){.vb-k7m-intro__word{animation:none}}
</style>
<div class="vb-k7m-intro__grid" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><div class="vb-k7m-intro__guide" aria-hidden="true"></div>
<header class="vb-k7m-intro__bar"><div class="vb-k7m-intro__brand">ЛИНИЯ / КОНСАЛТИНГ</div><nav class="vb-k7m-intro__nav" aria-label="Навигация"><a class="vb-k7m-intro__link" href="#vb-r4q-facts">Подход</a><a class="vb-k7m-intro__link" href="#vb-f8n-process">Работа</a><a class="vb-k7m-intro__link" href="#vb-u3p-contact">Контакт</a></nav></header>
<div class="vb-k7m-intro__content"><h1 id="vb-k7m-title" class="vb-k7m-intro__title"><span class="vb-k7m-intro__line"><span class="vb-k7m-intro__word">ЯСНОСТЬ</span></span><span class="vb-k7m-intro__line"><span class="vb-k7m-intro__word">ДЛЯ СЛОЖНЫХ</span></span><span class="vb-k7m-intro__line"><span class="vb-k7m-intro__word">РЕШЕНИЙ.</span></span></h1><div class="vb-k7m-intro__number" aria-hidden="true">01</div><p class="vb-k7m-intro__aside">Стратегия, операционная модель и рост — когда важны направление, темп и измеримый результат.</p><div class="vb-k7m-intro__action"><a class="t-btnflex t-btnflex_md vb-k7m-intro__button" href="#vb-u3p-contact"><span class="t-btnflex__text">Обсудить задачу</span></a></div></div>
</section>
<style>
.vb-k7m-intro,.vb-k7m-intro *{box-sizing:border-box}.vb-k7m-intro input,.vb-k7m-intro textarea,.vb-k7m-intro select{font:inherit}
.vb-k7m-intro{--red:#e30613;position:relative;overflow:hidden;background:#fff;color:#000;font-family:var(--t-text-font);min-height:100svh;padding:22px max(20px,calc((100vw - 1440px)/2 + 36px)) 38px}
.vb-k7m-intro__grid,.vb-k7m-intro__guide{position:absolute;inset:0;pointer-events:none}.vb-k7m-intro__grid{left:max(20px,calc((100vw - 1440px)/2 + 36px));right:max(20px,calc((100vw - 1440px)/2 + 36px));display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.vb-k7m-intro__grid span{border-left:1px solid #000;opacity:.12}.vb-k7m-intro__guide{top:auto;height:1px;background:#000;opacity:.25}
.vb-k7m-intro__bar,.vb-k7m-intro__nav,.vb-k7m-intro__content{position:relative;z-index:1}.vb-k7m-intro__bar{display:flex;justify-content:space-between;gap:18px;padding-bottom:17px;border-bottom:1px solid #000;font-size:15px;line-height:1.2}.vb-k7m-intro__brand{font-family:var(--t-headline-font);font-weight:700}.vb-k7m-intro__nav{display:flex;gap:24px}.vb-k7m-intro__link{color:#000;font-family:var(--t-text-font);font-size:15px;text-decoration:none}.vb-k7m-intro__content{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;align-items:end;min-height:calc(100svh - 79px);padding:clamp(76px,12vh,150px) 0 14px}.vb-k7m-intro__title{grid-column:1/11;margin:0;font-family:var(--t-headline-font);font-size:clamp(54px,8.15vw,96px);font-weight:800;letter-spacing:-.04em;line-height:.88;text-wrap:balance}.vb-k7m-intro__line{display:block;overflow:hidden}.vb-k7m-intro__word{display:block;transform:translateY(0);animation:vb-k7m-rise .75s cubic-bezier(.16,1,.3,1) both}.vb-k7m-intro__line:nth-child(2) .vb-k7m-intro__word{animation-delay:.1s}.vb-k7m-intro__line:nth-child(3) .vb-k7m-intro__word{animation-delay:.2s}.vb-k7m-intro__aside{grid-column:9/13;grid-row:2;margin:42px 0 0;font-size:18px;line-height:1.25;text-wrap:pretty}.vb-k7m-intro__action{grid-column:1/5;grid-row:2;align-self:end;margin-top:42px}.vb-k7m-intro__button{display:inline-flex;min-height:52px;align-items:center;background:var(--red);border:1px solid var(--red);border-radius:0;color:#fff;padding:0 18px;text-decoration:none;font-family:var(--t-headline-font);font-weight:700}.vb-k7m-intro__button:hover{background:#000;border-color:#000}.vb-k7m-intro__number{grid-column:11/13;grid-row:1;align-self:start;color:var(--red);font-family:var(--t-headline-font);font-size:clamp(68px,10vw,140px);font-weight:800;letter-spacing:-.07em;line-height:.76;text-align:right}@keyframes vb-k7m-rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
@media(max-width:640px){.vb-k7m-intro{padding:18px 20px 28px}.vb-k7m-intro__grid{left:20px;right:20px;grid-template-columns:1fr}.vb-k7m-intro__grid span:not(:first-child){display:none}.vb-k7m-intro__nav{gap:14px}.vb-k7m-intro__content{display:block;min-height:calc(100svh - 57px);padding-top:18vh}.vb-k7m-intro__title{font-size:clamp(48px,15.5vw,68px)}.vb-k7m-intro__number{margin-top:48px;text-align:left;font-size:96px}.vb-k7m-intro__aside{margin:26px 0 0;max-width:31ch}.vb-k7m-intro__action{margin-top:32px}}@media(prefers-reduced-motion:reduce){.vb-k7m-intro__word{animation:none}}
</style>
<div class="vb-k7m-intro__grid" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><div class="vb-k7m-intro__guide" aria-hidden="true"></div>
<header class="vb-k7m-intro__bar"><div class="vb-k7m-intro__brand">ЛИНИЯ / КОНСАЛТИНГ</div><nav class="vb-k7m-intro__nav" aria-label="Навигация"><a class="vb-k7m-intro__link" href="#vb-r4q-facts">Подход</a><a class="vb-k7m-intro__link" href="#vb-f8n-process">Работа</a><a class="vb-k7m-intro__link" href="#vb-u3p-contact">Контакт</a></nav></header>
<div class="vb-k7m-intro__content"><h1 id="vb-k7m-title" class="vb-k7m-intro__title"><span class="vb-k7m-intro__line"><span class="vb-k7m-intro__word">ЯСНОСТЬ</span></span><span class="vb-k7m-intro__line"><span class="vb-k7m-intro__word">ДЛЯ СЛОЖНЫХ</span></span><span class="vb-k7m-intro__line"><span class="vb-k7m-intro__word">РЕШЕНИЙ.</span></span></h1><div class="vb-k7m-intro__number" aria-hidden="true">01</div><p class="vb-k7m-intro__aside">Стратегия, операционная модель и рост — когда важны направление, темп и измеримый результат.</p><div class="vb-k7m-intro__action"><a class="t-btnflex t-btnflex_md vb-k7m-intro__button" href="#vb-u3p-contact"><span class="t-btnflex__text">Обсудить задачу</span></a></div></div>
</section>
Что выбрать, промпт или код?
Копируйте промпт, если хотите получить похожий результат, но ввести информацию о своём бизнесе и задать свои требования. Например, изменить кнопки, тексты, цвета, фотографии или другие элементы.
Копируйте код, если хотите получить точно такой же блок. Чтобы его изменить, придётся отредактировать html-код.
