Shelter

Описание проекта

Shelter - это проект, в котором вам предстоит сверстать сайт, состоящий из двух страниц, сделать его адаптивным и интерактивным.

Ключевые навыки:

• валидная семантическая адаптивная вёрстка
• легкоподдерживаемый читаемый код
• экспорт стилей и графики из Figma
• использование JavaScript для реализации указанного в задании функционала

Этапы работы над проектом:

Задание состоит из трёх частей:

• shelter. week-1: Фиксированная вёрстка
  • в этой части задания необходимо сверстать страницы main и pets по макету, которые корректно отображаются при ширине окна не менее 1280px.
  • проверяется валидность вёрстки, её совпадение с макетом
• shelter. week-2: Адаптивная вёрстка
  • в этой части задания необходимо добавить адаптивность свёрстанным на первом этапе страницам, до ширины 320px включительно, с удовлетворением условий:
    • на любой ширине вся страница с контентом вмещается по ширине в окно браузера, горизонтальная полоса прокрутки не появляется
    • при ширине 768px и 320px страницы соответствуют макету
  • проверяется валидность верстки, ее совпадение с макетом на соответствующей ширине страницы, адаптивность верстки и отсутствие горизонтальной полосы прокрутки
• shelter. week-3: Добавление функционала
  • в этой части задания используем JavaScript для добавления странице интерактивности:
    • бургер-меню на обеих страницах
    • попап для карточек животных на обеих страницах
    • бесконечный слайдер-карусель на странице main
    • пагинация на странице pets
  • проверяется реализованный функционал

Макет в figma

Технические требования

1. вёрстка валидная, семантическая, соответствующая макету
2. приложение корректно отображается и работает в браузере Google Chrome последней версии
3. запрещается использование CSS-фреймворков (bootstrap)
4. запрещается использование JS-фреймворков (Angular, React, Vue и т.д.)
5. запрещается использование устаревших библиотек (JQuery и т.д.)
6. запрещается использование TypeScript. На stage#1 вы практикуетесь в использовании чистого JavaScript, изучение TS и его использование предстоит на stage#2 текущего курса.
7. допускается использование CSS-препроцессоров (Sass), normalize.css
8. не рекомендуется использовать сброс стилей при помощи reset.css
9. запрещено добавление вёрстки картинкой, когда делается скрин части макета и вставляется в вёрстку. Для вёрстки используйте теги и символы, картинками можно добавлять изображения и иконки, а не элементы вёрстки (кнопки, блоки, секции)