Alt Text Welcome to part-13 of the series. We will start by adding the same box-shadow that we created for Search bar in the previous part, to all the boxes on the site.

Let’s first add in the Tags box. So, update the below in taglist.module.css

taglist.module.csstaglist.module.css

Next, we will add box-shadow for all posts by updating styles in postcard.module.css file.

postcard.module.csspostcard.module.css

Now, all our white box will have nice box-shadows in it.

box shadowsbox shadows

Let’s add a box to the right side also. It will hold the image for my upcoming Gatsby book and also subscribe to get discount.

For this first add a dummy image in the images folder and also import it at the top.

book imagebook image

Next, let’s add the html for it in the left section.

image addtionimage addtion

Next, we will add some styles for it in the home.module.css file.

home.module.csshome.module.css

It will show the book image as below.

Book ImageBook Image

I checked and the image was not fully responsive, so made it responsive by below change in the css, in the home.module.css file.

Responsive imageResponsive image

Let’s create a mobile menu to show the Right and the left side bar in small screens. We will create an additional menu for this. First add the same in index.js file.

index.jsindex.js

We also need to add the following import at the top of the file.

index.jsindex.js

Now, let’s add the style for the same in home.module.css file.

home.module.csshome.module.css

This will show the mobile menu only in smaller screen then 992 px.

Smaller screenSmaller screen

Also, will show as below in Mobile screen.

Mobile ScreenMobile Screen

This completes part-13 of the series.

You can find the code for the same in this github repo.

This post is also available on DEV.