Фриланс-проєкти

Фриланс-проєкти

Верстка бібліотеки автономних блоків для динамічних сайтів (Header, H1, Body, Footer)

Name: Верстка бібліотеки автономних блоків для динамічних сайтів (Header, H1, Body, Footer)
Price: 6000 UAH
Availability: InStock

HTML та CSS верстання — неправильно зазначені категорії?

6000 UAH

Відгук фрилансера про співпрацю з Magic Traffic

Верстка бібліотеки автономних блоків для динамічних сайтів (Header, H1, Body, Footer)

6000 UAH

Дякую за роботу) замовника рекомендую)

5.0

Євгеній Гончаренко

Зустрічний відгук

13 листопада 2025

Проєкт перекладено автоматично. Увійдіть або зареєструйтесь, щоб побачити оригінал

Мета

Сверстати бібліотеку автономних блоків для генерації динамічних сайтів. CMS буде автоматично збирати сторінки, вибираючи випадкові різні блоки (header, body, footer тощо).

Блоки повинні бути незалежними і легко комбінуватися один з одним в будь-якому порядку.

Оплата

За проект або ставка за 1 годину.

Склад блоків

Header – 5 варіантів
H1-блоки – 6 варіантів
Body-блоки – 11 варіантів
Footer – 12 варіантів

Список і приклади блоків дивитися у файлі:
Google Sheets – макети блоків

Загальні вимоги

Єдиний CSS-файл для всіх блоків
Всі стилі повинні зберігатися в одному CSS-файлі.
Один клас на елемент
На кожному HTML-елементі допускається тільки 1 клас.
Автономність блоків
- Блоки не повинні залежати один від одного за стилями.
- Кожен блок має унікальний префікс у назвах класів.
- Верстка не повинна ламатися при будь-якому поєднанні блоків.
Відступи між блоками
- Передбачити вертикальні відступи (margin/padding), щоб блоки добре виглядали при будь-яких комбінаціях.
- Бажано використовувати padding всередині блоків, щоб контент не прилипав до країв.

Система змінних для кольорів
Всі кольори і фони повинні призначатися через CSS custom properties (змінні).

Змінні підключаються через :root { ... } з використанням констант:

:root {
  --header-bg: var(--{{ synonyms.header }});
  --header-btn-login-bg: var(--{{ synonyms['header__buttons-login'] }});
  --header-btn-login-text: var(--{{ synonyms['header__buttons-login'] }}_text);
  --header-btn-signup-bg: var(--{{ synonyms['header__buttons-signup'] }});
  --header-btn-signup-text: var(--{{ synonyms['header__buttons-signup'] }}_text);

  --body-bg: var(--{{ synonyms['wrapper'] }});
  --body-text: var(--{{ synonyms['header__text'] }});
  --body-btn-bg: var(--{{ synonyms['slot__button'] }});
  --body-btn-text: var(--{{ synonyms['slot__text'] }});
  --h1-bg-top: var(--{{ synonyms['block-h1__top'] }});
  --h1-bg-main: var(--{{ synonyms['block-h1__h1'] }});
  --slot-bg: var(--{{ synonyms['block-slot-with-group-row__slots-wrap-local'] }});

  --footer-bg: var(--{{ synonyms['footer'] }});
  --footer-color: var(--{{ synonyms['footer__color'] }});
}

Всередині блоків використовувати тільки змінні, а не жорстко задані кольори.

Стандарти верстки

HTML5, семантична розмітка
Mobile-first, адаптивність (flex/grid)
Мінімум залежностей (жодних зовнішніх бібліотек).
Зображення – через <img> або <picture>, іконки – через SVG.
Шрифти і розміри – відносні (rem, %).
Всі блоки повинні коректно виглядати при ширинах 320px – 1920px.

Технічні деталі блоків

Header (5 варіантів)

Склад: логотип, меню, кнопки (Login/Signup), можливо пошукова стрічка.
Фон – через --header-bg.
Кнопки – через --header-btn-login-bg, --header-btn-signup-bg.

H1-блоки (6 варіантів)

Склад: заголовок H1, підзаголовок/опис, фон/градієнт.
Використовувати --h1-bg-top, --h1-bg-main для стилізації.

Body-блоки (11 варіантів)

Склад: картки, текстові секції, галереї, CTA-блоки, блоки з кнопками.
Фон – --body-bg, текст – --body-text.
Кнопки – --body-btn-bg, --body-btn-text.

Footer (12 варіантів)

Склад: навігація, копірайт, соцмережі, швидкі посилання.
Фон – --footer-bg, текст – --footer-color.

Перевірка якості

Кожен блок тестується окремо (standalone).
Перевірка комбінацій блоків (випадковий порядок) – щоб ніде не було "злипання" або візуальних багів.
Тест на адаптивність (смартфон, планшет, десктоп). Пріоритет телефон.

Ставки 9

Christina Polishuk

1 0

Проєкти -
Оцінка -
Рейтинг 216

