Responsive Different View Landing Page Design


In this article, we are going to learn how to create Responsive Landing Page Design using HTML and CSS. You will understand how to create responsively landing page with various views. I mean we will make different views for various devices like tablet, mobile, and desktop.

We will understand how to use the clip-path property. You are going to learn a lot more than you think.

Landing Page

The above landing page is for desktop now let’s see what it looks like on tablet and mobile.

Landing Page

So this design is for tablet. let’s look at the mobile view.

Landing Page

We will make this view using simple HTML and CSS. Now let’s look at the code to understand how to create this amazing design.

We are going to learn how to create index.html and style.css file. We will put both these files in the root directory. So let’s look at these files.

Index.html

In this file, we put all the necessary code to build this website.

Now let’s look at this code line by line.

We will create a .wrapper class to wrap all the elements. Then added a .container and specify as a grid. But If you want you can specify that as flex also. We going to create two columns. In the first column, we will add some text and in the second column, we add moving car animation.

In the .clip-svg class, we will add moving car animation which we created in the last article.

At the end of the .clip-svg class, we add an SVG image with a clip-path element. The clip-path element use to show the region and the rest of the hidden. So we will show some part of the animation using SVG and hide outside of it.

We put the SVG path inside clipPath element so we can specify which region we want to show. Therefore we use SVG image in the Html code. I did not write this image manually instead of copy it by opening it in the Visual Studio code editor.

I am going to specify this id to the clipPath element. In style.css file, we will specify that we want to show this region to the moving car animation.

You will see this code in the style.css file soon. If this code is overwhelming let me explain what we had done here. Using .clip-svg class we selected a div and specify we want to show the region of the SVG. So using clip-path property we specify the id of the clipPath element to show the region.

Now let’s take a look at style.css file.

Style.css

In style.css file, we have not done anything special. It’s a simple stylesheet to glorify the template.

Now you just execute index.html file. So we already link style.css to the index file in the head tag so you don’t need to care about it. Ones you execute index and open it in the browser you will see amazing landing page design.

Using just HTML and CSS we can make many things.

If you want to download this project this is the link of GitHub. 

You can download image and source code from this link. So Thank You for support and your love.

So I hope you like this article, I will see you in the next one.

Leave a Reply

Your email address will not be published. Required fields are marked *