🌳 БРЕЗИЧКА: Пълен визуален архив

Техническа документация на стиловете и структурите

🍃

🦋

Секция: .hero-wrapper

Това е основният начален контейнер с цвят #F5F1E8.

Структура: Основен контейнер (Full-width) + .hero-title + Анимации (.k-fly, .leaf-1, .bg-circle)

Секция: .about-section-wrapper

Контейнер за „За нас“ с цвят #FFFDF5. Използва .about-content-inner за центриране на съдържанието.

Структура: Външен контейнер (Full-width) + Вътрешен ограничител (.about-content-inner)

Мисия (.mission-title)

Примерен текст за мисията на детската градина.

ЕКОЛОГИЯ

13 Градини

Структура: Flexbox контейнер (.mission-grid-container) + Карти със статистика (.stat-card)

Секция: .kinder-full-bleed-container

Контейнер за новини/събития с цвят #F5F1E8. Използва .inner-content-container за подравняване.

Структура: Full-bleed фон + Вътрешен контейнер (.inner-content-container)

🍃

Секция: .section-full-animated

Този клас позволява на листата (leaf-2, leaf-3) да „летят“ свободно в него.

Структура: Анимиран контейнер + Абсолютно позиционирани елементи (.forest-element)

3. Карти и Функционални елементи

📜 Документи ДГ

📊 Бюджет

📂 Други

Карти за дейности (.activity-card):

🎨

Рисуване

Мария Иванова

Класове: .activity-card + .teacher

⚽

Футбол

ФК Лъвчета

Класове: .activity-card + .partner

Цветове за събития (.event-item-v2):

24 МАЙ

Розов етикет (.bg-kid-pink)

01 ЮНИ

Син етикет (.bg-kid-blue)

15 СЕП

Зелен етикет (.bg-kid-green)

20 ОКТ

Оранжев етикет (.bg-kid-orange)

Разчупена галерия (.memory-stack):

Клас: .memory-stack

Секция: Събития (.event-item-v2) – Всички цветове

24 МАЙ

Тържество по случай празника

Клас на етикета: .bg-kid-pink

01 ЮНИ

Ден на детето – Игри на открито

Клас на етикета: .bg-kid-blue

15 СЕП

Откриване на учебната година

Клас на етикета: .bg-kid-green

20 ОКТ

Есенен базар

Клас на етикета: .bg-kid-orange

Техническа бележка: Всеки блок изисква родителски контейнер .event-item-v2. Вътре в него се поставя див с два класа: .event-date-tag-v2 (за формата) и съответния .bg-kid-xxx (за цвета).

1. Дизайнерски заглавия (Typography)

Главна титла на страницата

Клас: .hero-title

* Използва се само за най-горното заглавие в Hero секцията.

Заглавие със зелено листо

Клас: .leaf-title

* Подходящо за нови раздели и еко теми.

Стил „Брезова кора“

Клас: .birch-bark-title

* Модерен стил с дебел ляв кант.

Вълнообразно заглавие

Клас: .forest-wave-title

Заглавие с рамка

Клас: .nature-border-title

Чиста еко линия

Клас: .eco-clean-title

Заглавие за секция Мисия

Клас: .mission-title

2. Декоративни блокове (За Group block)

Еко Хартия (.eco-paper-box)

Този блок имитира рециклирана хартия с фини зелени хоризонтални линии. Перфектен за съобщения и новини.

Горско Гнездо (.forest-nest-box)

Блок с пунктирана зелена рамка и заоблени ъгли. Всичко вътре се центрира автоматично.

Брезово Дърво (.birch-log-card)

Карта с тъмен „корен“ (бордюр) отгоре и зелена основа отдолу. Изглежда професионално и структурирано.

Горски Бриз (.nature-breeze-box)

Полупрозрачен бял фон (0.85 opacity). Използва се върху цветни фонове, за да „диша“ текста.

Дървена Рамка (.wooden-frame-box)

Блок със солиден кафяв дървесен акцент от лявата страна. Подходящ за официални документи или списъци.

Styles CSS demo