HTML5 |
CSS3 |
SASS |
VSC |
GIT |
GITHUB |
FIGMA |
|
|
|
|
Чтобы клонировать проект на свое устройство, используйте комманду ниже:
git clone https://github.com/Alesia0401/project-practice-55-1
В проекте активно используются Sass. Корневой файл с подключаемыми модулями находится в папке assets/scss и называется style.scss. Для работы с данным типом файлов используйте библиотеку Dart Sass, которую можно установить через npm. Для live верстки используется следующая команда:
npx sass .\assets\scss\style.scss .\assets\styles\style.min.css --watch
Убедитесь, что библиотека Sass установлена глобально.
- Панель навигации
- Блок заказа товара
- Блок о наших преимуществах
- Блок с эсклюзивными вещами
- Блок с отзывами
- Блок с мобильными приложениями
- Контактная информация.
- В Header элементы позиционированы с помощью flex.
- В блоке Organic применены flex, grid, position.
- Во втором блоке использованы flex, grid, position.Для расположения элементов в контейнере services использовала flex и grid(только для расстояния между кругом и текстом). Для расположения картинок(line, man) применено позиционирование.
- В третьем блоке "explor" позиционирование flex. Блок разреден на 2 основные части: основной контент и описание (текст, ссылка, картинка-оформление).
- Четвертый блок разделен на две секции, в каждой из которых использована flex, grid - верстка. Для расположения картинок применено позиционирование. При наведении на стрелки переключения отзывов - плавное изменение цвета. При наведении на кнопку Download изменение курсора.
- В пятом блоке "footer" использовала flex.
Во всем проекте применена адаптивная верстка под 320px, 1280px, 5000px, что позволит удобно пользоваться сайтом на разных устройствах. Для динамической прогрузки картинок применены различные атрибуты для работы с разными разрешениями.
В случае обнаружения ошибок, предложений и запросов на изменения, связываться с куратором проекта в Slack @Alesia.