FAQ
Аккордеон в стиле ярких папок
Разложите информацию для клиента по папкам: ответьте на главные вопросы и снимите страхи.
Промпт
Вы можете скопировать промпт и вставить его в вайб блок в поле ввода. Подробнее в инструкции.
Создай интерактивный вертикальный аккордеон в стиле компьютерных папок для сайта онлайн-школы дизайна «Пиксель».
Заголовок блока: «Разложили всё по папкам».
Вступление: «Здесь собрали самое важное о курсе веб-дизайна с нуля. Открывай папки и находи ответы на свои вопросы».
Вопросы и ответы:
Папка 1. [Подставьте вопрос]
Ответ: [Подставьте ответ]
Папка 2. [Подставьте вопрос]
Ответ: [Подставьте ответ]
Папка 3. [Подставьте вопрос]
Ответ: [Подставьте ответ]
Папка 4. [Подставьте вопрос]
Ответ: [Подставьте ответ]
Папка 5. [Подставьте вопрос]
Ответ: [Подставьте ответ]
Под последней папкой — заметная кнопка «Посмотреть программу курса», ведёт на #program.
Аудитория: взрослые, которые до покупки хотят разобраться в программе, требованиях и формате курса.
ВИЗУАЛЬНАЯ СТИЛИСТИКА
Блок похож на набор крупных файловых папок из компьютерного интерфейса: корпус и язычок сверху слева. Это не стандартный FAQ и не ряд тонких полос: каждая папка — объект на всю ширину блока.
Палитра:
— Фон секции — #EAF0F7.
— Жёлтая папка — #FFD66B, язычок — #F4BD43.
— Голубая папка — #B8D7FF, язычок — #83B7F5.
— Сиреневая папка — #D7C6FF, язычок — #B79AEF.
— Фон ответов — #FFF9E9.
— Текст — #243047.
— Обводки папок: жёлтой #B17C19, голубой #4B79B8, сиреневой #8564B7.
— Активный акцент — #275EB5.
Чередуй жёлтые, голубые и сиреневые папки по порядку. Только эти цвета, без прозрачности, стекла, градиентов и случайных ярких цветов.
ФОРМА ПАПОК
Каждый из пяти вопросов — отдельная папка. Корпус — крупный прямоугольник с заливкой, обводкой 2 пикселя и закруглёнными нижними углами.
Язычок 150–180 на 18–24 пикселя, поднимается над корпусом на 14–18 пикселей, верхние углы слегка закруглены. Язычок и корпус — один непрерывный силуэт без зазора.
Вопрос внутри корпуса, а не на язычке.
Высота закрытой папки без язычка: на компьютере от 76 пикселей, на телефоне от 80; при длинном вопросе растёт.
ОТКРЫТИЕ ПАПОК
По умолчанию открыта первая папка. По клику папка плавно раскрывается, а открытая ранее закрывается. У открытой папки кнопка со стрелкой заливается цветом #275EB5.
КНОПКА
Кнопка «Посмотреть программу курса» цвета #275EB5, с белым текстом и объёмной тенью. На телефоне она растягивается на всю ширину.
При уменьшении анимации переходы отключаются.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Хороший результат: пять ярких папок, которые открываются по одной, и заметная кнопка.
Заголовок блока: «Разложили всё по папкам».
Вступление: «Здесь собрали самое важное о курсе веб-дизайна с нуля. Открывай папки и находи ответы на свои вопросы».
Вопросы и ответы:
Папка 1. [Подставьте вопрос]
Ответ: [Подставьте ответ]
Папка 2. [Подставьте вопрос]
Ответ: [Подставьте ответ]
Папка 3. [Подставьте вопрос]
Ответ: [Подставьте ответ]
Папка 4. [Подставьте вопрос]
Ответ: [Подставьте ответ]
Папка 5. [Подставьте вопрос]
Ответ: [Подставьте ответ]
Под последней папкой — заметная кнопка «Посмотреть программу курса», ведёт на #program.
Аудитория: взрослые, которые до покупки хотят разобраться в программе, требованиях и формате курса.
ВИЗУАЛЬНАЯ СТИЛИСТИКА
Блок похож на набор крупных файловых папок из компьютерного интерфейса: корпус и язычок сверху слева. Это не стандартный FAQ и не ряд тонких полос: каждая папка — объект на всю ширину блока.
Палитра:
— Фон секции — #EAF0F7.
— Жёлтая папка — #FFD66B, язычок — #F4BD43.
— Голубая папка — #B8D7FF, язычок — #83B7F5.
— Сиреневая папка — #D7C6FF, язычок — #B79AEF.
— Фон ответов — #FFF9E9.
— Текст — #243047.
— Обводки папок: жёлтой #B17C19, голубой #4B79B8, сиреневой #8564B7.
— Активный акцент — #275EB5.
Чередуй жёлтые, голубые и сиреневые папки по порядку. Только эти цвета, без прозрачности, стекла, градиентов и случайных ярких цветов.
ФОРМА ПАПОК
Каждый из пяти вопросов — отдельная папка. Корпус — крупный прямоугольник с заливкой, обводкой 2 пикселя и закруглёнными нижними углами.
Язычок 150–180 на 18–24 пикселя, поднимается над корпусом на 14–18 пикселей, верхние углы слегка закруглены. Язычок и корпус — один непрерывный силуэт без зазора.
Вопрос внутри корпуса, а не на язычке.
Высота закрытой папки без язычка: на компьютере от 76 пикселей, на телефоне от 80; при длинном вопросе растёт.
ОТКРЫТИЕ ПАПОК
По умолчанию открыта первая папка. По клику папка плавно раскрывается, а открытая ранее закрывается. У открытой папки кнопка со стрелкой заливается цветом #275EB5.
КНОПКА
Кнопка «Посмотреть программу курса» цвета #275EB5, с белым текстом и объёмной тенью. На телефоне она растягивается на всю ширину.
При уменьшении анимации переходы отключаются.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Хороший результат: пять ярких папок, которые открываются по одной, и заметная кнопка.
Код
Вы можете скопировать код и вставить его в вайб блок в раздел код. Подробнее в инструкции.
<section class="vb-k7f" id="vb-k7f" data-section-name="Папки с вопросами о курсе" data-vibeblock-unique-section="yes" aria-labelledby="vb-k7f-title">
<style>
.vb-k7f,
.vb-k7f * { box-sizing: border-box; }
.vb-k7f input,
.vb-k7f textarea,
.vb-k7f select { font: inherit; }
.vb-k7f {
--vb-k7f-bg: #EAF0F7;
--vb-k7f-ink: #243047;
--vb-k7f-paper: #FFF9E9;
--vb-k7f-accent: #275EB5;
--vb-k7f-accent-dark: #1B4789;
--vb-k7f-accent-light: #3B72C4;
position: relative;
background: var(--vb-k7f-bg);
color: var(--vb-k7f-ink);
font-family: var(--t-text-font);
padding: clamp(56px, 8vw, 112px) 18px;
-webkit-font-smoothing: antialiased;
}
.vb-k7f__inner {
max-width: 1160px;
margin: 0 auto;
}
/* ---------- Шапка блока ---------- */
.vb-k7f__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 18px 56px;
margin-bottom: clamp(52px, 7vw, 84px);
}
.vb-k7f__title {
flex: 1 1 380px;
margin: 0;
max-width: 15ch;
font-family: var(--t-headline-font);
font-weight: 700;
font-size: clamp(31px, 5.1vw, 58px);
line-height: 1.04;
letter-spacing: -0.03em;
text-wrap: balance;
}
.vb-k7f__intro {
flex: 0 1 430px;
margin: 0;
font-family: var(--t-text-font);
font-size: clamp(16px, 1.7vw, 20px);
line-height: 1.58;
max-width: 62ch;
text-wrap: pretty;
}
/* ---------- Стек папок ---------- */
.vb-k7f__list {
display: flex;
flex-direction: column;
gap: 40px;
}
.vb-k7f__folder {
--vb-k7f-fill: #FFD66B;
--vb-k7f-tab: #F4BD43;
--vb-k7f-line: #B17C19;
position: relative;
background: var(--vb-k7f-fill);
border: 2px solid var(--vb-k7f-line);
border-radius: 4px 4px 16px 16px;
transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}
.vb-k7f__folder--blue {
--vb-k7f-fill: #B8D7FF;
--vb-k7f-tab: #83B7F5;
--vb-k7f-line: #4B79B8;
}
.vb-k7f__folder--lilac {
--vb-k7f-fill: #D7C6FF;
--vb-k7f-tab: #B79AEF;
--vb-k7f-line: #8564B7;
}
.vb-k7f__folder-tab {
position: absolute;
left: -2px;
top: -20px;
width: 168px;
height: 20px;
background: var(--vb-k7f-tab);
border: 2px solid var(--vb-k7f-line);
border-bottom: 0;
border-radius: 9px 9px 0 0;
pointer-events: none;
}
.vb-k7f__folder-heading {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.vb-k7f__folder-trigger {
display: flex;
align-items: center;
gap: clamp(14px, 2vw, 22px);
width: 100%;
min-height: 76px;
margin: 0;
padding: 20px 22px;
background: transparent;
border: 0;
border-radius: 3px 3px 0 0;
color: var(--vb-k7f-ink);
font-family: var(--t-headline-font);
text-align: left;
cursor: pointer;
}
.vb-k7f__folder-trigger:focus-visible {
outline: 3px solid var(--vb-k7f-accent);
outline-offset: -8px;
}
.vb-k7f__folder-tile {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background: var(--vb-k7f-paper);
border: 2px solid var(--vb-k7f-line);
border-radius: 14px;
}
.vb-k7f__folder-icon {
display: block;
width: 26px;
height: 26px;
}
.vb-k7f__folder-question {
font-family: var(--t-headline-font);
font-weight: 700;
font-size: clamp(18px, 2.1vw, 25px);
line-height: 1.26;
letter-spacing: -0.015em;
text-wrap: balance;
}
.vb-k7f__folder-toggle {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-left: auto;
background: var(--vb-k7f-paper);
border: 2px solid var(--vb-k7f-line);
border-radius: 14px;
color: var(--vb-k7f-ink);
transition: background-color .28s ease, border-color .28s ease, color .28s ease;
}
.vb-k7f__folder-chevron {
display: block;
transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}
.vb-k7f__folder--open .vb-k7f__folder-toggle {
background: var(--vb-k7f-accent);
border-color: var(--vb-k7f-accent-dark);
color: #FFFFFF;
}
.vb-k7f__folder--open .vb-k7f__folder-chevron {
transform: rotate(180deg);
}
/* ---------- Ответ ---------- */
.vb-k7f__folder-panel {
height: 0;
overflow: hidden;
transition: height .42s cubic-bezier(.22, .61, .36, 1);
}
.vb-k7f__folder--open .vb-k7f__folder-panel {
height: auto;
}
.vb-k7f__folder-panel-inner {
background: var(--vb-k7f-paper);
border-top: 2px solid var(--vb-k7f-line);
border-radius: 0 0 14px 14px;
padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 34px) clamp(26px, 3.4vw, 38px);
}
.vb-k7f__folder-answer {
margin: 0;
max-width: 68ch;
font-family: var(--t-text-font);
font-size: clamp(16px, 1.55vw, 18.5px);
line-height: 1.66;
color: var(--vb-k7f-ink);
text-wrap: pretty;
}
/* ---------- Кнопка ---------- */
.vb-k7f__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 32px;
margin-top: clamp(44px, 6vw, 68px);
}
.vb-k7f .vb-k7f__btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 19px 30px;
background: var(--vb-k7f-accent);
border: 2px solid var(--vb-k7f-accent-dark);
border-radius: 16px;
box-shadow: 0 6px 0 var(--vb-k7f-accent-dark);
color: #FFFFFF;
text-decoration: none;
transition: transform .18s ease-out, box-shadow .18s ease-out, background-color .22s ease-out;
}
.vb-k7f .vb-k7f__btn:hover {
background: var(--vb-k7f-accent-light);
transform: translateY(3px);
box-shadow: 0 3px 0 var(--vb-k7f-accent-dark);
}
.vb-k7f .vb-k7f__btn:focus-visible {
outline: 3px solid var(--vb-k7f-accent-dark);
outline-offset: 5px;
}
.vb-k7f .vb-k7f__btn:active {
transform: translateY(6px);
box-shadow: 0 0 0 var(--vb-k7f-accent-dark);
}
.vb-k7f .vb-k7f__btn .t-btnflex__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.vb-k7f .vb-k7f__btn .t-btnflex__text {
font-family: var(--t-headline-font);
font-weight: 700;
font-size: clamp(16px, 1.8vw, 20px);
line-height: 1.2;
letter-spacing: -0.01em;
white-space: normal;
}
.vb-k7f__btn-glyph {
display: block;
}
.vb-k7f__note {
flex: 1 1 300px;
margin: 0;
max-width: 46ch;
font-family: var(--t-text-font);
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.55;
color: var(--vb-k7f-ink);
text-wrap: pretty;
}
/* ---------- Адаптив ---------- */
@media (max-width: 960px) {
.vb-k7f__head {
gap: 16px 32px;
margin-bottom: clamp(48px, 8vw, 68px);
}
.vb-k7f__title {
flex: 1 1 100%;
max-width: 18ch;
}
.vb-k7f__intro {
flex: 1 1 100%;
}
}
@media (max-width: 640px) {
.vb-k7f {
padding: 52px 16px;
}
.vb-k7f__list {
gap: 36px;
}
.vb-k7f__folder-tab {
width: 156px;
height: 20px;
border-radius: 8px 8px 0 0;
}
.vb-k7f__folder-trigger {
min-height: 80px;
padding: 18px 16px;
gap: 13px;
}
.vb-k7f__folder-tile {
width: 46px;
height: 46px;
border-radius: 12px;
}
.vb-k7f__folder-icon {
width: 23px;
height: 23px;
}
.vb-k7f__folder-toggle {
width: 44px;
height: 44px;
border-radius: 12px;
}
.vb-k7f__cta {
margin-top: 38px;
gap: 16px;
}
.vb-k7f .vb-k7f__btn {
width: 100%;
justify-content: center;
padding: 18px 20px;
}
}
@media (max-width: 420px) {
.vb-k7f__folder-tab {
width: 150px;
}
.vb-k7f__folder-question {
font-size: 18px;
}
.vb-k7f__folder-trigger {
gap: 11px;
padding: 16px 13px;
}
.vb-k7f__folder-tile {
width: 42px;
height: 42px;
}
.vb-k7f__folder-icon {
width: 21px;
height: 21px;
}
.vb-k7f__folder-toggle {
width: 40px;
height: 40px;
border-radius: 11px;
}
}
@media (prefers-reduced-motion: reduce) {
.vb-k7f .vb-k7f__folder,
.vb-k7f .vb-k7f__folder-panel,
.vb-k7f .vb-k7f__folder-chevron,
.vb-k7f .vb-k7f__folder-toggle,
.vb-k7f .vb-k7f__btn {
transition: none !important;
}
.vb-k7f .vb-k7f__folder:hover {
transform: none;
}
}
@media (hover: hover) {
.vb-k7f .vb-k7f__folder:hover {
transform: translateY(-4px);
box-shadow: 0 16px 30px rgba(36, 48, 71, .17);
}
}
</style>
<div class="vb-k7f__inner">
<div class="vb-k7f__head">
<h2 class="vb-k7f__title" id="vb-k7f-title">Разложили всё по папкам</h2>
<p class="vb-k7f__intro">Здесь собрали самое важное о курсе веб-дизайна с нуля. Открывай папки и находи ответы на свои вопросы</p>
</div>
<div class="vb-k7f__list">
<div class="vb-k7f__folder vb-k7f__folder--yellow vb-k7f__folder--open">
<div class="vb-k7f__folder-tab" aria-hidden="true"></div>
<h3 class="vb-k7f__folder-heading">
<button class="vb-k7f__folder-trigger" type="button" id="vb-k7f-trigger-1" aria-expanded="true" aria-controls="vb-k7f-panel-1">
<span class="vb-k7f__folder-tile" aria-hidden="true">
<img class="vb-k7f__folder-icon" src="https://static.tildacdn.com/lib/icons/tilda/book_cover_read.svg" alt="" width="26" height="26">
</span>
<span class="vb-k7f__folder-question">Что я буду изучать?</span>
<span class="vb-k7f__folder-toggle" aria-hidden="true">
<svg class="vb-k7f__folder-chevron" viewBox="0 0 24 24" width="21" height="21" fill="none" aria-hidden="true">
<path d="M5 9l7 7 7-7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
</h3>
<div class="vb-k7f__folder-panel" id="vb-k7f-panel-1" role="region" aria-labelledby="vb-k7f-trigger-1">
<div class="vb-k7f__folder-panel-inner">
<p class="vb-k7f__folder-answer">На курсе ты познакомишься с основами композиции, научишься подбирать шрифты и цвета, разберёшь принципы построения интерфейсов и создашь свой первый дизайн лендинга в Figma. Все темы связаны между собой и постепенно ведут от основ к полноценному проекту</p>
</div>
</div>
</div>
<div class="vb-k7f__folder vb-k7f__folder--blue">
<div class="vb-k7f__folder-tab" aria-hidden="true"></div>
<h3 class="vb-k7f__folder-heading">
<button class="vb-k7f__folder-trigger" type="button" id="vb-k7f-trigger-2" aria-expanded="false" aria-controls="vb-k7f-panel-2">
<span class="vb-k7f__folder-tile" aria-hidden="true">
<img class="vb-k7f__folder-icon" src="https://static.tildacdn.com/lib/icons/tilda/student_graduate_teacher.svg" alt="" width="26" height="26">
</span>
<span class="vb-k7f__folder-question">Подойдёт ли курс новичкам?</span>
<span class="vb-k7f__folder-toggle" aria-hidden="true">
<svg class="vb-k7f__folder-chevron" viewBox="0 0 24 24" width="21" height="21" fill="none" aria-hidden="true">
<path d="M5 9l7 7 7-7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
</h3>
<div class="vb-k7f__folder-panel" id="vb-k7f-panel-2" role="region" aria-labelledby="vb-k7f-trigger-2">
<div class="vb-k7f__folder-panel-inner">
<p class="vb-k7f__folder-answer">Да, курс рассчитан на начинающих. Предварительный опыт в дизайне и программировании не требуется. Материал объясняется последовательно, а практические задания помогают закрепить каждую тему</p>
</div>
</div>
</div>
<div class="vb-k7f__folder vb-k7f__folder--lilac">
<div class="vb-k7f__folder-tab" aria-hidden="true"></div>
<h3 class="vb-k7f__folder-heading">
<button class="vb-k7f__folder-trigger" type="button" id="vb-k7f-trigger-3" aria-expanded="false" aria-controls="vb-k7f-panel-3">
<span class="vb-k7f__folder-tile" aria-hidden="true">
<img class="vb-k7f__folder-icon" src="https://static.tildacdn.com/lib/icons/tilda/watch_clock_time.svg" alt="" width="26" height="26">
</span>
<span class="vb-k7f__folder-question">Сколько длится обучение?</span>
<span class="vb-k7f__folder-toggle" aria-hidden="true">
<svg class="vb-k7f__folder-chevron" viewBox="0 0 24 24" width="21" height="21" fill="none" aria-hidden="true">
<path d="M5 9l7 7 7-7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
</h3>
<div class="vb-k7f__folder-panel" id="vb-k7f-panel-3" role="region" aria-labelledby="vb-k7f-trigger-3">
<div class="vb-k7f__folder-panel-inner">
<p class="vb-k7f__folder-answer">Продолжительность курса — 8 недель. Учебная программа разделена на последовательные темы с практическими заданиями. Можно изучать материалы в удобное время и возвращаться к пройденным урокам</p>
</div>
</div>
</div>
<div class="vb-k7f__folder vb-k7f__folder--yellow">
<div class="vb-k7f__folder-tab" aria-hidden="true"></div>
<h3 class="vb-k7f__folder-heading">
<button class="vb-k7f__folder-trigger" type="button" id="vb-k7f-trigger-4" aria-expanded="false" aria-controls="vb-k7f-panel-4">
<span class="vb-k7f__folder-tile" aria-hidden="true">
<img class="vb-k7f__folder-icon" src="https://static.tildacdn.com/lib/icons/tilda/app_application_mobile_code_tag.svg" alt="" width="26" height="26">
</span>
<span class="vb-k7f__folder-question">Какие программы понадобятся?</span>
<span class="vb-k7f__folder-toggle" aria-hidden="true">
<svg class="vb-k7f__folder-chevron" viewBox="0 0 24 24" width="21" height="21" fill="none" aria-hidden="true">
<path d="M5 9l7 7 7-7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
</h3>
<div class="vb-k7f__folder-panel" id="vb-k7f-panel-4" role="region" aria-labelledby="vb-k7f-trigger-4">
<div class="vb-k7f__folder-panel-inner">
<p class="vb-k7f__folder-answer">Основной инструмент курса — Figma. Для начала подойдёт бесплатный аккаунт и компьютер с современным браузером. Дополнительные платные программы для выполнения основных заданий не обязательны</p>
</div>
</div>
</div>
<div class="vb-k7f__folder vb-k7f__folder--blue">
<div class="vb-k7f__folder-tab" aria-hidden="true"></div>
<h3 class="vb-k7f__folder-heading">
<button class="vb-k7f__folder-trigger" type="button" id="vb-k7f-trigger-5" aria-expanded="false" aria-controls="vb-k7f-panel-5">
<span class="vb-k7f__folder-tile" aria-hidden="true">
<img class="vb-k7f__folder-icon" src="https://static.tildacdn.com/lib/icons/tilda/smile_mood_emotion.svg" alt="" width="26" height="26">
</span>
<span class="vb-k7f__folder-question">Будет ли обратная связь?</span>
<span class="vb-k7f__folder-toggle" aria-hidden="true">
<svg class="vb-k7f__folder-chevron" viewBox="0 0 24 24" width="21" height="21" fill="none" aria-hidden="true">
<path d="M5 9l7 7 7-7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
</h3>
<div class="vb-k7f__folder-panel" id="vb-k7f-panel-5" role="region" aria-labelledby="vb-k7f-trigger-5">
<div class="vb-k7f__folder-panel-inner">
<p class="vb-k7f__folder-answer">Да. В рамках обучения предусмотрена обратная связь по практическим заданиям. Ты сможешь увидеть, что уже получается хорошо, и понять, какие детали дизайна стоит доработать</p>
</div>
</div>
</div>
</div>
<div class="vb-k7f__cta">
<a class="t-btnflex t-btnflex_lg vb-k7f__btn" href="#program">
<span class="t-btnflex__icon" aria-hidden="true">
<svg class="vb-k7f__btn-glyph" viewBox="0 0 24 24" width="22" height="22" fill="none" aria-hidden="true">
<path d="M4 12h15M13 6l6 6-6 6" stroke="#FFFFFF" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="t-btnflex__text">Посмотреть программу курса</span>
</a>
<p class="vb-k7f__note">Полная программа курса «Веб-дизайн с нуля»: темы занятий и порядок их прохождения</p>
</div>
</div>
<script>
(function () {
var root = document.getElementById('vb-k7f');
if (!root) return;
var folders = Array.prototype.slice.call(root.querySelectorAll('.vb-k7f__folder'));
var reduce = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
function getPanel(folder) {
return folder.querySelector('.vb-k7f__folder-panel');
}
function getTrigger(folder) {
return folder.querySelector('.vb-k7f__folder-trigger');
}
function clearEndHandler(panel) {
if (panel._vbK7fEnd) {
panel.removeEventListener('transitionend', panel._vbK7fEnd);
panel._vbK7fEnd = null;
}
}
function openFolder(folder) {
var panel = getPanel(folder);
var trigger = getTrigger(folder);
if (!panel || !trigger) return;
clearEndHandler(panel);
folder.classList.add('vb-k7f__folder--open');
trigger.setAttribute('aria-expanded', 'true');
if (reduce) {
panel.style.height = 'auto';
return;
}
panel.style.height = '0px';
void panel.offsetHeight;
panel.style.height = panel.scrollHeight + 'px';
var onEnd = function (event) {
if (event.target !== panel || event.propertyName !== 'height') return;
clearEndHandler(panel);
if (!folder.classList.contains('vb-k7f__folder--open')) return;
panel.style.height = 'auto';
};
panel._vbK7fEnd = onEnd;
panel.addEventListener('transitionend', onEnd);
}
function closeFolder(folder) {
var panel = getPanel(folder);
var trigger = getTrigger(folder);
if (!panel || !trigger) return;
clearEndHandler(panel);
trigger.setAttribute('aria-expanded', 'false');
if (reduce) {
panel.style.height = '0px';
folder.classList.remove('vb-k7f__folder--open');
return;
}
panel.style.height = panel.scrollHeight + 'px';
void panel.offsetHeight;
folder.classList.remove('vb-k7f__folder--open');
panel.style.height = '0px';
}
folders.forEach(function (folder) {
var trigger = getTrigger(folder);
if (!trigger) return;
trigger.addEventListener('click', function () {
var isOpen = trigger.getAttribute('aria-expanded') === 'true';
folders.forEach(function (other) {
if (other !== folder && other.classList.contains('vb-k7f__folder--open')) {
closeFolder(other);
}
});
if (isOpen) {
closeFolder(folder);
} else {
openFolder(folder);
}
});
});
})();
</script>
</section>
<style>
.vb-k7f,
.vb-k7f * { box-sizing: border-box; }
.vb-k7f input,
.vb-k7f textarea,
.vb-k7f select { font: inherit; }
.vb-k7f {
--vb-k7f-bg: #EAF0F7;
--vb-k7f-ink: #243047;
--vb-k7f-paper: #FFF9E9;
--vb-k7f-accent: #275EB5;
--vb-k7f-accent-dark: #1B4789;
--vb-k7f-accent-light: #3B72C4;
position: relative;
background: var(--vb-k7f-bg);
color: var(--vb-k7f-ink);
font-family: var(--t-text-font);
padding: clamp(56px, 8vw, 112px) 18px;
-webkit-font-smoothing: antialiased;
}
.vb-k7f__inner {
max-width: 1160px;
margin: 0 auto;
}
/* ---------- Шапка блока ---------- */
.vb-k7f__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 18px 56px;
margin-bottom: clamp(52px, 7vw, 84px);
}
.vb-k7f__title {
flex: 1 1 380px;
margin: 0;
max-width: 15ch;
font-family: var(--t-headline-font);
font-weight: 700;
font-size: clamp(31px, 5.1vw, 58px);
line-height: 1.04;
letter-spacing: -0.03em;
text-wrap: balance;
}
.vb-k7f__intro {
flex: 0 1 430px;
margin: 0;
font-family: var(--t-text-font);
font-size: clamp(16px, 1.7vw, 20px);
line-height: 1.58;
max-width: 62ch;
text-wrap: pretty;
}
/* ---------- Стек папок ---------- */
.vb-k7f__list {
display: flex;
flex-direction: column;
gap: 40px;
}
.vb-k7f__folder {
--vb-k7f-fill: #FFD66B;
--vb-k7f-tab: #F4BD43;
--vb-k7f-line: #B17C19;
position: relative;
background: var(--vb-k7f-fill);
border: 2px solid var(--vb-k7f-line);
border-radius: 4px 4px 16px 16px;
transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}
.vb-k7f__folder--blue {
--vb-k7f-fill: #B8D7FF;
--vb-k7f-tab: #83B7F5;
--vb-k7f-line: #4B79B8;
}
.vb-k7f__folder--lilac {
--vb-k7f-fill: #D7C6FF;
--vb-k7f-tab: #B79AEF;
--vb-k7f-line: #8564B7;
}
.vb-k7f__folder-tab {
position: absolute;
left: -2px;
top: -20px;
width: 168px;
height: 20px;
background: var(--vb-k7f-tab);
border: 2px solid var(--vb-k7f-line);
border-bottom: 0;
border-radius: 9px 9px 0 0;
pointer-events: none;
}
.vb-k7f__folder-heading {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.vb-k7f__folder-trigger {
display: flex;
align-items: center;
gap: clamp(14px, 2vw, 22px);
width: 100%;
min-height: 76px;
margin: 0;
padding: 20px 22px;
background: transparent;
border: 0;
border-radius: 3px 3px 0 0;
color: var(--vb-k7f-ink);
font-family: var(--t-headline-font);
text-align: left;
cursor: pointer;
}
.vb-k7f__folder-trigger:focus-visible {
outline: 3px solid var(--vb-k7f-accent);
outline-offset: -8px;
}
.vb-k7f__folder-tile {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background: var(--vb-k7f-paper);
border: 2px solid var(--vb-k7f-line);
border-radius: 14px;
}
.vb-k7f__folder-icon {
display: block;
width: 26px;
height: 26px;
}
.vb-k7f__folder-question {
font-family: var(--t-headline-font);
font-weight: 700;
font-size: clamp(18px, 2.1vw, 25px);
line-height: 1.26;
letter-spacing: -0.015em;
text-wrap: balance;
}
.vb-k7f__folder-toggle {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-left: auto;
background: var(--vb-k7f-paper);
border: 2px solid var(--vb-k7f-line);
border-radius: 14px;
color: var(--vb-k7f-ink);
transition: background-color .28s ease, border-color .28s ease, color .28s ease;
}
.vb-k7f__folder-chevron {
display: block;
transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}
.vb-k7f__folder--open .vb-k7f__folder-toggle {
background: var(--vb-k7f-accent);
border-color: var(--vb-k7f-accent-dark);
color: #FFFFFF;
}
.vb-k7f__folder--open .vb-k7f__folder-chevron {
transform: rotate(180deg);
}
/* ---------- Ответ ---------- */
.vb-k7f__folder-panel {
height: 0;
overflow: hidden;
transition: height .42s cubic-bezier(.22, .61, .36, 1);
}
.vb-k7f__folder--open .vb-k7f__folder-panel {
height: auto;
}
.vb-k7f__folder-panel-inner {
background: var(--vb-k7f-paper);
border-top: 2px solid var(--vb-k7f-line);
border-radius: 0 0 14px 14px;
padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 34px) clamp(26px, 3.4vw, 38px);
}
.vb-k7f__folder-answer {
margin: 0;
max-width: 68ch;
font-family: var(--t-text-font);
font-size: clamp(16px, 1.55vw, 18.5px);
line-height: 1.66;
color: var(--vb-k7f-ink);
text-wrap: pretty;
}
/* ---------- Кнопка ---------- */
.vb-k7f__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 32px;
margin-top: clamp(44px, 6vw, 68px);
}
.vb-k7f .vb-k7f__btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 19px 30px;
background: var(--vb-k7f-accent);
border: 2px solid var(--vb-k7f-accent-dark);
border-radius: 16px;
box-shadow: 0 6px 0 var(--vb-k7f-accent-dark);
color: #FFFFFF;
text-decoration: none;
transition: transform .18s ease-out, box-shadow .18s ease-out, background-color .22s ease-out;
}
.vb-k7f .vb-k7f__btn:hover {
background: var(--vb-k7f-accent-light);
transform: translateY(3px);
box-shadow: 0 3px 0 var(--vb-k7f-accent-dark);
}
.vb-k7f .vb-k7f__btn:focus-visible {
outline: 3px solid var(--vb-k7f-accent-dark);
outline-offset: 5px;
}
.vb-k7f .vb-k7f__btn:active {
transform: translateY(6px);
box-shadow: 0 0 0 var(--vb-k7f-accent-dark);
}
.vb-k7f .vb-k7f__btn .t-btnflex__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.vb-k7f .vb-k7f__btn .t-btnflex__text {
font-family: var(--t-headline-font);
font-weight: 700;
font-size: clamp(16px, 1.8vw, 20px);
line-height: 1.2;
letter-spacing: -0.01em;
white-space: normal;
}
.vb-k7f__btn-glyph {
display: block;
}
.vb-k7f__note {
flex: 1 1 300px;
margin: 0;
max-width: 46ch;
font-family: var(--t-text-font);
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.55;
color: var(--vb-k7f-ink);
text-wrap: pretty;
}
/* ---------- Адаптив ---------- */
@media (max-width: 960px) {
.vb-k7f__head {
gap: 16px 32px;
margin-bottom: clamp(48px, 8vw, 68px);
}
.vb-k7f__title {
flex: 1 1 100%;
max-width: 18ch;
}
.vb-k7f__intro {
flex: 1 1 100%;
}
}
@media (max-width: 640px) {
.vb-k7f {
padding: 52px 16px;
}
.vb-k7f__list {
gap: 36px;
}
.vb-k7f__folder-tab {
width: 156px;
height: 20px;
border-radius: 8px 8px 0 0;
}
.vb-k7f__folder-trigger {
min-height: 80px;
padding: 18px 16px;
gap: 13px;
}
.vb-k7f__folder-tile {
width: 46px;
height: 46px;
border-radius: 12px;
}
.vb-k7f__folder-icon {
width: 23px;
height: 23px;
}
.vb-k7f__folder-toggle {
width: 44px;
height: 44px;
border-radius: 12px;
}
.vb-k7f__cta {
margin-top: 38px;
gap: 16px;
}
.vb-k7f .vb-k7f__btn {
width: 100%;
justify-content: center;
padding: 18px 20px;
}
}
@media (max-width: 420px) {
.vb-k7f__folder-tab {
width: 150px;
}
.vb-k7f__folder-question {
font-size: 18px;
}
.vb-k7f__folder-trigger {
gap: 11px;
padding: 16px 13px;
}
.vb-k7f__folder-tile {
width: 42px;
height: 42px;
}
.vb-k7f__folder-icon {
width: 21px;
height: 21px;
}
.vb-k7f__folder-toggle {
width: 40px;
height: 40px;
border-radius: 11px;
}
}
@media (prefers-reduced-motion: reduce) {
.vb-k7f .vb-k7f__folder,
.vb-k7f .vb-k7f__folder-panel,
.vb-k7f .vb-k7f__folder-chevron,
.vb-k7f .vb-k7f__folder-toggle,
.vb-k7f .vb-k7f__btn {
transition: none !important;
}
.vb-k7f .vb-k7f__folder:hover {
transform: none;
}
}
@media (hover: hover) {
.vb-k7f .vb-k7f__folder:hover {
transform: translateY(-4px);
box-shadow: 0 16px 30px rgba(36, 48, 71, .17);
}
}
</style>
<div class="vb-k7f__inner">
<div class="vb-k7f__head">
<h2 class="vb-k7f__title" id="vb-k7f-title">Разложили всё по папкам</h2>
<p class="vb-k7f__intro">Здесь собрали самое важное о курсе веб-дизайна с нуля. Открывай папки и находи ответы на свои вопросы</p>
</div>
<div class="vb-k7f__list">
<div class="vb-k7f__folder vb-k7f__folder--yellow vb-k7f__folder--open">
<div class="vb-k7f__folder-tab" aria-hidden="true"></div>
<h3 class="vb-k7f__folder-heading">
<button class="vb-k7f__folder-trigger" type="button" id="vb-k7f-trigger-1" aria-expanded="true" aria-controls="vb-k7f-panel-1">
<span class="vb-k7f__folder-tile" aria-hidden="true">
<img class="vb-k7f__folder-icon" src="https://static.tildacdn.com/lib/icons/tilda/book_cover_read.svg" alt="" width="26" height="26">
</span>
<span class="vb-k7f__folder-question">Что я буду изучать?</span>
<span class="vb-k7f__folder-toggle" aria-hidden="true">
<svg class="vb-k7f__folder-chevron" viewBox="0 0 24 24" width="21" height="21" fill="none" aria-hidden="true">
<path d="M5 9l7 7 7-7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
</h3>
<div class="vb-k7f__folder-panel" id="vb-k7f-panel-1" role="region" aria-labelledby="vb-k7f-trigger-1">
<div class="vb-k7f__folder-panel-inner">
<p class="vb-k7f__folder-answer">На курсе ты познакомишься с основами композиции, научишься подбирать шрифты и цвета, разберёшь принципы построения интерфейсов и создашь свой первый дизайн лендинга в Figma. Все темы связаны между собой и постепенно ведут от основ к полноценному проекту</p>
</div>
</div>
</div>
<div class="vb-k7f__folder vb-k7f__folder--blue">
<div class="vb-k7f__folder-tab" aria-hidden="true"></div>
<h3 class="vb-k7f__folder-heading">
<button class="vb-k7f__folder-trigger" type="button" id="vb-k7f-trigger-2" aria-expanded="false" aria-controls="vb-k7f-panel-2">
<span class="vb-k7f__folder-tile" aria-hidden="true">
<img class="vb-k7f__folder-icon" src="https://static.tildacdn.com/lib/icons/tilda/student_graduate_teacher.svg" alt="" width="26" height="26">
</span>
<span class="vb-k7f__folder-question">Подойдёт ли курс новичкам?</span>
<span class="vb-k7f__folder-toggle" aria-hidden="true">
<svg class="vb-k7f__folder-chevron" viewBox="0 0 24 24" width="21" height="21" fill="none" aria-hidden="true">
<path d="M5 9l7 7 7-7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
</h3>
<div class="vb-k7f__folder-panel" id="vb-k7f-panel-2" role="region" aria-labelledby="vb-k7f-trigger-2">
<div class="vb-k7f__folder-panel-inner">
<p class="vb-k7f__folder-answer">Да, курс рассчитан на начинающих. Предварительный опыт в дизайне и программировании не требуется. Материал объясняется последовательно, а практические задания помогают закрепить каждую тему</p>
</div>
</div>
</div>
<div class="vb-k7f__folder vb-k7f__folder--lilac">
<div class="vb-k7f__folder-tab" aria-hidden="true"></div>
<h3 class="vb-k7f__folder-heading">
<button class="vb-k7f__folder-trigger" type="button" id="vb-k7f-trigger-3" aria-expanded="false" aria-controls="vb-k7f-panel-3">
<span class="vb-k7f__folder-tile" aria-hidden="true">
<img class="vb-k7f__folder-icon" src="https://static.tildacdn.com/lib/icons/tilda/watch_clock_time.svg" alt="" width="26" height="26">
</span>
<span class="vb-k7f__folder-question">Сколько длится обучение?</span>
<span class="vb-k7f__folder-toggle" aria-hidden="true">
<svg class="vb-k7f__folder-chevron" viewBox="0 0 24 24" width="21" height="21" fill="none" aria-hidden="true">
<path d="M5 9l7 7 7-7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
</h3>
<div class="vb-k7f__folder-panel" id="vb-k7f-panel-3" role="region" aria-labelledby="vb-k7f-trigger-3">
<div class="vb-k7f__folder-panel-inner">
<p class="vb-k7f__folder-answer">Продолжительность курса — 8 недель. Учебная программа разделена на последовательные темы с практическими заданиями. Можно изучать материалы в удобное время и возвращаться к пройденным урокам</p>
</div>
</div>
</div>
<div class="vb-k7f__folder vb-k7f__folder--yellow">
<div class="vb-k7f__folder-tab" aria-hidden="true"></div>
<h3 class="vb-k7f__folder-heading">
<button class="vb-k7f__folder-trigger" type="button" id="vb-k7f-trigger-4" aria-expanded="false" aria-controls="vb-k7f-panel-4">
<span class="vb-k7f__folder-tile" aria-hidden="true">
<img class="vb-k7f__folder-icon" src="https://static.tildacdn.com/lib/icons/tilda/app_application_mobile_code_tag.svg" alt="" width="26" height="26">
</span>
<span class="vb-k7f__folder-question">Какие программы понадобятся?</span>
<span class="vb-k7f__folder-toggle" aria-hidden="true">
<svg class="vb-k7f__folder-chevron" viewBox="0 0 24 24" width="21" height="21" fill="none" aria-hidden="true">
<path d="M5 9l7 7 7-7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
</h3>
<div class="vb-k7f__folder-panel" id="vb-k7f-panel-4" role="region" aria-labelledby="vb-k7f-trigger-4">
<div class="vb-k7f__folder-panel-inner">
<p class="vb-k7f__folder-answer">Основной инструмент курса — Figma. Для начала подойдёт бесплатный аккаунт и компьютер с современным браузером. Дополнительные платные программы для выполнения основных заданий не обязательны</p>
</div>
</div>
</div>
<div class="vb-k7f__folder vb-k7f__folder--blue">
<div class="vb-k7f__folder-tab" aria-hidden="true"></div>
<h3 class="vb-k7f__folder-heading">
<button class="vb-k7f__folder-trigger" type="button" id="vb-k7f-trigger-5" aria-expanded="false" aria-controls="vb-k7f-panel-5">
<span class="vb-k7f__folder-tile" aria-hidden="true">
<img class="vb-k7f__folder-icon" src="https://static.tildacdn.com/lib/icons/tilda/smile_mood_emotion.svg" alt="" width="26" height="26">
</span>
<span class="vb-k7f__folder-question">Будет ли обратная связь?</span>
<span class="vb-k7f__folder-toggle" aria-hidden="true">
<svg class="vb-k7f__folder-chevron" viewBox="0 0 24 24" width="21" height="21" fill="none" aria-hidden="true">
<path d="M5 9l7 7 7-7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
</h3>
<div class="vb-k7f__folder-panel" id="vb-k7f-panel-5" role="region" aria-labelledby="vb-k7f-trigger-5">
<div class="vb-k7f__folder-panel-inner">
<p class="vb-k7f__folder-answer">Да. В рамках обучения предусмотрена обратная связь по практическим заданиям. Ты сможешь увидеть, что уже получается хорошо, и понять, какие детали дизайна стоит доработать</p>
</div>
</div>
</div>
</div>
<div class="vb-k7f__cta">
<a class="t-btnflex t-btnflex_lg vb-k7f__btn" href="#program">
<span class="t-btnflex__icon" aria-hidden="true">
<svg class="vb-k7f__btn-glyph" viewBox="0 0 24 24" width="22" height="22" fill="none" aria-hidden="true">
<path d="M4 12h15M13 6l6 6-6 6" stroke="#FFFFFF" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="t-btnflex__text">Посмотреть программу курса</span>
</a>
<p class="vb-k7f__note">Полная программа курса «Веб-дизайн с нуля»: темы занятий и порядок их прохождения</p>
</div>
</div>
<script>
(function () {
var root = document.getElementById('vb-k7f');
if (!root) return;
var folders = Array.prototype.slice.call(root.querySelectorAll('.vb-k7f__folder'));
var reduce = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
function getPanel(folder) {
return folder.querySelector('.vb-k7f__folder-panel');
}
function getTrigger(folder) {
return folder.querySelector('.vb-k7f__folder-trigger');
}
function clearEndHandler(panel) {
if (panel._vbK7fEnd) {
panel.removeEventListener('transitionend', panel._vbK7fEnd);
panel._vbK7fEnd = null;
}
}
function openFolder(folder) {
var panel = getPanel(folder);
var trigger = getTrigger(folder);
if (!panel || !trigger) return;
clearEndHandler(panel);
folder.classList.add('vb-k7f__folder--open');
trigger.setAttribute('aria-expanded', 'true');
if (reduce) {
panel.style.height = 'auto';
return;
}
panel.style.height = '0px';
void panel.offsetHeight;
panel.style.height = panel.scrollHeight + 'px';
var onEnd = function (event) {
if (event.target !== panel || event.propertyName !== 'height') return;
clearEndHandler(panel);
if (!folder.classList.contains('vb-k7f__folder--open')) return;
panel.style.height = 'auto';
};
panel._vbK7fEnd = onEnd;
panel.addEventListener('transitionend', onEnd);
}
function closeFolder(folder) {
var panel = getPanel(folder);
var trigger = getTrigger(folder);
if (!panel || !trigger) return;
clearEndHandler(panel);
trigger.setAttribute('aria-expanded', 'false');
if (reduce) {
panel.style.height = '0px';
folder.classList.remove('vb-k7f__folder--open');
return;
}
panel.style.height = panel.scrollHeight + 'px';
void panel.offsetHeight;
folder.classList.remove('vb-k7f__folder--open');
panel.style.height = '0px';
}
folders.forEach(function (folder) {
var trigger = getTrigger(folder);
if (!trigger) return;
trigger.addEventListener('click', function () {
var isOpen = trigger.getAttribute('aria-expanded') === 'true';
folders.forEach(function (other) {
if (other !== folder && other.classList.contains('vb-k7f__folder--open')) {
closeFolder(other);
}
});
if (isOpen) {
closeFolder(folder);
} else {
openFolder(folder);
}
});
});
})();
</script>
</section>
Что выбрать, промпт или код?
Копируйте промпт, если хотите получить похожий результат, но ввести информацию о своём бизнесе и задать свои требования. Например, изменить кнопки, тексты, цвета, фотографии или другие элементы.
Копируйте код, если хотите получить точно такой же блок. Чтобы его изменить, придётся отредактировать html-код.
