maxtarasevich / adele Goto Github PK

Мой вариант верстки макета Adele https://dribbble.com/shots/2541742-Free-Adele-Product-Landing-Page.
Использовалась сборка gulp https://habr.com/ru/post/484714/
Сайт просмотреть можно здесь https://maxtarasevich.github.io/Adele/
Какие задачи перед собой ставил:
1.Использование при верстке PUG и SCSS.
1.Использование только нативного JS.
Что было реализовано:
1.Верстка, кроссбраузерная, адаптивная, с использование Flex-box, Grid.
2."Липкий" хедер с гамбургер-меню.
3.При скроле страницы хедер получает прозрачность, уменьшается в высоте.
4.При клике на бургер появляется полупрозрачное меню, замораживается скролл страницы.
5.При клике на пункт меню происходит плавный скролл к соответсвующей секции, с учетом высоты "липкого" хедера.
6.При клике на логотип идет скролл на первую секцию.
7.В секции Real Man реализван анимированный, адаптивный слайдер.
8.Секция TESTIMONIALS реализован слайдер с автоматической прокруткой, которая останавливается при наведении курсора на блок с текстом.
Если убрать курсор - идет переход на следующий слайд.
9.Секция Supplement реализованы табы, при клике на список ингредиентв, меняется блок с описанием.