RESPONSIVE BLOG LAYOUT
Run 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
   /* Blog heading. Bigger size*/
	.header {
	  text-align: center;
	  font-size: 35px;
	  background: white;
	  padding: 25px;
	}

	
	/* Column for the contents */
	.column-content {
	  float: left;
	  width: 40%;
	}

	/* column for author */
	.column-author {
	  float: left;
	  width: 80%;
	  padding-left: 20px;
	}

	/*  image */
	.img {
	  background-color: #aaa;
	  width: 100%;
	  padding: 20px;
	}

	/* card */
	.card {
	  background-color: white;
	  padding: 20px;
	  margin-top: 20px;
	}

	/* Clear floats after the column */
	.container:after {
	  content: "";
	  display: table;
	  clear: both;
	}

	/* Also add some footer  */
	.footer {
	  
	  text-align: center;
	  background: #cccccc;
	  margin-top: 15px;
	  padding: 25px;
	}
	button{
      padding: 16px;
	  width: 70px;
	  text-align: center;
	  text-decoration: none;
	  font-size: 25px;
	  color: blue;
   }

	/* The columns are placed vertically for smaller layouts */
	@media screen and (max-width: 700px) {
	  .column-content, .column-author {
		width: 100%;
		padding: 0;
	  }
	}
</style>
</head>
<body>
    <div class="header">
	  <h2>Blog Heading</h2>
	</div>

	<div class="container">
	  <div class="column-content">
		<div class="card">
		  <h2>Content Heading</h2>
		  <h5>About content, Aug 14, 2021</h5>
		  <div class="img" style="height:200px;">Image</div>
		  <p>The blog is a informational content on any particular subject. The blog posted in webpage is displayed in reverse chronological order so that latest post appears first. A blog page consists of informational content along with the author description, images , social media buttons etc. The blog contents are arranged in some layout . Here we will learn to create a responsive layout for the blog. It can be done using CSS.</p>
		</div>
		<div class="card">
		  <h2>Previous content</h2>
		  <h5>Title of content, Feb 2, 2020</h5>
		  <div class="img" style="height:200px;">Image</div>
		  <p>The blog is a informational content on any particular subject. The blog posted in webpage is displayed in reverse chronological order so that latest post appears first. A blog page consists of informational content along with the author description, images , social media buttons etc. The blog contents are arranged in some layout . Here we will learn to create a responsive layout for the blog. It can be done using CSS.</p>
		</div>
	  </div>
	  <div class="column-content">
		<div class="card">
		  <h2>Content Heading</h2>
		  <h5>About content, Aug 14, 2019</h5>
		  <div class="img" style="height:200px;">Image</div>
		  <p>The blog is a informational content on any particular subject. The blog posted in webpage is displayed in reverse chronological order so that latest post appears first. A blog page consists of informational content along with the author description, images , social media buttons etc. The blog contents are arranged in some layout . Here we will learn to create a responsive layout for the blog. It can be done using CSS.</p>
		</div>
		<div class="card">
		  <h2>Previous content</h2>
		  <h5>Title of content, Feb 2, 2018</h5>
		  <div class="img" style="height:200px;">Image</div>
		  <p>The blog is a informational content on any particular subject. The blog posted in webpage is displayed in reverse chronological order so that latest post appears first. A blog page consists of informational content along with the author description, images , social media buttons etc. The blog contents are arranged in some layout . Here we will learn to create a responsive layout for the blog. It can be done using CSS.</p>
		</div>
	  </div>
	  
	  <div class="column-author">
		<div class="card">
		  <h2>About Me</h2>
		  <div class="img" style="height:100px;">Image</div>
		  <p>I am a content writer writing articles since years. My achievements. My journey.</p>
		</div>
		<div class="card">
		  <h3>Popular Post</h3>
		  <div class="img">Image</div><br>
		  <div class="img">Image</div><br>
		  
		</div>
	  </div>
	</div>

	<div class="footer">
	  <h2>Follow me</h2>
	  <button> <i class="fa fa-facebook"></i></button> 
      <button> <i class="fa fa-twitter"></i></button> 
      <button> <i class="fa fa-linkedin"></i></button> 
	  <p> Copywright@some</p>
	</div>

		
</body>
</html>