Blur effect landing page with CSS Grid -1

CSS Grid

Welcome to a brand new series, where we are going to build an elegant landing page with Blur effect. We are going to use CSS Grid for this project.

So, let’s open the terminal and create a new folder Blur_Landing and create two files index.html and style.css inside it.


Next, we are adding a logo and a background image in the same folder. Open the folder in VS Code.

VS Code

You can read the whole blog from my site. The link for the same is below.

You can find part-2 here.




Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Scope, Closures, and Memory Leaks in Javascript, Part II: Closures

How I built horizontal as well as grid calendar in react-native using react-native-calendars

Easy and reusable Media Query Breakpoints for your CSS-In-JS components

How to set up SSO authentication and RBAC with Azure AD in a React web app: a simple developer’s…

Easy responsive design from mobile screen to Infinity

What is ReactJS?

Clean Architecture — Mapping and Displaying Server-Side Errors With Formik in React Client App

Adding Shields To Enemy Ships!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Inputmode attribute in HTML — Display Appropriate Mobile keyboards

Why Node.js is the Best Choice for ECommerce Website Development

How to Build a Github User Search App With ReactJS 🚀

Learn how to build a Github user dashboard by using ReactJS then test & deploy the app with Cypress, WebdriverIO, and ScreenerIO.

Create a simple form using HTML and CSS?