Skip to content

the13den/frontend_2022_healthy-switcher

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Landing-page HEALTHY-SWITCHER

Описание

HEALTHY-SWITCHER это работа номер один в моем портфолио. Основа кода написана на HTML, CSS и Java Script. Для создания структуры HTML применена методология БЭМ. Для построения конструкций блоков были использованы Grid и Flex layout. Применены относительные единицы шрифтов, которые позволяют плохо видящему пользователю укрупнить шрифт. Каждый элемент имеет анимацию при клике и наведении, присутствует анимация при скролле. Резиновый адаптив сайта позволяет ему хорошо выглядеть на каждом пикселе, даже на складных смартфонах с очень узким экраном в 280px (Это на 15% меньше, чем ширина экрана у крохотного Iphone 5). Мобильный вид был создан самостоятельно на основе дизайна PC версии. Присутствует меню бургер на смартфонах. Сайт прошел проверку валидатора W3C. Каждый из параметров сайта в Google Lighthouse находится в зеленой зоне. Каждое изображение выгружено в оптимальном формате, растровые изображения обернуты в конструкцию Picture, которая при поддержке новейшего формата Webp, выводит изображения в нем, если поддержки нет, выведется обычный WEBP. Формат WEBP при меньшем весе позволяет показать изображения такого же качества, как и JPG весяший на 20% больше, это сильно ускоряет загрузку сайта.

Особенности

На сайте есть слайдер, на базе библиотеки Swiper, которую используют крупнейшие компании вроде McDonalds, Xiaomi, Adobe. Создан блок пятизвездочного рейтинга блюд, который готов отправлять информацию об оценке товара пользователем на сервер. В мобильной версии линия хедера с логотипом и кнопкой меню меняет свою прозрачность в зависимости от скролла

Технологии

  • HTML
  • CSS
  • Java Script
  • Flex Layout
  • Grid Layout
  • Сжатие кода
  • БЭМ
  • Rem и Em для шрифтов
  • CSS animations
  • Picture WEBP
  • Woff2 Fonts
  • Слайдер Swiper
  • AOS

Ссылка на сайт https://fazdendev.github.io/healthy-switcher/

About

Landing-page HEALTHY-SWITCHER (Slider, Star rating)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published