Content

1. Demo
2. Features
3. Realizing
4. Difficulties

Demo

GrowBe - simple adaptive landing page.

Features

This is a simple landing page with basic functions. It consists of standard landing page sections:

• header and footer
• main screen;
• partners section;
• different info screens, lists, cards;
• common statistics;
• a simple form for quick communication with customers;
• pricing information;
• team presentation;
• different sliders (blog articles, customers' feedback, etc.).

Realizing

This landing was made according to the Figma-layout.

While working on the project, I have mastered:

• basic structure of landing pages;
• using optimized (WebP) and vector (svg) images;
• animation of svg images;
• using semantic HTML-tags;
• creating elements' sliders (Swiper.js);
• creating adaptive layout by using CSS media queries;
• using CSS Flex.

Difficulties

During the development , the main difficulties were:

1. configuration and styling of sliders;
2. creating an adaptive layout.

The problem of configuration and styling of sliders was to analyze the structure of the elements Swiper.js . Solution - detailed reading of the documentation 😃

When I working on this project, I encountered with creating an adaptive layout for the first time. So it became a problem for me. Thanks to this, I got acquainted with CSS media queries.