About the author section

In this lesson, we will create a section crucial to the blog author's personal branding. Once again we will use cascading effect, but this time with a blurred filter covering the card. We learn about this technic in the previous lesson.

Step 1 - add an empty About author section

Just below the posts section add another section, with a .container and 2 columns grid inside.

Step 2 - add a card and a filter to the first column

Let's add a card to the first colum and let's apply a blurred filter via inline CSS.

Note, that we are also adding .me-lg-n5 class, which provide a negative right margin. Thanks to this it will overlap the image in the second column and create a cascading effect.

Step 3 - add an image to the second colum

To the second column let's add a responsive image presenting the author.

Step 4 - add custom border radius

Let's get a little crazy and add custom rounding to the author's image.

To choose the right settings, let's use the MDB fancy border radius generator.

It's an easy-to-use tool that will allow us to generate fancy shapes. Simply drag one of the 4 available dots, and below you will get the generated, ready-to-use code.

Note, that the only thing we need from the generated code are values of the border-radius property. Then we can add them to our image via inline CSS:

The final code of the About the author section should look like this: