HTML: Futuristic poster

Last update: 28 May 23:20

Complete the futuristic poster presented on the mockup

Futuristic CSS poster

Basic styles


  • Grid consists of 6 columns and 6 rows with automatic size
  • Poster aligned to the center of the page
  • Poster Width: 980px
  • Poster height: full viewport height
  • Color of each cell: #15141c
  • Cells overlaying the image have the color #673ab7 and a transparency value of 60%.

The first level heading

  • The first level heading "The Future Is Now" is three cells wide
  • Font size: 4em
  • Padding: 50px left and right

The second level heading Hexlet

  • Font size: 2em
  • Padding: 50px left and right

The image and font can be found in the assets directory. For the background image, use the following styles:

background-position-x: center;
background-size: cover;

Include Roboto font in app.css file

The finished layout grid looks like this:

Futuristic Poster Grid

The image only illustrates the future-poster area, not the entire page

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
hours of theory