It is necessary to make a markup of the GROVEMADE landing page according to the provided Figma layout. The landing page must be adaptive (mobile, tablet, desktop). There is no adaptive layout.

The work is done on HTML 5, SCSS, JS using the BEM methodology. To form a reliable landing structure and high-quality adaptiveness, I used Flexbox and Grid. Where possible, I increased the area of clicking on links for greater user convenience. The work is quite simple. It adapts to 320 pixels of the browser window width, and I also made a burger menu.

✅ I opened the design layout and generated a duplicate of the design layout in Figma.

✅ Next, I copied and opened my starter template that I had prepared in advance.

✅ Next, I marked out the layout using a ruler to define the bounding container, as well as the Header and Footer.

✅ Next, I used the Font Fascia plugin to determine the fonts used in the layout, and then downloaded and connected them to my project.

✅ Next I started marking up the Header and Footer.

✅ Next, I marked up the page content.

The work is ready for integration into any CMS. 👍