rolling-scopes-school / support

15 stars 3 forks source link

Cross-Check museum - dicoun #296

Closed dicoun closed 3 years ago

dicoun commented 3 years ago

2) тринадцать кнопок button (четыре из них в секции Video, пять в секции Tickets, по две - стрелки слайдера и плейлиста)

3) три тега input type="radio" (в секции Tickets)

4) два тега input type="number"(в секции Tickets)

5) два тега input type="range" (громкось и прогрес-бар видео)

6) секция Visiting

7) секция Explore

8) секция Video

9) секция Tickets

10) секция Contacts

11) форма плавно выдвигается слева при открытии и плавно возвращается назад при закрытии. В открытом состоянии под формой есть полупрозрачный overlay, который занимает весь экран. Форма и overlay прокручиваются вместе со страницей

12) форма открывается при клике по кнопке Buy Now в секции Tickets и закрывается кликом по иконке с крестиком в верхнем правом углу или кликом по overlay

13) при вёрстке формы используются следующие элементы: form, input type="date", input type="time", input type="text", input type="email", input type="tel", input type="number", select

14) вёрстка формы соответствует макету

15) иконки добавлены в формате .svg. SVG может быть добавлен любым способом. Обращаем внимание на формат, а не на способ добавления

16) переключаются радиокнопки в блоке Tickets, одновременно может быть выбрана только одна кнопка

17) в блоке Contacts правильно указанны ссылки на почту mailto и на телефон tel

18) интерактивность при наведении карточек в секции Visiting предусматривает плавное растягивание подчёркивания заголовка карточки на всю ширину карточки

19) можно передвигать ползунки громкости и прогресс-бара видео, при этом цвет шкалы до и после ползунка отличается и соответствует макету

20) кликами по кнопкам + и - в секции Tiskets можно менять количество билетов Basic и Senior от 0 до 20

21) кнопке "Book" в форме покупки билетов добавлен ripple-эффект. Демо: https://50projects50days.com/projects/button-ripple-effect/

Частично выполненные пункты: 1) семь заголовков h2 (по количеству секций) 1.5 балла (6 заголовков h2) 2) блок header 4 балла (погрешности верстки) 3) секция Welcome 3 балла (погрешности верстки) 4) секция Gallery 4 балла (погрешности верстки) 5) блок footer 3.5 балла 6) фоновый цвет каждого блока и секции тянется на всю ширину страницы 1 балл (параллакс не тянется) 7) при кликам по кнопке Discover the Louvre и карточкам секции Visiting открываются полноэкранные панорамы Google Street View встроенные в страницы вашего сайта при помощи iframe 2 балла (не реализовано для карточек) Выполненные пункты: 1) Вёрстка валидная. Для проверки валидности вёрстки используйте сервис https://validator.w3.org/. Валидной вёрстке соответствует надпись "Document checking completed. No errors or warnings to show."

2) header, main, footer

3) семь элементов section (по количеству секций)

4) только один заголовок h1

5) два элемента nav (основная и вспомогательная панель навигации)

6) три списка ul > li > a (основная и вспомогательная панель навигации, ссылки на соцсети)

7) для всех элементов img указан обязательный атрибут alt

8) добавлен favicon

9) для построения сетки используются флексы или гриды

10) при уменьшении масштаба страницы браузера вёрстка размещается по центру, а не сдвигается в сторону

11) расстояние между буквами, там, где это требуется по макету, регулируется css-свойством letter-spacing

12) в футере добавлены ссылки на соцсети. Круглая граница вокруг иконок соцсетей выполнена при помощи css

13) плавная прокрутка по якорям

14) параллакс

15) изменение стиля интерактивных элементов при наведении и клике. Интерактивность включает в себя не только изменение внешнего вида курсора, например, при помощи свойства cursor: pointer, но и другие визуальные эффекты – изменение цвета фона или шрифта, появление подчёркивания и т.д. Если в макете указаны стили при наведении и клике, для элемента указываем эти стили, если в макете стили не указаны, реализуете их по своему усмотрению, руководствуясь общим стилем макета

16) обязательное требование к интерактивности: плавное изменение внешнего вида элемента при наведении и клике не влияющее на соседние элементы

17) интерактивность при наведении иконок социальных сетей в футере предусматривает изменение цвета иконки и круглой границы вокруг иконки на золотистый

18) при перезагрузке (обновлении) страницы картины в блоке Galery отображаются в рандомном порядке

*Балл за кросс-чек: 65 баллов

dicoun commented 3 years ago

Еще раз перепроверила работу и решила закрыть issue.