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.
Now our content is centered and the hover effect is working properly.
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.
It will show both our sections perfect, but the color seems to be a bit matching.
Now, we will add styles to differentiate both section. We are also adding styles for the footer.
Now, our whole site is complete and will look like below.
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.
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.