Skip to content

Latest commit

 

History

History
788 lines (629 loc) · 88.5 KB

variant-3.md

File metadata and controls

788 lines (629 loc) · 88.5 KB

Вариант #3

Выполнить задание согласно макету автора Vladislav Chernov: Online Zoo
Текст ссылки: https://www.figma.com/file/74wXlorl9mZQP0uhqDg83j/Online-Zoo

Создание макета: неделя #1+2

Выполняется создание всех страниц для ширины экрана 1920px.

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

Максимальный балл: 80

Общие

Все фоновые элементы макета должны растягиваться на всю доступную ширину экрана, если ширина больше 1920px. При этом направляющие должны сохраняться в исходном размере, 1800px. Особенностью этого проекта являются:

  • интересная реализация боковой панели,
  • разнообразие страниц,
  • детализация эффектов.

Для создания вертикальных отступов лучше использовать вертикальные margin на блоках высшего порядка, насколько это возможно. При этом иметь ввиду, что вертикальные margin могут схлопнуться.

Для создание многоколоночных структур, или элементов имеющих относительное горизонтальное расположение, должно быть использовано одно из свойств:

  • display: flex
  • display: grid
  • display: inline-block

Если на макете присутствуют тени (вокруг карточек, отзывов, фишек, под блоками или над ними), делать их точь-в-точь не обязательно, т.к. качество тени оцениваться не будет. Достаточно применить свойство box-shadow, чтобы было визуально похоже.

❗ Кнопки по умолчанию должны быть в состоянии "static". Если в макете указан цвет другого состояния, то все равно следует использовать состояние "static" из панели Components. Состояния "hover" и "active" приведены как пример интерактивности кнопок.

Landing (20 баллов)

  1. Header (<header> содержит только логотип, панель навигации и иконку юзера)
  • Логотип находится слева. Нажатие на логотип работает по принципу нажатия на About, перебрасывает нас на текущую страницу, на First Page. Landing. Более детальное описание логотипа будет в блоке side bar.
  • Интерактивная панель навигации. (About / Map / Zoos / Contact Us / Design)
  • Нажатие на Map перебрасывает нас на Zoos Map.
  • Нажатие на Zoos перебрасывает нас на Zoos Translation с пандой.
  • Нажатие на Contact Us перебрасывает нас на страницу с ошибкой 404.
  • Нажатие на Design перебрасывает нас на оригинальную страницу Figma.
  • Должен быть подсвечен первый элемент About. И он должен перестать быть интерактивным.
  • На странице обязательно должен присутствовать один элемент <h1>. В нем должен быть текст Online Zoo.
  • Хедер, за исключением логотипа, "липким" делать не нужно. Т.е. при скролле он остается на своей позиции.
  1. Side bar (<aside> содержит кнопку "вверх", кнопки соц. сетей)
  • ❗ Фоновый цвет и границы - не прозрачные.
  • Панель слева: При скролле она должна "прилипнуть" к своей позиции, и всегда оставаться там вплоть до футера position: fixed.
  • ❗ Можно сделать любую из интерпретаций:
    -- Логотипа может не быть, он будет только в хедере. Можно оставить сайдбар в виде, как он есть, на 115px от верха окна браузера. А можно сделать так, что сайдбар будет "отрываться", т.е. переходить в состояние sticky на расстоянии 25px от верхней границы окна браузера.
    -- Логотип может присутствовать в сайдбаре и в хедере, тогда он будет дублирован, оставаясь в обоих панелях.
    -- Логотип может быть только в сайдбаре, тогда при скролле он будет покидать позицию хедера.
  • При нажатии кнопки "вверх" может ничего не происходить.
  • Интерактивная панель соцсетей. Нажатия на соцсети могут вести просто на заглавные страницы соответствующих ресурсов.
  1. Блок Watch your favorite animal online
  • Кнопка Choose zoo должна быть интерактивной. Нажатие перебрасывает нас на Zoos Map.
  • Кнопка Watch online должна быть интерактивной. Нажатие перебрасывает нас на Zoos Translation с пандой.
  1. Блок How zoo online works
  • Кнопка Try now должна быть интерактивной. Нажатие перебрасывает нас на Zoos Translation с пандой.
  1. Блок Famous pets
  • Кнопки влево и вправо должны быть интерактивными. При нажатии может ничего не происходить.
  • Карточки животных должны быть интерактивными. Пример анимации, который также можно посмотреть во вкладке Components.
  1. Блок Pay and feed
  • Заголовки, текст, картинки, стрелки - это все разные элементы.
  1. Блок Testimonials
  • Кнопка Leave Feedback должна быть интерактивной. При нажатии может ничего не происходить.
  • Кнопка See more reviews должна быть интерактивной. При нажатии может ничего не происходить.
  • Кнопки влево и вправо должны быть интерактивными. При нажатии может ничего не происходить.
  1. Блок Zoogeography
  • На карте должно быть 4 интерактивных иконки. При наведении должна быть анимация, когда элемент увеличивается и граница меняет цвет. При нажатии может ничего не происходить.
  • По умолчанию выбран Eagle, панель слева показывает описание. Описание может не меняться.
  • Кнопка Watch now перебрасывает нас на Zoos Translation с соответствующим животным. В случае с орлом - на страницу орла.
  1. Footer (<footer> содержит меню, логотипы, кнопки доната и соц. сетей):
  • Интерактивная панель навигации. По умолчанию, элементы не имеют подсветки. Каждая ссылка - это якорь, по нажатию на который нас перебрасывает на нужное место на странице:
    -- Watch online
    -- How it works
    -- Famous pets
    -- Pay & feed
    -- Testimonials
    -- Zoogeography
  • Кнопка Donate for volunteers должна быть интерактивной. При нажатии может ничего не происходить.
  • Нажатие на основной логотип работает по принципу нажатия на About, перебрасывает нас на текущую страницу, на Landing.
  • Остальные Логотипы не интерактивные. Они не должны реагировать на нажатие. Но должен появляться тултип (атрибут title) с соответствующей надписью (Yem Digital, Rolling Scopes School). При этом логотипы и промежуточное изображение могут быть центрированы по вертикали.
  • Интерактивная панель соцсетей. Нажатия на соцсети могут вести просто на заглавные страницы соответствующих ресурсов.
  • ❗ В футере должен быть реализован 3х колоночный макет в рамках направляющих. При этом колонки могут быть равноразмерными. А можно подогнать их под размеры, указанные на макете. Несовпадение горизонтальных отступов не будет считаться ошибкой.

