back to all posts

Blur effect landing page with CSS Grid -2

by Nabendu Biswas / August 1st, 2020

#css #grid #html
Series: Blur-grid

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.

Hover effectHover 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.


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

Not perfectNot perfect

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.

Whole siteWhole 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 queriesmedia queries

Now, our mobile site is looking like below.

Mobile lookMobile look

This completes our project. Hope you liked it.

You can find the github repo for the same here.

Nabendu Biswas