How to Make A blog Template Design Using HTML CSS

hello viewers, in this article I will tell you how to create custom blog template design help of html CSS. this template is very simple and very attractive. you have seen lots of blog template on internet but this different by all. because we are not use a download template design. we create design by your manual coding. you can easily modify this template design to your need according. this blog theme is based on two main colours first one is blue colour and second one is black colour you can see that on this project. colour combination is main part of your template because if your colour choice is not good so that your template design is also not looks good. when you create a web template design two main things you have one is web template fonts and second one is web template colour combination. if you have chased correct colour and fonts. then your web template design looking are very attractive and unique.

Complete Blog Website Using HTML/CSS | Blog Website Template

now you can copy the source code in below and then paste your html document

How to Make a Landing page Website using html CSS

HTML Code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<header>
	<div class="container">
		<div class="col-div-6">
			<p class="logo"><span>M-</span>Softtech</p>
		</div>
		<div class="col-div-6">
			<ul class="nav">
				<li><a href="#">Blog</a></li>
				<li><a href="#">Latest</a></li>
				<li><a href="#">Contact</a></li>
				<li><button>Subscribe</button></a></li>
			</ul>
		</div>
		<div class="clearfix"></div>
	</div>
</header>

<section class="banner-section">
	<div class="container">
		<div class="col-div-6">
			<h1 class="heading">A blog that people will<br> actually want to read</h1>
			<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the </p>
			<div class="input-box"><input type="text" placeholder="Enter Your Email"><button>Try it</button></div>
		</div>
		<div class="col-div-6">
			<br><br><br><br>
			<div style="text-align: center;"><img src="image/1.png" class="ban-img"></div>
		</div>
		<div class="clearfix"></div>
	</div>
</section>


<section>
	<div class="container">
		<br><br>
		<div class="col-div-6">
				<div class="box-1">
				<img src="image/2.jpg" class="b-img">
				<h3 class="heading1">Travel</h3>
				<p class="blog-heading">Beautiful Location For Travel</p>
				<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the Beautiful Location For Travel</p>
				<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
				<span class="name">Manoj Singh . SEP 21, 2021</span>
		</div>
			</div>
		<div class="col-div-6">
			<div class="lr-box">
			<div class="col-div-6">
				<h3 class="heading1">Food</h3>
				<p class="blog-heading-1">Good Food Good Health</p>
				<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting </p>
				<span class="name">Manoj Singh . SEP 21, 2021</span>
			</div>
			<div class="col-div-6">
				<img src="image/f.jpg" class="b-img-1">
			</div>
			<div class="clearfix"></div>
			<hr class="line">
			</div>


			<div class="lr-box">
			<div class="col-div-6">
				<h3 class="heading1">Technology</h3>
				<p class="blog-heading-1">Looking for tech blogs</p>
				<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting </p>
				<span class="name">Manoj Singh . SEP 21, 2021</span>
			</div>
			<div class="col-div-6">
				<img src="image/t.jpg" class="b-img-1">
			</div>
			<div class="clearfix"></div>
			<hr class="line">
			</div>

			<div class="lr-box">
			<div class="col-div-6">
				<h3 class="heading1">Food</h3>
				<p class="blog-heading-1">Good Food Good Health</p>
				<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting </p>
				<span class="name">Manoj Singh . SEP 21, 2021</span>
			</div>
			<div class="col-div-6">
				<img src="image/fun.jpg" class="b-img-1">
			</div>
			<div class="clearfix"></div>
			<hr class="line">
			</div>

		</div>

		<div class="clearfix"></div>
	</div>
</section>

<br><br>


<section>
	<div class="container" style="text-align:center;">
		<h3>Latest stories</h3>
		<br>
		
		<div class="box-2">
			<img src="image/e.jpg" class="b-img-1">
			<h3 class="heading1">Entertainment</h3>
				<p class="blog-heading-1">Entertainment good for health</p>
				<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting </p>
				<span class="name">Manoj Singh . SEP 21, 2021</span>
		</div>

		<div class="box-2">
			<img src="image/a.jpg" class="b-img-1">
			<h3 class="heading1">Animals</h3>
				<p class="blog-heading-1">Good Food Good Health</p>
				<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting </p>
				<span class="name">Manoj Singh . SEP 21, 2021</span>
		</div>

		<div class="box-2">
			<img src="image/p.jpg" class="b-img-1">
			<h3 class="heading1">Photograpy</h3>
				<p class="blog-heading-1">Good Food Good Health</p>
				<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting </p>
				<span class="name">Manoj Singh . SEP 21, 2021</span>
		</div>
		
		<div class="clearfix"></div>

		<div class="box-2">
			<img src="image/fun.jpg" class="b-img-1">
			<h3 class="heading1">Fun</h3>
				<p class="blog-heading-1">Good Food Good Health</p>
				<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting </p>
				<span class="name">Manoj Singh . SEP 21, 2021</span>
		</div>

		<div class="box-2">
			<img src="image/f.jpg" class="b-img-1">
			<h3 class="heading1">Food</h3>
				<p class="blog-heading-1">Good Food Good Health</p>
				<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting </p>
				<span class="name">Manoj Singh . SEP 21, 2021</span>
		</div>

		<div class="box-2">
			<img src="image/2.jpg" class="b-img-1">
			<h3 class="heading1">Food</h3>
				<p class="blog-heading-1">Good Food Good Health</p>
				<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting </p>
				<span class="name">Manoj Singh . SEP 21, 2021</span>
		</div>

		<div class="clearfix"></div>
	</div>
