Выполнить задание согласно макету автора DinaK: Online Zoo Project
Текст ссылки: https://www.figma.com/file/lnK11foY8Aoa6oOlDXovVN/Online-ZOO-Project
Выполняется создание всех страниц для ширины экрана 1920px.
Максимальный балл: 80
Все фоновые элементы макета должны растягиваться на всю доступную ширину экрана, если ширина больше 1920px. При этом направляющие должны сохраняться в исходном размере, 1400px. Особенностью этого проекта являются:
- элементы, выходящие за границы направляющих (карточки животных, отзывы),
- детально проработанные модальные окна.
Для создания вертикальных отступов лучше использовать вертикальные margin на блоках высшего порядка, насколько это возможно. При этом иметь ввиду, что вертикальные margin могут схлопнуться.
Для создания многоколоночных структур, или элементов имеющих относительное горизонтальное расположение, должно быть использовано одно из свойств:
- display: flex
- display: grid
- display: inline-block
- Header (
<header>
содержит только логотип, панель навигации и иконки соц. сетей)
- Логотип находится слева. Нажатие на логотип работает по принципу нажатия на
About
, перебрасывает нас на текущую страницу, на First Page (Landing). - Интерактивная панель навигации.
- Нажатие на
Map
перебрасывает нас на Map Page. - Нажатие на
Zoos
перебрасывает нас на Zoos Page Panda. - Нажатие на
Contact Us
перебрасывает нас на Contact Us. - Нажатие на
Design
перебрасывает нас на оригинальную страницу Figma. - Должен быть подсвечен первый элемент
About
. И он должен перестать быть интерактивным. - Интерактивная панель соцсетей. Нажатия на иконки соцсетей могут вести просто на заглавные страницы соответствующих ресурсов.
- На странице обязательно должен присутствовать один элемент
<h1>
. В нем должен быть текстOnline Zoo
. - Хедер "липким" делать не нужно. Т.е. при скролле он остается на своей позиции.
- Блок Watch your favorite animal online
- Кнопка
View live cam
должна быть интерактивной. Нажатие перебрасывает нас на Zoos Page Panda. - Бекграунд является картинкой.
- Блок Welcome to the zoo / How it works
- Правильное расположение картинок относительно текста.
- Блок Your donation makes a difference
- Input
$ Donation amount
должен быть типа number, со скрытыми стрелками. Сам символ$
при вводе сохраняется. На поле должно быть ограничение в 4 символа. - Кнопка со стрелкой должна быть интерактивной. При нажатии может ничего не происходить.
- Блок Meet some our friends
- Кнопки влево и вправо должны быть интерактивными. При нажатии может ничего не происходить.
- Карточки животных должны быть интерактивными. Нажатие на любую область карточки должно вести на страницу с соответствующим животным. Если такого животного нет среди 4х представленных, то может ничего не происходить.
- ❗ При наведении курсора на карточку животного должна быть анимация плавного увеличения на 20px в каждом из направлений относительно центра.
- ❗ Блоки текста в карточках рекомендуется сделать одного размера, 380px. Если текстовые блоки разных размеров - это не будет ошибкой.
- Кнопка
Choose your favorite
должна быть интерактивной. При нажатии ведет нас на страницуMap
. - ❗ Справа карточки выходят за ширину направляющих. На ширине более 1920px остаток карточки должен переходить градиентом в цвет фона. Т.е. элементов не должно быть больше, чем доступно на 1920px. При этом, если сделано без затемнения или градиента, а карточки просто увеличиваются в количестве до края экрана справа, то это ошибкой считаться не будет.
- Блок Pay and feed
- Кнопка
Donate now
должна быть интерактивной. При нажатии может ничего не происходить.
- Блок What our users think
- Кнопки влево и вправо должны быть интерактивными. При нажатии может ничего не происходить.
- Кнопка
Leave feedback
должна быть интерактивной. При нажатии может ничего не происходить. - Справа отзывы выходят за ширину направляющих. На ширине более 1920px новых отзывов появляться не должно. Т.е. элементов не должно быть больше, чем доступно на 1920px.
- Блок Care fro the animals you love
- Картинки без надписей не должны быть интерактивными. Карточки животных должны быть интерактивными. Нажатие на любую область карточки должно вести на страницу с соответствующим животным. Если такого животного нет среди 4х представленных, то может ничего не происходить.
- При наведении курсора на карточку животного должна быть анимация плавного увеличения на 20px в каждом из направлений относительно центра.
- Кнопка
Choose your favorite
должна быть интерактивной. Нажатие перебрасывает нас на Map Page.
- Footer (
<footer>
содержит меню, логотипы, кнопки доната и соц. сетей):
- Нажатие на основной логотип работает по принципу нажатия на
About
, перебрасывает нас на текущую страницу, на First Page. Landing. - Интерактивная панель навигации. По умолчанию, элементы не имеют подсветки.
- Нажатие на
About
перебрасывает нас в верх страницы. Нажатие перебрасывает нас на верх текущей страницы, на First Page (Landing). - Нажатие на
Map
перебрасывает нас на Map Page. - Нажатие на
Zoos
перебрасывает нас на Zoos Page Panda. - Нажатие на
Contact Us
перебрасывает нас на Contact Us. - Кнопка
Donate for volunteers
должна быть интерактивной. - Нажатие на основной логотип работает по принципу нажатия на
About
, перебрасывает нас на верх текущей страницы, на First Page (Landing). - Остальные логотипы не интерактивные. Они не должны реагировать на нажатие. Но должен появляться тултип (атрибут title) с соответствующей надписью (Yem Digital, Rolling Scopes School).
- Интерактивная панель соцсетей. Нажатия на иконки соцсетей могут вести просто на заглавные страницы соответствующих ресурсов.
- Header (
<header>
содержит только логотип, панель навигации и иконки соц. сетей)
- Логотип находится слева. Нажатие на логотип работает по принципу нажатия на
About
, перебрасывает нас на First Page. Landing. - Интерактивная панель навигации.
- Нажатие на
About
перебрасывает нас на First Page. Landing. - Нажатие на
Zoos
перебрасывает нас на Zoos Page Panda. - Нажатие на
Contact Us
перебрасывает нас на Contact Us. - Нажатие на
Design
перебрасывает нас на оригинальную страницу Figma. - Должен быть подсвечен элемент
Map
. И он должен перестать быть интерактивным. - Интерактивная панель соцсетей. Нажатия на соцсети могут вести просто на заглавные страницы соответствующих ресурсов.
- На странице обязательно должен присутствовать один элемент
<h1>
. В нем должен быть текстOnline Zoo
. - Хедер "липким" делать не нужно. Т.е. при скролле он остается на своей позиции.
- Блок Map
- Иконки животных должны занимать свою позицию относительно карты.
- При наведении на иконку животного должен появится тултип с названием животного, локация. Обязательно для 4х животных, упомянутых в дизайне. Для остальных нужно иконки сделать неинтерактивными. По желанию, можно добавить подходящее описание в тултип.
- Footer (
<footer>
содержит меню, логотипы, кнопки доната и соц. сетей):
- Нажатие на основной логотип работает по принципу нажатия на
About
, перебрасывает нас на текущую страницу, на First Page. Landing. - Интерактивная панель навигации. По умолчанию, элементы не имеют подсветки.
- Нажатие на
About
перебрасывает нас на First Page. Landing. - Нажатие на
Map
перебрасывает нас на Map Page. - Нажатие на
Contact Us
перебрасывает нас на Contact Us. - Кнопка
Donate for volunteers
должна быть интерактивной. - Остальные логотипы не интерактивные. Они не должны реагировать на нажатие. Но должен появляться тултип (атрибут title) с соответствующей надписью (Yem Digital, Rolling Scopes School).
- Интерактивная панель соцсетей. Нажатия на соцсети могут вести просто на заглавные страницы соответствующих ресурсов.
Требования для типовой страницы. Переход осуществляется по ссылкам типа .../zoos/panda
или .../zoos/lemur
- Header (
<header>
содержит только логотип, панель навигации и иконки соц. сетей)
- Логотип находится слева. Нажатие на логотип работает по принципу нажатия на
About
, перебрасывает нас на First Page. Landing. - Интерактивная панель навигации.
- Нажатие на
About
перебрасывает нас на First Page. Landing. - Нажатие на
Map
перебрасывает нас на Map Page. - Нажатие на
Contact Us
перебрасывает нас на Contact Us. - Нажатие на
Design
перебрасывает нас на оригинальную страницу Figma. - Должен быть подсвечен элемент
Zoos
. И он должен перестать быть интерактивным. - Интерактивная панель соцсетей. Нажатия на соцсети могут вести просто на заглавные страницы соответствующих ресурсов.
- На странице обязательно должен присутствовать один элемент
<h1>
. В нем должен быть текстOnline Zoo
. - Хедер "липким" делать не нужно. Т.е. при скролле он остается на своей позиции.
- Side bar (
<aside>
)
- Панель слева: Должно быть подсвечено выбранное животное.
- Панель слева: При скролле, как только экран опускается ниже хедера, меню с животными должно "прилипнуть" к верху экрана. На этот счет ознакомьтесь с position: sticky.
- Выбранное животное становится не интерактивным, а также занимает первую позицию в списке.
- Блок Live cams
- Кнопка
Donate now
должна быть интерактивной. - Блок видео - это элемент
iframe
с видео трансляции, его можно добавить на страницу по инструкции. - Кнопки влево и вправо должны быть интерактивными.
- Картинки в карусели - это должны быть либо превью с youtube, либо такие же
iframe
с видео. - Сверху, поверх видео, есть элемент, с надписью, какая это камера. Что касается самих видео - надо наложить полностью поверх прозрачный элемент, который не даст нажать видео, и ничего не произойдет. Эта заглушка нужна будет при работе с js.
- Блок Quick donate
- Input
$ Donation amount
должен быть типа number, со скрытыми стрелками. - Кнопка со стрелкой должна быть интерактивной.
- Блок Did you know?
- ❗ Отступ от конца предыдущего блока до элемента, содержащего
Did you know?
, должен быть 150px для всех животных. Если у горрилы сделан отступ 175px, баллы не снимаем. - Тени вокруг блока должны быть сделаны свойством box-shadow. Даже если визуально они будут выглядеть чуть-чуть иначе.
- ❗ Делать переносы по словам ровно так, как сделано в макете - не нужно. Сам текст тоже может быть рыбным.
- Кнопка
View Map
должна быть интерактивной. При нажатии перебрасывает нас на Map Page.
- Footer (
<footer>
содержит меню, логотипы, кнопки доната и соц. сетей):
- Нажатие на основной логотип работает по принципу нажатия на
About
, перебрасывает нас на текущую страницу, на First Page. Landing. - Интерактивная панель навигации. По умолчанию, элементы не имеют подсветки.
- Нажатие на
About
перебрасывает нас на First Page. Landing. - Нажатие на
Map
перебрасывает нас на Map Page. - Нажатие на
Contact Us
перебрасывает нас на Contact Us. - Кнопка
Donate for volunteers
должна быть интерактивной. - Остальные логотипы не интерактивные. Они не должны реагировать на нажатие. Но должен появляться тултип (атрибут title) с соответствующей надписью (Yem Digital, Rolling Scopes School).
- Интерактивная панель соцсетей. Нажатия на соцсети могут вести просто на заглавные страницы соответствующих ресурсов.
- Header (
<header>
содержит только логотип, панель навигации и иконки соц. сетей)
- Логотип находится слева. Нажатие на логотип работает по принципу нажатия на
About
, перебрасывает нас на текущую страницу, на First Page. Landing. - Интерактивная панель навигации.
- Нажатие на
About
перебрасывает нас на First Page. Landing. - Нажатие на
Map
перебрасывает нас на Map Page. - Нажатие на
Zoos
перебрасывает нас на Zoos Page Panda. - Нажатие на
Design
перебрасывает нас на оригинальную страницу Figma. - Должен быть подсвечен первый элемент
Contact us
. И он должен перестать быть интерактивным. - Интерактивная панель соцсетей. Нажатия на соцсети могут вести просто на заглавные страницы соответствующих ресурсов.
- На странице обязательно должен присутствовать один элемент
<h1>
. В нем должен быть текстOnline Zoo
. - Хедер "липким" делать не нужно. Т.е. при скролле он остается на своей позиции.
- Блок Get in touch
- Нужно реализовать форму
- Поля (input, textarea), помеченные звездочкой, должны быть обязательными для заполнения, т.е. required. Если при нажатии на кнопку
send message
хоть одно поле не проходит валидацию, запрос не должен быть отправлен. - Поле Your Email Address должна проходить валидацию типа email.
- Кнопка
Send Message
должна быть интерактивной.
- Footer (
<footer>
содержит меню, логотипы, кнопки доната и соц. сетей):
- Нажатие на основной логотип работает по принципу нажатия на
About
, перебрасывает нас на текущую страницу, на First Page. Landing. - Интерактивная панель навигации. По умолчанию, элементы не имеют подсветки.
- Нажатие на
About
перебрасывает нас на First Page. Landing. - Нажатие на
Map
перебрасывает нас на Map Page. - Нажатие на
Contact Us
перебрасывает нас на Contact Us. - Кнопка
Donate for volunteers
должна быть интерактивной. - Остальные логотипы не интерактивные. Они не должны реагировать на нажатие. Но должен появляться тултип (атрибут title) с соответствующей надписью (Yem Digital, Rolling Scopes School).
- Интерактивная панель соцсетей. Нажатия на соцсети могут вести просто на заглавные страницы соответствующих ресурсов.
Открываем на ширине экрана 1920px. Если экран меньше, можно сделать масштабирование, а можно поставить на странице ширину 1920px и смотреть со включенной горизонтальной плосой прокрутки. Если экран шире, можно поставить область уже или сузить окно.
❗ Балл не может опуститься ниже 0 за страницу. Если не указано в требованиях отдельно, то для всех неповторяющихся блоков или элементов в состоянии покоя (без hover
) справедливо:
- Отступы от границ элементов (или наборов элементов) до краев блока, по горизонтали или вертикали, отличаются более чем на 20px: -1 за каждый блок.
- Отступы внутри набора или сетки между элементами, по горизонтали или вертикали, отличаются более чем на 10px: -1 за каждый блок.
- Цвет фона блока или элемента сильно отличается от дизайна (например, отличие по каналу более чем на 34. #bbb и #ddd - не ошибка, больше - ошибка): -1 за каждый блок.
- Отсутствует элемент или картинка, как фоновая, так и картинка элемента: -1 за каждый блок.
- Шрифт или семейство шрифтов не подключено, или разница в размере шрифта более чем 4px: -1 за каждый блок.
Создан Landing +20.
- Нет блока Header: -12.
- Нет логотипа: -2. Логотип есть, но не работает как ссылка на First Page (Landing): -1.
- Нет панели навигации: -5. Панель навигации есть, но не интерактивная: -1. Рекомендуется использовать
<nav>
. - Нет элемента
About
, или он не подсвечен: -1. - Нет элемента
Map
, или он не работает как ссылка на Map Page: -1. - Нет элемента
Zoos
, или он не работает как ссылка на Zoos Page Panda: -1. - Нет элемента
Contact Us
, или он не работает как ссылка на Contact Us: -1. - Нет элемента
Design
, или он не работает как ссылка на оригинальную страницу Figma: -1. - Нет хотя бы одной иконки соцсетей из перечня: -2 за весь набор элементов.
- Хотя бы одна из иконок соцсетей не интерактивная: -1 за весь набор элементов.
- Нет элемента
<h1>
: -2. Элемент есть, но в количестве больше одного: -1. - Рекомендуется хедер "липким" не делать.
- Нет блока Watch your favorite animal online: -3.
- Нет кнопки
View live cam
: -2. Кнопка есть, но не интерактивная, или не работает как ссылка на Zoos Page Panda: -1.
-
Нет блока Welcome to the zoo / How it works: -2.
-
Нет блока Your donation makes a difference: -5.
- Нет поля
<input>
: -2. Поле есть, но не указан типnumber
: -1. - Нет кнопки со стрелкой: -2. Кнопка есть, но не интерактивная: -1.
- Нет блока Meet some our friends: -20.
- Нет кнопки
вправо
: -1. Нет кнопкивлево
: -1. Кнопки есть, но они не интерактивные: -1. - Нет карточки животного: -2 за каждую. Карточка есть, но не интерактивная, или нет анимации: -1 за каждую.
- Рекомендуется сделать блоки текста в карточках одного размера, 380px. Если текстовые блоки разных размеров, баллы не снимаем.
- Нет кнопки
Choose your favorite
: -2. Кнопка есть, но не интерактивная, или не работает как ссылка на Map Page. -1. - Рекомендуется сделать так, что нажатие на карточку перебросит нас на страницу с соответствующим животным. Если такого животного нет среди 4х представленных, то может ничего не происходить.
- Рекомендуется затемнять крайние карточки животных градиентом. Если градиента нет, баллы не снимаем.
- Нет блока Pay and feed: -3.
- Нет кнопки
Donate now
: -2. Кнопка есть, но не интерактивная: -1.
- Нет блока What our users think: -5.
- Нет кнопки
вправо
: -1. Нет кнопкивлево
: -1. Кнопки есть, но они не интерактивные: -1. - Нет кнопки
Leave feedback
: -2. Кнопка есть, но не интерактивная: -1.
- Нет блока Care fro the animals you love: -11.
- Нет карточки животного: -2 за каждую. Карточка есть, но не интерактивная, или нет анимации: -1 за каждую.
- Нет кнопки
Choose your favorite
: -2. Кнопка есть, но не интерактивная, или не работает как ссылка на Map Page. -1. - Рекомендуется сделать так, что нажатие на карточку перебросит нас на страницу с соответствующим животным. Если такого животного нет среди 4х представленных, то может ничего не происходить.
- Нет блока Footer: -12.
- Нет основного логотипа: -2.
- Рекомендуется сделать так, чтобы логотип работал также, как
About
, т.е. как ссылка на эту же страницу, не перебрасывает нас на верх страницы. - Нет панели навигации: -4. Панель навигации есть, но не интерактивная: -1. Рекомендуется использовать
<nav>
. - Нет элемента
About
, или он не работает как ссылка на эту же страницу, не перебрасывает нас на верх страницы: -1. - Нет элемента
Map
, или он не работает как ссылка на Map Page: -1. - Нет элемента
Zoos
: -1. - Рекомендуется сделать переход на страницу Zoos с пандой. Что бы не происходило при нажатии на Zoos, баллы не снимаем.
- Нет элемента
Contact Us
, или он не работает как ссылка на Contact Us: -1. - Нет кнопки
Donate for volunteers
: -2. Кнопка есть, но не интерактивная: -1. - Нет хотя бы одного из логотипов курсов: -2 за весь набор элементов.
- Все логотипы курсов есть, но хотя бы один из них не имеет тултипа (хотя бы аттрибута
title
): -1 за весь набор элементов. - Нет хотя бы одной иконки соцсетей из перечня: -2 за весь набор элементов.
- Все иконки соцсетей есть, но хотя бы одна не интерактивная: -1 за весь набор элементов.
Создан Map +10.
- Нет блока Header: -10.
- Нет логотипа: -1.
- Рекомендуется сделать так, чтобы логотип работал также, как
About
, т.е. как ссылка на First Page (Landing). - Нет панели навигации: -5. Панель навигации есть, но не интерактивная: -1. Рекомендуется использовать
<nav>
. - Нет элемента
About
, или он не работает как ссылка на First Page (Landing): -1. - Нет элемента
Map
, или он не подсвечен: -1. - Нет элемента
Zoos
, или он не работает как ссылка на Zoos Page Panda: -1. - Нет элемента
Contact Us
, или он не работает как ссылка на Contact Us: -1. - Нет элемента
Design
, или он не работает как ссылка на оригинальную страницу Figma: -1. - Нет хотя бы одной иконки соцсетей из перечня: -2 за весь набор элементов.
- Хотя бы одна из иконок соцсетей не интерактивная: -1 за весь набор элементов.
- Нет элемента
<h1>
: -2. Элемент есть, но в количестве больше одного: -1. - Рекомендуется хедер "липким" не делать.
- Нет блока Map: -10.
- Нет фонового изображения карты земли: -2.
- Перечень животных, чьи иконки должны обязательно присутствовать: панда, орел, горилла, лемур.
- На карте нет иконки животного из перечисленных: -2 за каждую.
- Иконка животного из перечисленных не интерактивная, или нет тултипа (хотя бы аттрибута
title
): -1 за каждую.
- Нет блока Footer: -10.
- Нет основного логотипа: -2.
- Рекомендуется сделать так, чтобы логотип работал также, как
About
, т.е. как ссылка на эту же страницу, не перебрасывает нас на верх страницы. - Нет панели навигации: -4. Панель навигации есть, но не интерактивная: -1. Рекомендуется использовать
<nav>
. - Нет элемента
About
, или он не работает как ссылка на First Page (Landing): -1. - Нет элемента
Map
, или он не работает как ссылка на эту же страницу, не перебрасывает нас на верх страницы: -1. - Нет элемента
Zoos
: -1. - Рекомендуется сделать переход на страницу Zoos с пандой. Что бы не происходило при нажатии на Zoos, баллы не снимаем.
- Нет элемента
Contact Us
, или он не работает как ссылка на Contact Us: -1. - Нет кнопки
Donate for volunteers
: -2. Кнопка есть, но не интерактивная: -1. - Нет хотя бы одного из логотипов курсов: -2 за весь набор элементов.
- Хотя бы один из логотипов курсов не имеет тултипа (хотя бы аттрибута
title
): -1 за весь набор элементов. - Нет хотя бы одной иконки соцсетей из перечня: -2 за весь набор элементов.
- Хотя бы одна из иконок соцсетей не интерактивная: -1 за весь набор элементов.
Создана страница Zoos +10. Считаем отдельно для каждой из 4х страниц (Панда, Орел, Горилла, Лемур).
- Нет блока Header: -10.
- Нет логотипа: -2. Логотип есть, но не работает как ссылка на First Page (Landing): -1.
- Нет панели навигации: -5. Панель навигации есть, но не интерактивная: -1. Рекомендуется использовать
<nav>
. - Нет элемента
About
, или он не работает как ссылка на First Page (Landing): -1. - Нет элемента
Map
, или он не работает как ссылка на Map Page: -1. - Нет элемента
Zoos
, или он не подсвечен: -1. - Нет элемента
Contact Us
, или он не работает как ссылка на Contact Us: -1. - Нет элемента
Design
, или он не работает как ссылка на оригинальную страницу Figma: -1. - Нет хотя бы одной иконки соцсетей из перечня: -2 за весь набор элементов.
- Хотя бы одна из иконок соцсетей не интерактивная: -1 за весь набор элементов.
- Нет элемента
<h1>
: -2. Элемент есть, но в количестве больше одного: -1. - Рекомендуется хедер "липким" не делать.
- Нет блока Side bar: -8.
- При скролле, когда экран опустится ниже хедера, верхняя граница панели будет находится у края экрана. Отличие величины отсутпа более чем на 5px: -2.
- Не подсвечено выбранное животное: -1.
- Выбранное животное не на первой позиции: -1.
- Хоть одна из неактивных иконок животных не интерактивная: -1 за весь блок.
- Рекомендуется добавить тонкую рамку вокруг панели, или хотя бы со всех сторон, кроме левой. Наличие такой рамки - не ошибка, баллы не снимаем.
- Нет блока Live cams: -7.
- Нет кнопки
Donate now
: -2. Кнопка есть, но не интерактивная: -1. - Нет видео: -2. Видео есть, но он не
iframe
: -1. - Нет кнопки
вправо
: -1. Нет кнопкивлево
: -1. Кнопки есть, но они не интерактивные: -1. - Нет элементов
CAM ...
, покарывающих видео или картинки в карусели: -1.
- Нет блока Quick donate: -5.
- Нет поля
<input>
: -2. Поле есть, но не указан типnumber
: -1. - Нет кнопки со стрелкой: -2. Кнопка есть, но не интерактивная: -1.
- Нет блока Did you know?: -5.
- Рекомендуется сделать отступ от конца предыдущего блока до элемента, содержащего
Did you know?
, 150px для всех животных. Если у горрилы сделан отступ 175px, баллы не снимаем. - Нет теней вокруг блока с текстом: -2. Есть тени, но не со всех сторон: -1. Качество самих теней мы не оцениваем.
- Нет кнопки
View Map
: -2. Кнопка есть, но не интерактивная, или не работает как ссылка на Map Page. -1. - Рекомендуется не делать переносы по словам ровно так, как сделано в макете. Если переносы по словам сделаны, баллы не снимаем.
- Нет блока Footer: -10.
- Нет основного логотипа: -2.
- Рекомендуется сделать так, чтобы логотип работал также, как
About
, т.е. как ссылка на эту же страницу, не перебрасывает нас на верх страницы. - Нет панели навигации: -4. Панель навигации есть, но не интерактивная: -1. Рекомендуется использовать
<nav>
. - Нет элемента
About
, или он не работает как ссылка на First Page (Landing): -1. - Нет элемента
Map
, или он не работает как ссылка на Map Page: -1. - Нет элемента
Zoos
: -1. - Рекомендуется сделать переход на страницу Zoos с пандой. Что бы не происходило при нажатии на Zoos, баллы не снимаем.
- Нет элемента
Contact Us
, или он не работает как ссылка на Contact Us: -1. - Нет кнопки
Donate for volunteers
: -2. Кнопка есть, но не интерактивная: -1. - Нет хотя бы одного из логотипов курсов: -2 за весь набор элементов.
- Хотя бы один из логотипов курсов не имеет тултипа (хотя бы аттрибута
title
): -1 за весь набор элементов. - Нет хотя бы одной иконки соцсетей из перечня: -2 за весь набор элементов.
- Хотя бы одна из иконок соцсетей не интерактивная: -1 за весь набор элементов.
Создан Contact Us +10.
- Нет блока Header: -10.
- Нет логотипа: -2. Логотип есть, но не работает как ссылка на First Page (Landing): -1.
- Нет панели навигации: -5. Панель навигации есть, но не интерактивная: -1. Рекомендуется использовать
<nav>
. - Нет элемента
About
, или он не работает как ссылка на First Page (Landing): -1. - Нет элемента
Map
, или он не работает как ссылка на Map Page: -1. - Нет элемента
Zoos
, или он не работает как ссылка на Zoos Page Panda: -1. - Нет элемента
Contact Us
, или он не подсвечен: -1. - Нет элемента
Design
, или он не работает как ссылка на оригинальную страницу Figma: -1. - Нет хотя бы одной иконки соцсетей из перечня: -2 за весь набор элементов.
- Хотя бы одна из иконок соцсетей не интерактивная: -1 за весь набор элементов.
- Нет элемента
<h1>
: -2. Элемент есть, но в количестве больше одного: -1. - Рекомендуется хедер "липким" не делать.
- Нет блока Get in touch: -10.
- Нет элемента
<form>
: -2. - Нет поля
<input>
"Your Name" : -2. Поле есть, но не указан типtext
или нет аттрибутаrequired
: -1. - Нет поля
<input>
"Your Email Address" : -2. Поле есть, но не указан типemail
или нет аттрибутаrequired
: -1. - Нет поля
<input>
"Subject" : -2. Поле есть, но не указан типtext
или нет аттрибутаrequired
: -1. - Нет поля
<textarea>
"Message" : -2. Поле есть, но нет аттрибутаrequired
: -1. - Нет кнопки
Send Message
: -2. Кнопка есть, но не интерактивная: -1.
- Нет блока Footer: -10.
- Нет основного логотипа: -2.
- Рекомендуется сделать так, чтобы логотип работал также, как
About
, т.е. как ссылка на эту же страницу, не перебрасывает нас на верх страницы. - Нет панели навигации: -4. Панель навигации есть, но не интерактивная: -1. Рекомендуется использовать
<nav>
. - Нет элемента
About
, или он не работает как ссылка на First Page (Landing): -1. - Нет элемента
Map
, или он не работает как ссылка на Map Page: -1. - Нет элемента
Zoos
: -1. - Рекомендуется сделать переход на страницу Zoos с пандой. Что бы не происходило при нажатии на Zoos, баллы не снимаем.
- Нет элемента
Contact Us
, или он не работает как ссылка на эту же страницу: -1. - Нет кнопки
Donate for volunteers
: -2. Кнопка есть, но не интерактивная: -1. - Нет хотя бы одного из логотипов курсов: -2 за весь набор элементов.
- Хотя бы один из логотипов курсов не имеет тултипа (хотя бы аттрибута
title
): -1 за весь набор элементов. - Нет хотя бы одной иконки соцсетей из перечня: -2 за весь набор элементов.
- Хотя бы одна из иконок соцсетей не интерактивная: -1 за весь набор элементов.
Сверстанные страницы адаптируюятся под следующую ширину экрана устройства:
- 1920px (уже будет готово)
- 1200px
- 640px
- 320px
Максимальный балл: 40
Точки перехода могут быть произвольными. Оценивать, насколько правильно и удобно они подобраны, мы не будем. Ниже будут периведены рекомендации для тех, кто еще не выполнял задание:
- (max-width: 1920px) или (max-width: 1919px) - Переход между состояниями фиксированной колонки и отзывчивой.
-- Опционально (max-width: 1919px) или (max-width: 1480px) или (max-width: 1440px) или (max-width: 1280px)
2. (max-width: 1200px) - Изменение расположения элементов в блоках Welcome to the zoo / How it works
, pay and feed
, what our users think
, care for the animals
. Изменение количества, размера и отступов карточек животных, при том, что они могут выходить за край экрана. Изменение вида сайдбара.
-- Опционально (max-width: 1199px) или (max-width: 980px) или (max-width: 768px)
3. (max-width: 640px) - Замена меню в хедере на бургер меню. Хедер становится фиксированным. Изменение расположения элементов в блоках Welcome to the zoo / How it works
, pay and feed
, Изменение количества, размера карточек животных, не выходя за край экрана. Потеря кнопок управления вправо/влево. И появление кнопок под картинкой слайдера.
-- Опционально (max-width: 639px) или (max-width: 600px)
4. (max-width: 320px) - Изменение формы и расположения кнопок. Изменение количества, размера карточек животных, не выходя за край экрана. Преобразование блока с отзывами в слайдер. Изменение количество и расположения вспомогательных видео в блоке more live views
.
Общие обозначения:
- Указанные элементы - это элементы, которые прописаны в требованиях, и для которых указаны штрафные баллы за такой тип ошибки. Помимо этого, если ошибку для элементов, например, хедера или футера, мы уже указывали, а она идентично повторяется для других размеров или страниц, повторно баллы не снимаем.
- Отступы между элементами - это вертикальные и горизонтальные отступы между соседними элементами, как правило в одном списке или в одной сетке.
- Расположение элементов - это обозначение отступов от элемента до краев экрана или других элементов. Для текста учитываются отступы слева и сверху первой строки (точка начала текста), если текст выровнен по левому краю, или в заголовках. Что касается перехода из положения, когда все элементы выравнены по левому краю, в центральное положение, то тут можно смотреть отступы самого блока, и наличие свойств позиционирования контента по центру.
- Вид элементов - это обозначение внешнего вида элементов. Например, если происходит переход от маленькой круглой кнопки к большой квадратной, то акцентируется внимание на соотвествии внешнего вида тому, что приведен в дизайне.
- Количество элементов - это требование соотвествия количества элементов в дизайне. Например, при переходе на меньший размер экрана количество элементов уменьшается с 6 до 4х. Количество элементов больше или меньше 4х, в таком случае, будет считаться ошибкой.
❗ Обратите внимание на эти пункты:
- Изменение элементов со сменой концепции лучше сделать через скрытие/отображение элементов. Например, блоки, которые меняются из набора картинок в слайдеры. Будет проще работать с ними в js.
- Бургер-меню может быть не активным. Т.е. если при нажатии на него ничего не проиходит, то баллы снимать не будем.
- После выставления определенной ширины, при проверке размеров и отступов между элементами, внутри набора элментов или сетки, по горизонтали или вертикали, считаем отличие более чем на 10px. Можно использовать расширение PixelPerfect.
- Проверяем страницы на отзывчивость, каждую, кроме повторяющихся Zoos.
Выставляем Landing на 1200px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:
- Отступы между элментами меню в хедере: -1.
- Отступы между иконками соцсетей в хедере: -1.
- Расположение элементов в блоке
Watch your favorite animal online
: -1. - Расположение элементов в блоке
Welcome to the zoo / How it works
: -1. - Количество, расположение или отступы между карточками животных в блоке
meet some our Pets
: -1. - Отступы между кнопками вправо/влево в блоке
meet some our Pets
: -1. - Отступы между кнопкой
Choose your Favorite
и сеткой с карточками животных в блокеmeet some our Pets
: -1. - ❗ Карточки животных могут быть обрезаны по краю и выходить за границы экрана.
- Расположение элементов в блоке
pay and feed
: -1. Текст и иконки нужно центрировать в колонке. - Отступы между отзывами в блоке
what our users think
: -1. - ❗ Сами отзывы могут выходить за границу экрана.
- Отступы между кнопками вправо/влево в блоке
what our users think
: -1. - Расположение кнопки
leave feedback
в блокеwhat our users think
: -1. - Расположение и отступы между элементами в блоке
care for the animals you love
: -1. - Расположение кнопки
Choose your Favorite
в блокеcare for the animals you love
: -1. - Отступы между логотипами в футере: -1.
- Отступы между элментами меню в футере: -1.
- Отступы между именами школ и автора
©
в футере: -1. - Отступы между иконками соцсетей в футере: -1.
Выставляем Landing на 640px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:
- Меню не преобразовано в бургер меню в хедере: -1.
- ❗ Хедер не стал фиксированным: -1.
- Расположение элементов в блоке
Watch your favorite animal online
: -1. - Расположение элементов в блоке
Your donation makes a difference
: -1. - Расположение элементов в блоке
Welcome to the zoo / How it works
: -1. - Количество, расположение или отступы между карточками животных в блоке
meet some our Pets
: -1. - ❗ Карточки не должны быть обрезаны на краю экрана. Если есть обрезанная карточка: -1.
- ❗ Не пропали кнопки вправо/влево в блоке
meet some our Pets
: -1. - Отступы между кнопкой
Choose your Favorite
и сеткой с карточками животных в блокеmeet some our Pets
: -1. - Расположение элементов в блоке
pay and feed
: -1. Текст и кнопку нужно центрировать в колонке. - Отступы между отзывами в блоке
what our users think
: -1. - ❗ Не пропали кнопки вправо/влево в блоке
what our users think
: -1. - Сами отзывы могут выходить за границу экрана.
- Расположение кнопки
leave feedback
в блокеwhat our users think
: -1. - Расположение карточки животного в блоке
care for the animals you love
: -1. - Расположение кнопок слайдера в блоке
care for the animals you love
: -1. Если слайдер неактивный, рекомендуется сделать подсвеченным первый элемент слева. - Расположение кнопки
Choose your Favorite
в блокеcare for the animals you love
: -1. - Отступы между логотипами в футере: -1.
- Отступы между элментами меню в футере: -1.
- Отступы между именами школ и автора
©
в футере: -1. - Отступы между иконками соцсетей в футере: -1.
Выставляем Landing на 320px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:
- Нет бургер меню в хедере: -1.
- Количество или расположение карточки животного в блоке
meet some our Pets
: -1. - ❗ Карточки не должны быть обрезаны на краю экрана. Если есть обрезанная карточка, а на 640px ее не было: -1.
- ❗ Не пропали кнопки вправо/влево в блоке
meet some our Pets
: -1. - Отступы между кнопкой
Choose your Favorite
и сеткой с карточками животных в блокеmeet some our Pets
: -1. - Расположение элементов в блоке
pay and feed
, или вид кнопкиDonate now
: -1. - Расположение отзыва в блоке
what our users think
: -1. - ❗ Отзывы не должны быть обрезаны на краю экрана. Если есть обрезанной отзыв: -1.
- Расположение кнопок слайдера в блоке
what our users think
: -1. Если слайдер неактивный, рекомендуется сделать подсвеченным первый элемент слева. - Расположение кнопки
leave feedback
в блокеwhat our users think
: -1. - Расположение карточки животного в блоке
care for the animals you love
: -1. - Расположение кнопок слайдера в блоке
care for the animals you love
: -1. - Расположение кнопки
Choose your Favorite
в блокеcare for the animals you love
: -1. - Расположение и отступы между логотипами в футере: -1.
- Отступы между элментами меню в футере: -1.
- Отступы между иконками соцсетей в футере: -1.
- Расположение и отступы между именами школ и автора
©
в футере: -1.
Пошагово выполняем следующие действия:
- Растягиваем страницу на ширину больше 1920px, либо уменьшаем масштаб.
- Изменяем ширину страницы до размеров от 1919px до 1201px.
- Изменяем ширину страницы до размеров от 1199px до 641px.
- Изменяем ширину страницы до размеров от 639px до 321px.
- Меньше 320px - не смотрим!
И оцениваем:
- В ходе изменения размера появляется горизонтальная полоса прокрутки: -4.
- Отсуствует хотя бы один элемент (кроме указанных или фоновых элементов), или есть лишний: -2.
- Есть элементы (кроме указанных или фоновых элементов), которые обрезаются или выходят за край экрана, хотя в дизайне они вписаны в границы: -2.
- В какой-либо момент, элементы (кроме указанных или фоновых элементов) наезжают на другие элементы, хотя во всех дизайнах между ними есть отступ: -2.
- Отступы между элментами меню в хедере: -1.
- Отступы между иконками соцсетей в хедере: -1.
- ❗ Хедер не тянется на всю ширину, или элементы хедера горизонтально не фиксированы, при наличии горизонтальной полосы прокрутки: -1.
- Полностью отсутствует изображение карты: -1.
- ❗ На карте исчезают иконки животных, или их позиция на карте сильно смещается, более чем на 30px: -1.
- Отступы между логотипами в футере: -1.
- Отступы между элментами меню в футере: -1.
- Отступы между именами школ и автора
©
в футере: -1. - Отступы между иконками соцсетей в футере: -1.
- ❗ Футер не тянется на всю ширину, или элементы футера горизонтально не фиксированы, при наличии горизонтальной полосы прокрутки: -1.
- Меню не преобразовано в бургер меню в хедере: -1.
- ❗ Хедер не стал фиксированным: -1.
- Хедер не тянется на всю ширину, или элементы хедера горизонтально не фиксированы, при наличии горизонтальной полосы прокрутки: -1.
- Полностью отсутствует изображение карты: -1.
- На карте исчезают иконки животных, или их позиция на карте сильно смещается, более чем на 30px: -1.
- Отступы между логотипами в футере: -1.
- Отступы между элментами меню в футере: -1.
- Отступы между именами школ и автора
©
в футере: -1. - Отступы между иконками соцсетей в футере: -1.
- Футер не тянется на всю ширину, или элементы футера горизонтально не фиксированы, при наличии горизонтальной полосы прокрутки: -1.
- Нет бургер меню в хедере: -1.
- Хедер не тянется на всю ширину, или элементы хедера горизонтально не фиксированы, при наличии горизонтальной полосы прокрутки: -1.
- Полностью отсутствует изображение карты: -1.
- На карте исчезают иконки животных, или их позиция на карте сильно смещается, более чем на 30px: -1. То, что иконки заезжают за край экрана, и их становится не видно - не является ошибкой, баллы не снимаем. Данный случай можно проверить с помощью инспектора элементов в панели разработчика.
- Расположение и отступы между логотипами в футере: -1.
- Отступы между элментами меню в футере: -1.
- Отступы между иконками соцсетей в футере: -1.
- Расположение и отступы между именами школ и автора
©
в футере: -1. - Футер не тянется на всю ширину, или элементы футера горизонтально не фиксированы, при наличии горизонтальной полосы прокрутки: -1.
Пошагово выполняем следующие действия:
- Растягиваем страницу на ширину больше 1920px, либо уменьшаем масштаб.
- Изменяем ширину страницы до размеров от 1919px до 1201px.
- Изменяем ширину страницы до размеров от 1199px до 641px.
- Изменяем ширину страницы до размеров от 639px до 321px.
- Меньше 320px - не смотрим!
И оцениваем:
- В хедере или футере не хватает составных элементов (кроме указанных), или есть лишние: -2.
- Элменты хедера или футера (кроме указанных) обрезаются или выходят за край экрана, хотя в дизайне они вписаны в границы: -2.
- В какой-либо момент, элементы хедера или футера (кроме указанных) наезжают на другие элементы, хотя во всех дизайнах между ними есть отступ: -2.
Хотя бы одна из страниц Zoos существует +10. Для проверки берем Zoos: Panda (или любую другую, если панды нет).
Выставляем Zoos на 1200px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:
- Отступы между элментами меню в хедере: -1.
- Отступы между иконками соцсетей в хедере: -1.
- Боковой панели нет: -2.
- Боковая панель есть, но она не ездит со скроллом, или не останавливается на блоке
Quick donate
: -1. - Вид или отступы между элментами в боковой панели: -1.
- Расположение кнопки
Donate now
в блокеLive cams
: -1. - Отступы между видео в карусели, в блоке
more live views
: -1. - Отступы между логотипами в футере: -1.
- Отступы между элментами меню в футере: -1.
- Отступы между именами школ и автора
©
в футере: -1. - Отступы между иконками соцсетей в футере: -1.
- Меню не преобразовано в бургер меню в хедере: -1.
- ❗ Хедер не стал фиксированным: -1. Теперь и боковая панель, и хедер будут ездить вместе, т.е. предыдущие отступы сверху теряют силу.
- Боковой панели нет: -2.
- Боковая панель есть, но она не ездит со скроллом, или не останавливается на блоке
Quick donate
: -1. - Вид или отступы между элментами в боковой панели: -1.
- Расположение кнопки
Donate now
в блокеLive cams
: -1. - Отступы между видео в карусели, в блоке
more live views
: -1. - ❗ Не пропали кнопки вправо/влево в блоке
more live views
: -1. - Расположение элементов в блоке
Quick donate
: -1. - Расположение элементов в блоке
did you know?
: -1. - Отступы между логотипами в футере: -1.
- Отступы между элментами меню в футере: -1.
- Отступы между именами школ и автора
©
в футере: -1. - Отступы между иконками соцсетей в футере: -1.
- Нет бургер меню в хедере: -1.
- Боковой панели нет: -2.
- Боковая панель есть, но она не ездит со скроллом, или не останавливается на блоке
Quick donate
: -1. - Вид или отступы между элментами в боковой панели: -1.
- Вид или расположение кнопки
Donate now
теперь уже в блокеmore live views
: -1. - Количество или отступы между видео в карусели, в блоке
more live views
: -1. - Расположение элементов в блоке
did you know?
: -1. - Расположение и отступы между логотипами в футере: -1.
- Отступы между элментами меню в футере: -1.
- Отступы между иконками соцсетей в футере: -1.
- Расположение и отступы между именами школ и автора
©
в футере: -1.
Пошагово выполняем следующие действия:
- Растягиваем страницу на ширину больше 1920px, либо уменьшаем масштаб.
- Изменяем ширину страницы до размеров от 1919px до 1201px.
- Изменяем ширину страницы до размеров от 1199px до 641px.
- Изменяем ширину страницы до размеров от 639px до 321px.
- Меньше 320px - не смотрим!
И оцениваем:
- В ходе изменения размера появляется горизонтальная полоса прокрутки: -4.
- Отсуствует хотя бы один элемент (кроме указанных или фоновых элементов), или есть лишний: -2.
- Есть элементы (кроме указанных или фоновых элементов), которые обрезаются или выходят за край экрана, хотя в дизайне они вписаны в границы: -2.
- В какой-либо момент, элементы (кроме указанных или фоновых элементов) наезжают на другие элементы, хотя во всех дизайнах между ними есть отступ: -2.
Выставляем Contact Us на 1200px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:
- Отступы между элментами меню в хедере: -1.
- Отступы между иконками соцсетей в хедере: -1.
- Расположение элементов в блоке
Get in touch
: -1. - Расположение кнопки
send message
в блокеGet in touch
: -1. - Отступы между логотипами в футере: -1.
- Отступы между элментами меню в футере: -1.
- Отступы между именами школ и автора
©
в футере: -1. - Отступы между иконками соцсетей в футере: -1.
Выставляем Contact Us на 640px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:
- Меню не преобразовано в бургер меню в хедере: -1.
- ❗ Хедер не стал фиксированным: -1.
- Расположение элементов в блоке
Get in touch
: -1. - Расположение кнопки
send message
в блокеGet in touch
: -1. - Отступы между логотипами в футере: -1.
- Отступы между элментами меню в футере: -1.
- Отступы между именами школ и автора
©
в футере: -1. - Отступы между иконками соцсетей в футере: -1.
Выставляем Contact Us на 320px. Смотрим отличия (> 10px) и снимаем баллы, если нарушены следующие пункты:
- Нет бургер меню в хедере: -1.
- Расположение кнопки
send message
в блокеGet in touch
: -1. - Расположение и отступы между логотипами в футере: -1.
- Отступы между элментами меню в футере: -1.
- Отступы между иконками соцсетей в футере: -1.
- Расположение и отступы между именами школ и автора
©
в футере: -1.
Пошагово выполняем следующие действия:
- Растягиваем страницу на ширину больше 1920px, либо уменьшаем масштаб.
- Изменяем ширину страницы до размеров от 1919px до 1201px.
- Изменяем ширину страницы до размеров от 1199px до 641px.
- Изменяем ширину страницы до размеров от 639px до 321px.
- Меньше 320px - не смотрим!
И оцениваем:
- В ходе изменения размера появляется горизонтальная полоса прокрутки: -4.
- Отсуствует хотя бы один элемент (кроме указанных или фоновых элементов), или есть лишний: -2.
- Есть элементы (кроме указанных или фоновых элементов), которые обрезаются или выходят за край экрана, хотя в дизайне они вписаны в границы: -2.
- В какой-либо момент, элементы (кроме указанных или фоновых элементов) наезжают на другие элементы, хотя во всех дизайнах между ними есть отступ: -2.
Добавление JavaScript.
Максимальный балл: 80
-
Проверять функционал на оценку будем только для единственной ширины в промежутке от 1200px до 1920pх. Значит, это будет та часть, которая задана до перехода media query на дизайн 640px и меньше. Масштабировать браузер не нужно, в случае, если окно браузера удовлетворяет условию ширины.
-
Проверять и оценивать качество дизайна не будем.
- Модальное окно (попап) по нажатию на кнопку Donate now или Donate for volunteers.
- По нажатию кнопки, по центру текущего расположения окна браузера, появляется новое модальное окно, а остальной задний фон становится с полупрозрачным затемнением (или эффектом блюр). Примеры окон приведены в дизайне под названием Pop up.
- Закрытие попапа будет происходить по нажатию на крестик в правом верхнем углу, или по затемненной области вне попапа.
Описание попапов
Простая задача создания модального окна
Статья на русском о модальных окнах - При нажатии на кнопку с суммой или на кнопку Another Amount будет переход на другое окно Make your donation.
- Модальное окно (попап) Make your donation.
- По нажатию кнопки в блоках Quick donate, возле поля $ Donation Amount, по центру текущего расположения окна браузера, появляется новое модальное окно, а остальной задний фон становится с полупрозрачным затемнением (или эффектом блюр). Примеры окон приведены в дизайне под названием donation form pop up step 1.
- Если была введена цифра, в поле $ Donation Amount, то это же число должно попасть в поле other amount. Если поле было пустое, то подсвечивается первый элемент $10.
- Если случился переход с предыдущего модального окна, то выбирается элемент с соответствующей суммой, или фокусируется поле other amount.
- Поле other amount должно иметь ограничение в 4 символа.
- Поле for special pet делается в виде select-option. Может содержать лишь 4 животных из основного списка.
- Нажатие на кнопку Next переводит нас на следующую страницу окна. Каким образом это сделано значения не имеет. Важно, что при нажатии кнопки Back, заполненные поля остаются с теми же введенными данными. Вариантов реализации много: прятать/показывать содержимое формы, не удаляя до закрытия попапа; либо переключать окна полностью с сохранением значений в переменных/объектах. При переходе на следующую страницу формы, внизу слева увеличивается счетчик.
- Поле Credit Card Number ограничено 16 символами.
- Поле CVV ограничено 3 символами.
- Поле Expiration Date Month делается через select-option, и содержит числа месяца, т.е. числа 01 - 12.
- Поле Expiration Date Year делается через select-option, и содержит значения текущего и 5 следующих лет, т.е. числа 21 - 26.
- После заполнения всех полей, помеченных звездочкой кнопка complete donation становится активной. При ее нажатии попап закрывается. Можно добавить alert, или всплывающую подсказку с благодарностью "Thank you for your donation".
- Карусель в блоке meet some our Pets.
- Должно происходить перелистывание блоков вправо/влево по нажатию на соответствующую кнопку. Т.е. последовательная генерация и удаление блоков, либо замена на уже существующие и перестановка их вперед и назад.
Видео: карусель со стрелочками на чистом js
Статья: карусель со стрелочками на чистом js
Пример: карусель со стрелочками на чистом js
Базовое слайдшоу, в том числе автоматическое - Перелистывание должно двигать позицию хотя бы 2х элементов (1 колонки). Но также смещение можно сделать и на большее количество элементов, на 4 или 6. Важно, что количество карточек животных ограничено, и соответственно нужно либо при завершении элементов перебрасывать нас в начало списка (в стартовую позицию), либо на краях карусели отключать кнопки вправо/влево. Карточек должно быть 16 штук, они могут повторяться, нужно добавить лишь количество.
- Автоматическая карусель в блоке Testimonials.
- Должно происходить перелистывание блоков с отзывами автоматически, каждые 15 секунд справа-налево.
Пример автоматической карусели на чистом js, с наличием стрелок и точек-переключателей
Автоматическая карусель с перелистыванием по 1 элементу, с наличием элементов управления - При нажатии на отзыв, перелистывание должно остановиться на 60 секунд, затем продолжиться снова каждые 15 секунд.
- При нажатии стрелок вправо/влево таймер должен сбрасываться и стартовать снова через 60 секунд.
- Блок может перелистываться целиком. Но также, отзывы могут перелистываться по 1 колонке (2 элемента), это не будет считаться ошибкой.
- Карта.
- Нажатие на иконку животного, должно переводить нас на соответствующую страницу животного. Или может ничего не делать, если животного нет среди обязательных.
- Сайдбар.
- Нажатие на кнопку вправо будет раскрывать меню с информацией. Кнопка меняется на кнопку влево.
- Нажатие на кнопку влево будет скрывать меню с информацией. Кнопка меняется на кнопку вправо.
- Нажатие на кнопку вниз будет перелистывать животных снизу вверх. При этом стоит добавить еще 4 животных, чтобы их стало 8. Картинки можно взять с карты. В качестве описания можно использовать генератор случайного текста.
Генератор текста - Перелистывание может быть по 1 элементу, а может сразу по 4.
- Карусель в блоке more live views.
- Работоспособность карусели по нажатию на стрелки вправо/влево проверяться не будет, и баллы соответственно сниматься не будут, если карусель не активна.
- При нажатии на видео (сам элемент, картинку), основное видео должно замениться на новое. А видео из основного блока live cams появиться в списке в more live views, таким образом не разрушая общее количество элементов.
- Всего 7 элементов видео в карусели, 8-й элемент в основном блоке live cams. Они могут быть одинаковыми, могут быть разными. При неактивной карусели будет видно лишь 3 из них.
🚧🚧🚧🚧
- Открываем окно брузера на всю ширину экрана. Если оно больше 1920px, то уменьшаем до 1920px, или меньше, но не менее 1200px. Если окно меньше 1200px, то увеличиваем до 1200px, или больше, но не более 1920px.
- При проверке, отклоения элементов или блоков от дизайна не учитываем, кроме элементов, которые указанны в ТЗ, и баллы за ошибки дизайна не снимаем.
- В разделе Zoos достаточно сделать проверку только одной страницы. Например, страницы панды.
- Баллы в рамках одной задачи не могут опуститься ниже 0. Например, в задаче указано +10, а в ходе проеверки вы насчитали -18. Тогда, выходное количество баллов, которое поставим за задачу, будет 0.
- Модальное окно (попап) Together we care... сделано и реагирует на нажатие кнопок Donate now или Donate for volunteers +10. Баллы снимаем, если:
- Закрытие попапа не происходит по нажатию на затемненную область вне попапа. -5.
- При нажатии на кнопку с суммой или на кнопку Other Amount не происходит переход на другое окно Make your donation. -5.
Также, баллы снимаем если есть стилевые ошибки, только указанные ниже: - Область за границами модального окна не затемнена или не размыта. -2.
- Попап не центрирован в окне браузера. -2.
- Отсутствие крестика в верхнем правом углу, или хотя бы одной из кнопок с суммой. -2.
- Модальное окно (попап) Make your donation сделано и открывается через нажатие на кнопку с суммой или на кнопку Another Amount в окне Together we care, или нажатием на кнопку рядом с полем $ Donation Amount +30. Баллы снимаем, если:
- Нажимаем на кнопку рядом с пустым полем $ Donation Amount, и смотрим, чтобы была подсвечена первая кнопка суммы $10. Если она не подсвечена -5.
- С момента загрузки, в поле $ Donation Amount вводим значение "5" (или любое другое), это же число должно попасть в поле other amount. Если при этом сумма совпадает с одной из кнопок, то может быть подсвечена кнопка с соотвествующей суммой. Если ни поле не заполнено, ни кнопка с соотвествующей суммой не подсвечена -5.
- С момента открытия Together we care, выбираем сумму и нажимаем кнопку с ней. При переходе на Make your donation, кнопка с соотвествующей суммой должна быть подсвечена. Если не подсвечена, или поле other amount не фокусируется, при нажатии на Other Amount -5.
- Нажатие на кнопку суммы может вводить эту сумму в поле other amount, а может и не заполнять поле. Ни то ни другое не ошибка, баллы не снижаем.
- Поле other amount должно иметь ограничение в 4 символа. Проверяем, введя значение "9999", и пробуем добавить еще цифры. Если получается ввести еще цифры -2. При этом, если вводятся также буквы или символы - это не ошибка, баллы не снимаем.
- Нажимаем поле for special pet, и смотрим выпадающие варианты. Если вариантов всего 3 или меньше -2.
- Нажатие на кнопку Next не переводит нас на следующую страницу окна -5.
- При этом, счетчик внизу не увеличил значние -2.
- Нажатие на кнопку Back не переводит нас на предыдущую страницу окна, или заполненые поля потеряли свои введенные значения -5.
- При этом, счетчик внизу не уменьшил значние -2.
- Поля Credit Card Number и CVV не имеют ограничений -2.
- Поля Expiration Date Month и Year не содержат требуемых значений -2.
- Кнопка complete donation не становится активной после верификации хотя бы на непустые значения -5. Если верификация сделана с необходимыми условиями ввода 16 цифр в поле Credit Card Number и 3 цифры в поле CVV - это наоборот, правильно, и ни в коем случае не ошибка, баллы не снижаем.
- Карусель в блоке meet some our Pets сделана и реагирует на нажатие кнопок вправо/влево +10. Баллы снимаем, если нарушены следующие пункты:
- С момента загрузки, нажимаем несколько раз кнопку "вправо", хотя бы 5 раз, смотрим чтобы карточки (все, или одна колонка) перелистывались. Если перелистываний (кроме граничных условий) не происходит -5.
- С момента половжения после первого пролистывания, нажимаем кнопку "влево" столько раз, сколько до это нажимали кнопку "вправо". Если обратных перелистываний (кроме граничных условий) не происходит -5.
- Автоматическая карусель перелистывает блоки с отзывами автоматически в блоке Testimonials +10. Баллы снимаем, если:
- Интервал отличается от 15 секунд более чем на 5 секунд. -5.
- Перелистывание должно происходить справа-налево. Однако, если отзывы будут перелистываться слева-направо, баллы не снимаем.
- При нажатии на отзыв, или стрелки вправо/влево, таймер не остановился, или не возобновился через 60(+-5) секунд. -5.
- Сайдбар раскрывается и скрывается по нажатию +15. Баллы снимаем, если:
- Нажатие на кнопку вправо не раскрывает меню с информацией, или кнопка не меняет иконку на стрелочку в другую сторону -5.
- Нажатие на кнопку влево не раскрывает меню с информацией, или кнопка не меняет иконку на стрелочку в другую сторону -5.
- Нажатие на кнопку вниз не перелистывает животных (по одному или все 4) -5.
- Карусель в блоке more live views существует и реагирует на нажатие +5. Баллы снимаем, если:
- С момента загрузки, при нажитии на картинку видео в блоке more live views, этот элемент не становится на место основного видео, или основное видео не становится второстепенным элементом в блоке more live views -5.
🚧🚧🚧🚧