Верстка мега-меню в десктоп и моб. версии (срочно)
Верстка
Бюджет: 10000 руб.
задача:
Нужно отверстать мега-меню, далее мы будем ее натягивать на CMS Битрикс (шаблон Аспро). Макеты в Фигма предоставим, скрины из них прикрепили.
Поэтому мы подготовили выгрузку главной страницы сайта с стилями и скриптами, чтоб в процессе верстке вы своими CSS-селекторами строили правила так, чтоб перебить стили сайта.
требования:
Поэтому важно соблюсти следующий подход:
1) удалить старую верстку строки навигации и мобильного меню и полностью заново выстроить HTML-структуру новых элементов
2) соблюдать Scope-ориентированный подход, а именно у внешней обертки вашего блока с навигацией задать уникальный классом-родитель от которого строим CSS-селектор для дочерних элементов, что ограничивает область ваших стилей только внутри блока с навигацией, не влияя на другие части сайта. Пример
HTML:
<section class="my-namespace">
<h1>Новый заголовок</h1>
<button class="my-button">Кнопка</button>
</section>
CSS:
.my-namespace h1 {
font-size: 24px;
color: #333;
}
.my-namespace .my-button {
background-color: #007BFF;
color: #fff;
}
3) верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.)
Желательно, но не обязательно, чтобы дополнительно структурировать CSS при именовании блоков используем методологию БЭМ в стиле "Two Dashes": block-name__elem-name--mod-name--mod-val