Welcome to the repository for Green Harvest, a project proudly developed by the GREEN FOURTEEN team as part of the group project for GoIT school.
Green Harvest is a landing page featuring eight sections and a mobile-friendly menu. The website is designed to promote and sell fresh organic vegetables. With its engaging content, intuitive functionality, and user-friendly interface, the website helps customers save time and simplify their daily tasks. Users can choose from pre-made vegetable baskets or customize their selection based on personal preferences. For added convenience, the site includes step-by-step order instructions and offers a feedback feature.
@Vitavanika Tetiana Viienko - TeamLied / Developer / Order section
@rtt2018 Taras Rogiv - Developer / Advertisment section
@kostyaslob Kostya Slobodianiuk - Developer / Mobile menu
@hanna-uler Hanna Uler - Developer / Vegetables section
@YuliaKolinko Yuliia Kolinko - Scrum master / Developer / Works section
@katuha2024 Kateryna Puzikova - Developer / Hero section
@Yelyzaveta-Shevchenko Yelyzaveta Shevchenko - Developer / Footer
@LiudmylaTar Liudmyla Taran - Developer / Header
@vladislav-vf Vladislav Basanko - Developer / Reviews section
Overview
The website features a semantic, responsive layout optimized for three breakpoints. Graphics and images are carefully optimized for performance, and a favicon is included to enhance the overall user experience
Sections
Navigation - The user-friendly navigation bar provides quick access to the most important sections and allows users to place orders directly. Notably, on desktop screens, the menu is absolutely positioned within the Hero block, creating a unique layout. On mobile screens, JavaScript enhances the menu to show us the button interactions.
Home Page - Hero Section: The visually appealing homepage sets the mood for the website. It’s divided into two aesthetic blocks.
How It Works Section - A step-by-step guide simplifies the ordering process. This section features a styled numbered list using pseudo-elements and also it is split into two distinct parts.
Advertisement - A motivational section highlighting a promotional offer.
Produce - The well-organized showcase of the company's assortment. Vibrant images that contrast with the product cards invite users to explore and encourage them to make a purchase.
Reviews - The section dedicated to customer testimonials.
Order - This section gives users an easy way to contact the company managers for order placements or inquiries. It is divided into two parts: a form for submitting information and social links for staying connected with the company online.
Footer - The footer contains key site details and company information. Additional navigation makes it easy for users to go back to the different sections or contact managers.
CSS (51.7%): Responsible for site styling and layout.
HTML (44.8%): Forms the structural foundation of the website.
JavaScript (3.5%): Adds functionality to the mobile menu and interactive buttons.
VSCode: Used for coding and website development.
Figma and Pixo: Used as the primary source for the website's appearance, styles, and layout sizes.
Git/GitHub: Used for version control and repository management.
Trello: Used for organizing team workflows and project management.
We extend our gratitude to:
GoIT for providing guidance and resources throughout this project.
Our team members for their dedication and collaboration.
Thank you for exploring Green Harvest! 🍅🥦🥕 We hope you enjoy the experience.
Пропонуємо вашій увазі проект. Цей проект є роботою команди GREEN FOURTEEN в рамках групового проекту IT школи GoIt. посилання на живу сторінку.
Green Harvest – це лендінг, який має 8 секцій та мобільне меню. Призначення сайту - продаж свіжих органічних овочів. Своїм контентом, функціоналом та зручністю інтерфейсу сайт допомагає клієнтам економити час та полегшувати буденні задачі. Користувач має можливість обрати готові овочеві корзинки або ж підібрати овочі за своїм бажанням. Для зручності клієнта на сайті розміщені покрокові інструкції оформлення замовлень, а також є можливість зворотнього зв’язку.
@kostyaslob Слободянюк Костянтин
@Yelyzaveta-Shevchenko Шевченко Єлизавета
@vladislav-vf Басанько Владислав
Нами зроблена семантична адаптивна верстка з трьома точками перелому з оптимізованою графікою та зображеннями, додано фавікон сайту.
Розділи сайту : Навігація — зручна навігація дозволяє клієнту швидко переміститися в потрібну секцію. А також надає можливість одразу оформити замовлення. Особливістю меню є абсолютне позиціонування з блоком Hero на десктопній версії. В мобільне меню ми додали Javascript, щоб можна було візуально побачити дію кнопок.
Головна сторінка - естетична секція, яка задає настрій сайту та є фоном для навігації. Секція розділена на два блоки.
Секція How it works - Надає покрокові інструкції оформлення замовлення. Особливістю секції був нумерований список із заданням стилів за участю псевдо елементів. Також складається з двох частин.
Advertisement - Мотиваційна секція з акційною пропозицією.
Каталог - зручний каталог асортименту компанії. Контрастні картки каталогу додатково спонукають користувача до придбання товару.
Reviews — секція з відгуками користувачів
Order - секція звʼязку з менеджерами сайту для оформлення замовлення та додаткових запитань. Також виконана у вигляді двох блоків, один із яких - форма для відправки даних , а другий має посилання на соціальні мережі компанії.
Footer - містить ключові дані по сайту та корисну інформацію компанії. Звідси, за допомогою додаткової навігації, можна швидко повернутися на інший розділ, або зателефонувати менеджерам.
CSS 51.7%: стилізація та верстка сайту
HTML 44.8%: - структура веб сайту
JavaScript 3.5%: функціонал мобільного меню та кнопок сайту
VSCode - верстка сайту
Figma та Pixo — використання макету сайту
Git/GitHub — керування репозиторієм
Trello - організація роботи команди.
Висловлюємо подяку:
GoIT за надання вказівок і ресурсів протягом цього проекту.
Членам нашої команди за відданість і співпрацю.
Дякуємо за вивчення Green Harvest! 🍅🥦🥕 Ми сподіваємося, що вам сподобається.