Cascading effect

In this lesson, we will create a section with a cascading effect of elements that overlap each other and thus give the impression of depth and three-dimensionality. We did a similar thing in the previous lesson when creating cascading cards, but this time the effect will be slightly different.

Step 1 - add an empty About me section

Below the Projects modals section, add a new About me section, and place a grid with two equal columns in it:

Step 2 - add content to the columns

Add a card with a text to the first column and an image to the second:

Step 3 - add a cascading effect

Let's make the card overlap the photo to create a cascading effect.

First - remove the gap between the columns by adding class gx-0 to the element with class row.

And since we're already at the row element, we can immediately add the align-items-center flexbox class here so that our card is exactly in the middle of the photo's height.

Note that for an element with a row class, we don't need to add the d-flex class to enable flexbox, because row has it enabled by default. So we can immediately use flexbox modification classes.

And now we need to add a negative right margin to the card in the first column. So let's use me-lg-n5 class.

Note, that we are using -lg- breakpoint because we only want our cascading effect on large screens (mobile devices lack space to implement it).