Welcome to part-2 of the series.

First we will add styles for hover of the content. After that we are adding styles to move the content to the middle and over the image. Here, we are using the top, left properties to move the content to the center. We are also using a bit of CSS grid to center align.

style.css

Now our content is centered and the hover effect is working properly.

Hover effect

After that we will add the styles for the next two sections, which are the services and the about. Now, they have a common container class for which we are giving a max-width and other properties.

In services we have a 3-column layout(grid-3 class), which we can do easily with grid by having three 1fr columns.

Similarly, for about section we have 2-column layout(grid-2 class), which we can do easily with grid by having two 1fr columns.

grids

It will show both our sections perfect, but the color seems to be a bit matching.

Not perfect

Now, we will add styles to differentiate both section. We are also adding styles for the footer.

footer

Now, our whole site is complete and will look like below.

Whole site

We need to add styles for mobile view now with media queries. The main style here is to have both grid, to have one column only.

media queries

Now, our mobile site is looking like below.

This completes our project. Hope you liked it.

You can find the github repo for the same here.