1) Внизу первого экрана должна расположиться полоса меню (ссылок). Всего 6 ссылок. Ссылки должны быть оцентрированны (ссылки текстовые). При уменьшении ширины окна до пределов, когда текст в них уже не вмещается (959 пкс), полоса должна становиться в два ряда (адаптивная вёрстка) по 3 ссылки. При этом полоса по-прежнему располагается в первом экране и не уходит на второй, а ссылки центрируются.
При прокрутке полоса уезжает вверх со страницей, т.е. она не прикреплена к низу экрана.
При наведении на меню (полосу снизу) должен быть эффект нажатия – текст немного проседает и фон изменяет цвет и проседает тоже (нечто подобное на верхних ссылках: samsung-galaxy-s4.com). Возможно, ссылки будет красивее сделать в виде кнопок, т.е. сделать бордер.
Полоса горизонтальной прокрутки не появляется при ширине видимого поля 480 пикселей и шире (с 479 уже можно). Соответственно, ширина одной кнопки меню (480/3) не уже 160 пикселей, куда можно вписывать названия пунктов меню. В 2 строки меню становится не ранее, чем экран сузится до 959 пкс (160*6-1).
Если контента в первом экране много или разрешение экрана маленькое, то полоса ссылок, как и весь контент ниже, должна съехать ниже первого экрана (вытеснена контентом и не перекрывает его).
Ссылки должны индексироваться поисковыми роботами, и не должны быть в виде только скрипта.
2) Три блока, наполняемые контентом (заголовок, картинка, текст), должны располагаться по центру по ширине и быть резиновыми с задаваемой минимальной шириной, например мин.300 пкс (я должен иметь возможность просто поменять этот минимальный размер, например в CSS). При уменьшении ширины окна блоки сжимаются, а после достижения минимального размера, начинают перескакивать по одному вниз, при этом оставаясь центрированными по ширине в каждом ряде (например, сверху 2 блока, а под ними ещё 1). При перескоке блока или блоков ширина всех блоков остаётся одинаковой (можно растянуть под свободное место, можно оставить в минимальной ширине). Наполнение блоков контентом не должно влиять на их расстановку (сдвигать их по высоте, например). Блок имеет заголовок по центру, картинку, прижатую к левому краю и блок текста, который может быть как по центру, так и прижатым к краю или краям.
Размеры этих 3 блоков я должен иметь возможность менять без серьёзных переписываний кода (например, с мин. 300 на мин. 400). Лучше сразу сделать 2 варианта – на 300 и на 400 пикселей для блока, чтобы мне были наглядней места изменений в коде.
3) Текст <p> (вне блоков и первого экрана) резиновый и должен иметь 1% отступа по краям, но при большой ширине экрана он не должен быть шире 1000 пикселей (отступы по краям увеличатся).
При этом, если для <p> присвоить класс, то должна быть возможность форматировать его иначе (чтобы скрипт, если он потребуется, не влиял на все без исключения <p>, которые например, находятся на первом экране или в блоках с шириной 300 пкс). Текст не обрамляется никакими дивами и для нужного форматирования должно быть достаточно написать <p> без класса (в крайнем случае, можно делать <p> с классом). Списки <li> должны форматироваться также как и <p> (границы по краям, максимум 1000 пкс в ширину). Для придания тексту указанных характеристик не надо обёртывать <p> в <div> и создавать подобные сложные конструкции.
3.1) Ограничения ширины в 1000 пкс касаются только текста в <p> и <li>, и не влияют на другие элементы, такие как картинки, таблицы, блоки <div>.
4) Блок видео (Ютуб) находится по центру и содержит блок с видео 720р, если разрешение дисплея позволяет вместить данный блок видео. При уменьшении ширины поля для сайта, пустые поля по краям блока начинают уменьшаться, а после того, как упрутся в края блока видео, блок начинает уменьшаться, оставаясь во всю ширину сжатого окна браузера или экрана с невысоким разрешением. Либо блок уменьшается ступенями в соответствии со стандартными размерами блоков Ютуб. Поток видео не должен идти в 720р, если окно стало маленьким и позволяет грузить видео в другом разрешении. Не обязательно делать, чтобы поток видео менялся динамически при изменении ширины окна браузера – достаточно, чтобы это происходило при новой загрузке (перезагрузке/обновлении страницы с новой шириной).
Если видео имеет максимальное разрешение невысокое, то блок 720p грузиться не должен, а должен грузиться максимально возможный с учётом максимального размера видео.
---
Я должен иметь возможность дублировать элементы на странице, например, сделать не 1 блок видео, а 3, и любое количество абзацев <p>. Не дублируется только меню.
Перестановка элементов (<p>, блоки видео, 3 блока с контентом) не должно рушить вёрстку.
CSS надо расположить в самой странице (а не выносить в файл) и подписать (комментировать) некоторые элементы (банальные вещи типа цвета подписывать не надо), чтобы можно было легко найти и поменять минимальную ширину блоков и т.д. Скрипт надо комментировать подробней CSS.
Если с реализацией в какой-либо части могут быть сложности, то можно скорректировать ТЗ (до начала работ).