</section>


<section class="foot-section">
	<div class="container">
		<div class="foot-inner">
		<h1 class="heading" style="margin: 0px;">Get our weekly email</h1>
			<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the </p>
			<div class="input-box ibox2"><input type="text" placeholder="Enter Your Email"><button>Sign up</button></div>
		</div>
	</div>
</section>

<footer>
	<div class="container">
		<p>Copyright@ M-SoftTech</p>
	</div>
</footer>

</body>
</html>

Copy  the css code in below and paste your css document

CSS Code

:root{
	--main: #7b4ee4 ;
	--darkblue: #362078;
	--black: #060606;
	--white: #e7dff4;
}
*{
	margin: 0px;
	padding: 0px;
	font-family: system-ui;
}
.clearfix{
	clear: both;
}
header{
	padding: 20px 0px;
	box-shadow: 2px 2px 15px var(--black);
}
.container{
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
}
.col-div-6{
	width: 50%;
	float: left;
}
.logo{
	font-weight: bold;
	font-size: 25px;
	color: var(--black);
}
.logo span{
	color: var(--main);
}
.nav{
	float: right;
}
.nav li{
	list-style: none;
	float: left;
	padding: 3px 20px;
}
.nav li a{
	text-decoration: none;
	color: var(--black);
}
.nav li button{
	padding: 7px 15px;
    background: var(--main);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: -5px;
}
.banner-section{
	background: var(--main);
	height: 400px;
	overflow: hidden;
}
.heading{
	color: var(--white);
    font-size: 40px;
    letter-spacing: 1px;
    margin-top: 14%;
}
.p1{
	color: white;
    width: 395px;
    margin-top: 20px;
    margin-bottom: 20px;
    letter-spacing: 1px;
    font-size: 14px;
}
.input-box{
	box-shadow: 1px 7px 8px 0px #222121;
    width: 360px;
    border-radius: 50%;
}
.input-box input[type="text"]{
	padding: 9px;
    width: 265px;
    border: none;
    border-radius: 5px;
    outline: none;
}
.input-box button{
	padding: 10px 27px;
    border-radius: 0px 5px 5px 0px;
    border: none;
    margin-left: -6px;
    background: var(--darkblue);
    color: white;
    cursor: pointer;
}
.ban-img{
	width: 250px;
	margin-bottom:-50px;

}
.b-img{
	width: 100%;
	border-radius: 10px;
}
.heading1{
	margin-top: 20px;
	color: var(--main);
	font-size: 14px;
	text-transform: uppercase;
}
.blog-heading{
	font-size: 29px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--black);
}
.text{
	font-size: 13px;
    letter-spacing: 1px;
    color: var(--black);
    margin-bottom: 20px;
}
.name{
	text-transform: uppercase;
    font-weight: 600;
    color: #a1a1a1;
    font-size: 14px;
}
.lr-box{
	padding: 10px 20px;

}
.b-img-1{
	width: 100%;
	height: 160px;
	border-radius: 10px;
	margin-top: 7px;
}
.blog-heading-1{
	font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--black);
}
.line{
	    width: 100%;
	    margin-top: 15px;
    border: none;
    height: 1px;
    background: #ddd;
}
.lr-box:hover{
	opacity: 0.5;
	cursor: pointer;
}
.box-1:hover{
	opacity: 0.5;
	cursor: pointer;
}

.box-2{
	width: 28.5%;
	float: left;
	margin: 25px;
}
.box-2:hover{
	opacity: 0.5;
	cursor: pointer;
}
.foot-section{
	background: var(--main);
}
.foot-inner{
	width: 500px;
	margin: 0 auto;
	padding: 50px;
	text-align: center;
}
.ibox2{
	margin: 0 auto;
	width: 380px;
}
footer{
	background:var(--darkblue);
	padding: 15px;
}
footer p{
	color: var(--white);
	text-align: center;
}

if you have any problem to understand this code then you please watch this video tutorial also

One thought on “How to Make A blog Template Design Using HTML CSS

  • December 25, 2022 at 2:11 am
    Permalink

    It’s really a cool and useful piece of info. I am glad that you shared this useful information with us. Please keep us informed like this. Thanks for sharing.

    Reply

Leave a Reply

Your email address will not be published.