Deadline | Project name |
---|---|
20.10.2019 23:59 | portfolio |
Это одностраничный макет, который будет иметь ссылки на 2 предыдущих ваших проекта. И это творческое по дизайну задание. Значит, что оцениваться внешний вид не будет. Будет оцениваться только функциональная часть приложения.
- В папку projects в корне текущего проекта положить файлы html и css проектов theyalow и repair-design-project, в соотвествующие по имени папки. В дальнейшем, реализовать переходы на страницы html этих проектов через ссылки, и обратно.
- Допускается использование стилистических бибилиотек, наподобие bootstrap, material design.
- Допускается любое синтаксически правильное наименование классов. Рекомендуется БЭМ-нотация.
- Допускается использование специализированных библиотек для создания слайдера / свайпера. Однако
- Запрещается пользоваться фреймворками, а также библиотеками типа jquery, lodash. Используем "ванильный" JavaScript.
- Сделать в заголовке Аватар, Имя Фамилию, добавить ссылки на соц сети.
- Далее сделать выпадающую панель (expansion panel), где указать места и года обучения в виде списка.
- Далее сделать слайдер для десткопа, и свайпер для мобильного разрешения.
- На элементе слайдера будет располагаться описание проекта (какие ключевые моменты разработки, на ваш взгляд, в них затронуты). А также картинки, при нажатии на которые, будет совершен переход на страницу проекта.
- На разрешении для десктопа - безграничный слайдер, который будет совершать переходы по нажатию на стрелки "вправо", "влево".
- На разрешении для мобильных - безграничный свайпер, который будет совершать переходы по пролистыванию пальцем вправо и влево. При этом сам проект будет представлять из себя картинку и кнопку сверху, при нажатии на которую будет показываться описание проекта.
После перехода на страницу, помимо самой верстки, будут добавлены 2 фиксированные кнопки для десктоп-версии:
- Когда открываем страницу, она находится в режиме десктопа.
- При нажатии на кнопку "Mobile" - вид меняется на мобильный. Например, макет оборочивается в контейнер шириной 375px, и центрируется, а по бокам появляются затемненные полосы. Имя кнопки меняется на "Desktop".
- При нажатии на кнопку "Desktop" - вид меняется на десктопный. Макет начинает занимать прежнюю область экрана. Имя кнопки меняется на "Mobile".
- ! Если разрешение экрана меньше мобильного вида (например, открыто с мобильного телефона), то кнопка переключения вида Destop - Mobile должна отсутствовать!
- При нажатии на кнопку "Back" - возвращаемся на основную страницу Portfolio.
Успехов!