Description

Let's create the main structure of the website with semantic elements. Design a simple layout with a header, main section, and a footer. We have provided you with the Figma designs for this page. Pay attention to the CSS rules and the elements in the designs. The element names are the names of the tags you need to use. Some elements have IDs next to them: anchor: #nav-brand. The tag name is anchor and the ID is nav-brand.

Moreover, note the element structure in Figma; it hints at your HTML element structure. The design of the elements should resemble Figma designs. You can adjust the position of the elements however you like.

The anchor links don't need to redirect anywhere, and they shouldn't have any text-decoration.

You can play around with the colors of the elements.

Objectives

Take a look at the designs in Figma. In this stage, build only the design from Stage 1: The layout.

Example

Example 1: