Blog Html Design

In this article, we will create a blog with the help of HTML design. At the beginning of this article, we will learn some basics of HTML and the meaning of blog. After that, we will understand this concept with the help of various examples of HTML Blog design.

What do you mean by HTML?

HTML stands for Hypertext Markup language. It is used to create a structure of web pages. The latest version of HTML is HTML5.

What do you mean by BLOG?

A blog is an online journal or informational website displaying information in reverse chronological order, with the latest posts appearing first, at the top. It is a platform where a writer or a group of writers share their views on an individual subject.

Let's take various examples of HTML blog design.

Example 1:

<! DOCTYPE html>
<html lang="en">
<head>
  <title> HTML blog design </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
  background-color: rgb(255, 212, 255);
} 
h1 {
  margin-left: 600px;
}
h3 {
  margin-left: 640px;
}
#sunset {
  margin-left: 150px;
  border-top: 1px solid rgb(204, 204, 204);
  padding-top: 40px;
  width: 1100px;    
  z-index: 1;
}
#top-bar {
  margin-left: 450px;
  position: relative;
  bottom: 260px;
 }
#page {
  z-index: 2;
  border: 1px solid white;
  background-color: white;
  width: 600px;
  margin-left: 170px;
  margin-top: 80px;
  position: relative;
  bottom: 160px;
  padding-bottom: 400px  
}
</style>
<body>
<h1> HTML Blog Design </h1>
<div id="sunset">
<img src="1.png" width="1100" height="210">
  <p>
  <div id="top-bar"> Home / About Me / Contact </div>
  </p>
</div>
  <div id="page">
    <p>
    <h2> Blog Design </h2>
    </p>
</div>
</body>
</html>

Explanation:

In the above example, we have created a HTML blog design.

Output:

Example 2:

<! DOCTYPE html>
<html>
<head>
<title> HTML blog design </title>
  <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}
