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
Next, we will add box-shadow for all posts by updating styles in postcard.module.css file.
Now, all our white box will have nice box-shadows in it.
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.
Next, let’s add the html for it in the left section.
Next, we will add some styles for it in the home.module.css file.
It will show the book image as below.
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.
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.
We also need to add the following import at the top of the file.
Now, let’s add the style for the same in home.module.css file.
This will show the mobile menu only in smaller screen then 992 px.
Also, will show as below in Mobile screen.
This completes part-13 of the series.
You can find the code for the same in this github repo.