Создание шаблона страницы HTML с адаптивной вёрсткой.
Вёрстка обычной HTML-страницы без натягивания на движок.
Задание не жёсткое и может обсуждаться, если какие-то моменты сложно реализовать или, по мнению исполнителя, можно сделать лучше и проще.
По возможности реализация через CSS без скриптов.
Под IE6 и IE7 можно не подгонять. Под популярные мобильные браузеры надо подогнать.
1. Внизу первого экрана должна расположиться полоса меню (ссылок). Ссылки должны быть оцентрированны (ссылки текстовые). При уменьшении ширины окна до пределов, когда текст в них уже не вмещается, полоса должна становиться в два ряда. При этом полоса по-прежнему располагается в первом экране и не уходит на второй, а ссылки центрируются. При прокрутке полоса уезжает вверх со страницей, т.е. она не прикреплена к низу экрана. При наведении на меню (полосу) должен быть эффект нажатия (текст немного проседает и фон изменяет цвет и проседает тоже). Возможно, ссылки будет красивее сделать в виде кнопок, т.е. сделать бордер.
2. Блок видео (Ютуб) находится по центру и содержит блок с видео 1080р. При уменьшении ширины поля по краям блока начинают уменьшаться, а после того, как упрутся в края, блок начинает уменьшаться, оставаясь во всю ширину экрана. Поток видео не должен идти в 1080р, если окно стало маленьким и позволяет грузить видео в другом разрешении (обсуждаемый параметр).
3. Три блока, наполняемые контентом, должны располагаться по центру по ширине и быть резиновыми с задаваемой минимальной шириной, например мин.300 пкс. При уменьшении ширины окна блоки сжимаются, а после достижения минимального размера, начинают перескакивать по одному вниз, при этом оставаясь центрированными по ширине в каждом ряде (например, сверху 2 блока, а под ними ещё 1). При перескоке блока или блоков ширина всех блоков остаётся одинаковой (можно растянуть под свободное место, можно оставить в минимальной ширине). Наполнение блоков контентом не должно влиять на их расстановку (сдвигать их по высоте, например). Блок имеет заголовок по центру, картинку, прижатую к левому краю и блок текста, который может быть как по центру, так и прижатым к краю или краям.
4. Текст <p> (вне блоков) резиновый и должен иметь 1% отступа по краям, но при большой ширине экрана он не должен быть шире 1000 пикселей (отступы по краям увеличатся).
При этом, если для <p> присвоить класс, то должна быть возможность форматировать его иначе (чтобы скрипт, если он потребуется, не влиял на все без исключения <p>). Текст не обрамляется никакими дивами и для нужного форматирования должно быть достаточно написать <p> без класса (в крайнем случае можно делать <p> с классом). При некой малой ширине размер шрифта уменьшается (достаточно одной ступени понижения, а не плавного изменения размера при уменьшении) – обсуждаемый параметр. Уменьшение размера шрифта нужно на всей странице, а не только в блоках <p> без класса. Списки <li> должны форматироваться также как и <p> (границы по краям, максимум 1000 пкс в ширину, уменьшение размера шрифта при малой ширине окна).
5. CSS располагать в самой странице (а не выносить в файл) и подробно подписывать (комментировать). Если нужен скрипт, то тоже надо подробно его комментировать. Если скрипт большой, то комментировать стоит только ключевые переменные.
P.S. Задание можно упростить по многим параметрам, готов выслушать предложения по изменению ТЗ.
-------------------------- ЖДУ ПРЕДЛОЖЕНИЙ С ЦЕНАМИ ---------------------------