.leftcolumn {   
  float: left;
  width: 75%;
}
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
.card {
   background-color: white;
   padding: 20px;
   margin-top: 20px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
</style>
</head>
<body>
<div class="header">
  <h2> Blog Name </h2>
</div>
<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2> TITLE HEADING </h2>
      <h5> Title description, Dec 7, 2017 <h5>
      <div class="fakeimg" style="height:200px;"> Image </div>
      <p> Some text.. </p>
      <p> Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. </p>
    </div>
    <div class="card">
      <h2> TITLE HEADING </h2>
      <h5> Title description, Sep 2, 2017 </h5>
      <div class="fakeimg" style="height:200px;"> Image </div>
      <p> Some text.. </p>
      <p> Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. </p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2> About Me </h2>
      <div class="fakeimg" style="height:100px;"> Image </div>
      <p> Some text about me in culpa qui officia deserunt mollit anim.. </p>
    </div>
    <div class="card">
      <h3> Popular Post </h3>
      <div class="fakeimg"> Image </div> <br>
      <div class="fakeimg"> Image </div> <br>
      <div class="fakeimg"> Image </div>
    </div>
    <div class="card">
      <h3> Follow Me </h3>
      <p> Some text.. </p>
    </div>
  </div>
</div>
<div class="footer">
  <h2> Footer </h2>
</div>
</body>
</html>

Explanation:

In the above example, we have created a HTML blog design.

Output:

Example 3:

<! DOCTYPE html>
<html lang="en">
<head>
  <title> HTML blog design </title>
  <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
@import url(<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;1,400&display=swap" rel="stylesheet">);
:root {
    --body-bg: rgba(241, 241, 241, 1);
    --grid-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    --main-color: #fff;
    --hover-bg-clr: #cccccc;
    --black-clr: #000;
}
*{
    font-family: lato, sans-serif;
    box-sizing: border-box;
}
body {
    background: var(--body-bg);
    margin: 0px;
    padding: 0px;
}
.nav-ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    background: transparent;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
}
.nav-ul li {
    line-height: 2.5;
}
.nav-ul > li > a {
    text-decoration: none;
    color: var(--black-clr);
    display: block;
    padding: 0 3rem;
    transition: background-color 500ms, color 500ms;
}
@media (max-width: 665px) {
    .nav-ul > li > a{
        padding: 0 1rem;
    }
}
.nav-ul > li > a:hover {
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 4rem rgba(0, 0, 0, 1);
    color: var(--body-bg);
}
.heading {
    font-size: 2.4rem;
    margin-top: 4rem;
    text-align: center;
    text-transform: uppercase;
}
.tag-line {
    margin-top: 0px;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-align: center;
}
.container {
    height: 100%;
    width: 100%;
    margin-bottom: 1rem;
    padding: 30px;
    display: grid;
    grid-template-columns: 65% 35%;
    grid-template-rows: 60vh 18vh 32.5vh 35vh 7vh;
    grid-gap: 1.5rem; 
    overflow: hidden;
}
.article-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    box-shadow: var(--grid-shadow);
    overflow: hidden;
}
.img-1 {
    width: 100%;
    height: auto;
}
.article-content {
    text-align: justify;
    margin: 0px;
    padding: 0px 2rem;
    background-color: var(--main-color);
    height: 100%;
}
.article-heading {
    margin-top: -5px;
    padding-top: 1rem;
}
.article-txt {
    margin-top: 2rem;
}
.article-btn {
    margin-top: 4rem;
    text-decoration: none;
    color: var(--black-clr);
    font-weight: 500;
    display: inline-block;
    padding: 0.5rem 1.2rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(0, 0, 0, 0.5);
    transition: transform 400ms, box-shadow 500ms;
}
.article-btn:hover {
    transform: scale(1.05);
    border: none;
    box-shadow: 0 0 1.5rem 0 #d3d3d3;
}
.article-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    box-shadow: var(--grid-shadow); 
    overflow: hidden;      
}
.img-2 {
    width: 100%;
    height: auto;
}
.article-3 {
    box-shadow: var(--grid-shadow);
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    overflow: hidden;
}
.popular {
    font-weight: lighter;
    font-size: 1.6rem;
    margin: 0px;
    padding: 1rem 2rem;
    background-color: var(--body-bg);
}
.s-img {
    height: 3rem;
    width: 3rem;
}
.img-link {
    background: var(--main-color);
    display: block;
    border-bottom: 1px solid #cccccc;
    text-decoration: none;
    color: var(--black-clr);
    font-size: 1.5rem;
    padding: 0.62rem 2rem;
}
.img-link:hover {
    background: var(--hover-bg-clr);
}
.article-4 {
    box-shadow: var(--grid-shadow);
    grid-column: 1 / 2;
    grid-row: 3 / 6;
    overflow: hidden;
}
.img-3 {
    width: 100%;
    height: auto;
}
.article-5 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    box-shadow: var(--grid-shadow);
    overflow: hidden;
}
.tag-container {
    padding-left: 1rem;
    padding-top: 1rem;
    background: var(--main-color);
    height: 100%;
}
.tags {
    display: inline-block;
    text-decoration: none;
    color: var(--black-clr);
    background: var(--hover-bg-clr);
    line-height: 1.5;
    height: 1.5rem;
    width: max-content;
    margin: 0.15rem;
    padding: 0 1rem;
    border-radius: 0.3rem;
}
.footer {
    height: 12rem;
    background: var(--black-clr);
    display: grid;
    place-items: center;
}
.footer-text {
    color: var(--body-bg);
}
@media (max-width: 1105px) {
    .container {
        grid-template-rows: 60vh 20vh 33vh 45vh 1vh;
    }
    .article-btn {
        margin-top: 6rem;
    }
    .img-link {
        padding: 0.72rem 2rem;
    }
}
@media (max-width: 852px) {
    .container {
        grid-template-columns: 100%;
        grid-template-rows: 31.5rem 33.8rem 23.2rem 31.5rem 11rem;
    }
    .article-1 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .article-2 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .article-3 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .article-4 {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }
    .article-5 {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }
    .article-btn {
        margin-top: 1.5em;
    }
};
</style>
<body>
    <header>
