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

Верстка адаптивна, окрім мобільних пристроїв. Точки перелому:

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

Структура проекту. Hero header Products About Advantages Gallery Customer Reviews Contacts Footer

Hero Header У шапці знаходиться лого, меню навігації та кнопка.

Лого на макеті відображено у форматі png.

Меню навігації на мобільній та планшетній версії відображається як бокова панель, що виїжджає. Мобільне меню фіксоване, висота відповідає висоті в'юпорту. Меню реалізовано якірними посиланнями, які ведуть до відповідних розділів макета.

Кнопка “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”. Кнопка має відкривати модальне вікно з повним описом (реалізація модального вікна не є обов'язковим завданням).

Декоративне зображення з коровою абсолютно спозиціонувати згідно макету.

Advantages

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

У секції знаходиться перелік переваг. Його необхідно реалізувати як сітку елементів.

Іконки переваг у макеті відображені у форматі png. У верстці їх необхідно реалізувати псевдо-елементами.

Gallery

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

Customer Reviews

У секції представлений слайдер із відгуками покупців.

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

Contacts

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

У секції міститься список адрес представництв компанії. Його необхідно реалізувати як сітку елементів.

Написи “Cafe” та “Food Truck” не є заголовками. Це категорії представництв.

Контактні номери телефонів та email є посиланнями. Їх необхідно реалізувати з допомогою протоколів посилання.

Кнопки “Our Locations” та “Franchise” повинні відкривати модальне вікно з маркованою карткою (реалізація модальних вікон не є обов'язковим завданням).

Footer

У футері розміщений дубльований заголовок, тегом заголовка виділяти його не потрібно.

У футері знаходиться список посилань соціальних мереж.

Іконки соціальних мереж зробити за допомогою svg-sprite.

Посилання повинні відкривати стартову сторінку соціальної мережі на новій вкладці.

Номер телефону має бути реалізований за допомогою протоколів посилання.