Zoos Map (10 баллов)

  1. Header (<header> содержит только логотип, панель навигации и иконку юзера)
  • Логотип находится слева. Нажатие на логотип работает по принципу нажатия на About, перебрасывает нас на First Page. Landing.
  • Интерактивная панель навигации. (About / Map / Zoos / Contact Us / Design)
  • Нажатие на About перебрасывает нас на Landing.
  • Нажатие на Zoos перебрасывает нас на Zoos Translation с пандой.
  • Нажатие на Contact Us перебрасывает нас на страницу с ошибкой 404.
  • Нажатие на Design перебрасывает нас на оригинальную страницу Figma.
  • Должен быть подсвечен элемент Map. И он должен перестать быть интерактивным.
  • На странице обязательно должен присутствовать один элемент <h1>. В нем должен быть текст Online Zoo.
  • Хедер, за исключением логотипа, "липким" делать не нужно. Т.е. при скролле он остается на своей позиции.
  1. Side bar (<aside> содержит иконку логотипа, кнопки животных и стрелки)
  • Фоновый цвет и границы - не прозрачные.
  • Панель слева: Всегда будет в одной позиции, можно не делать "липкой".
  • Интерактивная панель с животными. Нажатия на животных могут вести просто на заглавные страницы соответствующих ресурсов.
  • Стрелки вверх и вниз должны быть интерактивными. При нажатии может ничего не происходить.
  1. Блок Map
  • Иконки животных должны занимать свою позицию относительно карты.
  • При наведении должна быть анимация, когда элемент увеличивается и граница меняет цвет. При нажатии может ничего не происходить.
  • Карту можно зафиксировать в положении, как на дизайне. Главное, масштаб картинки должен соответствовать такому же, как на дизайне.
  • Не должно быть быть ни вертикального, ни горизонтального скролла.

Zoos Translation (10 x 5 = 40 баллов)

Требования для типовой страницы. Переход осуществляется по ссылкам типа .../zoos/panda или .../zoos/gorilla

  1. Header (<header> содержит только логотип, панель навигации и иконки соц. сетей)
  • Логотип находится слева. Нажатие на логотип работает по принципу нажатия на About, перебрасывает нас на First Page. Landing. Более детальное описание логотипа будет в блоке side bar.
  • Интерактивная панель навигации. (About / Map / Zoos / Contact Us / Design)
  • Нажатие на About перебрасывает нас на Landing.
  • Нажатие на Map перебрасывает нас на Zoos Map.
  • Нажатие на Contact Us перебрасывает нас на страницу с ошибкой 404.
  • Нажатие на Design перебрасывает нас на оригинальную страницу Figma.
  • Должен быть подсвечен элемент Zoos. И он должен перестать быть интерактивным.
  • На странице обязательно должен присутствовать один элемент <h1>. В нем должен быть текст Online Zoo.
  • Хедер, за исключением логотипа, "липким" делать не нужно. Т.е. при скролле он остается на своей позиции.
  1. Side bar (<aside> содержит иконку логотипа, кнопки животных, вопросительный знак и стрелки)
  • Фоновый цвет и границы - не прозрачные.
  • Панель слева: При скролле она должна "прилипнуть" к своей позиции, и всегда оставаться там вплоть до футера position: fixed.
  • ❗ Можно сделать любую из интерпретаций:
    -- Логотипа может не быть, он будет только в хедере. Можно оставить сайдбар в виде, как он есть, на 115px от верха окна браузера. А можно сделать так, что сайдбар будет "отрываться", т.е. переходить в состояние sticky на расстоянии 25px от верхней границы окна браузера.
    -- Логотипа может не быть, он будет только в хедере, но тогда должна быть кнопка "вверх" (как на странице Landing, просто стрелочка), которая может находится на месте логотипа. Нажатие будет поднимать страницу к самому верху.
    -- Логотип может присутствовать в сайдбаре и в хедере, тогда он будет дублирован, оставаясь в обоих панелях.
    -- Логотип может быть только в сайдбаре, тогда при скролле он будет покидать позицию хедера.
  • Интерактивная панель с кнопками животных. Нажатие перебрасывает нас на Zoos Translation с соответствующим животным.
  • При нажатии на "?" может ничего не происходить.
  • Стрелки вверх и вниз должны быть интерактивными. При нажатии может ничего не происходить.
  1. Блок Main cam
  • ❗ Рекомендуется сделать отступ до видео таким, чтобы нижняя граница совпадала с концом боковой панели, при начальном положении экрана, примерно 71px. Если отступ от видео до панели больше, баллы не снимаем.
  • В кнопке Feed the animal вместо animal должно быть название животного.
  • Кнопка Feed the animal должна быть интерактивной. При нажатии может ничего не происходить.
  • Блок видео - это элемент iframe с видео трансляции, его можно добавить на страницу по инструкции.
  1. Блок Other cams
  • Картинки в карусели - это должны быть либо превью с youtube, либо такие же iframe с видео.
  • При наведении на элемент видео, поверх должен появляться текст и затемняться картинка снизу. Такого эффекта можно достичь наложив полностью прозрачный элемент сверху, который не даст нажать видео, и ничего не произойдет. Эта заглушка нужна будет при работе с js.
  • Кнопки со стрелками должны быть интерактивными. При нажатии может ничего не происходить.
  1. Блок Interesting facts
  • Если панели будут закрыты, и не смогут открыться - это будет считаться ошибкой. При этом выпадающие панели с информацией могут быть полностью раскрыты на момент выполнения недели#1-3, это не ошибка.
  • Когда панель раскрыта, то на заголовке появляется "-" (будет везде в случае, если панели просто будут раскрыты). В случае закрытой панели, будет "+".
  • Ссылки в тексте будут перебрасывать нас на соответствующий ресурс.
  1. Блок Pay and feed
  • Заголовки, текст, картинки, стрелки - это все разные элементы.
  1. Footer (<footer> содержит меню, логотипы, кнопки доната и соц. сетей):
  • Интерактивная панель навигации. По умолчанию, элементы не имеют подсветки. Каждая ссылка - это якорь, по нажатию на который нас перебрасывает на нужное место на странице Landing:
    -- Watch online
    -- How it works
    -- Famous pets
    -- Pay & feed
    -- Testimonials
    -- Zoogeography
  • Кнопка Donate for volunteers должна быть интерактивной. При нажатии может ничего не происходить.
  • Нажатие на основной логотип работает по принципу нажатия на About, перебрасывает нас на текущую страницу, на Landing.
  • Остальные Логотипы не интерактивные. Они не должны реагировать на нажатие. Но должен появляться тултип (атрибут title) с соответствующей надписью (Yem Digital, Rolling Scopes School).
  • Интерактивная панель соцсетей. Нажатия на соцсети могут вести просто на заглавные страницы соответствующих ресурсов.
  • В футере должен быть реализован 3х колоночный макет в рамках направляющих. При этом колонки могут быть равноразмерными. А можно подогнать их под размеры, указанные на макете. Несовпадение горизонтальных отступов не будет считаться ошибкой.