The error in responsiveness is only due to the navigation bar of code pen you can test it by copy pasting in you code editor Thank you!! 
        <nav>
            <ul class="nav-ul">
                <li> <a href="#"> Home </a> </li>
                <li> <a href="#"> About </a> </li>
                <li> <a href="#"> Contact </a> </li>
                <li> <a href="#"> Blogs </a> </li>
            </ul>
        </nav>
    </header>
    <main>
        <h1 class="heading"> my blog </h1>
        <p class="tag-line"> Welcome to blogs regarding Lorem Ipsum </p>
        <div class="container">
            <div class="article-1">
                <img class="img-1" src="1.png" alt="forest image">
                <div class="article-content">
                    <h2 class="article-heading"> A Day in Woods </h2>
                    <p class="article-txt"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur officia commodi similique dolore itaque impedit mollitia totam minus accusantium tempore saepe doloremque. Quibusdam dolor inventore facere ratione cumque numquam cupiditate reprehenderit non explicabo aliquam nobis repellat impedit minima repudiandae. </p>
                    <a class="article-btn" href="#"> READ MORE > > </a>
                </div>    
            </div>
            <div class="article-2">
                <img class="img-2" src="6.png" alt="Mountains with clear blue sky">
                <div class="article-content">
                    <h2 class="article-heading"> About Me </h2>
                    <p> Tenetur officia commodi similique dolore itaque impedit mollitia totam minus accusantium tempore saepe doloremque. Quibusdam dolor inventore facere ratione. </p>
                </div>                   
            </div>
            <div class="article-3">
                <p class="popular"> Popular blogs </p>
                <a class="img-link" href="#"> <img class="s-img" src="1.png" alt=""> <span class="popular-link"> Lorem </span> </a>
                <a class="img-link" href="#"> <img class="s-img" src="4.png" alt=""> <span class="popular-link"> Ipsum </span> </a>
                <a class="img-link" href="#"> <img class="s-img" src="4.png" alt=""> <span class="popular-link"> Dolor </span> </a>
                <a class="img-link" href="#"> <img class="s-img" src="5.png" alt=""> <span class="popular-link"> Tenetur </span> </a>
            </div>
            <div class="article-4">
                <img class="img-3" src="3.png" alt="mountains with cloudy sky">
                <div class="article-content">
                    <h2 class="article-heading"> Nature Is The Most Beautiful </h2>
                    <p class="article-txt"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur officia commodi similique dolore itaque impedit mollitia totam minus accusantium tempore saepe doloremque. Quibusdam dolor inventore facere ratione cumque numquam cupiditate reprehenderit non explicabo aliquam nobis repellat impedit minima repudiandae. </p>
                    <a class="article-btn" href="#"> READ MORE > > </a>
                </div> 
            </div>
            <div class="article-5">
                <p class="popular"> Tags </p>
                <div class="tag-container">    
                    <a class="tags" href=""> Encourage </a>
                    <a class="tags" href=""> Confidence </a>
                    <a class="tags" href=""> Stage </a>
                    <a class="tags" href=""> Family </a>
                    <a class="tags" href=""> Success </a>
                    <a class="tags" href=""> Team work </a>
                    <a class="tags" href=""> Motivational </a>
                    <a class="tags" href=""> Create yourself </a>
                    <a class="tags" href=""> Self Confidence </a>
                    <a class="tags" href=""> Struggle </a>
                    <a class="tags" href=""> Games </a>
                    <a class="tags" href=""> failure </a>
                    <a class="tags" href=""> Practice </a>
                    <a class="tags" href=""> Exercise </a>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="footer">
            <p class="footer-text"> © 2020-2021 </p>
        </div>
    </footer>
</body>
</html>

Explanation:

In the above example, we have created a HTML blog design.

Output: