Friends, you people must have seen many videos from me, in which I have made a lot of videos about landing page, so today with the help of this article, I am going to tell some important points that when you design any website, then first of all. I will tell you the process of what you have to do, what some people do is to start designing a direct website, they should take and take some reference website from the internet, I also take inspiration from the reference website, but when you visit the website If you are doing designer then you should know whose website you are creating, which category of the website should be used in it, what color should be used in it, how to set its typography, you should keep all these things in mind then only your website will be called a good website. The most important part of any website is the home page, if your home page is not good, then your website will not look well and the most important part in the home page is the hero section, which we also call by different names like landing section, The slider section has many other names. So this is also an important part of the website, so first of all, we design the hero section.
If I talk about myself, whenever I am going to design a website, first of all, I create a wireframe and do a little brainstorming so that you can get an idea and give a good experience to your user To create more wireframes It is very important for you to have content so that you know which website you are making (making a construction site or healthcare, educational, etc.)
If I talk about its style guide, then I have used basically 3 colors in it (orange, dark blue, and white color). Talking about fonts in it, I have used a font named Space Grotesk in it. You will find these fonts from the Google Fonts library.
You might like this video
Landing Page Design with Animation Using HTML, CSS & JS | Slick Slider | Wavy Line Animation
Landing Page Design Background Video using HTML & CSS | Infinite Scrolling Text | Menu Hover Effect
Landing Page Design with Animation using HTML,CSS & JS | GSAP(GreenSock), Circle Text Hover Effect
Landing Page Design Using HTML,CSS & JS | Infinite Scrolling Animation | Image Zoom Effect on Click
Landing Page Design with Slick Carousel Using HTML, CSS, JQUERY | Menu Hover Effect | Image Slider
Before creating the website of the email marketing website landing page, I have created a wireframe, when you design any website, it is very important to create its wireframe first. Whenever you make a wireframe, you get to know what you want to make and you will get a little idea and you will also have the content so that when you make the design then your time does not go into thinking too much. I have given the image of wireframe, you can see it.
Email marketing landing page design low fidelity wireframe
First of all, let me tell you the structure of index.html so that you can understand it more easily. A div named wrapper has been taken, inside it, the tag of the header has been taken and the div named content has been taken. First of all, if we talk about the header tag, then I have taken a div named logo, in which I have taken a div named logo, and boat, in which the menu has been set in the structure of ul li. (The link of the menu is Integration, API, Product, Support, or sign up). And there is also a sub-menu in it ie there is also a dropdown. And I have done that only with the help of CSS. Now after that talking about the div named content, then I have taken a text and a div named img inside it, in which the description and button have been taken in the div named text. And in the div named img, I have taken the icon for social media and the icon for email. Those who will be in the middle and those who are icons of social media will roam within it. Hey, all I have done with the help of CSS I have not added any js.
Now I am talking about CSS which is the most important part of this website, no website will look good without CSS. First of all, in CSS, I have written the header between display flex, align item center and justify-content space. With the help of this, there will be space between the logo and the menu and all will remain in one line and it will adjust according to its screen resolution. After that wrote the basic style of ul li and gave the style of button to the link of the contact.
Now I am talking about sub-menu i.e. dropdown menu in which I have created another ul li structure inside ul li i.e. when I hover over outside li then the inside ul will show otherwise it will be hidden.
If I talk about the class named Content, then I have displayed: flex; flex-wrap: wrap; justify-content: space-between; The property has been given so that the content inside it is centered from all four sides. After this I have styled the p tag and have given the style of the button to the anchor which is the link and in its hover effect I have used before, in which its width will be much less when hovering over that button then and to smooth it out. for transition: all ease 0.5s; Have you used it?
After that in a class named img I have used radial-gradient color in the background and then transform: translate(-50%, -50%) to lane the email icon in the center; Have you used it? Now the social icon left, I have set it all with the help of nth-child.
After that, the bottom wave that I have done with the help of CSS only, in this I have 3 wave image used in HTML img tag, one image is used in HTML img tag and the other two images are used in the background of wave class before after and then He has been given
To do this, you have to open your index.html file in the browser and you can see your layout, if it is not working properly, then you have to check the code once whether there is any tag, link, images missing. Hey and add the path of the link properly. If any animation is not working, then you have to check the name of its class and animation.
I hope you have liked this article, if you want to watch the video, then you can also watch it on my learndesign youtube channel and I have given its code, you can download it and watch it. See you in the next video and article, stay happy, keep learning.