404 Error (10 баллов)

  1. Header (<header> содержит только логотип, панель навигации и иконки соц. сетей)
  • Логотип находится слева. Нажатие на логотип работает по принципу нажатия на About, перебрасывает нас на текущую страницу, на First Page. Landing.
  • Интерактивная панель навигации. (About / Map / Zoos / Contact Us / Design)
  • Нажатие на About перебрасывает нас на Landing.
  • Нажатие на Map перебрасывает нас на Zoos Map.
  • Нажатие на Zoos перебрасывает нас на Zoos Translation с пандой.
  • Нажатие на Design перебрасывает нас на оригинальную страницу Figma.
  • Должен быть подсвечен элемент Contact Us. И он должен перестать быть интерактивным.
  • На странице обязательно должен присутствовать один элемент <h1>. В нем должен быть текст Online Zoo.
  • Хедер, за исключением логотипа, "липким" делать не нужно. Т.е. при скролле он остается на своей позиции.
  1. Блок Oops
  • Кнопка Back to main page должна быть интерактивной. Нажатие перебрасывает нас на Landing.
  • Подсвеченная ссылка click here to go to support должна иметь интерактивность ссылки, но не должна никуда вести, т.к. мы уже на нужной странице.
  1. Footer (<footer> содержит меню, логотипы, кнопки доната и соц. сетей):
  • ❗ Ошибка в дизайне, пункты должны быть на всех страницах одинаковые.
  • Интерактивная панель навигации. По умолчанию, элементы не имеют подсветки. Каждая ссылка - это якорь, по нажатию на который нас перебрасывает на нужное место на странице Landing:
    -- Watch online
    -- How it works
    -- Famous pets
    -- Pay & feed
    -- Testimonials
    -- Zoogeography
  • Кнопка Donate for volunteers должна быть интерактивной. При нажатии может ничего не происходить.
  • Нажатие на основной логотип работает по принципу нажатия на About, перебрасывает нас на текущую страницу, на Landing.
  • Остальные Логотипы не интерактивные. Они не должны реагировать на нажатие. Но должен появляться тултип (атрибут title) с соответствующей надписью (Yem Digital, Rolling Scopes School).
  • Интерактивная панель соцсетей. Нажатия на соцсети могут вести просто на заглавные страницы соответствующих ресурсов.
  • В футере должен быть реализован 3х колоночный макет в рамках направляющих. При этом колонки могут быть равноразмерными. А можно подогнать их под размеры, указанные на макете. Несовпадение горизонтальных отступов не будет считаться ошибкой.

Рекомендации:

  • Сделать поп-ап Profile согласно шаблону. Выводить на экран на данном этапе не обязательно.

Порядок оценки cross-check: неделя 1&2

Открываем на ширине экрана 1920px. Если экран меньше, можно сделать масштабирование, а можно поставить на странице ширину 1920px и смотреть со включенной горизонтальной плосой прокрутки. Если экран шире, можно поставить область уже или сузить окно.

