Креативные ниши
Лендинг в стиле компьютера из 90-х
Подходит IT-курсам, игровым студиям, digital-агентствам, музыкальным проектам, мерчу, ивентам для молодой аудитории.
Промпт
Вы можете скопировать промпт и вставить его в вайб блок в поле ввода. Подробнее в инструкции.
Сделай лендинг для [тип компании] «[название]».
Учитывай следующий контекст: [что предлагаете и чем отличаетесь]. Разделы подбери сам — стандартные для лендинга в этой нише. Используй прикреплённые фото: [какое фото для какого раздела].
Лендинг предназначен для [кто клиенты], которым близки игра, ирония и ностальгия по ранним компьютерам.
Представь его как рабочий стол операционной системы 1990-х:
- Фон всех разделов — однотонный бирюзовый «рабочий стол» #008080. Каждый раздел оформлен как окно программы: серый корпус #C0C0C0 с объёмными краями, синяя полоса заголовка #000080 с белым названием раздела и декоративными кнопками «свернуть», «развернуть», «закрыть».
- Типографика: заголовки окон и меню — пиксельный шрифт, основной текст — простой системный шрифт.
- Кнопки объёмные, со светлой фаской сверху и тёмной снизу. При нажатии они «вдавливаются».
- Сбоку — пиксельные иконки-ярлыки разделов с подписями. Внизу — панель задач с кнопкой меню и часами, показывающими текущее время.
- Отзывы оформлены как всплывающие системные сообщения, преимущества — как список файлов в проводнике, тарифы — как окно установки программы с шагами и полосой прогресса.
- Анимация: окна открываются с короткой анимацией «распахивания», курсор при наведении на ссылки меняется на пиксельную руку.
Соблюдай ограничения: не используй логотипы и названия реальных операционных систем — это стилизация, а не копия. Окна не перекрывают друг друга так, чтобы прятать содержимое. На телефоне окна выстраиваются в одну колонку на всю ширину, а панель задач остаётся внизу и не перекрывается плавающими иконками Тильды. Если в системе включено уменьшение движения, окна открываются без анимации.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Технические требования: каждый раздел самостоятельный — фон, декор, стили и скрипты лежат только внутри своего раздела, ничего не выносится за его пределы. Если фон разделов разный, нижний цвет каждого раздела точно совпадает с верхним цветом следующего, поэтому стыков не видно. Текстуры вроде зерна — один слой на раздел поверх фона и декора. У каждого раздела есть id, ссылки и кнопки ведут к нужным разделам. Шрифты бери из стилей проекта, а описание типографики используй для размеров, начертаний и акцентов. Весь текст не мельче 15 пикселей, основной текст без полупрозрачности. Все надписи, включая подписи к фото, — на русском. Ни один элемент не выходит за край экрана и не создаёт горизонтальную прокрутку. Плавающие иконки Тильды не перекрывают кнопки.
Хороший результат: страница вызывает улыбку и желание всё потыкать, но остаётся понятным лендингом с ясной кнопкой заявки.
Учитывай следующий контекст: [что предлагаете и чем отличаетесь]. Разделы подбери сам — стандартные для лендинга в этой нише. Используй прикреплённые фото: [какое фото для какого раздела].
Лендинг предназначен для [кто клиенты], которым близки игра, ирония и ностальгия по ранним компьютерам.
Представь его как рабочий стол операционной системы 1990-х:
- Фон всех разделов — однотонный бирюзовый «рабочий стол» #008080. Каждый раздел оформлен как окно программы: серый корпус #C0C0C0 с объёмными краями, синяя полоса заголовка #000080 с белым названием раздела и декоративными кнопками «свернуть», «развернуть», «закрыть».
- Типографика: заголовки окон и меню — пиксельный шрифт, основной текст — простой системный шрифт.
- Кнопки объёмные, со светлой фаской сверху и тёмной снизу. При нажатии они «вдавливаются».
- Сбоку — пиксельные иконки-ярлыки разделов с подписями. Внизу — панель задач с кнопкой меню и часами, показывающими текущее время.
- Отзывы оформлены как всплывающие системные сообщения, преимущества — как список файлов в проводнике, тарифы — как окно установки программы с шагами и полосой прогресса.
- Анимация: окна открываются с короткой анимацией «распахивания», курсор при наведении на ссылки меняется на пиксельную руку.
Соблюдай ограничения: не используй логотипы и названия реальных операционных систем — это стилизация, а не копия. Окна не перекрывают друг друга так, чтобы прятать содержимое. На телефоне окна выстраиваются в одну колонку на всю ширину, а панель задач остаётся внизу и не перекрывается плавающими иконками Тильды. Если в системе включено уменьшение движения, окна открываются без анимации.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Технические требования: каждый раздел самостоятельный — фон, декор, стили и скрипты лежат только внутри своего раздела, ничего не выносится за его пределы. Если фон разделов разный, нижний цвет каждого раздела точно совпадает с верхним цветом следующего, поэтому стыков не видно. Текстуры вроде зерна — один слой на раздел поверх фона и декора. У каждого раздела есть id, ссылки и кнопки ведут к нужным разделам. Шрифты бери из стилей проекта, а описание типографики используй для размеров, начертаний и акцентов. Весь текст не мельче 15 пикселей, основной текст без полупрозрачности. Все надписи, включая подписи к фото, — на русском. Ни один элемент не выходит за край экрана и не создаёт горизонтальную прокрутку. Плавающие иконки Тильды не перекрывают кнопки.
Хороший результат: страница вызывает улыбку и желание всё потыкать, но остаётся понятным лендингом с ясной кнопкой заявки.
Код
Вы можете скопировать код и вставить его в вайб блок в раздел код. Подробнее в инструкции.
<section id="vb-n7k-page" class="vb-n7k-page" data-section-name="Рабочий стол агентства" data-vibeblock-unique-section="yes" aria-labelledby="vb-n7k-hero-title">
<style>
.vb-n7k-page,.vb-n7k-page *{box-sizing:border-box}.vb-n7k-page input,.vb-n7k-page textarea,.vb-n7k-page select{font:inherit}
.vb-n7k-page{--desk:#008080;--silver:#c0c0c0;--blue:#000080;--ink:#111;--shadow:#555;min-height:100vh;background:var(--desk);color:var(--ink);font-family:var(--t-text-font,Arial,sans-serif);padding:22px 22px 74px;overflow:hidden;cursor:default}
.vb-n7k-page a,.vb-n7k-page button{cursor:pointer}.vb-n7k-page a:hover,.vb-n7k-page button:hover{cursor:crosshair}
.vb-n7k-page__desktop{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:112px minmax(0,1fr);gap:24px;align-items:start}
.vb-n7k-page__shortcuts{display:flex;flex-direction:column;gap:22px;padding-top:18px}.vb-n7k-page__shortcut{color:#fff;text-decoration:none;text-align:center;font-size:13px;text-shadow:1px 1px #000;line-height:1.2}.vb-n7k-page__shortcut-icon{width:46px;height:42px;margin:0 auto 6px;display:grid;place-items:center;color:#fff;font-size:26px;text-shadow:2px 2px #000}.vb-n7k-page__shortcut:hover{text-decoration:underline}
.vb-n7k-page__windows{display:flex;flex-direction:column;gap:24px}.vb-n7k-window{background:var(--silver);border:2px solid #fff;border-right-color:#333;border-bottom-color:#333;box-shadow:2px 2px #111;padding:4px;animation:vb-n7k-open .38s ease-out both}.vb-n7k-window:nth-child(2){animation-delay:.08s}.vb-n7k-window:nth-child(3){animation-delay:.16s}.vb-n7k-window:nth-child(4){animation-delay:.24s}.vb-n7k-window__bar{height:30px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:3px 5px 3px 9px;font-family:var(--t-headline-font,monospace);font-weight:700;font-size:15px;letter-spacing:.02em}.vb-n7k-window__controls{display:flex;gap:3px}.vb-n7k-window__control{width:22px;height:21px;background:var(--silver);color:#111;border:2px solid #fff;border-right-color:#333;border-bottom-color:#333;display:grid;place-items:center;font:700 13px Arial}.vb-n7k-window__body{padding:28px 30px}.vb-n7k-window__body p{max-width:68ch;line-height:1.55;margin:0 0 18px}.vb-n7k-window__body h2,.vb-n7k-window__body h3{font-family:var(--t-headline-font,monospace);text-wrap:balance;margin:0 0 14px}.vb-n7k-window__body h2{font-size:clamp(30px,5vw,68px);line-height:1.02;max-width:800px}.vb-n7k-window__body h3{font-size:25px}
.vb-n7k-hero__lead{font-size:18px}.vb-n7k-hero__mark{font-family:var(--t-headline-font,monospace);font-size:14px;margin-bottom:14px}.vb-n7k-page__button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 18px;background:var(--silver);border:2px solid #fff;border-right-color:#333;border-bottom-color:#333;color:#111;text-decoration:none;font-weight:700;font-family:var(--t-text-font,Arial,sans-serif);box-shadow:1px 1px #111}.vb-n7k-page__button:active{border-color:#333;border-right-color:#fff;border-bottom-color:#fff;box-shadow:none;transform:translate(1px,1px)}.vb-n7k-page__button--primary{background:#ffffc0}.vb-n7k-hero__status{display:inline-block;margin-left:14px;font-size:13px}
.vb-n7k-filelist{border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;background:#fff}.vb-n7k-filelist__head,.vb-n7k-file{display:grid;grid-template-columns:46px 1.2fr 1fr 100px;gap:12px;align-items:center;padding:9px 12px}.vb-n7k-filelist__head{background:#ddd;border-bottom:1px solid #777;font-size:12px}.vb-n7k-file{border-bottom:1px solid #ddd}.vb-n7k-file:last-child{border-bottom:0}.vb-n7k-file__icon{font-size:25px}.vb-n7k-file__name{font-weight:700}.vb-n7k-file__meta{font-size:13px;color:#333}.vb-n7k-file__badge{font-size:12px;text-align:right}
.vb-n7k-process{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.vb-n7k-steps{list-style:none;padding:0;margin:0;display:grid;gap:9px}.vb-n7k-steps__item{display:flex;gap:10px;align-items:center}.vb-n7k-steps__num{width:25px;height:25px;display:grid;place-items:center;background:#ddd;border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;font-weight:700}.vb-n7k-steps__item--active .vb-n7k-steps__num{background:var(--blue);color:#fff;border-color:#111}.vb-n7k-pricebox{border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;background:#eee;padding:16px}.vb-n7k-pricebox__price{font-family:var(--t-headline-font,monospace);font-size:35px;font-weight:700}.vb-n7k-progress{height:20px;background:#fff;border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;margin:15px 0 7px;padding:2px}.vb-n7k-progress__bar{height:100%;width:72%;background:var(--blue)}.vb-n7k-pricebox__small{font-size:12px}
.vb-n7k-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.vb-n7k-dialog{background:#fff;border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;padding:4px}.vb-n7k-dialog__bar{background:var(--blue);color:#fff;padding:5px 8px;font-family:var(--t-headline-font,monospace);font-size:13px}.vb-n7k-dialog__body{padding:14px 12px;line-height:1.5;font-size:14px}.vb-n7k-dialog__body p{margin:0 0 12px}.vb-n7k-dialog__author{font-weight:700}
.vb-n7k-form{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;font-family:var(--t-text-font,Arial,sans-serif)}.vb-n7k-form input,.vb-n7k-form textarea{width:100%;padding:10px;border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;background:#fff;color:#111;font:inherit}.vb-n7k-form textarea{min-height:110px;resize:vertical}.vb-n7k-input{margin-bottom:12px}.vb-n7k-input label{display:block;font-weight:700;margin-bottom:5px}.vb-n7k-input .t-input-error{color:#8b0000;font-size:12px;min-height:16px}.vb-n7k-form__note{font-size:13px;line-height:1.45}.vb-n7k-form__success{display:none;background:#ffffc0;border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;padding:12px;margin-bottom:12px}.vb-n7k-form__error{display:none;color:#8b0000;margin-bottom:12px}.vb-n7k-taskbar{position:fixed;z-index:10;left:0;right:0;bottom:0;height:45px;background:var(--silver);border-top:2px solid #fff;box-shadow:0 -2px #333;display:flex;align-items:center;padding:4px 10px;justify-content:space-between;font-size:13px}.vb-n7k-taskbar__menu{font-weight:700;padding:7px 13px}.vb-n7k-taskbar__clock{border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;padding:6px 10px;background:#ddd;min-width:76px;text-align:center}
@keyframes vb-n7k-open{from{opacity:0;transform:scaleY(.02);transform-origin:top}to{opacity:1;transform:scaleY(1)}}
@media(max-width:960px){.vb-n7k-page{padding:14px 12px 70px}.vb-n7k-page__desktop{grid-template-columns:76px minmax(0,1fr);gap:14px}.vb-n7k-page__shortcuts{gap:15px}.vb-n7k-page__shortcut-icon{font-size:22px;width:38px}.vb-n7k-window__body{padding:22px 20px}.vb-n7k-quotes{grid-template-columns:1fr}.vb-n7k-process,.vb-n7k-form{grid-template-columns:1fr}}
@media(max-width:640px){.vb-n7k-page__desktop{display:block}.vb-n7k-page__shortcuts{display:flex;flex-direction:row;overflow:auto;margin:0 0 14px;padding:0 0 4px;gap:18px}.vb-n7k-page__shortcut{min-width:65px;font-size:11px}.vb-n7k-window__body{padding:18px 14px}.vb-n7k-window__body h2{font-size:clamp(31px,10vw,52px)}.vb-n7k-hero__status{display:block;margin:12px 0 0}.vb-n7k-filelist__head{display:none}.vb-n7k-file{grid-template-columns:35px 1fr;padding:10px}.vb-n7k-file__meta,.vb-n7k-file__badge{grid-column:2;text-align:left}.vb-n7k-window__bar{font-size:13px}.vb-n7k-page__button{width:100%}}
@media(max-width:380px){.vb-n7k-page{padding-left:8px;padding-right:8px}.vb-n7k-window__body{padding:15px 10px}.vb-n7k-taskbar{padding-left:6px;padding-right:6px}}
@media(prefers-reduced-motion:reduce){.vb-n7k-window{animation:none}.vb-n7k-page__button{transition:none}}
</style>
<div class="vb-n7k-page__desktop">
<nav class="vb-n7k-page__shortcuts" aria-label="Разделы сайта">
<a class="vb-n7k-page__shortcut" href="#vb-n7k-about"><span class="vb-n7k-page__shortcut-icon">📁</span>О нас</a>
<a class="vb-n7k-page__shortcut" href="#vb-n7k-services"><span class="vb-n7k-page__shortcut-icon">🖥️</span>Услуги</a>
<a class="vb-n7k-page__shortcut" href="#vb-n7k-pricing"><span class="vb-n7k-page__shortcut-icon">💾</span>Тарифы</a>
<a class="vb-n7k-page__shortcut" href="#vb-n7k-contact"><span class="vb-n7k-page__shortcut-icon">✉️</span>Заявка</a>
</nav>
<main class="vb-n7k-page__windows">
<section id="vb-n7k-hero" class="vb-n7k-window" data-section-name="Главное окно" aria-labelledby="vb-n7k-hero-title"><div class="vb-n7k-window__bar"><span>NOSTALGIA.EXE — Добро пожаловать</span><span class="vb-n7k-window__controls"><i class="vb-n7k-window__control">_</i><i class="vb-n7k-window__control">□</i><i class="vb-n7k-window__control">×</i></span></div><div class="vb-n7k-window__body"><div class="vb-n7k-hero__mark">[ найдено: хорошее настроение ]</div><h1 id="vb-n7k-hero-title">Digital, который хочется потрогать</h1><p class="vb-n7k-hero__lead">«Ностальгия» — агентство для брендов, которым мало быть просто красивыми. Собираем сайты, айдентику и кампании с характером, иронией и кнопкой «потыкать ещё раз».</p><a class="vb-n7k-page__button vb-n7k-page__button--primary" href="#vb-n7k-contact">Запустить проект</a><span class="vb-n7k-hero__status">Система готова к работе ✓</span></div></section>
<section id="vb-n7k-about" class="vb-n7k-window" data-section-name="Об агентстве" aria-labelledby="vb-n7k-about-title"><div class="vb-n7k-window__bar"><span>О_НАС.TXT — Ностальгия</span><span class="vb-n7k-window__controls"><i class="vb-n7k-window__control">_</i><i class="vb-n7k-window__control">□</i><i class="vb-n7k-window__control">×</i></span></div><div class="vb-n7k-window__body"><h2 id="vb-n7k-about-title">Мы превращаем «помните, как раньше?» в «вау, как сейчас»</h2><p>Работаем на стыке стратегии, дизайна и цифровых штук. Любим ясные идеи, смешные детали и решения, которые не нужно объяснять в презентации на 86 слайдов.</p></div></section>
<section id="vb-n7k-services" class="vb-n7k-window" data-section-name="Услуги" aria-labelledby="vb-n7k-services-title"><div class="vb-n7k-window__bar"><span>ПРОВОДНИК — Мои услуги</span><span class="vb-n7k-window__controls"><i class="vb-n7k-window__control">_</i><i class="vb-n7k-window__control">□</i><i class="vb-n7k-window__control">×</i></span></div><div class="vb-n7k-window__body"><h2 id="vb-n7k-services-title">Папка «Что умеем»</h2><div class="vb-n7k-filelist"><div class="vb-n7k-filelist__head"><span></span><span>Имя</span><span>Тип</span><span>Статус</span></div><div class="vb-n7k-file"><span class="vb-n7k-file__icon">📄</span><span class="vb-n7k-file__name">brand_strategy.doc</span><span class="vb-n7k-file__meta">Смысл и позиционирование</span><span class="vb-n7k-file__badge">готово</span></div><div class="vb-n7k-file"><span class="vb-n7k-file__icon">🖼️</span><span class="vb-n7k-file__name">identity.gif</span><span class="vb-n7k-file__meta">Айдентика и визуальный язык</span><span class="vb-n7k-file__badge">ярко</span></div><div class="vb-n7k-file"><span class="vb-n7k-file__icon">🌐</span><span class="vb-n7k-file__name">website.exe</span><span class="vb-n7k-file__meta">Сайты и digital-продукты</span><span class="vb-n7k-file__badge">онлайн</span></div><div class="vb-n7k-file"><span class="vb-n7k-file__icon">📣</span><span class="vb-n7k-file__name">campaign.zip</span><span class="vb-n7k-file__meta">Кампании и спецпроекты</span><span class="vb-n7k-file__badge">вирусно</span></div></div></div></section>
<section id="vb-n7k-pricing" class="vb-n7k-window" data-section-name="Тарифы" aria-labelledby="vb-n7k-pricing-title"><div class="vb-n7k-window__bar"><span>INSTALLER — Установка решения</span><span class="vb-n7k-window__controls"><i class="vb-n7k-window__control">_</i><i class="vb-n7k-window__control">□</i><i class="vb-n7k-window__control">×</i></span></div><div class="vb-n7k-window__body"><h2 id="vb-n7k-pricing-title">Выберите режим запуска</h2><div class="vb-n7k-process"><ol class="vb-n7k-steps"><li class="vb-n7k-steps__item vb-n7k-steps__item--active"><span class="vb-n7k-steps__num">1</span>Разобраться в задаче</li><li class="vb-n7k-steps__item"><span class="vb-n7k-steps__num">2</span>Собрать идею</li><li class="vb-n7k-steps__item"><span class="vb-n7k-steps__num">3</span>Выпустить в мир</li></ol><div class="vb-n7k-pricebox"><div class="vb-n7k-pricebox__price">от 90 000 ₽</div><p>Стартовый пакет: стратегия + визуальная концепция + первый прототип.</p><div class="vb-n7k-progress"><div class="vb-n7k-progress__bar"></div></div><div class="vb-n7k-pricebox__small">Подготовка сметы: 72%</div></div></div></div></section>
<section id="vb-n7k-reviews" class="vb-n7k-window" data-section-name="Отзывы" aria-labelledby="vb-n7k-reviews-title"><div class="vb-n7k-window__bar"><span>MESSAGES — Входящие</span><span class="vb-n7k-window__controls"><i class="vb-n7k-window__control">_</i><i class="vb-n7k-window__control">□</i><i class="vb-n7k-window__control">×</i></span></div><div class="vb-n7k-window__body"><h2 id="vb-n7k-reviews-title">Вам пришло 3 новых сообщения</h2><div class="vb-n7k-quotes"><article class="vb-n7k-dialog"><div class="vb-n7k-dialog__bar">Системное сообщение</div><div class="vb-n7k-dialog__body"><p>«Они поняли нашу шутку с первого раза. А потом ещё и сделали из неё кампанию».</p><span class="vb-n7k-dialog__author">— Аня, бренд-менеджер</span></div></article><article class="vb-n7k-dialog"><div class="vb-n7k-dialog__bar">Системное сообщение</div><div class="vb-n7k-dialog__body"><p>«Сайт хочется открывать просто ради звука кнопок. Но конверсия тоже выросла».</p><span class="vb-n7k-dialog__author">— Максим, основатель</span></div></article><article class="vb-n7k-dialog"><div class="vb-n7k-dialog__bar">Системное сообщение</div><div class="vb-n7k-dialog__body"><p>«Редкий случай, когда “сделайте повеселее” стало понятным ТЗ».</p><span class="vb-n7k-dialog__author">— Лера, маркетинг</span></div></article></div></div></section>
<section id="vb-n7k-contact" class="vb-n7k-window" data-section-name="Заявка" aria-labelledby="vb-n7k-contact-title"><div class="vb-n7k-window__bar"><span>NEW_MESSAGE — Новая заявка</span><span class="vb-n7k-window__controls"><i class="vb-n7k-window__control">_</i><i class="vb-n7k-window__control">□</i><i class="vb-n7k-window__control">×</i></span></div><div class="vb-n7k-window__body"><h2 id="vb-n7k-contact-title">Пора нажать «ОК»</h2><form id="vb-n7k-contact-form" name="vb-n7k-contact-form" class="vb-n7k-form" data-vibeblock-form="true" data-inputbox=".vb-n7k-input" novalidate><div><div class="vb-n7k-form__success js-successbox t-form__successbox">Спасибо! Заявка подготовлена. Мы скоро вернёмся с ответом.</div><div class="vb-n7k-form__error js-errorbox-all"><div class="js-rule-error-all">Проверьте поля — кажется, система нашла опечатку.</div></div><div class="vb-n7k-input"><label for="vb-n7k-name">Ваше имя</label><input id="vb-n7k-name" name="Name" class="js-tilda-rule" data-tilda-req="1" data-tilda-rule="name" required><div class="t-input-error"></div></div><div class="vb-n7k-input"><label for="vb-n7k-email">Электропочта</label><input id="vb-n7k-email" type="email" name="Email" class="js-tilda-rule" data-tilda-req="1" data-tilda-rule="email" required><div class="t-input-error"></div></div><div class="vb-n7k-input"><label for="vb-n7k-message">Что запускаем?</label><textarea id="vb-n7k-message" name="Message" class="js-tilda-rule" data-tilda-req="1" data-tilda-rule="string" required></textarea><div class="t-input-error"></div></div><button type="submit" class="t-submit t-btnflex t-btnflex_md vb-n7k-page__button vb-n7k-page__button--primary"><span class="t-btnflex__text">Отправить заявку</span></button></div><div class="vb-n7k-form__note"><strong>Никаких звонков в 7 утра.</strong><br><br>Сначала спокойно прочитаем задачу, зададим пару вопросов и предложим понятный следующий шаг.<br><br>Обычно отвечаем в течение 1 рабочего дня.</div></form></div></section>
</main>
</div>
<div class="vb-n7k-taskbar"><button class="vb-n7k-page__button vb-n7k-taskbar__menu" type="button" aria-label="Открыть меню">▣ Меню</button><span>Ностальгия — digital с характером</span><time class="vb-n7k-taskbar__clock" id="vb-n7k-clock" datetime=""></time></div>
<script>(function(){var root=document.getElementById('vb-n7k-page');if(!root)return;var clock=root.querySelector('#vb-n7k-clock');function tick(){var d=new Date();clock.textContent=d.toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'});clock.dateTime=d.toISOString()}tick();setInterval(tick,30000);var form=root.querySelector('#vb-n7k-contact-form');form.addEventListener('submit',function(e){e.preventDefault();if(window.tildaForm){window.tildaForm.hideErrors(form);var errors=window.tildaForm.validate(form);if(window.tildaForm.showErrors(form,errors))return}else{var fields=form.querySelectorAll('[required]');var bad=false;fields.forEach(function(field){if(!field.value.trim()){field.closest('.vb-n7k-input').querySelector('.t-input-error').textContent='Заполните это поле';bad=true}});if(bad)return}form.querySelector('.vb-n7k-form__error').style.display='none';form.querySelector('.vb-n7k-form__success').style.display='block';form.reset()})})();</script>
</section>
<style>
.vb-n7k-page,.vb-n7k-page *{box-sizing:border-box}.vb-n7k-page input,.vb-n7k-page textarea,.vb-n7k-page select{font:inherit}
.vb-n7k-page{--desk:#008080;--silver:#c0c0c0;--blue:#000080;--ink:#111;--shadow:#555;min-height:100vh;background:var(--desk);color:var(--ink);font-family:var(--t-text-font,Arial,sans-serif);padding:22px 22px 74px;overflow:hidden;cursor:default}
.vb-n7k-page a,.vb-n7k-page button{cursor:pointer}.vb-n7k-page a:hover,.vb-n7k-page button:hover{cursor:crosshair}
.vb-n7k-page__desktop{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:112px minmax(0,1fr);gap:24px;align-items:start}
.vb-n7k-page__shortcuts{display:flex;flex-direction:column;gap:22px;padding-top:18px}.vb-n7k-page__shortcut{color:#fff;text-decoration:none;text-align:center;font-size:13px;text-shadow:1px 1px #000;line-height:1.2}.vb-n7k-page__shortcut-icon{width:46px;height:42px;margin:0 auto 6px;display:grid;place-items:center;color:#fff;font-size:26px;text-shadow:2px 2px #000}.vb-n7k-page__shortcut:hover{text-decoration:underline}
.vb-n7k-page__windows{display:flex;flex-direction:column;gap:24px}.vb-n7k-window{background:var(--silver);border:2px solid #fff;border-right-color:#333;border-bottom-color:#333;box-shadow:2px 2px #111;padding:4px;animation:vb-n7k-open .38s ease-out both}.vb-n7k-window:nth-child(2){animation-delay:.08s}.vb-n7k-window:nth-child(3){animation-delay:.16s}.vb-n7k-window:nth-child(4){animation-delay:.24s}.vb-n7k-window__bar{height:30px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:3px 5px 3px 9px;font-family:var(--t-headline-font,monospace);font-weight:700;font-size:15px;letter-spacing:.02em}.vb-n7k-window__controls{display:flex;gap:3px}.vb-n7k-window__control{width:22px;height:21px;background:var(--silver);color:#111;border:2px solid #fff;border-right-color:#333;border-bottom-color:#333;display:grid;place-items:center;font:700 13px Arial}.vb-n7k-window__body{padding:28px 30px}.vb-n7k-window__body p{max-width:68ch;line-height:1.55;margin:0 0 18px}.vb-n7k-window__body h2,.vb-n7k-window__body h3{font-family:var(--t-headline-font,monospace);text-wrap:balance;margin:0 0 14px}.vb-n7k-window__body h2{font-size:clamp(30px,5vw,68px);line-height:1.02;max-width:800px}.vb-n7k-window__body h3{font-size:25px}
.vb-n7k-hero__lead{font-size:18px}.vb-n7k-hero__mark{font-family:var(--t-headline-font,monospace);font-size:14px;margin-bottom:14px}.vb-n7k-page__button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 18px;background:var(--silver);border:2px solid #fff;border-right-color:#333;border-bottom-color:#333;color:#111;text-decoration:none;font-weight:700;font-family:var(--t-text-font,Arial,sans-serif);box-shadow:1px 1px #111}.vb-n7k-page__button:active{border-color:#333;border-right-color:#fff;border-bottom-color:#fff;box-shadow:none;transform:translate(1px,1px)}.vb-n7k-page__button--primary{background:#ffffc0}.vb-n7k-hero__status{display:inline-block;margin-left:14px;font-size:13px}
.vb-n7k-filelist{border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;background:#fff}.vb-n7k-filelist__head,.vb-n7k-file{display:grid;grid-template-columns:46px 1.2fr 1fr 100px;gap:12px;align-items:center;padding:9px 12px}.vb-n7k-filelist__head{background:#ddd;border-bottom:1px solid #777;font-size:12px}.vb-n7k-file{border-bottom:1px solid #ddd}.vb-n7k-file:last-child{border-bottom:0}.vb-n7k-file__icon{font-size:25px}.vb-n7k-file__name{font-weight:700}.vb-n7k-file__meta{font-size:13px;color:#333}.vb-n7k-file__badge{font-size:12px;text-align:right}
.vb-n7k-process{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.vb-n7k-steps{list-style:none;padding:0;margin:0;display:grid;gap:9px}.vb-n7k-steps__item{display:flex;gap:10px;align-items:center}.vb-n7k-steps__num{width:25px;height:25px;display:grid;place-items:center;background:#ddd;border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;font-weight:700}.vb-n7k-steps__item--active .vb-n7k-steps__num{background:var(--blue);color:#fff;border-color:#111}.vb-n7k-pricebox{border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;background:#eee;padding:16px}.vb-n7k-pricebox__price{font-family:var(--t-headline-font,monospace);font-size:35px;font-weight:700}.vb-n7k-progress{height:20px;background:#fff;border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;margin:15px 0 7px;padding:2px}.vb-n7k-progress__bar{height:100%;width:72%;background:var(--blue)}.vb-n7k-pricebox__small{font-size:12px}
.vb-n7k-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.vb-n7k-dialog{background:#fff;border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;padding:4px}.vb-n7k-dialog__bar{background:var(--blue);color:#fff;padding:5px 8px;font-family:var(--t-headline-font,monospace);font-size:13px}.vb-n7k-dialog__body{padding:14px 12px;line-height:1.5;font-size:14px}.vb-n7k-dialog__body p{margin:0 0 12px}.vb-n7k-dialog__author{font-weight:700}
.vb-n7k-form{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;font-family:var(--t-text-font,Arial,sans-serif)}.vb-n7k-form input,.vb-n7k-form textarea{width:100%;padding:10px;border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;background:#fff;color:#111;font:inherit}.vb-n7k-form textarea{min-height:110px;resize:vertical}.vb-n7k-input{margin-bottom:12px}.vb-n7k-input label{display:block;font-weight:700;margin-bottom:5px}.vb-n7k-input .t-input-error{color:#8b0000;font-size:12px;min-height:16px}.vb-n7k-form__note{font-size:13px;line-height:1.45}.vb-n7k-form__success{display:none;background:#ffffc0;border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;padding:12px;margin-bottom:12px}.vb-n7k-form__error{display:none;color:#8b0000;margin-bottom:12px}.vb-n7k-taskbar{position:fixed;z-index:10;left:0;right:0;bottom:0;height:45px;background:var(--silver);border-top:2px solid #fff;box-shadow:0 -2px #333;display:flex;align-items:center;padding:4px 10px;justify-content:space-between;font-size:13px}.vb-n7k-taskbar__menu{font-weight:700;padding:7px 13px}.vb-n7k-taskbar__clock{border:2px solid #777;border-right-color:#fff;border-bottom-color:#fff;padding:6px 10px;background:#ddd;min-width:76px;text-align:center}
@keyframes vb-n7k-open{from{opacity:0;transform:scaleY(.02);transform-origin:top}to{opacity:1;transform:scaleY(1)}}
@media(max-width:960px){.vb-n7k-page{padding:14px 12px 70px}.vb-n7k-page__desktop{grid-template-columns:76px minmax(0,1fr);gap:14px}.vb-n7k-page__shortcuts{gap:15px}.vb-n7k-page__shortcut-icon{font-size:22px;width:38px}.vb-n7k-window__body{padding:22px 20px}.vb-n7k-quotes{grid-template-columns:1fr}.vb-n7k-process,.vb-n7k-form{grid-template-columns:1fr}}
@media(max-width:640px){.vb-n7k-page__desktop{display:block}.vb-n7k-page__shortcuts{display:flex;flex-direction:row;overflow:auto;margin:0 0 14px;padding:0 0 4px;gap:18px}.vb-n7k-page__shortcut{min-width:65px;font-size:11px}.vb-n7k-window__body{padding:18px 14px}.vb-n7k-window__body h2{font-size:clamp(31px,10vw,52px)}.vb-n7k-hero__status{display:block;margin:12px 0 0}.vb-n7k-filelist__head{display:none}.vb-n7k-file{grid-template-columns:35px 1fr;padding:10px}.vb-n7k-file__meta,.vb-n7k-file__badge{grid-column:2;text-align:left}.vb-n7k-window__bar{font-size:13px}.vb-n7k-page__button{width:100%}}
@media(max-width:380px){.vb-n7k-page{padding-left:8px;padding-right:8px}.vb-n7k-window__body{padding:15px 10px}.vb-n7k-taskbar{padding-left:6px;padding-right:6px}}
@media(prefers-reduced-motion:reduce){.vb-n7k-window{animation:none}.vb-n7k-page__button{transition:none}}
</style>
<div class="vb-n7k-page__desktop">
<nav class="vb-n7k-page__shortcuts" aria-label="Разделы сайта">
<a class="vb-n7k-page__shortcut" href="#vb-n7k-about"><span class="vb-n7k-page__shortcut-icon">📁</span>О нас</a>
<a class="vb-n7k-page__shortcut" href="#vb-n7k-services"><span class="vb-n7k-page__shortcut-icon">🖥️</span>Услуги</a>
<a class="vb-n7k-page__shortcut" href="#vb-n7k-pricing"><span class="vb-n7k-page__shortcut-icon">💾</span>Тарифы</a>
<a class="vb-n7k-page__shortcut" href="#vb-n7k-contact"><span class="vb-n7k-page__shortcut-icon">✉️</span>Заявка</a>
</nav>
<main class="vb-n7k-page__windows">
<section id="vb-n7k-hero" class="vb-n7k-window" data-section-name="Главное окно" aria-labelledby="vb-n7k-hero-title"><div class="vb-n7k-window__bar"><span>NOSTALGIA.EXE — Добро пожаловать</span><span class="vb-n7k-window__controls"><i class="vb-n7k-window__control">_</i><i class="vb-n7k-window__control">□</i><i class="vb-n7k-window__control">×</i></span></div><div class="vb-n7k-window__body"><div class="vb-n7k-hero__mark">[ найдено: хорошее настроение ]</div><h1 id="vb-n7k-hero-title">Digital, который хочется потрогать</h1><p class="vb-n7k-hero__lead">«Ностальгия» — агентство для брендов, которым мало быть просто красивыми. Собираем сайты, айдентику и кампании с характером, иронией и кнопкой «потыкать ещё раз».</p><a class="vb-n7k-page__button vb-n7k-page__button--primary" href="#vb-n7k-contact">Запустить проект</a><span class="vb-n7k-hero__status">Система готова к работе ✓</span></div></section>
<section id="vb-n7k-about" class="vb-n7k-window" data-section-name="Об агентстве" aria-labelledby="vb-n7k-about-title"><div class="vb-n7k-window__bar"><span>О_НАС.TXT — Ностальгия</span><span class="vb-n7k-window__controls"><i class="vb-n7k-window__control">_</i><i class="vb-n7k-window__control">□</i><i class="vb-n7k-window__control">×</i></span></div><div class="vb-n7k-window__body"><h2 id="vb-n7k-about-title">Мы превращаем «помните, как раньше?» в «вау, как сейчас»</h2><p>Работаем на стыке стратегии, дизайна и цифровых штук. Любим ясные идеи, смешные детали и решения, которые не нужно объяснять в презентации на 86 слайдов.</p></div></section>
<section id="vb-n7k-services" class="vb-n7k-window" data-section-name="Услуги" aria-labelledby="vb-n7k-services-title"><div class="vb-n7k-window__bar"><span>ПРОВОДНИК — Мои услуги</span><span class="vb-n7k-window__controls"><i class="vb-n7k-window__control">_</i><i class="vb-n7k-window__control">□</i><i class="vb-n7k-window__control">×</i></span></div><div class="vb-n7k-window__body"><h2 id="vb-n7k-services-title">Папка «Что умеем»</h2><div class="vb-n7k-filelist"><div class="vb-n7k-filelist__head"><span></span><span>Имя</span><span>Тип</span><span>Статус</span></div><div class="vb-n7k-file"><span class="vb-n7k-file__icon">📄</span><span class="vb-n7k-file__name">brand_strategy.doc</span><span class="vb-n7k-file__meta">Смысл и позиционирование</span><span class="vb-n7k-file__badge">готово</span></div><div class="vb-n7k-file"><span class="vb-n7k-file__icon">🖼️</span><span class="vb-n7k-file__name">identity.gif</span><span class="vb-n7k-file__meta">Айдентика и визуальный язык</span><span class="vb-n7k-file__badge">ярко</span></div><div class="vb-n7k-file"><span class="vb-n7k-file__icon">🌐</span><span class="vb-n7k-file__name">website.exe</span><span class="vb-n7k-file__meta">Сайты и digital-продукты</span><span class="vb-n7k-file__badge">онлайн</span></div><div class="vb-n7k-file"><span class="vb-n7k-file__icon">📣</span><span class="vb-n7k-file__name">campaign.zip</span><span class="vb-n7k-file__meta">Кампании и спецпроекты</span><span class="vb-n7k-file__badge">вирусно</span></div></div></div></section>
<section id="vb-n7k-pricing" class="vb-n7k-window" data-section-name="Тарифы" aria-labelledby="vb-n7k-pricing-title"><div class="vb-n7k-window__bar"><span>INSTALLER — Установка решения</span><span class="vb-n7k-window__controls"><i class="vb-n7k-window__control">_</i><i class="vb-n7k-window__control">□</i><i class="vb-n7k-window__control">×</i></span></div><div class="vb-n7k-window__body"><h2 id="vb-n7k-pricing-title">Выберите режим запуска</h2><div class="vb-n7k-process"><ol class="vb-n7k-steps"><li class="vb-n7k-steps__item vb-n7k-steps__item--active"><span class="vb-n7k-steps__num">1</span>Разобраться в задаче</li><li class="vb-n7k-steps__item"><span class="vb-n7k-steps__num">2</span>Собрать идею</li><li class="vb-n7k-steps__item"><span class="vb-n7k-steps__num">3</span>Выпустить в мир</li></ol><div class="vb-n7k-pricebox"><div class="vb-n7k-pricebox__price">от 90 000 ₽</div><p>Стартовый пакет: стратегия + визуальная концепция + первый прототип.</p><div class="vb-n7k-progress"><div class="vb-n7k-progress__bar"></div></div><div class="vb-n7k-pricebox__small">Подготовка сметы: 72%</div></div></div></div></section>
<section id="vb-n7k-reviews" class="vb-n7k-window" data-section-name="Отзывы" aria-labelledby="vb-n7k-reviews-title"><div class="vb-n7k-window__bar"><span>MESSAGES — Входящие</span><span class="vb-n7k-window__controls"><i class="vb-n7k-window__control">_</i><i class="vb-n7k-window__control">□</i><i class="vb-n7k-window__control">×</i></span></div><div class="vb-n7k-window__body"><h2 id="vb-n7k-reviews-title">Вам пришло 3 новых сообщения</h2><div class="vb-n7k-quotes"><article class="vb-n7k-dialog"><div class="vb-n7k-dialog__bar">Системное сообщение</div><div class="vb-n7k-dialog__body"><p>«Они поняли нашу шутку с первого раза. А потом ещё и сделали из неё кампанию».</p><span class="vb-n7k-dialog__author">— Аня, бренд-менеджер</span></div></article><article class="vb-n7k-dialog"><div class="vb-n7k-dialog__bar">Системное сообщение</div><div class="vb-n7k-dialog__body"><p>«Сайт хочется открывать просто ради звука кнопок. Но конверсия тоже выросла».</p><span class="vb-n7k-dialog__author">— Максим, основатель</span></div></article><article class="vb-n7k-dialog"><div class="vb-n7k-dialog__bar">Системное сообщение</div><div class="vb-n7k-dialog__body"><p>«Редкий случай, когда “сделайте повеселее” стало понятным ТЗ».</p><span class="vb-n7k-dialog__author">— Лера, маркетинг</span></div></article></div></div></section>
<section id="vb-n7k-contact" class="vb-n7k-window" data-section-name="Заявка" aria-labelledby="vb-n7k-contact-title"><div class="vb-n7k-window__bar"><span>NEW_MESSAGE — Новая заявка</span><span class="vb-n7k-window__controls"><i class="vb-n7k-window__control">_</i><i class="vb-n7k-window__control">□</i><i class="vb-n7k-window__control">×</i></span></div><div class="vb-n7k-window__body"><h2 id="vb-n7k-contact-title">Пора нажать «ОК»</h2><form id="vb-n7k-contact-form" name="vb-n7k-contact-form" class="vb-n7k-form" data-vibeblock-form="true" data-inputbox=".vb-n7k-input" novalidate><div><div class="vb-n7k-form__success js-successbox t-form__successbox">Спасибо! Заявка подготовлена. Мы скоро вернёмся с ответом.</div><div class="vb-n7k-form__error js-errorbox-all"><div class="js-rule-error-all">Проверьте поля — кажется, система нашла опечатку.</div></div><div class="vb-n7k-input"><label for="vb-n7k-name">Ваше имя</label><input id="vb-n7k-name" name="Name" class="js-tilda-rule" data-tilda-req="1" data-tilda-rule="name" required><div class="t-input-error"></div></div><div class="vb-n7k-input"><label for="vb-n7k-email">Электропочта</label><input id="vb-n7k-email" type="email" name="Email" class="js-tilda-rule" data-tilda-req="1" data-tilda-rule="email" required><div class="t-input-error"></div></div><div class="vb-n7k-input"><label for="vb-n7k-message">Что запускаем?</label><textarea id="vb-n7k-message" name="Message" class="js-tilda-rule" data-tilda-req="1" data-tilda-rule="string" required></textarea><div class="t-input-error"></div></div><button type="submit" class="t-submit t-btnflex t-btnflex_md vb-n7k-page__button vb-n7k-page__button--primary"><span class="t-btnflex__text">Отправить заявку</span></button></div><div class="vb-n7k-form__note"><strong>Никаких звонков в 7 утра.</strong><br><br>Сначала спокойно прочитаем задачу, зададим пару вопросов и предложим понятный следующий шаг.<br><br>Обычно отвечаем в течение 1 рабочего дня.</div></form></div></section>
</main>
</div>
<div class="vb-n7k-taskbar"><button class="vb-n7k-page__button vb-n7k-taskbar__menu" type="button" aria-label="Открыть меню">▣ Меню</button><span>Ностальгия — digital с характером</span><time class="vb-n7k-taskbar__clock" id="vb-n7k-clock" datetime=""></time></div>
<script>(function(){var root=document.getElementById('vb-n7k-page');if(!root)return;var clock=root.querySelector('#vb-n7k-clock');function tick(){var d=new Date();clock.textContent=d.toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'});clock.dateTime=d.toISOString()}tick();setInterval(tick,30000);var form=root.querySelector('#vb-n7k-contact-form');form.addEventListener('submit',function(e){e.preventDefault();if(window.tildaForm){window.tildaForm.hideErrors(form);var errors=window.tildaForm.validate(form);if(window.tildaForm.showErrors(form,errors))return}else{var fields=form.querySelectorAll('[required]');var bad=false;fields.forEach(function(field){if(!field.value.trim()){field.closest('.vb-n7k-input').querySelector('.t-input-error').textContent='Заполните это поле';bad=true}});if(bad)return}form.querySelector('.vb-n7k-form__error').style.display='none';form.querySelector('.vb-n7k-form__success').style.display='block';form.reset()})})();</script>
</section>
Что выбрать, промпт или код?
Копируйте промпт, если хотите получить похожий результат, но ввести информацию о своём бизнесе и задать свои требования. Например, изменить кнопки, тексты, цвета, фотографии или другие элементы.
Копируйте код, если хотите получить точно такой же блок. Чтобы его изменить, придётся отредактировать html-код.
