Верстка 3-х страниц Интернет магазина
Техническое задание (В приложении подробное ТЗ)
На верстку 3-x страниц
Общие требования:
• Минимальная ширина экрана: 1000px;
• Ширина страницы статичная;
• Фон резиновый (Картинка с природой в зависимости от разрешения экрана заполняет собой свободное пространство по бокам. Нижние углы фона должны быть прикреплены к низу страницы, то есть при увеличение контента страницы в высоту картинки с утками и рыбаком должны всегда оставаться снизу, а расстояние между верхней и нижней частью фона будет увеличиваться)
• Кросбраузерная верстка (Включая IE)
Логотип:
• Состоит из картинки и ссылки на сайт.
Блок шапка:
• Располагается в верхнем правом углу.
• Строка поиска – текстовое поле ввода строки запроса
• Регистрация / Авторизация – ссылка на соответствующие страницы
• Телефон – иконка и номера телефонов, номера должны быть текстом
• Корзина – иконка корзины, текст и кнопка перейти в корзину
Верхнее меню:
• Расстояние между пунктами должно растягиваться в зависимости от количества пунктов и их длина, иными словами меню должно расстягиваться на ширину страницы
• Должно быть реализовано через списки ul
• Должен выделяться активный пункт меню
Меню каталога товаров:
• Должно быть многоуровневым
• Должно быть реализовано через списки ul
• Должен выделяться активный пункт меню
• Если у пункта верхнего уровня есть подменю то при клике по этому пункту должно раскрываться подменю.
• Если есть активный пункт подменю (соответствующий класс), то подменю при открытие страницы должно быть раскрытым сразуже.
Блок «Рассчитать доставку»:
• Состоит из списка товаров в виде слайдера.
• Каждый товар состоит из Миниатюры, Цены, Кнопки добавления в корзину
• По умолчанию отображаются 2 элемента списка
• При клике на кнопку вверх и вниз список должен прокручиваться в соответствующую сторону.
• При наведении на кнопки вверх и вниз кнопки должны менять тональность
• При наведении на кнопку добавления в корзину цвет кнопки должен менять тональность
Футер:
• Состоит из дублирующего главного меню и контактной информации
Заголовки:
• Состоит из заголовка и иконки
• Текст заголовка должен быть именно текстом
На главной странице:
Карусель последних и топовых товаров:
• Состоит из списка товаров в виде карусели.
• Каждый товар состоит из Миниатюры, Названия, Цены, Кнопки добавления в корзину
• По умолчанию отображаются 3 элемента списка
• Прокрутка может происходить в автоматическом режиме, следующий товар показывается через 3 секунды
• Также прокрутка может быть с помощью прогресс бара, при перетягивании точки по линиии
• Внизу карусели прогресс бар
На странице каталога товаров:
Слайдер изображений:
• Все стандартно: Блок изображения, кнопки назад вперед, переключение слайдов по нижним круглым кнопкам и в автоматическом режиме
Блок списка товаров:
• Название списка товаров
• Блок сортировки
• Каждый товар состоит из Миниатюры, Названия, Цены, Кнопки добавления в корзину
• Пагинация страницы
На странице товара:
Информация о товаре:
• Главное изображение
• Описание
• Блок выбора вариантов
• Цена
• Кнопка добавления в корзину
Список миниатюр изображения:
Блок комментариев: