Hi guys I am back with another fantastic and inspiring project in this project I create a landing page using HTML and CSS only I also share a complete source code that you can download and use for free.
NOTE: To stay informed about my new projects, join our WhatsApp and Telegram community and be part of the conversation.” Links are given below.
What is Landing Page?
A landing page is a standalone web page that a person “lands” on after clicking through from an email, ad, or other digital location. It is designed to convert visitors into leads or customers by providing a clear and concise message and call to action.
Landing pages are typically used for:
- Lead generation: This involves collecting visitor information, such as their name, email address, and phone number, in exchange for something of value, such as a white paper, ebook, or free trial.
- Product sales: This involves encouraging visitors to purchase a product or service.
- App downloads: This involves encouraging visitors to download an app.
- Event registrations: This involves encouraging visitors to register for an event.
Landing pages differ from other web pages because they have a single focus or goal. This makes them more effective at converting visitors than general-purpose web pages.
About This Project
| Created by | Coding Pakistan |
| Languages | HTML / CSS |
| Source Code | GitHub |
| Preview | Take Preview |
| Responsive | Yes |
How To Create a Landing Page Using HTML and CSS
There are some steps to create this type of Logn Page design Using HTML and CSS that are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create two files HTML and CSS.
- Make sure the HTML file extension is (.html), the CSS file extension will be (.css)
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- The last step is copying and pasting the given code into your files.
Landing Page – Source Code
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Created by Coding pakistan - www.codingpakistan.com -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page Using HTML and CSS</title>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div id="left">
<div id="lnav">
<i class="ri-arrow-left-line"></i>
<div id="lnavr">
<a href="#">About</a>
<a href="#">Work</a>
<i class="ri-twitter-fill"></i>
</div>
</div>
<div id="textarea">
<h1>Hello,</h1>
<p>Oh. You need a little dummy text for your mockup? How quaint.</p>
<a href="#">Read</a>
</div>
</div>
<div id="right">
<div id="righttop">
<div id="righttopleft"></div>
<div id="righttopright"></div>
</div>
<div id="rightbottom"> </div>
</div>
</div>
</body>
</html>
CSS FILE
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
html,body{
width: 100%;
height: 100%;
}
#main{
display: flex;
width: 100%;
height: 100%;
}
#left{
position: relative;
width: 40%;
height: 100%;
}
#lnav{
width: 100%;
display: flex;
justify-content: space-between;
padding: 40px 30px;
}
#lnavr{
display: flex;
align-items: center;
}
#lnavr a{
margin-right: 50px;
text-decoration: none;
font-size: 18px;
color: black;
}
#lnav i{
color: blue;
font-size: 18px;
}
#left #textarea{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50% );
}
#textarea h1{
font-size: 80px;
}
#textarea p{
margin-top: 10px;
font-size: 16px;
line-height: 2;
margin-bottom: 30px;
opacity: 0.6;
}
#textarea a{
font-size: 16px;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
font-weight: bold;
}
#right{
width: 60%;
height: 100%;
}
#righttop{
display: flex;
width: 100%;
height: 50%;
}
#rightbottom{
height: 50%;
width: 100%;
background-color: skyblue;
background-image: url(https://images.pexels.com/photos/776656/pexels-photo-776656.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-size: cover;
background-position: center;
}
#righttopleft{
width: 50%;
height: 100%;
background-color: rgb(239, 208, 213);
background-image: url(https://images.unsplash.com/photo-1512428813834-c702c7702b78?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80);
background-position: center;
}
#righttopright{
width: 50%;
height: 100%;
background-color: orange;
background-image: url(https://images.unsplash.com/photo-1551410224-699683e15636?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80);
background-size: cover;
background-position: center;
}
@media (max-width:500px){
#main{
flex-direction: column;
}
#main #left{
width: 100%;
}
#main #right{
width: 100%;
}
}
Final Output [laptop / Desktop]
Final Output [Mobile]
Related Articles
- How to Create Mobile App, Icon Menu
- Netflix Clone Completed the website using HTML and CSS
- Top 5 Mistakes while learning a web development
Conclusion
In this blog post, we have learned how to create a landing page with HTML and CSS modern UI/UX. We started by creating the basic structure of the landing page using HTML.
Then, we built a responsive hamburger navigation menu and created a hero section. Finally, we beautified the landing page using CSS.
We hope that this blog post has given you a good starting point for creating your own landing pages. With a little practice, you will be able to create stunning landing pages that will convert visitors into customers.
Here are some additional tips for creating a great landing page:
- Keep the landing page focused on a single goal.
- Use clear and concise language.
- Use high-quality images and videos.
- Make it easy for visitors to contact you.
- Test and optimize your landing page regularly.
By following these tips, you can create landing pages that will help you achieve your business goals.