(1)
Внизу экрана нужно сделать меню из 6 пунктов в виде горизонтальной полосы с ссылками. При уменьшении ширины окна до пределов, когда текст в них уже не вмещается, полоса ссылок должна становиться в два ряда по 3 ссылки.
При прокрутке полоса уезжает вверх со страницей, т.е. она не прикреплена к низу экрана.
Полоса горизонтальной прокрутки не появляется при ширине видимого поля 480 пикселей и шире
Если контента в первом экране много или разрешение экрана маленькое, то полоса ссылок, как и весь контент ниже, должна съехать ниже первого экрана (вытесняется контентом и не перекрывает его).
(2)
Три блока, наполняемые контентом (заголовок, картинка, текст), должны располагаться по центру по ширине и быть резиновыми с задаваемой минимальной шириной, например мин.320 пкс (я должен иметь возможность просто поменять этот минимальный размер, например в CSS). При уменьшении ширины окна блоки сжимаются, а после достижения минимального размера, начинают перескакивать по одному вниз, при этом оставаясь центрированными по ширине в каждом ряде (например, сверху 2 блока, а под ними ещё 1). При перескоке блока или блоков ширина всех блоков остаётся одинаковой (можно растянуть под свободное место, можно оставить в минимальной ширине). Блок имеет заголовок по центру, картинку, прижатую к левому краю и блок текста, который может быть как по центру, так и прижатым к краю или краям.
Размеры этих 3 блоков я должен иметь возможность менять без серьёзных переписываний кода (например, с мин. 320 на мин. 400). Лучше сразу сделать 2 варианта – на 320 и на 400 пикселей для блока, чтобы мне были наглядней места изменений в коде.
(3)
Текст <p> (вне блоков и первого экрана) резиновый и должен иметь 1% отступа по краям, но при большой ширине экрана он не должен быть шире 1000 пикселей (отступы по краям увеличатся).
При этом, если для <p> присвоить класс, то должна быть возможность форматировать его иначе (чтобы скрипт, если он потребуется, не влиял на все без исключения <p>, которые например, находятся на первом экране или в блоках с шириной 300 пкс). Текст <p> не обрамляется никакими <div> и для нужного форматирования должно быть достаточно написать <p> без класса (допустимо делать <p> с классом, но лучше без). Списки <li> должны форматироваться также как и <p> (границы по краям, максимум 1000 пкс в ширину).
(4)
Блок видео (Ютуб) находится по центру и содержит блок с видео 720р, если разрешение дисплея позволяет вместить данный блок видео. При уменьшении ширины поля для сайта, пустые поля по краям блока видео начинают уменьшаться, а после того, как упрутся в края блока видео, блок начинает уменьшаться, оставаясь во всю ширину сжатого окна браузера или экрана с невысоким разрешением. Либо блок уменьшается ступенями в соответствии со стандартными размерами блоков Ютуб. Поток видео не должен идти в 720р, если окно стало маленьким и позволяет грузить видео в другом разрешении. Не обязательно делать, чтобы поток видео менялся динамически при изменении ширины окна браузера – достаточно, чтобы это происходило при новой загрузке (перезагрузке/обновлении страницы с новой шириной).
Если видео имеет максимальное разрешение менее 720р, то блок 720p грузиться не должен, а должен грузиться максимально возможный с учётом максимального размера видео.
(5)
Я должен иметь возможность дублировать элементы на странице, например, сделать не 1 блок видео, а 3, и любое количество абзацев <p>. Не дублируется только меню.
Перестановка элементов (<p>, блоки видео, 3 блока с контентом) не должно рушить вёрстку.
По возможности реализация через CSS с минимумом скриптов. Желательно валидный код, но не обязательно.
CSS надо расположить в самой странице (а не выносить в файл) и подписать (комментировать) некоторые элементы.
Скрипт надо комментировать подробней, чем CSS.
Под IE6 и IE7 можно не подгонять, но на основных браузерах современных смартфонов вёрстка не должна рассыпаться, при этом допустимо несколько разное отображение в разных браузерах, но без поехавшего дизайна.
Более подробное ТЗ приложено отдельным файлом.
P.S. Задание можно несколько скорректировать, готов выслушать предложения по изменению (облегчению) ТЗ.