Team project | IceCream

Задача:

Розробка односторінкового сайту для компанії IceCream.

• Верстка адаптивна, точки перелому 320px, 768px, 1200px. Для мобільної версії сайту верстка респонсивна. Сайт повинен коректно переглядатися у всіх можливих розмірах вікна браузера та пристроях, починаючи з ширини 320px, як у портретній, так і в альбомній орієнтації.
• Верстка повинна бути провалідована на валідаторі - (https://validator.w3.org/, https://validator.w3.org/unicorn/)
• Забезпечити дотримання семантики відповідно до стандартів HTML5.
• Забезпечити оптимізацію розмірів векторної та растрової графіки
• Забезпечити підтримку відображення картинок для retina-екранів
• Оптимізувати завантаження зображень.
• Додати відображення фавікон сторінки.

Структура проекту.

• Hero header
• Products
• About
• Advantages
• Gallery
• Customer Reviews
• Contacts
• Footer

Hero Header

• У шапці знаходиться лого, меню навігації та кнопка. На мобільній та планшетній версії меню навігації відображається, як бокова панель, що виїжджає. Мобільне меню фіксоване, висота відповідає висоті в'юпорту.
• Меню реалізовано якірними посиланнями, які ведуть до відповідних розділів макета.
• Кнопка Buy now відкриває модальне вікно з формою замовлення. Оскільки дизайну модального вікна немає на макеті, це не обов'язкове завдання.
• Текст “Ice cream made with passion” є заголовком сторінки.
• Кнопки під заголовком “Products” та “How it's made” є якірними посиланнями на відповідні розділи.
• Картинки на Hero спозиціонувати абсолютно. Додатково їм можна зробити анімовану появу під час завантаження сторінки.

Products

• 100% natural - є лейблом заголовка і не виділяється тегом заголовка.
• products – є заголовком секції.
• Картки товарів оформити як сітку елементів.
• Зображення на картках товарів є декоративними, їх необхідно реалізувати псевдоелементами.
• Назви продуктів є заголовками.
• Декоративний елемент крапки під заголовком, виконати псевдоелементом.
• Кнопка зі стрілкою внизу картки повинна відкривати докладний опис продукту. Оскільки дизайну опису немає, це є додатковим завданням.

About (how it’s made?)

• tradition and love – є лейблом заголовка і не виділяється тегом заголовка.
• how it’s made? - Заголовок секції.
• У секції представлений блок із параграфами та кнопкою “Read more”. Кнопка має відкривати модальне вікно з повним описом. Оскільки дизайну модального вікна немає, це є додатковим завданням.
• Декоративне зображення з коровою, зберегти у форматі png, щоб зберегти прозорість зображення.
• Фонове зображення молока повинне займати всю ширину секції та знаходитись по краях екрану для десктопної версії, а також знаходитись по краях контейнера на мобільній версі. На версії планшета даний фон відсутній.

Advantages

• У секції немає видимого заголовка. Потрібно зробити прихований заголовок для краулерів.
• У секції знаходиться перелік переваг. Його необхідно реалізувати як сітку елементів.
• Іконки переваг у макеті відображені у форматі png. У верстці їх необхідно реалізувати псевдоелементами.

Gallery

• У секції двоколірній фон, його потрібно реалізувати градієнтом. Зображення контентне.

Спочатку передбачалося, що галерея буде реалізована як Masonry Layout Gallery. Це можна реалізувати додатково.

Customer Reviews

• У секції представлений слайдер із відгуками покупців.
• Маркери внизу слайду (будиночок та маркери) це посторінкова пагінація слайдера. Якщо ви підключаєте бібліотеку слайда до проекту, їх не потрібно верстати, вони автоматично генеруються бібліотекою. Потрібно буде лише зробити стилізацію пагінації.
• Значок лапок це псевдоелемент слайду.
• Маркери під текстом відгуку виконати псевдоелементами.
• Підкреслення тексту реалізувати градієнтом (repeating-linear-gradients).

Contacts

• У секції немає видимого заголовка. Потрібно зробити прихований заголовок для краулерів.
• У секції міститься список адрес представництв компанії. Його необхідно реалізувати як сітку елементів.
• Написи Cafe та Food Truck не є заголовками. Це категорії представництв.
• Контактні номери телефонів та email є посиланнями. Їх необхідно реалізувати з допомогою протоколів посилання.
• Кнопки Our Locations та Franchise повинні відкривати модальне вікно з маркованою карткою. Оскільки дизайну модального вікна немає, це можна реалізувати додатково.

Footer

• У футері розміщений дубльований заголовок, тегом заголовка виділяти його не потрібно.
• У футері знаходиться список посилань соціальних мереж.
• Іконки соціальних мереж зробити за допомогою svg sprite.
• Посилання повинні відкривати стартову сторінку соціальної мережі на новій вкладці.
• Номер телефону має бути реалізований за допомогою протоколів посилання.

⚠️ ОБОВ’ЯЗКОВИМ є реалізувати коректну верстку макету.
Наявність слайдерів, анімацій та модальних вікон НЕ Є ОБОВ’ЯЗКОВОЮ, і реалізується командою за наявності бажання та часу на виконання.