Free UI/UX design course
Learn how to create exceptional designs by reading my new tutorial.
Start learningIntro 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:


About author
Michal Szymanski
Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.