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

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

Верстка библиотеки автономных блоков для динамических сайтов (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

Цель

Сверстать библиотеку автономных блоков для генерации динамических сайтов. 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 641

Бюджет: 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 730

Бюджет: 6000 UAH Срок: 7 дней

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

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

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

Верстка библиотеки автономных блоков для динамических сайтов (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 верстка

Редизайн и перезапуск сайта стоматологической клиники Brovchak Family Dental Care

Доработать шаблон WIX

Верстка готового дизайна страницы (WordPress / WooCommerce)

Разработка сайта по дизайну

Расширение админ-панели: добавление SEO-страниц услуг