How to create a responsive blog layout with CSS?

CSSWeb DevelopmentFront End Technology

To create responsive blog layout with CSS, the code is as follows −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   * {
      box-sizing: border-box;
   }
   body {
      margin: 0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   nav {
      font-size: 20px;
      background-color: rgb(136, 22, 182);
      color: #cccccc;
      height: 75px;
   }
   ul {
      position: fixed;
      right:10px;
   }
   ul li {
      display: inline;
      padding-right: 30px;
      font-weight: 500;
      color: rgb(251, 255, 0);
   }
   .logo {
      width: 75%;
      margin-left: auto;
      margin-right: auto;
      color: white;
      float: left;
      font-size: 30px;
      padding-left: 20px;
      padding-top: 20px;
   }
   .blog {
      margin-top: 20px;
      width: 75%;
      margin-left: auto;
      margin-right: auto;
      height: 400px;
   }
   .post {
      margin-top: 20px;
      float: left;
   }
   .blogHeader {
      font-size: 36px;
      margin-bottom: 20px;
   }
   .links {
      float: right;
   }
   .links li {
      color: black;
   }
   footer {
      color: white;
      position: fixed;
      width: 100%;
      bottom: 0;
      margin-left: auto;
      margin-right: auto;
      font-size: 30px;
      height: 100px;
      padding: 20px;
      background-color: rgb(9, 141, 101);
      text-align: center;
   }
</style>
</head>
<body>
<nav>
<div class="logo">
↷ LOGO ↶
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="blog">
<div class="post">
<div class="blogHeader">
<h1>Blog Heading</h1>
</div>
<div class="blog-body">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt non neque eos eaque veritatis praesentium.
</p>
</div>
</div>
<div class="links">
<ul>
<li>BLOG 2</li>
<li>BLOG 3</li>
</ul>
</div>
</div>
<footer>
Copyright ©
</footer>
</body>
</html>

Output

The above code will produce the following output −

raja
Published on 12-May-2020 17:03:09
Advertisements