Intro section

Our intro section will have a cascading layout familiar to us from previous lessons.

We will divide it into 2 parts - the upper one (in gray) and the lower one (in white, which will blend with the background of the rest of the page).

Step 1 - create upper intro

Unfortunately, we can't accomplish our cascading layout with classes or inline CSS because we need Media Queries to be able to apply different conditions to different screen widths. Without this, we will not be able to create a version that will look good on both desktop and mobile.

We have to create a section with a div inside it. Then we need to give this div an ID so we can refer to it later in our CSS.

So let's set this ID to #intro-upper and then let's add a custom height and background color by referring to this ID via CSS:

Step 2 - add content to the #intro-upper

Now let's add content to the section.

We put a container in the middle to give proper margins on the sides of the section.

As the header, we'll use an h1 element with the display class and some of the other text styling classes we've learned about in previous lessons.

Below the header, we put an avatar with the author's name.

Step 3 - create lower intro

It's time for the lower part of the intro.

Below the #intro-upper part, let's create a div with the ID #intro-lower, and then referring to this ID in CSS, add a negative top margin that will cause the bottom section to overlap the top one and create a cascading effect.

Step 4 - add content to the #intro-lower

It will be easy now.

In #intro-lower we add a container with a grid for 2 columns.

In the left column we add a responsive image.

In the right, we add a regular card with text and a Call to Action button.

In this case, we can achieve a cascading effect using Bootstrap spacing classes. All you have to do is add the ms-xl-n5 class (negative margin on the left side on XL screens) and the ms-0 class to the right column, so that the elements are displayed by default on mobile devices.

Finally, the entire intro section should look like this: