A landing page template is any web page that a visitor can “land” on. However, its plays a vital role in terms of marketing. It is a standalone part of web page distinct from your main website. Therefore one must focus on their landing page. So lets start our landing page template tutorial without wasting time.

Which things landing page should contain!

First of all a landing page must not contain huge paragraphs or texts. Because its just a small part of your webpage which will catch a visitors attention when he/she opens your site. Basically a landing page should contain a hero image,a heading and slogan or offers(E-commerce). So create a folder and name it landing page. Now for this purpose we need only 3 files an image,a html and a css file. So create all these and write down code below in your html file.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Landing page</title>

	<link rel="stylesheet" href="style.css">
</head>
<body>
	
	<div class="header">
		<div class="content">
			<h1>Coders dairy</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, est!</p>
			<a href="#">Read more</a>
		</div>
	</div><!-- Add anything after it -->

</body>
</html>

I have just created 2 div one for header and another for the content inside header. So anything you want to add you can add after the div with class header. Now lets head over to our css file.

Designing our landing page template

I will create a full height landing page. So if you don’t want full height you can change it too. Open your style sheet and write down the code.

* {
	margin:0;
	padding:0;
}

html,body {
	margin:0;
	font-family:Baskerville;
	letter-spacing:1.5px;
}

.header {
	/* set the hero image with proper size and position */
	background-image:url('image2.jpeg');
	background-size:cover;
	background-position:center;
	/* vh = viewport height */
	height:100vh;
	color:#fff;
	display:flex;
	flex-direction:column;
	/* set the contents at center */
	justify-content:center;
	align-items:center;
	text-align:center;
}

/* styling the elements inside content */
.content {
	background:rgba(0,0,0,0.7);
	padding:10px 15px;
	margin:0 10px;
	border-radius:4px;
}

.content h1 {
	font-weight:200;
	padding-bottom:20px;
}

.content p {
	color:#ddd;
	padding-bottom:15px;
}

.content a {
	display:inline-block;
	color:#fff;
	text-decoration:none;
	border:1px solid #fff;
	border-radius:4%;
	font-size:14px;
	padding:8px 15px;
	transition:0.4s all linear;
}

.content a:hover {
	background:#fff;
	color:#000;
}

In the above code i have just added simple style rules to our markup. Most of all it just contains basic css rules. I have added height 100 vh to header. So If you don’t want full height you can change it to anything you want. Therefore now open your and you will see something like this.

result

Finally you have create a good looking and responsive landing page template. So now you are ready to make your site look awesome and attract more visitors.

You can also learn how to create css grids or a side nav. Don’t forget to share with your friends too.


Subham Mitra

Subham Mitra is a full-stack developer as well as well as an aspiring entrepreneur who is pursuing MCA and providing brilliant stuff for a great range of people's through Coders Diaries.

https://codersdiaries.com


4 Comments

Sosi's Mom · October 12, 2017 at 7:08 pm

What an informative post!

Angeline · October 12, 2017 at 7:19 pm

Loved this coding help! I will definitely use this on my site. I really need to study HTML more!

Anissa · October 12, 2017 at 10:59 pm

I need to work on my Landing page! Thanks for the tips!

Amy · October 13, 2017 at 12:11 am

Thanks for sharing!! 🙂

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

WhatsApp WhatsApp us