JavaScript

We need to add a flex module to the page. A block with class container should become a flex container. Elements must be distributed with the same distance between them....

Let’s align the elements a bit. A block with class container must be a flex container. Items inside a flex container should be vertically centered. Items must be horizontally aligned with the same spacing between them and the edges of the container....

Let’s try displaying the duration with flex. Make the block with class container a flex container. Allocate free space among all flex items. The first should be given only 1 unit, the second twice as much, the third 6...

The numbers are in the wrong order, and the items do not fit on one line yet. Make it so that the elements are spread over several lines. Each line must contain the numbers in the correct order....

It’s easy to do side navigation with flexbox. It is enough to make a block with the nav class a flex container and distribute the elements in it with a bell....

Let’s decorate our navigation a little. Set the background of the .nav unit to the background color of #EPS8EF. Add 10px vertical padding and 15px horizontal padding for the .nav block...

For each link with the class nav-item, add a 15px margin below it add a padding of 5px. The background color should be #bac2d5 and the test color #232324. Also remove the underscore from the link (use the text-decoration property)....

The document already has a grid container with one single item. But this element is stretched to full screen. Make the item sit in the middle of the grid container, not stretch....

An item with class grid-container should become a grid container. All elements inside it should fit in three columns and four lines. Specify both columns and lines of automatic width and height....

With Grid, you can easily create a page structure. That’s what we’ll do. Let’s start by making the .page-layout element a grid container. Our page should have two columns: 50px and auto, one for navigation and one for page content....