Сверстать 4 страницы для одного сайта (в похожем стиле), единые шапка и подвал. Верстка должна быть адаптивной, чтобы на всех мобильных устройствах выглядело все едино. Сверстать по стандартам bootstrap, чтобы была доступна разметка, отступы, все теги и т.д. Все теги должны быть прописаны и показаны вместе с разметкой на тестовой странице (ниже подробнее об этой странице). Подключить иконки fontawesome – они должны подключаться в любом месте по их стандартам, включая изменение цвета и размера.
Далее подробнее об элементах:
1. В шапке в верхней плашке могут быть активные пункты, показать их на примере одного из пунктов (но должно работать на любом).
2. Сама плашка верхнего меню должна быть залипаемая вверху, при прокрутке экрана вниз. (Это плашка с корзиной)
3. В поле "поиск" используется "живой поиск", надо его показать в соответствие с макетом.
4. У изображений-товаров есть лейбл, который надо показать в списке товаров и на странице товара – Акция. Должно просто прописываться тегом span.
5. При нажатии на картинку (на странице товара) показывать большую версию картинки подгоняемую под размер экрана (если картинка большего размера) и с крестиком для закрытия окна.
6. Телефоны в шапке, подвале и на странице Контакты должны быть "нажимаемыми" доступными для звонка с мобильных устройств
7. На странице товара и в списке, при нажатии на купить выводить окно в котором писать "Товар добавлен к заказу" и 2 кнопки – Оформить заказ и продолжить покупки. При этом в сессию должно записываться добавление товара и обновляться блок в самом верху, где писать в Корзине 1 товар. (Тут с элементами jquery)
10. Списки должны быть сверстаны с учетом возможности создания вложенных списков, чтобы они наследовали отступы (это для страницы Тест)
11. Фавиконку прописать
12. Тестовая страница:
- показать все элементы главной, но чтобы можно было главную картинку в шапке убрать и все показывалось бы корректно.только в центральной части показать разметку по ячейкам
- потом теги H1 – H6
- текст с параграфом и обычным переносом строки (у первого должны быть отступы сверху и снизу) – P BR
- текст в параграфе с тегами I EM B A STRONG
- показать иконки fontawesome стандартных пару, увеличенных пару и с измененным цветом, стандартный цвет – оранжевый, как в макетах, при наведении серый как у текстов сайта
- BLOCKQUOTE – цитата, PRE, списки UL и OL
- таблица с тегами TH TR с чередованием подсветки строк. Все это должно работать для стандартных тегов.
Все блоки и вставки в коде снабдить комментариями.
Желательно:
1. Провести тест страницы на всех браузерах и устройствах (через сервис) и приложить скриншоты.
2. Провести тест сверстанной главной страницы на
– там показатель должен быть близким к 100%.