How to Make A blog Template Design Using HTML CSS – M-SoftTech is a coding blogs related to HTML CSS JavaScript
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
![Toni Kroos là ai? [ sự thật về tiểu sử đầy đủ Toni Kroos ]](https://evbn.org/wp-content/uploads/New-Project-6635-1671934592.jpg)
