Верстка сайта - 35 страниц и 3 разрешения экрана. Этап 1

Этап 1. Необходимо выполнить верстку Основного раздела сайта.

Особенности:

• 1 главная и 34 внутренних
• 3 разрешения экрана - 1280, 768, 320px
• сайт состоит из 5 разделов, страницы в которых отличаются оформлением фона и цветами текста/ссылок/кнопок и другой мелочью
• есть эскизы - http://piranja.info/tanistar_html_axure/, можно понажимать на кнопки в верхнем ряду в шапке и посмотреть, что происходит (вверху с эффектом slide появляется блок)
• есть превьюшки всех страниц в jpg - http://piranja.info/tanistar-preview.zip

• кроссбраузерная верстка на div' ах, БЕЗ совместимости с устаревшими браузерами
• все меню на css, без скриптов
• каждый элемент меню оформлен как ссылка A внутри элемента LI, активный элемент LI (Главная) имеет класс .active (внутри элемента UL должны быть только теги LI и тег A, никаких дополнительных тегов!)
• нестантартные шрифты — через Google fonts  / font-face
• стандартные требования к информационным блокам с заголовком:

  -div, у него указывается класс*, сразу же внутри DIV идет H3 — заголовок блока, сразу за H3 идет div — он обрамляет контент блока, вот так:

  -

  заголовок

  контент блока

  -цвет текста в блоке, фон блока, рамка и т.п., задается (*) классом div

  -заголовок блока h3 (есть не у всех блоков)

  -можем обсудить другой вариант, но все блоки должны быть стандартизированы

• лайки соцсетей вставить просто картинкой
• на страницах со списком элементов присутствует индикатор предзагрузки в gif (передам отдельно)
• принадлежность страницы к тому или иному разделу должно определяться классом body
• фоны разделов "Обучение" и "Интернет-магазин" повторяющиеся по вертикали
• первый заголовок на странице - всегда h1, подзаголовок - h2, заголовки блоков - h3
• пагинация - в идеале использовать разметку соответствующего виджета Bootstrap, пагинация должна быть всегда по центру вне зависимости от количества страниц в ней
• в интернет-магазине есть выбор цвета - кружок должен быть сделан с обводкой border'ом
• активное содержимое на страницах:

-слайдеры с 1 и с несколькими элементами на одном листе

-слайдер с 1 большой картинкой и множеством уменьшенных (Портфолио в свадьбах)

-шапка - блоки с эффектом slide

-табы или закладки

-аккордеон

-spotlight (эффект при наведении мыши на картинку - показывает лупу)

-tooltip - подсказка

• много перечисленного в п. 13 имеет соответствующие Bootstrap компоненты, было бы замечательно сделать на них
• активное содержимое на главной странице:

-навигация по блокам страницы (на главной с правого края приклеено меню, которое остается на этой позиции при скроллинге вниз)

-блок "Наши основные направления" элементы выезжают из центральной линии при скролле до них

-блок "Наши достоинства" - текстовые цифры быстро набегают как счетчик и останавливаются на указанной цифре

• активное содержимое на внутренних:

-левая колонка или сайдбар, при скроллинге вниз прилипает на фиксированной позиции