Html: Hero Section

CSS: Flexbox fundamentals
Last update: 17 May 09:21
0
Students

The term Hero Section refers to the title block of a website or a landing page. Its purpose is to emphasize the key idea and to attract attention in the very first seconds when the user is on the page.

In this challenge, you will implement one instance of such a section:

Hero Section on CSS

Layout

Layout to style is available on Figma. Use it to determine the size of the indents, fonts and various elements. The image and fonts are located in the assets directory.

Tips

  1. Figure out the size of the main container. The vertical red lines will guide you here
  2. Set the horizontal paddings. You can use the red lines as a guide here, too
  3. Set the vertical paddings. Follow the distance from the edge of the layout to the layers
  4. The "01" numbers are placed 30 pixels below their original location in the document flow

For full access to the challenge you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
900
exercises
2000+
hours of theory
3200
tests