❗ Балл не может опуститься ниже 0 за страницу. Если не указано в требованиях отдельно, то для всех неповторящихся блоков или элементов в состоянии покоя (без hover) справедливо:

  • Отступы от границ элементов (или наборов элементов) до краев блока, по горизонтали или вертикали, отличаются более чем на 20px: -1 за каждый блок.
  • Отступы внутри набора или сетки между элементами, по горизонтали или вертикали, отличаются более чем на 10px: -1 за каждый блок.
  • Цвет фона блока или элемента сильно отличается от дизайна (например, отличие по каналу более чем на 34. #bbb и #ddd - не ошибка, больше - ошибка): -1 за каждый блок.
  • Отсутствует элемент или картинка, как фоновая, так и картинка элемента: -1 за каждый блок.
  • Шрифт или семейство шрифтов не подключено, или разница в размере шрифта более чем 4px: -1 за каждый блок.

Создана страница Landing: +20.

  1. Нет блока Header: -10.
  • Нет логотипа: -2. Логотип есть, но не работает как ссылка на Landing: -1.
  • Нет панели навигации: -5. Панель навигации есть, но не интерактивная: -1. Рекомендуется использовать <nav>.
  • Нет элемента About, или он не подсвечен: -1.
  • Нет элемента Map, или он не работает как ссылка на Zoos map: -1.
  • Нет элемента Zoos, или он не работает как ссылка на Zoos translation: -1.
  • Нет элемента Contact Us, или он не перебрасывает на страницу с ошибкой 404: -1.
  • Нет элемента Design, или он не работает как ссылка на оригинальную страницу Figma: -1.
  • Нет элемента <h1>: -2. Элемент есть, но в количестве больше одного: -1.
  • Рекомендуется сделать иконку юзера. За ее отсутствие баллы не снимаем.
  • Рекомендуется хедер "липким" не делать.
  1. Нет блока Side bar: -7.
  • Нет хотя бы одной иконки соцсетей: -2 за весь блок.
  • Хотя бы одна из иконок соцсетей не интерактивная: -1 за весь блок.
  • Нет кнопки "вверх": -2. Кнопка есть, но не интерактивная: -1.
  • Панель не ездит вместе со скроллом: -2.
  • Рекомендуется использовать position: fixed. Использование position: sticky также допустимо. Отступы панели от верхнего края зависят от реализации, отступ может быть любым. За разные отступы панели от верха экрана и ее высоту, баллы не снижаем.
  1. Нет блока Watch your favorite animal online: -5.
  • Нет кнопки Choose zoo: -2. Кнопка есть, но она не интерактивная, или не работает как ссылка на Zoos map: -1.
  • Нет кнопки Watch online: -2. Кнопка есть, но она не интерактивная, или не работает как ссылка на Zoos translation: -1.
  1. Нет блока How zoo online works: -3.
  • Нет кнопки Try now: -2. Кнопка есть, но не интерактивная, или не работает как ссылка на Zoos translation: -1.
  1. Нет блока Famous pets: -15.
  • Нет кнопки вправо: -1. Нет кнопки влево: -1. Кнопки есть, но они не интерактивные: -1.
  • Нет карточки животного: -2 за каждую. Карточка есть, но она не интерактивная, или нет анимации, пусть и частичной: -1 за каждую.
  • Рекомендуется сделать анимацию, как указано в примере. Если анимация такого типа присутствует, но скорость или вид анимации отличаются, баллы не снижаем.
  • Рекомендуется сделать так, что нажатие на карточку перебросит нас на страницу с соответствующим животным. Если такого животного нет среди 4х представленных, то может ничего не происходить.

  1. Нет блока Pay and feed: -3.

  2. Нет блока Testimonials: -7.

  • Нет кнопки вправо: -1. Нет кнопки влево: -1. Кнопки есть, но они не интерактивные: -1.
  • Нет кнопки Leave feedback: -2. Кнопка есть, но не интерактивная: -1.
  • Нет кнопки See more reviews: -2. Кнопка есть, но не интерактивная: -1.
  1. Нет блока Zoogeography: -12.
  • Нет иконки животного из перечня: -2 за каждую. Иконка есть, но она не интерактивная, или нет анимации: -1 за каждую.
  • Карточки с описанием животного физически нет: -3. При этом она может быть скрыта, тогда надо будет найти в инспекторе.
  • Если есть карточка с описанием животного, и нет кнопки Watch now: -2. Кнопка есть, но она не интерактивная, или не работает как ссылка на Zoos translation с соответствующим животным. -1.
  • Рекомендуется подсветить первым элементом иконку "Eagle". Если ничего не выбрано, и карточка с описанием животного не отображется, но существует в разметке, баллы не снимаем.
  1. Нет блока Footer: -15.
  • Нет логотипа: -2. Логотип есть, но не работает как ссылка на эту же страницу, не перебрасывает нас на верх страницы: -1.
  • Рекомендуется использовать <nav> для панели навигации.
  • Нет элемента Watch online, или он не работает как якорь: -1.
  • Нет элемента How it works, или он не работает как якорь: -1.
  • Нет элемента Famous pets, или он не работает как якорь: -1.
  • Нет элемента Pay & feed, или он не работает как якорь: -1.
  • Нет элемента Testimonials, или он не работает как якорь: -1.
  • Нет элемента Zoogeography, или он не работает как якорь: -1.
  • Нет кнопки Donate for volunteers: -2. Кнопка есть, но не интерактивная: -1.
  • Нет хотя бы одного из логотипов курсов: -2 за весь набор элементов.
  • Хотя бы один из логотипов не имеет тултипа (хотя бы аттрибута title): -1 за весь набор элементов.
  • Нет хотя бы одной ссылки соцсетей: -2 за весь блок.
  • Хотя бы одна ссылка соцсетей не интерактивная: -1 за весь блок.

Создан Zoos Map +10.

  1. Нет блока Header: -10.
  • Нет логотипа: -2. Логотип есть, но не работает как ссылка на Landing: -1.
  • Нет панели навигации: -5. Панель навигации есть, но не интерактивная: -1. Рекомендуется использовать <nav>.
  • Нет элемента About, или он не работает как ссылка на Landing: -1.
  • Нет элемента Map, или он не подсвечен: -1.
  • Нет элемента Zoos, или он не работает как ссылка на Zoos translation: -1.
  • Нет элемента Contact Us, или он не перебрасывает на страницу с ошибкой 404: -1.
  • Нет элемента Design, или он не работает как ссылка на оригинальную страницу Figma: -1.
  • Нет элемента <h1>: -2. Элемент есть, но в количестве больше одного: -1.
  • Рекомендуется сделать иконку юзера. За ее отсутствие баллы не снимаем.
  • Рекомендуется хедер "липким" не делать.
  1. Нет блока **Side bar **: -5.
  • Панель слева: Всегда будет в одной позиции, можно не делать "липкой".
  • Нет хотя бы одной иконки животного: -2 за весь блок.
  • Хотя бы одна иконка животного не интерактивная: -1 за весь блок.
  • Отсутствует стрелка вверх: -1. Отсутствует стрелка вниз: -1. Стрелки есть, они не интерактивные: -1 за весь блок.
  1. Нет блока Map: -9.
  • Нет фонового изображения карты земли: -2.
  • На карте нет иконки животного из перечисленных: -2 за каждую. При этом некоторые могут быть скрыты за краем экрана, или под панелями сайдбара или хедера, тогда надо будет найти в инспекторе.
  • Иконка животного есть, но она не интерактивная, или нет анимации: -1 за каждую.
  • Рекомендуется выровнять положение иконок и карточки так, как показано на дизайне. При этом высота окна браузера может быть больше 860px, тогда несовпадения могут быть явными, баллы за это не снимаем.

Создана страница Zoos +10. Считаем отдельно для каждой из 4х страниц (Панда, Орел, Горилла, Аллигатор).

  1. Нет блока Header: -10.
  • Нет логотипа: -2. Логотип есть, но не работает как ссылка на Landing: -1.
  • Нет панели навигации: -5. Панель навигации есть, но не интерактивная: -1. Рекомендуется использовать <nav>.
  • Нет элемента About, или он не работает как ссылка на Landing: -1.
  • Нет элемента Map, или он не работает как ссылка на Zoos map: -1.
  • Нет элемента Zoos, или он не подсвечен: -1.
  • Нет элемента Contact Us, или он не перебрасывает на страницу с ошибкой 404: -1.
  • Нет элемента Design, или он не работает как ссылка на оригинальную страницу Figma: -1.
  • Нет элемента <h1>: -2. Элемент есть, но в количестве больше одного: -1.
  • Рекомендуется сделать иконку юзера. За ее отсутствие баллы не снимаем.
  • Рекомендуется хедер "липким" не делать.
  1. Нет блока Side bar: -7.
  • Нет хотя бы одной иконки животного или иконки с вопросом: -2 за весь блок.
  • Хотя бы одна иконка животного или иконка с вопросом не интерактивная: -1 за весь блок.
  • Отсутствует стрелка вверх: -1. Отсутствует стрелка вниз: -1. Стрелки есть, они не интерактивные: -1 за весь блок.
  • Панель не ездит вместе со скроллом: -2.
  • Рекомендуется использовать position: fixed. Использование position: sticky также допустимо. Отступы панели от верхнего края зависят от реализации, отступ может быть любым. За разные отступы панели от верха экрана и ее высоту, баллы не снижаем.
  1. Нет блока Main cam: -5.
  • Рекомендуется сделать отступ до видео таким, чтобы нижняя граница совпадала с концом боковой панели, при начальном положении экрана, примерно 71px. Если отступ от видео до панели больше, баллы не снимаем.
  • Нет кнопки Feed the animal: -2. Кнопка есть, но она не интерактивная, или не меняется название животного вместо "animal": -1.
  • Нет видео: -2. Видео есть, но он не iframe: -1.
  1. Нет блока Other cams: -4.
  • Нет кнопки вправо: -1. Нет кнопки влево: -1. Кнопки есть, но они не интерактивные: -1.
  • При наведении на видео или картинку не появляется текст и затемнение: -1 за весь блок.
  1. Нет блока Interesting facts: -3.
  • Нет ссылок в тексте, как указано на дизайне: -1 за весь блок.

  1. Нет блока Pay and feed: -3.

  2. Нет блока Footer: -10.

  • Нет логотипа: -2. Логотип есть, но не работает как ссылка на Landing: -1.
  • Рекомендуется использовать <nav> для панели навигации.
  • Нет элемента Watch online, или он не работает как якорь на Landing: -1.
  • Нет элемента How it works, или он не работает как якорь на Landing: -1.
  • Нет элемента Famous pets, или он не работает как якорь на Landing: -1.
  • Нет элемента Pay & feed, или он не работает как якорь на Landing: -1.
  • Нет элемента Testimonials, или он не работает как якорь на Landing: -1.
  • Нет элемента Zoogeography, или он не работает как якорь на Landing: -1.
  • Нет кнопки Donate for volunteers: -2. Кнопка есть, но не интерактивная: -1.
  • Нет хотя бы одного из логотипов курсов: -2 за весь набор элементов.
  • Хотя бы один из логотипов не имеет тултипа (хотя бы аттрибута title): -1 за весь набор элементов.
  • Нет хотя бы одной ссылки соцсетей: -2 за весь блок.
  • Хотя бы одна ссылка соцсетей не интерактивная: -1 за весь блок.

Создан 404 Error +10.

  1. Нет блока Header: -10.
  • Нет логотипа: -2. Логотип есть, но не работает как ссылка на Landing: -1.
  • Нет панели навигации: -5. Панель навигации есть, но не интерактивная: -1. Рекомендуется использовать <nav>.
  • Нет элемента About, или он не работает как ссылка на Landing: -1.
  • Нет элемента Map, или он не работает как ссылка на Zoos map: -1.
  • Нет элемента Zoos, или он не работает как ссылка на Zoos translation: -1.
  • Нет элемента Contact Us, или он не подсвечен: -1.
  • Нет элемента Design, или он не работает как ссылка на оригинальную страницу Figma: -1.
  • Нет элемента <h1>: -2. Элемент есть, но в количестве больше одного: -1.
  • Рекомендуется сделать иконку юзера. За ее отсутствие баллы не снимаем.
  • Рекомендуется хедер "липким" не делать.
  1. Нет блока Oops: -10.
  • Нет кнопки Back to main page: -2. Кнопка есть, но не интерактивная: -1.
  • Отсутствует ссылка click here to go to support: -1.
  1. Нет блока Footer: -10.
  • Нет логотипа: -2. Логотип есть, но не работает как ссылка на Landing: -1.
  • Рекомендуется использовать <nav> для панели навигации.
  • Нет элемента Watch online, или он не работает как якорь на Landing: -1.
  • Нет элемента How it works, или он не работает как якорь на Landing: -1.
  • Нет элемента Famous pets, или он не работает как якорь на Landing: -1.
  • Нет элемента Pay & feed, или он не работает как якорь на Landing: -1.
  • Нет элемента Testimonials, или он не работает как якорь на Landing: -1.
  • Нет элемента Zoogeography, или он не работает как якорь на Landing: -1.
  • Нет кнопки Donate for volunteers: -2. Кнопка есть, но не интерактивная: -1.
  • Нет хотя бы одного из логотипов курсов: -2 за весь набор элементов.
  • Хотя бы один из логотипов не имеет тултипа (хотя бы аттрибута title): -1 за весь набор элементов.
  • Нет хотя бы одной ссылки соцсетей: -2 за весь блок.
  • Хотя бы одна ссылка соцсетей не интерактивная: -1 за весь блок.

Адаптивность: неделя #3&4

Сверстанные страницы адаптируюятся под следующую ширину экрана устройства:

  • 1920px (уже будет готово)
  • 1200px
  • 640px
  • 320px

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

Максимальный балл: 40

Общие

Точки перехода могут быть произвольными. Оценивать, насколько правильно и удобно они подобраны, мы не будем. Ниже будут периведены рекомендации для тех, кто еще не выполнял задание:

  1. (max-width: 1920px) или (max-width: 1919px) - Переход между состояниями фиксированной колонки и отзывчивой.

-- Опционально (max-width: 1919px) или (max-width: 1480px) или (max-width: 1440px) или (max-width: 1280px)
2. (max-width: 1200px) - Изменение расположения элементов в блоке pay and feed. Изменение количества, размера и отступов карточек животных в блоке famous pets. Изменение количества отзывов в блоке testimonials. Изменение количества видео в блоке Other cams.

-- Опционально (max-width: 1199px) или (max-width: 980px) или (max-width: 768px)
3. (max-width: 640px) - Замена меню в хедере на бургер меню. Изменение расположения элементов почти во всех блоках. Изменение количества, размера карточек животных. Потеря некоторых элементов. Изменение расположения и количества видео в блоке Other cams, и добавление новых деталей.

-- Опционально (max-width: 639px) или (max-width: 600px)
4. (max-width: 320px) - Изменение количества, отступов между карточками животных. Преобразование блока zoogeography в слайдер. Изменение количество и расположения вспомогательных видео в блоке more live views . Изменение расположения видео в блоке Other cams.

Общие обозначения:

  1. Указанные элементы - это элементы, которые прописаны в требованиях, и для которых указаны штрафные баллы за такой тип ошибки. Помимо этого, если ошибку для элементов, например, хедера или футера, мы уже указывали, а она идентично повторяется для других размеров или страниц, повторно баллы не снимаем.
  2. Отступы между элементами - это вертикальные и горизонтальные отступы между соседними элементами, как правило в одном списке или в одной сетке.
  3. Расположение элементов - это обозначение отступов от элемента до краев экрана или других элементов. Для текста учитываются отступы слева и сверху первой строки (точка начала текста), если текст выровнен по левому краю, или в заголовках. Что касается перехода из положения, когда все элементы выравнены по левому краю, в центральное положение, то тут можно смотреть отступы самого блока, и наличие свойств позиционирования контента по центру.
  4. Вид элементов - это обозначение внешнего вида элементов. Например, если происходит переход от маленькой круглой кнопки к большой квадратной, то акцентируется внимание на соответствии внешнего вида тому, что приведен в дизайне.
  5. Количество элементов - это требование соответствия количества элементов в дизайне. Например, при переходе на меньший размер экрана количество элементов уменьшается с 6 до 4х. Количество элементов больше или меньше 4х, в таком случае, будет считаться ошибкой.

❗ Обратите внимание на эти пункты:

  1. Изменение элементов со сменой концепции лучше сделать через скрытие/отображение элементов. Например, блок, который меняется из карты в слайдер. Будет проще работать с ними в js.
  2. Бургер-меню может быть не активным. Т.е. если при нажатии на него ничего не проиходит, то баллы снимать не будем.
  3. Картинка орла в карточках животных на Landing 1200px немного обрезана. Если картинка в карточке будет обрезанной, или другая - это не будет ошибкой.

Порядок оценки cross-check: неделя 3&4

  1. После выставления определенной ширины, при проверке размеров и отступов между элементами, внутри набора элементов или сетки, по горизонтали или вертикали, считаем отличие более чем на 10px. Можно использовать расширение PixelPerfect.
  2. Проверяем страницы на отзывчивость, каждую, кроме повторяющихся Zoos.

Страница Landing существует +15.

Выставляем Landing на 1200px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:

  • Отступы между элементами меню в хедере: -1.
  • Отступы между иконками соцсетей в сайдбаре: -1.
  • Расположение кнопок, или вид текста в блоке Watch your favorite animal online: -1.
  • Расположение элементов в блоке How Zoo online works: -1.
  • Количество, расположение или отступы между карточками животных в блоке Famous pets: -1.
  • ❗ За качество картинки орла баллы не снимаем!
  • Отступы между кнопками вправо/влево в блоке Famous pets: -1.
  • Расположение элементов в блоке pay and feed: -1. Блок преобразуется в одну колонку.
  • Количество и расположение отзыва в блоке Testimonials: -1.
  • Отступы между кнопками вправо/влево в блоке Testimonials: -1.
  • Расположение кнопки leave feedback в блоке Testimonials: -1.
  • Вид карточки животного в блоке Zoogeography: -1.
  • ❗ При этом, если карточки не видно, нужно найти в инспекторе, и посмотреть, существует ли она. Если не существует: -2.
  • Отступы между логотипами в футере: -1.
  • Отступы между элементами меню в футере: -1.
  • Отступы между именами соцсетей в футере: -1.
  • Расположение кнопки Donate for volunteers в футере: -1.

Выставляем Landing на 640px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:

  • Меню не преобразовано в бургер меню в хедере: -1. Меню может быть неактивным.
  • ❗ Не пропал сайдбар: -1. Его не должно быть видно.
  • ❗ Не пропала кнопка Watch online в блоке Watch your favorite animal online: -1.
  • Расположение элементов в блоке How Zoo online works: -1.
  • Количество или расположение карточкек животных в блоке Famous pets: -1.
  • Отступы между кнопками вправо/влево в блоке Famous pets: -1.
  • Расположение элементов в блоке pay and feed: -1.
  • Расположение элементов в блоке Testimonials: -1.
  • Расположение кнопки leave feedback в блоке Testimonials: -1.
  • Расположение элементов в блоке Zoogeography: -1.
  • Вид карточки животного, если она отображается, в блоке Zoogeography: -1.
  • Отступы между логотипами в футере: -1.
  • Отступы между элементами меню в футере: -1.
  • Отступы между именами соцсетей в футере: -1.
  • Расположение кнопки Donate for volunteers в футере: -1.

Выставляем Landing на 320px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:

  • Нет бургер меню в хедере: -1. Меню может быть неактивным.
  • Расположение элементов в блоке How Zoo online works: -1.
  • Количество, расположение, или отступы между карточками животных в блоке Famous pets: -1.
  • Отступы или располжение кнопок вправо/влево в блоке Famous pets: -1.
  • Расположение элементов в блоке pay and feed: -1.
  • Расположение элементов в блоке Testimonials: -1.
  • Расположение кнопки leave feedback в блоке Testimonials: -1.
  • Расположение элементов в блоке Zoogeography: -1.
  • ❗ Не пропала карта с иконками, или иконки животных: -1. Всего этого не должно быть видно.
  • ❗ Не появилась карусель с иконками животных и стрелками, или нарушены отступы между элементами внутри: -1.
  • Отступы между логотипами в футере: -1.
  • Отступы между элементами меню в футере: -1.
  • Отступы между именами соцсетей в футере: -1.
  • Расположение кнопки Donate for volunteers в футере: -1.

Проверяем на отзывчивость (Responsive).

Пошагово выполняем следующие действия:

  1. Растягиваем страницу на ширину больше 1920px, либо уменьшаем масштаб.
  2. Изменяем ширину страницы до размеров от 1919px до 1201px.
  3. Изменяем ширину страницы до размеров от 1199px до 641px.
  4. Изменяем ширину страницы до размеров от 639px до 321px.
  5. Меньше 320px - не смотрим!
    И оцениваем:
  • В ходе изменения размера появляется горизонтальная полоса прокрутки: -4.
  • Отсуствует хотя бы один элемент (кроме указанных или фоновых элементов, или картинки орла в карточках животных), или есть лишний: -2.
  • Есть элементы (кроме указанных или фоновых элементов, или картинки орла в карточках животных), которые обрезаются или выходят за край экрана, хотя в дизайне они вписаны в границы: -2.
  • В какой-либо момент, элементы (кроме указанных или фоновых элементов, или картинки орла в карточках животных) наезжают на другие элементы, хотя во всех дизайнах между ними есть отступ: -2.

Страница Map существует +10.

Выставляем Map на 1200px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:

  • Отступы между элементами меню в хедере: -1.
  • ❗ Хедер не тянется на всю ширину, или элементы хедера горизонтально не фиксированы, при наличии горизонтальной полосы прокрутки: -1.
  • Полностью отсутствует изображение карты: -1.
  • ❗ На карте исчезают иконки животных, или их позиция на карте сильно смещается, более чем на 30px: -1.

Выставляем Map на 640px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:

  • Меню не преобразовано в бургер меню в хедере: -1.
  • Расположение основного логиотипа относительно края окна браузера: -1.
  • ❗ Не пропал сайдбар: -1. Его не должно быть видно.
  • Полностью отсутствует изображение карты: -1.
  • На карте исчезают иконки животных, или их позиция на карте сильно смещается, более чем на 30px: -1.
  • ❗ Не появилась карусель с иконками животных и стрелками, или нарушены отступы между элементами внутри: -1.

Выставляем Map на 320px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:

  • Нет бургер меню в хедере: -1.
  • Расположение основного логиотипа относительно края окна браузера: -1.
  • Полностью отсутствует изображение карты: -1.
  • На карте исчезают иконки животных, или их позиция на карте сильно смещается, более чем на 30px: -1.
  • Расположение элементов в карусели снизу: -1.

Проверяем на отзывчивость (Responsive).

Пошагово выполняем следующие действия:

  1. Растягиваем страницу на ширину больше 1920px, либо уменьшаем масштаб.
  2. Изменяем ширину страницы до размеров от 1919px до 1201px.
  3. Изменяем ширину страницы до размеров от 1199px до 641px.
  4. Изменяем ширину страницы до размеров от 639px до 321px.
  5. Меньше 320px - не смотрим!
    И оцениваем:
  • В хедере или футере не хватает составных элементов (кроме указанных), или есть лишние: -2.
  • Элементы хедера или футера (кроме указанных) обрезаются или выходят за край экрана, хотя в дизайне они вписаны в границы: -2.
  • В какой-либо момент, элементы хедера или футера (кроме указанных) наезжают на другие элементы, хотя во всех дизайнах между ними есть отступ: -2.

Хотя бы одна из страниц Zoos существует +10. Для проверки берем Zoos: Panda (или любую другую, если панды нет).

Выставляем Zoos на 1200px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:

  • Отступы между элементами меню в хедере: -1.
  • Отступы между иконками животных или стрелками в сайдбаре: -1.
  • Количество или отступы между видео в Other cams: -1.
  • Отступы между кнопками вправо/влево в блоке Other cams: -1.
  • Расположение элементов в блоке Interesting facts: -1.
  • ❗ Спойлеры могут быть полностью раскрыты, возможность открывать / закрывать мы не оцениваем, и если они не работают, баллы не снимаем.
  • Расположение элементов в блоке pay and feed: -1. Блок преобразуется в одну колонку.
  • Отступы между логотипами в футере: -1.
  • Отступы между элементами меню в футере: -1.
  • Отступы между именами соцсетей в футере: -1.
  • Расположение кнопки Donate for volunteers в футере: -1.

Выставляем Zoos на 640px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:

  • Меню не преобразовано в бургер меню в хедере: -1.
  • ❗ Не пропал сайдбар: -1. Его не должно быть видно.
  • ❗ Не появилась карусель с иконками животных и стрелками снизу окна, или нарушены отступы между элементами внутри: -1.
  • ❗ Карусель не фиксирована внизу окна: -1.
  • Расположение элементов в блоке Main cam: -1.
  • Расположение элементов в блоке и самого блока Other cams: -1.
  • ❗ Не пропали кнопки вправо/влево в блоке Other cams: -1.
  • ❗ Не появилась выпадающая панель (спойлер) Other cams в блоке Other cams: -1.
  • ❗ Спойлер может не раскрываться или не реагировать на нажатие, отображая 2 видео. За это баллы не снимаем.
  • Расположение элементов в блоке Interesting facts: -1.
  • Расположение элементов в блоке pay and feed: -1.
  • Отступы между логотипами в футере: -1.
  • Отступы между элементами меню в футере: -1.
  • Отступы между именами соцсетей в футере: -1.
  • Расположение кнопки Donate for volunteers в футере: -1.

Выставляем Zoos на 320px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:

  • Нет бургер меню в хедере: -1.
  • Нет карусели с иконками животных и стрелками снизу окна, или нарушены отступы между элементами внутри: -1.
  • Карусель не фиксирована внизу окна: -1.
  • ❗ Не пропала выпадающая панель (спойлер) Other cams в блоке Other cams: -1.
  • ❗ Не появились кнопки вправо/влево в блоке Other cams: -1.
  • Расположение элементов в блоке Interesting facts: -1.
  • Расположение элементов в блоке pay and feed: -1.
  • Отступы между логотипами в футере: -1.
  • Отступы между элементами меню в футере: -1.
  • Отступы между именами соцсетей в футере: -1.
  • Расположение кнопки Donate for volunteers в футере: -1.

Проверяем на отзывчивость (Responsive).

Пошагово выполняем следующие действия:

  1. Растягиваем страницу на ширину больше 1920px, либо уменьшаем масштаб.
  2. Изменяем ширину страницы до размеров от 1919px до 1201px.
  3. Изменяем ширину страницы до размеров от 1199px до 641px.
  4. Изменяем ширину страницы до размеров от 639px до 321px.
  5. Меньше 320px - не смотрим!
    И оцениваем:
  • В ходе изменения размера появляется горизонтальная полоса прокрутки: -4.
  • Отсуствует хотя бы один элемент (кроме указанных или фоновых элементов), или есть лишний: -2.
  • Есть элементы (кроме указанных или фоновых элементов), которые обрезаются или выходят за край экрана, хотя в дизайне они вписаны в границы: -2.
  • В какой-либо момент, элементы (кроме указанных или фоновых элементов) наезжают на другие элементы, хотя во всех дизайнах между ними есть отступ: -2.

Страница Error 404 существует +5.

Выставляем Error 404 на 1200px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:

  • Отступы между элементами меню в хедере: -1.
  • Расположение элементов и кнопки Back to main page в блоке Oops: -1.
  • Отступы между логотипами в футере: -1.
  • Отступы между элементами меню в футере: -1.
  • Отступы между именами соцсетей в футере: -1.
  • Расположение кнопки Donate for volunteers в футере: -1.

Выставляем Error 404 на 640px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:

  • Меню не преобразовано в бургер меню в хедере: -1.
  • ❗ Хедер не стал фиксированным: -1.
  • Расположение элементов и кнопки Back to main page в блоке Oops: -1.
  • Отступы между логотипами в футере: -1.
  • Отступы между элементами меню в футере: -1.
  • Отступы между именами соцсетей в футере: -1.
  • Расположение кнопки Donate for volunteers в футере: -1.

Выставляем Error 404 на 320px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:

  • Нет бургер меню в хедере: -1.
  • Расположение элементов и кнопки Back to main page в блоке Oops: -1.
  • Отступы между логотипами в футере: -1.
  • Отступы между элементами меню в футере: -1.
  • Отступы между именами соцсетей в футере: -1.
  • Расположение кнопки Donate for volunteers в футере: -1.

Проверяем на отзывчивость (Responsive).

Пошагово выполняем следующие действия:

  1. Растягиваем страницу на ширину больше 1920px, либо уменьшаем масштаб.
  2. Изменяем ширину страницы до размеров от 1919px до 1201px.
  3. Изменяем ширину страницы до размеров от 1199px до 641px.
  4. Изменяем ширину страницы до размеров от 639px до 321px.
  5. Меньше 320px - не смотрим!
    И оцениваем:
  • В ходе изменения размера появляется горизонтальная полоса прокрутки: -4.
  • Отсуствует хотя бы один элемент (кроме указанных или фоновых элементов), или есть лишний: -2.
  • Есть элементы (кроме указанных или фоновых элементов), которые обрезаются или выходят за край экрана, хотя в дизайне они вписаны в границы: -2.
  • В какой-либо момент, элементы (кроме указанных или фоновых элементов) наезжают на другие элементы, хотя во всех дизайнах между ними есть отступ: -2.

Функционалная часть и пользовательские события: неделя #5&6

Добавление JavaScript.

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

Максимальный балл: 80

Общие

  1. Проверять функционал на оценку будем только для единственной ширины в промежутке от 1200px до 1920pх. Значит, это будет та часть, которая задана до перехода media query на дизайн 640px и меньше. Масштабировать браузер не нужно, в случае, если окно браузера удовлетворяет условию ширины.

  2. Проверять и оценивать качество дизайна не будем.

Landing

  1. Карусель в блоке Pets in zoo.
  1. Автоматическая карусель в блоке Testimonials.
  1. Модальное окно (попап) по нажатию на кнопку Leave Feedback.
  • По нажатию кнопки, по центру текущего расположения окна браузера, появляется новое модальное окно, а остальной задний фон становится с полупрозрачным затемнением (или эффектом блюр). Примеры окон приведены в дизайне.
    popup
  • Закрытие попапа будет происходить по нажатию затемненной области вне попапа. На 320px, например, попап будет занимать всю ширину экрана, и закрыть окно можно будет только крестиком.
    Описание попапов
    Простая задача создания модального окна
    Статья на русском о модальных окнах
  • Кнопка Send for moderation должна быть неактивной, пока поля не пройдут валидацию, а именно:
    -- Поле Your name должно быть не пустым,
    -- Поле Your e-mail должно быть не пустым,
    -- Поле Your review должно быть ограничено 280 символами, и быть не пустым.
    -- Чекбокс "Agree..." должен быть отмечен.
  • После нажатия на кнопку Send for moderation попап должен закрыться. Можно добавить alert, или всплывающую подсказку с благодарностью "Thank you for your feedback".
  1. Карточка животного в блоке Zoogeography.
  • При нажатии на иконку животного, карточка слева должна поменяться, картинка и описание внутри.

Map

  1. Карта.
  • Если есть возможность нажать на иконку в области между сайдбаром, хедером и краем экрана снизу и справа, то должна появиться карточка животного так, чтобы не перекрываться с боковой панелью, хедером, и не выходить за край экрана.
  • Если карточка отображается, то нажатие в любую область карты, должна скрыть карточку.
  • Нажатие на другую видимую иконку отобразит новую карточку, а предыдущая скроется.

Zoos

  1. Карусель в блоке other cams.
  • Работоспособность карусели по нажатию на стрелки вправо/влево проверяться не будет, и баллы соответственно сниматься не будут, если карусель не активна.
  • При нажатии на видео (сам элемент, картинку), основное видео должно замениться на новое. А видео из основного блока Main cam появиться в списке в other cams, таким образом не разрушая общее количество элементов.
  • Всего 7 элементов видео в карусели, 8-й элемент в основном блоке Main cam. Они могут быть одинаковыми, могут быть разными. При неактивной карусели будет видно лишь столько, сколько указано на дизайне.
  1. Выпадающая панель (спойлер) в блоке Interesting facts.
  • Если панель скрыта, то по нажатию на строку, панель должна развернуться. И наоборот, по нажатию на строку с раскрытой информацией, она должна скрыться.
    пример панели в разделе Animation without jQuery
  • Также на строках меняются иконки + и -.

🚧🚧🚧🚧

Порядок оценки cross-check: неделя #5&6

  1. Открываем окно брузера на всю ширину экрана. Если оно больше 1920px, то уменьшаем до 1920px, или меньше, но не менее 1200px. Если окно меньше 1200px, то увеличиваем до 1200px, или больше, но не более 1920px.
  2. При проверке, отклоения элементов или блоков от дизайна не учитываем, кроме элементов, которые указанны в ТЗ, и баллы за ошибки дизайна не снимаем.
  3. В разделе Zoos достаточно сделать проверку только одной страницы. Например, страницы панды.
  4. Баллы в рамках одной задачи не могут опуститься ниже 0. Например, в задаче указано +10, а в ходе проеверки вы насчитали -18. Тогда, выходное количество баллов, которое поставим за задачу, будет 0.

Landing

  1. Карусель в блоке Pets in zoo сделана и реагирует на нажатие кнопок вправо/влево +15. Баллы снимаем, если нарушены следующие пункты:
  • С момента загрузки, нажимаем несколько раз кнопку "влево", хотя бы 5 раз, смотрим чтобы карточки (все, или одна колонка) перелистывались постоянно. Если появляется граничное условие, и кнопка исчезает или перестает работать (карточки по нажатию преестают перелистываться). -5.
  • С момента загрузки, нажимаем несколько раз кнопку "вправо", хотя бы 5 раз, смотрим чтобы карточки (все, или одна колонка) перелистывались постоянно. Если появляется граничное условие, и кнопка исчезает или перестает работать (карточки по нажатию преестают перелистываться). -5.
  • Во время статичного отображения слайда (не во время анимации), карточки повторяются. -5.
  1. Автоматическая карусель перелистывает блоки с отзывами автоматически в блоке Testimonials +10. Баллы снимаем, если:
  • Интервал отличается от 10 секунд более чем на 5 секунд. -5.
  • Перелистывание должно происходить справа-налево. Однако, если отзывы будут перелистываться слева-направо, баллы не снимаем.
  • При нажатии на отзыв, или стрелки вправо/влево, таймер не остановился, или не возобновился через 20(+-5) секунд. -5.
  1. Модальное окно (попап) сделано и реагирует на нажатие кнопки Leave Feedback +15. Баллы снимаем, если:
  • Закрытие попапа не происходит по нажатию на затемненную область вне попапа. -5.
  • Также, баллы снимаем если есть стилевые ошибки, только указанные ниже:
  • Область за границами модального окна не затемнена или не размыта. -2.
  • Попап не центрирован в окне браузера. -2.
  • На кнопке Send for moderation нет валидации, или она не реагирует на заполнение полей Your name, Your e-mail или Your review. -2.
  • Когда кнопка активная, после нажатия кнопки Send for moderation попап не закрывается. -2.
  1. Карточка животного в блоке Zoogeography сделана и реагирует на выбор фишек животного +10. Баллы снимаем, если:
  • При нажатии на иконку животного, карточка слева не меняется. -5.
  • При нажатии на кнопку watch now, нас не перебрасывает на страницу соответствующего животного, карточка слева не меняется. -5.
  • Также, баллы снимаем если есть стилевые ошибки, только указанные ниже:
  • Сайдбар пересекается с карточкой. -2.

Map

  1. Карта сделана, и при нажатии на фишку животного, появляется карточка животного +20. Баллы снимаем, если:
  • Нажимаем на иконку животного, и отображающаяся карточка не вписывается в область между боковой панелью, хедером, или выходит за край экрана. -10.
  • С момента открытия любой карточки, нажатие на область карты вне карточки не закрывает ее. -5.
  • С момента открытия любой карточки, нажатие на другую видимую иконку не отображает новую карточку, или не скрывает предыдущую. -5.

Zoos

  1. Карусель в блоке other cams существует и реагирует на нажатие +5. Баллы снимаем, если:
  • С момента загрузки, при нажитии на картинку видео в блоке other cams, этот элемент не становится на место основного видео, или основное видео не становится второстепенным элементом в блоке other cams -5.
  1. Выпадающая панель (спойлер) в блоке Interesting facts сделана и реагирует на нажатие на строку или кнопки (+) и (-) +5. Баллы снимаем, если:
  • Нажатие на закрытую строку или кнопку (+) не разворачивает скрытый текст. -5. При этом за отсутствие анимации баллы не снимаем.
  • Нажатие на открытую строку строку или кнопку (-) текст не скрывается. -5. При этом за отсутствие анимации баллы не снимаем.
  • Также, баллы снимаем если есть стилевые ошибки, только указанные ниже:
  • Кнопка (+) не меняется при раскрытии на (-), или наоборот, (-) не меняется на (+). -2.
  • Строка не становится синего цвета при раскрытии, или наоборот, не становится черной при закрытии. -2.

🚧🚧🚧🚧