How to Make a Landing page Website using html CSS

Hello Viewer, Today article I will teach you how to create a landing page website design using of html CSS. This template based on dashboard component design website. You can see the design. This landing page design is very simple and attractive. Making this landing page design i am using two main colour. One is dark green colour and second one is light green colour. I have declared all colour in CSS root. Why I am declaring all colour in CSS root because if you declared all colour in CSS root. Then it is very easy to change colour our theme component. This design very attractive eye touching you can feel that. If you need this landing page design. You can copy the source code. And apply where you want without any restriction. If you have face any issue to understand this code then I will also mentioned a video tutorial link in below. You can watch it. If you like my work then you please support my YouTube channel also. Now you can copy the source code in below.

How to Create CRM UI Design All page Using HTML & CSS Only | CRM Design | CRM UI Design

Wondering how to create a landing page to boost your lead generation or make more sales?

why we are using landing page.

What is landing page

What is the difference between a landing page and a website

How to make a successful landing page.

A landing page is single page layout design. Landing page is mainly used for product promotion. You can see when lots of new product have launched then also launched there landing page design.

How will you decided. Which content add in your landing page layout. So don’t worry about this. i will explain you. Which types of content add in our landing page?

How To Make A Resume design Using html css

Landing page present our product benefit for user. Whenever user reach our landing page. Then user see lots of features of our product those feature are inside a landing page. You can say another words landing page is showcase our product features. What is the different between a landing page and web layout. So I will explain. What the different for landing page and web page.

When we create a website we have set multiple goal. But this situation is not same on landing page. When we are crate a landing page we set a single goal. This goal is our product promotion and explain our product features.

Our website traffic comes from multiple source but in landing page case this things are totally different. That’s are two major different between a web page and landing page.

HTML Code

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<section class="banner">
	<header class="sticky">
		<div class="container">
			<div class="col-3">
				<h2 class="logo">M-SoftTech</h2>
			</div>
			<div class="col-6">
				<ul class="nav">
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Service</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
			<div class="col-3">
				<button class="btn">Register</button>
			</div>
			<div class="clearfix"></div>
		</div>

		<div class="clearfix"></div>
	</header>
		
		
			<div class="col-6">
				<div class="content">
				<h1 class="heading">Dashboard<br> Component For 
				 	Your <br>Beautiful Design</h1>
				 	<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
				 	<button class="btn" style="float:left;">Get Started</button>
				 	<div class="clearfix"></div>
				 	<br><br><br><br>
				 	<img src="image/xd.png" class="icon">
				 	<img src="image/photoshop.png" class="icon">
				 	<img src="image/illustrator.png" class="icon">
				</div>
			</div>
			<div class="col-6">
				<br>
				<img src="image/dashboard.jpg" class="banner-img">
			</div>
			<div class="clearfix"></div>
		
			
		
		
</section>


<section>
	<br><br><br><br>
	<div class="container">
		<h2 class="heading-2">Our All Features You Can Get</h2>
		<p class="p2">We will provide  some of the best features</p>
		<div class="col-4">
			<div class="box active">
				<i class="fa fa-cloud-download icon1"></i>
				<br><br>
				<h2 class="heading-3">Free Download</h2>
				<br>
				<p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply </p>
			</div>
		</div>
		<div class="col-4">
			<div class="box">
				<i class="fa fa-desktop icon1"></i>
				<br><br>
				<h2 class="heading-3">Modern Design</h2>
				<br>
				<p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply </p>
			</div>
		</div>
		<div class="col-4">
			<div class="box">
				<i class="fa fa-code icon1"></i>
				<br><br>
				<h2 class="heading-3">Source Code</h2>
				<br>
				<p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply </p>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
</section>
<br><br>
<section>
	<br><br><br><br>
	<div class="container">
		<div class="col-6">
			<img src="image/com-1.png" class="com-p">
		</div>
		<div class="col-6">
			<h2 class="heading-4">Let's Register & Get<br> Components with clean<br> Design</h2>
			<br>
			<p class="p4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply </p>
			<button class="btn" style="float:left;">Register Now!</button>
		</div>
		<div class="clearfix"></div>
		<br><br><br><br>
	</div>
</section>

<section class="green-sec">
	<br><br><br><br>
	<div class="container">
		
		<div class="col-6">
			<h2 class="heading">Get Your Best<br> Components Into The<br> Dashboard Design</h2>
			<br>
			<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply </p>
			<button class="btn" style="float:left;">Register Now!</button>
		</div>
		<div class="col-6" style="text-align: center;">
			<br>
			<img src="image/com-2.png" >
		</div>
		<div class="clearfix"></div>
		<br><br><br><br>
	</div>
</section>

<section>
	<br><br><br><br>
	<div class="container">
		<div class="col-6">
			<img src="image/com-3.png" class="com-p">
		</div>
		<div class="col-6">
			<h2 class="heading-4">Get Your Best<br> Components Into The<br> Mobile Design</h2>
			<br>
			<p class="p4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply </p>
			<button class="btn" style="float:left;">Register Now!</button>
		</div>
		<div class="clearfix"></div>
		<br><br><br><br>
	</div>
</section>

