Skip to content

Latest commit

 

History

History
49 lines (31 loc) · 5.47 KB

readme.md

File metadata and controls

49 lines (31 loc) · 5.47 KB
Raw

[----» Online Demo «----]

Deadline Project name
20.10.2019 23:59 portfolio

Homework: Portfolio

Это одностраничный макет, который будет иметь ссылки на 2 предыдущих ваших проекта. И это творческое по дизайну задание. Значит, что оцениваться внешний вид не будет. Будет оцениваться только функциональная часть приложения.

Техническое задание

  1. В папку projects в корне текущего проекта положить файлы html и css проектов theyalow и repair-design-project, в соотвествующие по имени папки. В дальнейшем, реализовать переходы на страницы html этих проектов через ссылки, и обратно.
  2. Допускается использование стилистических бибилиотек, наподобие bootstrap, material design.
  3. Допускается любое синтаксически правильное наименование классов. Рекомендуется БЭМ-нотация.
  4. Допускается использование специализированных библиотек для создания слайдера / свайпера. Однако
  5. Запрещается пользоваться фреймворками, а также библиотеками типа jquery, lodash. Используем "ванильный" JavaScript.

Сделать страницу, представленного ниже вида:

Portfolio 01

  1. Сделать в заголовке Аватар, Имя Фамилию, добавить ссылки на соц сети.
  2. Далее сделать выпадающую панель (expansion panel), где указать места и года обучения в виде списка.
  3. Далее сделать слайдер для десткопа, и свайпер для мобильного разрешения.

Релизовать слайдер проектов, на каждом элементе которого будет описание и картинка проекта:

Portfolio 02

  1. На элементе слайдера будет располагаться описание проекта (какие ключевые моменты разработки, на ваш взгляд, в них затронуты). А также картинки, при нажатии на которые, будет совершен переход на страницу проекта.
  2. На разрешении для десктопа - безграничный слайдер, который будет совершать переходы по нажатию на стрелки "вправо", "влево".
  3. На разрешении для мобильных - безграничный свайпер, который будет совершать переходы по пролистыванию пальцем вправо и влево. При этом сам проект будет представлять из себя картинку и кнопку сверху, при нажатии на которую будет показываться описание проекта.

После перехода на страницу, помимо самой верстки, будут добавлены 2 фиксированные кнопки для десктоп-версии:

Portfolio 03

  1. Когда открываем страницу, она находится в режиме десктопа.
  2. При нажатии на кнопку "Mobile" - вид меняется на мобильный. Например, макет оборочивается в контейнер шириной 375px, и центрируется, а по бокам появляются затемненные полосы. Имя кнопки меняется на "Desktop".
  3. При нажатии на кнопку "Desktop" - вид меняется на десктопный. Макет начинает занимать прежнюю область экрана. Имя кнопки меняется на "Mobile".
  4. ! Если разрешение экрана меньше мобильного вида (например, открыто с мобильного телефона), то кнопка переключения вида Destop - Mobile должна отсутствовать!
  5. При нажатии на кнопку "Back" - возвращаемся на основную страницу Portfolio.

ТЗ будет дорабатываться на предмет критериев оценки для менторов и учета замечаний.

Успехов!