Бюджет: 10000 UAH Термін: 4 дні

Добрий день

Дякую за детальний опис проекту.
У мене більше 5 років досвіду у фронтенд-розробці. Працюю як в компанії, так і на фрілансі.

Мій досвід:
- Розробка адаптивних сайтів та користувацьких інтерфейсів з HTML, Smarty, CSS/SCSS/SASS/LESS, JavaScript/jQuery, Vue.js.
- Оптимізація продуктивності сайтів та покращення UX.
- Створення та доопрацювання окремих блоків, сторінок та компонентів, інтеграція з API.
- Досвід роботи з Laravel, Docker, React, Next.js, а також Git для командної розробки.
- Кросбраузерне та кросплатформене тестування (desktop, tablet, mobile).

Ваші вимоги (єдиний CSS, автономні блоки, використання custom properties для кольорів, mobile-first адаптивність) відповідають моєму досвіду. Я регулярно створюю нові блоки та компоненти, які повинні працювати в будь-яких комбінаціях і бути легко масштабованими.

Буду рада уточнити деталі

Юрий Никоненко

111 3

Проєкти 111
Оцінка 5.0
Рейтинг 3 619

Бюджет: 12000 UAH Термін: 7 днів

Привіт, Magic Traffic!
Реалізую бібліотеку автономних блоків відповідно до ТЗ.

З повагою, Юрій

Sierafim Ilika

0 0

Проєкти -
Оцінка -
Рейтинг 307

Бюджет: 5000 UAH Термін: 3 дні

Привіт! У мене великий досвід розробки модульних і масштабованих front-end-систем, і ваш проект зі створення бібліотеки автономних блоків для динамічних веб-сайтів ідеально відповідає моїм вимогам. Я спеціалізуюсь на створенні адаптивних семантичних макетів на HTML5 і CSS3, де кожен компонент повністю незалежний, придатний для повторного використання і стилізований за допомогою централізованої системи змінних, що забезпечує єдність і гнучкість. Дотримуючись ваших вимог, я реалізую концепцію «один клас на елемент», унікальні префікси та користувацькі властивості CSS, щоб усі блоки можна було комбінувати в будь-якому порядку без конфліктів. Я також буду застосовувати підхід, орієнтований на мобільні пристрої, проводити тестування в контрольних точках (320–1920 пікселів) і забезпечувати бездоганну адаптивність за допомогою Flexbox/Grid. Усі проекти будуть оптимізовані для продуктивності, доступності та кросбраузерної сумісності, з урахуванням ваших вимог до автономності та зручності підтримки. Завдяки моєму досвіду у створенні налаштовуваних CMS-рішень, я можу створити надійну бібліотеку блоків, яка відповідатиме вашим технічним і дизайнерським очікуванням.

Vladyslav Levadnii

19 0

Проєкти 19
Оцінка 5.0
Рейтинг 4 765

Бюджет: 1111 UAH Термін: 3 дні

Доброго дня! Готовий виконати роботу якісно.
Портфоліо робіт у моєму профілі.
Заздалегідь дякую!

Євгеній Гончаренко

Переможець

10 1

Проєкти 10
Оцінка 4.1
Рейтинг 1 716

Бюджет: 6000 UAH Термін: 7 днів

Доброго дня. Зацікавив ваш замовлення. Досвід роботи у веб-сфері з 2014 року. Пишіть в ЛС для обговорення деталей.

Magic Traffic
Київ, Україна
Magic Traffic

Проєктів 163
Оцінка 5.0
Рейтинг 3 562

Верстка бібліотеки автономних блоків для динамічних сайтів (Header, H1, Body, Footer)

Відгук замовника про співпрацю з Євгенієм Гончаренком

Верстка бібліотеки автономних блоків для динамічних сайтів (Header, H1, Body, Footer)

5.0

Magic Traffic

Відгук фрилансера про співпрацю з Magic Traffic

Верстка бібліотеки автономних блоків для динамічних сайтів (Header, H1, Body, Footer)

5.0

Євгеній Гончаренко

Мета

Оплата

Склад блоків

Загальні вимоги

Стандарти верстки

Технічні деталі блоків

Header (5 варіантів)

H1-блоки (6 варіантів)

Body-блоки (11 варіантів)

Footer (12 варіантів)

Перевірка якості

Christina Polishuk

Юрий Никоненко

Sierafim Ilika

Vladyslav Levadnii

Євгеній Гончаренко

Ставки приховані

Ставки поки відсутні

Актуальні фриланс-проєкти в категорії HTML та CSS верстання

Доробка функціоналу з Опен Cart

Спеціаліст WordPress / Elementor для внесення правок на сайт

CТВОРИТИ СТОРІНКИ-ЛЕНДИНГ НА САЙТІ НА БАЗІ WORDPRESS

Вебсайт WordPress

Змінити структуру головного меню сайту на Shopify, створити декілька нових сторінок (готовий шаблон)