{"id":24794350,"url":"https://github.com/yevdokymenko/ithooligans_icecream","last_synced_at":"2026-04-20T05:32:38.097Z","repository":{"id":38690031,"uuid":"506671124","full_name":"Yevdokymenko/ITHooligans_IceCream","owner":"Yevdokymenko","description":"📚 Team project | IceCream Shop","archived":false,"fork":false,"pushed_at":"2023-01-19T19:07:27.000Z","size":21078,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-22T14:43:37.052Z","etag":null,"topics":["adaptive","adaptive-design","bem","css","github","github-pages","goit","html","javascript","js","parcel","sass"],"latest_commit_sha":null,"homepage":"https://yevdokymenko.github.io/ITHooligans_IceCream/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Yevdokymenko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-23T14:22:00.000Z","updated_at":"2025-05-30T16:23:06.000Z","dependencies_parsed_at":"2023-02-11T17:30:30.806Z","dependency_job_id":null,"html_url":"https://github.com/Yevdokymenko/ITHooligans_IceCream","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Yevdokymenko/ITHooligans_IceCream","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yevdokymenko%2FITHooligans_IceCream","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yevdokymenko%2FITHooligans_IceCream/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yevdokymenko%2FITHooligans_IceCream/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yevdokymenko%2FITHooligans_IceCream/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yevdokymenko","download_url":"https://codeload.github.com/Yevdokymenko/ITHooligans_IceCream/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yevdokymenko%2FITHooligans_IceCream/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32034646,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adaptive","adaptive-design","bem","css","github","github-pages","goit","html","javascript","js","parcel","sass"],"created_at":"2025-01-29T22:36:41.055Z","updated_at":"2026-04-20T05:32:38.073Z","avatar_url":"https://github.com/Yevdokymenko.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eTeam project | IceCream\u003c/h1\u003e\n\n\n\u003cb\u003eЗавдання:\u003c/b\u003e\n\nРозробка односторінкового сайту для компанії IceCream.\nВерстка адаптивна, точки перелому 320px, 768px, 1200px. Для мобільної версії сайту верстка респонсивна. Сайт повинен коректно переглядатися у всіх можливих розмірах вікна браузера та пристроях, починаючи з ширини 320px, як у портретній, так і в альбомній орієнтації.\nВерстка повинна бути провалідована на валідаторі - (https://validator.w3.org/, https://validator.w3.org/unicorn/)\nЗабезпечити дотримання семантики відповідно до стандартів HTML5.\nЗабезпечити оптимізацію розмірів векторної та растрової графіки\nЗабезпечити підтримку відображення картинок для retina-екранів\nОптимізувати завантаження зображень.\nДодати відображення фавікон сторінки.\n\n\n\u003cb\u003eСтруктура проекту.\u003c/b\u003e\n\n- Hero header\n- Products\n- About\n- Advantages\n- Gallery\n- Customer Reviews\n- Contacts\n- Footer\n\n\n\u003cb\u003eHero Header\u003c/b\u003e\n\nУ шапці знаходиться лого, меню навігації та кнопка. На мобільній та планшетній версії меню навігації відображається, як бокова панель, що виїжджає. Мобільне меню фіксоване, висота відповідає висоті в'юпорту.\nМеню реалізовано якірними посиланнями, які ведуть до відповідних розділів макета.\nКнопка Buy now відкриває модальне вікно з формою замовлення. Оскільки дизайну модального вікна немає на макеті, це не обов'язкове завдання.\nТекст “Ice cream made with passion” є заголовком сторінки.\nКнопки під заголовком “Products” та “How it's made” є якірними посиланнями на відповідні розділи.\nКартинки на Hero спозиціонувати абсолютно. Додатково їм можна зробити анімовану появу під час завантаження сторінки.\n\n\n\u003cb\u003eProducts\u003c/b\u003e\n\n100% natural - є лейблом заголовка і не виділяється тегом заголовка.\nproducts – є заголовком секції.\nКартки товарів оформити як сітку елементів.\nЗображення на картках товарів є декоративними, їх необхідно реалізувати псевдоелементами.\nНазви продуктів є заголовками.\nДекоративний елемент крапки під заголовком, виконати псевдоелементом.\nКнопка зі стрілкою внизу картки повинна відкривати докладний опис продукту. Оскільки дизайну опису немає, це є додатковим завданням.\n\n\n\u003cb\u003eAbout (how it’s made?)\u003c/b\u003e\n\ntradition and love – є лейблом заголовка і не виділяється тегом заголовка.\nhow it’s made? - Заголовок секції.\nУ секції представлений блок із параграфами та кнопкою “Read more”. Кнопка має відкривати модальне вікно з повним описом. Оскільки дизайну модального вікна немає, це є додатковим завданням.\nДекоративне зображення з коровою, зберегти у форматі png, щоб зберегти прозорість зображення.\nФонове зображення молока повинне займати всю ширину секції та знаходитись по краях екрану для десктопної версії, а також знаходитись по краях контейнера на мобільній версі. На версії планшета даний фон відсутній.\n\n\u003cb\u003eAdvantages\u003c/b\u003e\n\nУ секції немає видимого заголовка. Потрібно зробити прихований заголовок для краулерів.\nУ секції знаходиться перелік переваг. Його необхідно реалізувати як сітку елементів.\nІконки переваг у макеті відображені у форматі png. У верстці їх необхідно реалізувати псевдоелементами.\n\n\n\u003cb\u003eGallery\u003c/b\u003e\n\nУ секції двоколірній фон, його потрібно реалізувати градієнтом. Зображення контентне.\nСпочатку передбачалося, що галерея буде реалізована як Masonry Layout Gallery. Це можна реалізувати додатково.\n\n\n\u003cb\u003eCustomer Reviews\u003c/b\u003e\n\nУ секції представлений слайдер із відгуками покупців.\nМаркери внизу слайду (будиночок та маркери) це посторінкова пагінація слайдера. Якщо ви підключаєте бібліотеку слайда до проекту, їх не потрібно верстати, вони автоматично генеруються бібліотекою. Потрібно буде лише зробити стилізацію пагінації.\nЗначок лапок це псевдоелемент слайду.\nМаркери під текстом відгуку виконати псевдоелементами.\nПідкреслення тексту реалізувати градієнтом (repeating-linear-gradients).\n\n\n\u003cb\u003eContacts\u003c/b\u003e\n\nУ секції немає видимого заголовка. Потрібно зробити прихований заголовок для краулерів.\nУ секції міститься список адрес представництв компанії. Його необхідно реалізувати як сітку елементів.\nНаписи Cafe та Food Truck не є заголовками. Це категорії представництв.\nКонтактні номери телефонів та email є посиланнями. Їх необхідно реалізувати з допомогою протоколів посилання.\nКнопки Our Locations та Franchise повинні відкривати модальне вікно з маркованою карткою. Оскільки дизайну модального вікна немає, це можна реалізувати додатково.\n\n\n\u003cb\u003eFooter\u003c/b\u003e\nУ футері розміщений дубльований заголовок, тегом заголовка виділяти його не потрібно.\nУ футері знаходиться список посилань соціальних мереж.\nІконки соціальних мереж зробити за допомогою svg sprite.\nПосилання повинні відкривати стартову сторінку соціальної мережі на новій вкладці.\nНомер телефону має бути реалізований за допомогою протоколів посилання.\n\n\n\u003cbr\u003e\n⚠️ ОБОВ’ЯЗКОВИМ є реалізувати коректну верстку макету.\nНаявність слайдерів, анімацій та модальних вікон НЕ Є ОБОВ’ЯЗКОВОЮ, і реалізується командою за наявності бажання та часу на виконання.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyevdokymenko%2Fithooligans_icecream","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyevdokymenko%2Fithooligans_icecream","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyevdokymenko%2Fithooligans_icecream/lists"}