<section class="green-sec">
	<br><br><br><br>
	<div class="container">
		
		<div class="col-3">
			<ul class="foot-menu">
				<li><h2 class="logo">M-SoftTech</h2></li>
				<li>
					<div class="search-outer">
						<i class="fa fa-envelope"></i>
						<input type="text" class="search">
						<i class="fa fa-send"></i>
					</div>
				</li>
			</ul>
		</div>
		<div class="col-2">
			<ul class="foot-menu">
				<li><a href="#"><strong>About</strong></a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Features</a></li>
				<li><a href="#">New</a></li>
				<li><a href="#">Career</a></li>
			</ul>
		</div>
		<div class="col-2">
			<ul class="foot-menu">
				<li><a href="#"><strong>Company</strong></a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Features</a></li>
				<li><a href="#">New</a></li>
				<li><a href="#">Career</a></li>
			</ul>
		</div>
		<div class="col-2">
			<ul class="foot-menu">
				<li><a href="#"><strong>Support</strong></a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Features</a></li>
				<li><a href="#">New</a></li>
				<li><a href="#">Career</a></li>
			</ul>
		</div>

		<div class="col-3">
			<ul class="foot-menu">
				<li><a href="#"><strong>Social Media</strong></a></li>
				<li>
					<i class="fa fa-facebook sicon-1"></i>
					<i class="fa fa-instagram sicon-1"></i>
					<i class="fa fa-twitter sicon-1"></i> 
				</li>
			</ul>
		</div>

		<div class="clearfix"></div>
		<hr>
		<p class="copy">Copyright 2022 Design by M-SoftTech</p>
		<br><br><br><br>
	</div>
</section>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<script type="text/javascript">
	$('.box').click(function(){
    $('.box').removeClass("active");
    $(this).addClass("active");
});
</script>
<script type="text/javascript">
	$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});
</script>
</body>
</html>

Copy the css code in below and paste your css document.

CSS Code

:root{
	--darkgreen:#0a3823;
	--lightgreen:#198050;
	--white:#fff;
	--light:#dfebe4;
}
*{margin: 0px; padding: 0px; font-family: system-ui;}
.col-3{width: 25%; float: left;}
.col-4{width: 33.3%; float: left;}
.col-2{width: 16%; float: left;}
.col-6{width: 50%; float: left;}
.container{width: 1200px; margin: 0 auto; max-width: 100%;}
.clearfix{clear: both;}
.banner{background:url(../image/ban.png), var(--darkgreen);
    background-repeat: no-repeat; background-size: 627px;}
.logo{color: var(--white); font-weight: 500; padding:25px;}
.nav{margin: 0 auto; width: 400px;}
.nav li{list-style: none;float: left; padding: 30px 26px; }
.nav li a{text-decoration: none; color: var(--white);}
.banner-img{width:100%; margin-bottom:-4px; }
.content{padding-top: 100px; padding-left: 100px;}
.heading{font-size: 50px; color: var(--white);}
.btn{    
	padding: 12px 35px;
    background: var(--lightgreen);
    border: none;
    color: var(--white);
    float: right;
    margin-top: 25px;
    cursor: pointer;
}
.p1{
	color: var(--white);
    letter-spacing: 1px;
    width: 500px;
    line-height: 22px;
    font-size: 14px;
    margin-top: 15px;
}
.icon{width: 30px;
    background: #b5b5b561;
    padding: 10px;
    border-radius: 10px;
	margin-right: 30px;}
.heading-2{color: var(--darkgreen);text-align: center;}
.p2{text-align: center; margin-bottom: 50px; font-size: 14px;}
.box{width: 230px; padding: 25px; border: 1px solid #d1cbcb; text-align: center;
margin: 0 auto;}
.icon1{
	font-size: 30px!important;
    background: var(--darkgreen);
    padding: 15px;
    color: var(--white);
    border-radius: 30px;
    margin-top: 50px;
}
.heading-3{font-weight: normal;}
.p3{font-size: 13px; letter-spacing: 1px; line-height: 18px; margin-bottom: 50px;}
.active{background: var(--darkgreen);color: var(--white);}
.active .icon1{background: var(--white); color: var(--darkgreen);}
.heading-4{font-size: 40px; color: var(--darkgreen);}
.com-p{background: var(--light); padding: 50px 100px;}
.p4{font-size: 14px;letter-spacing: 2px; line-height: 20px;}
.green-sec{background:url(../image/ban.png), var(--darkgreen); background-repeat: no-repeat;
background-size: 627px;}
.foot-menu{margin-bottom: 50px;}
.foot-menu li{list-style: none; padding: 10px;}
.search{
	border-radius: 25px;
	background: transparent;
	border: none;
	outline: none;
	color: var(--white);
}
.foot-menu li a{text-decoration: none; color: var(--white); font-size: 14px;}
.copy{text-align: center; padding-top: 50px; color: var(--white);font-size: 14px;}
.sicon-1{color: var(--white); margin-right: 20px;}
.search-outer{border: 1px solid var(--white); padding: 10px 25px; width: 200px;
border-radius: 30px;}
.search-outer i{color: var(--white)!important;}
hr{border: none;height: 1px; background: #8f8f8f6b;}
.fixed {position: fixed;top:0; left:0;width: 100%; background: var(--darkgreen);}

::-webkit-scrollbar {
  width: 10px;
  background: var(--white);
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  
}

::-webkit-scrollbar-thumb {
  background: var(--lightgreen);


}

If you face any problem to understand this code so please watch this video tutorial.

Leave a Reply

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