Yandex vacancy intern html

Installation

1. git clone [email protected]:dim2k2006/yandex-vacancy-intern-html-1.git

2. cd yandex-vacancy-intern-html-1

3. npm i && bower i

4. gulp build

To check production version

1. git clone [email protected]:dim2k2006/yandex-vacancy-intern-html-1.git

2. Open main.html file in folder «static»

Tasks

+ green color is for done tasks

- red color is for not done tasks

Task 1 (main)

+ Внешняя разметка, расположенная по центру окна колонка (далее — основная область разметки), шириной не более 800px и не менее 500px шириной. Если размер окна меньше 800px, то она занимает 100% от ширины окна. Если размер окна меньше 500px, то колонка остается 500px ширины, и появляется горизонтальный скроллбар. Страница вне основной области разметки имеет цвет #eee, внутри этой области — #fff.

+ Основная область разметки состоит из 4-х частей — шапка, правый сайдбар, подвал и основная область контента.

+ Шапка прикреплена к верху страницы, при скролле она «уезжает» вверх. Шапка имеет ширину 100% и высоту 50px. Снизу шапка имеет линию границы 1px толщиной цвета #999. 

+ Правый сайдбар имеет фиксированную ширину 300px. Сайдбар идёт от от шапки до подвала. Сайдбар имеет левую границу 1px толщиной цвета #ccc и отбрасывает тень только на область основного контента (не отбрасывает тень на фон вне основной области разметки, шапку и подвал). Параметры тени: радиус 15px, цвет #333, прозрачность 50%. Если контент сайдбара не вмещается по вертикали, он растягивает по вертикали основную область контента. 

+ Подвал прикреплён к низу окна, а не к низу страницы, при скролле он остаётся на месте. Подвал имеет ширину 100% и высоту 50px. Сверху подвал имеет границу толщиной 1px цвета #999.

+ Область контента занимает всё оставшееся свободное место. В случае, если контент не умещается в окне браузера по вертикали, у всего окна должен появляться скроллбар, не на области контента или внешней разметке. Область контента имеет высоту не менее 100% от высоты окна минус высота шапки и подвала (т.е. даже пустая страница должна занимать всю высоту окна).

+ При уменьшении размеров окна до 700px по ширине или меньше, сайдбар должен скрываться.

+ Сокрытие и появление сайдбара требуется анимировать в течении 250ms движением с затуханием скорости в конце и изменением прозрачности от полностью непрозрачного до полностью прозрачного состояния, и наоборот, в случае появления прозрачность должна меняться линейно по времени.

Task 2 (additional)

+ В шапке находится кнопка «Войти», при нажатии на которую должен открываться попап логина, его контент верстать не нужно. Попап имеет размеры, зависящие от внутреннего содержимого. Он должен быть расположен по центру страницы как по вертикали, так и по горизонтали. При открытии попапа остальная часть страницы (имеется в виду только основная область разметки) должна закрываться полупрозрачным слоем (цвет #fc0, видимость 10%), также должен пропадать вертикальный скроллбар и возможность скроллировать страницу. 

+ Сама страница при этом не должна терять текущее положение скролла. В попапе требуется сделать кнопку «Закрыть», которая должна соответственно закрывать попап и убирать полупрозрачный слой со страницы. Обработку нажатий на обе кнопки следует сделать с помощью Javascript, даже если есть возможность реализовать это вообще без скриптов. Внешний вид кнопок «Войти» и «Закрыть» значения не имеет. 

Task 3 (additional)

+ Для указанной выше вёрстки реализовать метод скрытия сайдбара, когда весь его контент находится выше области просмотра (когда контента в основной области значительно больше, чем в скроллбаре, и после скролла мы уходим ниже всего контента скроллбара). Следует учитывать следующие факторы:

+ После исчезновения сайдбара ширина контента увеличится, следовательно, высота контента уменьшится.

+ При резком изменении ширины и расположения текста на странице пропадает фокус.