Все страницы являются адаптивными и кроссбраузерными
6 логотипов.
использовать только CSS (less/sass)
- Сверстать блок, в котором 6 логотипов выстроены в ряд с равным расстоянием друг от друга (но крайние элементы приклеены к границам блока) и отцентрированы по горизонтали
- При разрешении менее 700 пикселей логотипы выстраиваются в 2 строки по 3 элемента
- При разрешении менее 600 пикселей – 3 строки по 2 элемента
- При разрешении менее 400 пикселей – 6 строк по одному элементу
4 блока, которые идут друг за другом по вертикали. В каждом из блоков содержится картинка и текст. В четных блоках картинка слева, текст справа. В нечетных блоках – наоборот, текст слева, а картинка справа. Картинка занимает всю высоту блока (400 пикселей). Текст отцентрирован по вертикали блока (не зависит от количества текста)
использовать CSS FLEX
При разрешении менее 600 пикселей верстка выстраивается в вертикальную последовательность картинка, затем текст (не зависимо от четности блока)
Выполнить задание 2 без использования CSS FLEX
4 блока (изображение + наложенный текст)
использовать CSS, Pure JS, адаптив
Сделать примитивное слайдшоу из заданных блоков. Автоматическое переключение раз в 2 секунды, по нажатию на блок – переключение на следующий слайд
- поддержка перелистывания слайдов смахиванием (touch swipe) для устройств с сенсорным экраном и перетаскиванием мышью – разрешает листать слайды свайпом и перемещением курсора мыши при зажатой левой кнопки мыши;
- осуществлена остановка автоматической смены слайдов при поднесении к нему курсора
хэдер, в котором слева логотип (можно взять любой из файлов задания 1), а справа 2 главных элемента меню, в одном из них – 3 подэлемента
использовать CSS, Pure JS, для анимаций только CSS
- Сделать приклеенный хэдер, в самом верхнем положении высота 50 пикселей, цвет фона белый, цвет текста черный. При скролле с самого верхнего положения страницы – высота хэдера становится 30 пикселей (с анимацией), логотип становится меньше, цвет фона черный, цвет текста белый
- Сделать дропдаун меню в хэдере - верхний элемент составного пункта не кликабелен, элементы подменю кликабельны. Раскрытие по наведению, в мобильной верстке – по нажатию
футер
использовать CSS, адаптив
Приклеить футер к низу страницы
несколько блоков с якорями, верхнее меню
использовать CSS, Pure JS
По нажатию на ссылку в верхнем меню скроллить с анимацией страницу до соответствующего якоря
страница контактов компании
использовать CSS, Pure JS
вставить google карту, шириной во всю страницу, высотой 400 пикселей с пином на адрес компании: Москва, Столярный Переулок 3к13
блок, высотой 400 пикселей, шириной во весь экран. Картинка для фона.
использовать CSS
Внутри блока прописать картинку фоном, при адаптивной верстке чтобы изображение приклеивалось к левому краю (всегда виден монитор)
использовать CSS
Сделать логотип цвета #00b19d, не меняя исходное изображение, не добавляя background и новых изображений поверх него с помощью
или псевдоэлементов
скриншоты с экрана iPad, видео
использовать библиотеку anime.js
Запрограммировать анимацию, схожую с тем, что на видео (можно упростить элементы типа «тач по экрану»), используя библиотеку для анимаций и статические изображения
блок с формой, содержащей 3 элемента Input и кнопку
использовать CSS, Pure JS
- Сделать из блока диалоговое окно, которое открывается с произвольного элемента на странице и закрывается по крестику на попапе. Использовать перекрывающий оверлэй
- Сделать проверку данных в форме при нажатии кнопки “отправить”: 1 поле проверяется на email формат, второе поле на текст с минимальной длиной 3 символа. Если проверка не пройдена – подсветить красным Input с ошибкой. Если ошибок нет – закрыть форму и написать на странице «успех»
блок с формой, содержащей 3 элемента Input и кнопку
использовать CSS, Pure JS
- Сделать из блока диалоговое окно, которое открывается с произвольного элемента на странице и закрывается по крестику на попапе. Использовать перекрывающий оверлэй
- Сделать проверку данных в форме при нажатии кнопки “отправить”: 1 поле проверяется на email формат, второе поле на текст с минимальной длиной 3 символа. Если проверка не пройдена – подсветить красным Input с ошибкой. Если ошибок нет – закрыть форму и написать на странице «успех»
- добавлены описания ошибок при вводе значений в поля формы;
- кнопка становится активна, только когдв все поля формы заполнены верно;
- в функцию валидации заложена масштабируемость, на случай если настранице появятся другие формы.
- всплывающее окно закрывается также по нажатию на кнопку ESC и при клике на оверлей.