Responsive Blog Website in HTML & CSS || Blog Template

Hello friends, Today in this blog I will show you how to create a complete responsive blog website using HTML and CSS(Frontend Only). Earlier, you learned to Create a Responsive Portfolio Landing Page.

A blog Website is a website where you can post your articles and news and make it available and accessible to the whole world. If you want to start blogging or news websites then this is the perfect place for you to learn and get the source code for a responsive blog website template. In this blog template, I haven’t used any programming languages. It is just made up of HTML & CSS.

After going through this blog, you can easily create a responsive blog website. I have tried my best to explain it in a very simple and easy way so that you won’t have to face any problems. As you can see in the live demo, the whole website is divided into 5 parts i.e. “header, hero section, post section, sidebar & footer”. The header part contains a logo, banner ad, and navigation bar. In the hero section, there will be three posts. After seeing the live demo you may think the hero section is created with a CSS grid but on this website I haven’t used a CSS grid, it is created with flexbox. In the post section, there is a list of some posts containing the featured image, post title, meta description, and published date. The sidebar contains three popular posts, categories with a post count, and the newsletter subscription. At last in the footer, there is a copyright ownership detail.

If you’re feeling difficult to understand what I am saying. You can watch a video preview of this program (Responsive Blog Website in HTML & CSS).

Video preview of Responsive Blog Website

All this design is based on CSS only. If you’re a beginner you can also create this type of blog website. If you like this program (Responsive Blog Website in HTML & CSS) and want to get source code. You can easily get the source code of this program. To get the source codes you just need to scroll down.

Responsive Blog Website in HTML & CSS [Source Codes]

To create this blog website. First, you need to create five Files one HTML File and four CSS Files inside the same folder. After creating these files just paste the following code into your file.

File Structure

First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

HTML

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <title>Responsive Blog Template</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="nav-bar.css">
    <link rel="stylesheet" href="header.css">
    <link rel="stylesheet" href="footer.css">
</head>

<body>
    <!-- header starts -->
    <div class="header">
        <div class="logo">
            <a href=""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP9UooGs1ARFg_fTpE5Zy_BxADkJ3aAUE1x88Mcq6tM-QZuICbeC8qrve0lMivIKtrk4MsDzTPhZvxvDsfHT48O1b_ho2o0xe09KvxrNmsBbVqBxPPZu7lFMQy1NfUfw4iEGIZ-Psq-Gc/" alt=""></a>
        </div>
        <div class="banner-ad">Place for Ad</div>
    </div>
<!-- nav bar start -->
<nav>
    <label for="check" class="checkbtn">
        <div class="f-line"></div>
        <div class="s-line"></div>
        <div class="t-line"></div>
    </label>
    <input type="checkbox" id="check">
    <ul>
        <li><a href="" class="active">Home</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Contact Us</a></li>
    </ul>
</nav>
<!-- nav bar ends -->
    <div class="container">
        <!-- hero area starts  -->
        <div class="hero">
            <div class="featured">
                <!-- featured main post  -->
                <div class="main-featured">
                    <div class="blog-image">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXgXY1xsTXFKDeyatUgqj8UP5S6fYu1gZTQqg25Z-qqbjOb015ecCJWuvD98i1vDWS-xEz4QzSS0xTiokpUSWJ-HjvIOpEjJfOAx81NtC9Gqo3YTa1-RIGBm6yiyzY5OXSIBazRhcvC54/w400-h225/e58b56608bb741fa8581f3fe583db16c-0001.jpg"
                            alt="">
                    </div>
                    <div class="overlay"><a href="#"></a></div>
                    <h3 class="blog-title"><a href="#">Create Responsive Nav-bar in HTML & CSS | Rijan Neupane </a></h3>
                    <p class="meta-description"><i class="far fa-clock"></i> 25 April 2020</p>
                </div>
                <div class="sub-featured">
                    <!-- featured post 1 -->
                    <div class="sub-featured1">
                        <div class="blog-image">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpdli7YuMFWKdUHx8wHUyRjIYIuhsXrK6uFfNQc_p5ZeOcu9SC2PXc2rmN2C-ZwoT8fpVOeNkbPoKGR1e2eR9sP7-lkXHeyMCY57lXdaBUXf5-kDMIQGOPSnqMuEFXEj9GHVfNZJ9j_U/w400-h225/User+Registration+Website-page-001.jpg"
                                alt="">
                        </div>
                        <div class="overlay"><a href="#"></a></div>
                        <h3 class="blog-title"><a href="#">Create Responsive Nav-bar in HTML & CSS</a></h3>
                        <div class="meta-description"><i class="far fa-clock"></i> 25 April 2020</div>
                    </div>
                    <!-- featured post 2 -->
                    <div class="sub-featured2">
                        <div class="blog-image">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJzTiWC2RXqGQ7JBgQh6KE_lCOw0pb42p3LLudn9wgx8C3r_69pKdYnH9UDyFnt-4ZpoJoTWXn_N1Sr0XMhFIsUvykMdNwt3A8jk7sl49TqXF8S08BLsQJIjWV8-wmiZ7OpfRdNSjzjf0/w400-h225/Source+Code+on+WWW.RijanNeupane.com.np+%25281%2529.jpg"
                                alt="">
                        </div>
                        <div class="overlay"><a href="#"></a></div>
                        <h3 class="blog-title"><a href="#">Create Responsive Nav-bar in HTML & CSS</a></h3>
                        <div class="meta-description"><i class="far fa-clock"></i> 25 April 2020</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- hero area ends  -->

        <!-- .post and sidebar starts -->
        <div class="posts-and-sidebar">
            <!-- post starts -->
            <div class="posts">
                <div class="heading">
                    <p>Some Posts >></p>
                    <div class="divider"></div>
                </div>
                <div class="post">
                    <div class="image">
                        <a href=""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpFIe5IJp2-eUklm3QIFKtptYc92mhAUY9dUFEvTDgU1ldOwLSHBFWvMijVUeoHkDujOPZDUqvUZeh1Rdtw-OaTGbOy79PVtP8xRfKw1vwZXD5kyhaFqfayNTCNrUQycFb-DepXp-pkss/w400-h225/Working+Pendulum+clock+with+Javascript.gif" alt=""></a>
                    </div>
                    <div class="description">
                        <h3><a href="">Responsive Website using HTML & CSS</a></h3>
                        <p class="meta-data"><i class="far fa-clock"></i> 26 July 2021</p>
                        <p class="short-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum
                            maxime, unde labore doloremque ut earum!...</p>
                    </div>
                </div>
                <div class="post">
                    <div class="image">
                        <a href=""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpFIe5IJp2-eUklm3QIFKtptYc92mhAUY9dUFEvTDgU1ldOwLSHBFWvMijVUeoHkDujOPZDUqvUZeh1Rdtw-OaTGbOy79PVtP8xRfKw1vwZXD5kyhaFqfayNTCNrUQycFb-DepXp-pkss/w400-h225/Working+Pendulum+clock+with+Javascript.gif" alt=""></a>
                    </div>
                    <div class="description">
                        <h3><a href="">Responsive Website using HTML & CSS</a></h3>
                        <p class="meta-data"><i class="far fa-clock"></i> 26 July 2021</p>
                        <p class="short-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum
                            maxime, unde labore doloremque ut earum!...</p>
                    </div>
                </div>
                <div class="post">
                    <div class="image">
                        <a href=""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpFIe5IJp2-eUklm3QIFKtptYc92mhAUY9dUFEvTDgU1ldOwLSHBFWvMijVUeoHkDujOPZDUqvUZeh1Rdtw-OaTGbOy79PVtP8xRfKw1vwZXD5kyhaFqfayNTCNrUQycFb-DepXp-pkss/w400-h225/Working+Pendulum+clock+with+Javascript.gif" alt=""></a>
                    </div>
                    <div class="description">
                        <h3><a href="">Responsive Website using HTML & CSS</a></h3>
                        <p class="meta-data"><i class="far fa-clock"></i> 26 July 2021</p>
                        <p class="short-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum
                            maxime, unde labore doloremque ut earum!...</p>
                    </div>
                </div>
                <div class="post">
                    <div class="image">
                        <a href=""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpFIe5IJp2-eUklm3QIFKtptYc92mhAUY9dUFEvTDgU1ldOwLSHBFWvMijVUeoHkDujOPZDUqvUZeh1Rdtw-OaTGbOy79PVtP8xRfKw1vwZXD5kyhaFqfayNTCNrUQycFb-DepXp-pkss/w400-h225/Working+Pendulum+clock+with+Javascript.gif" alt=""></a>
                    </div>
                    <div class="description">
                        <h3><a href="">Responsive Website using HTML & CSS</a></h3>
                        <p class="meta-data"><i class="far fa-clock"></i> 26 July 2021</p>
                        <p class="short-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum
                            maxime, unde labore doloremque ut earum!...</p>
                    </div>
                </div>
                <div class="button">
                    <button>Load More</button>
                </div>
            </div>
            <!-- sidebar starts  -->
            <div class="sidebar">
                <!-- widget 1 -->
                <div class="popular-posts widget">
                    <div class="heading">
                        <p>Popular Posts</p>
                    </div>
                    <div class="divider"></div>
                    <div class="post">
                        <div class="image">
                            <a href=""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpFIe5IJp2-eUklm3QIFKtptYc92mhAUY9dUFEvTDgU1ldOwLSHBFWvMijVUeoHkDujOPZDUqvUZeh1Rdtw-OaTGbOy79PVtP8xRfKw1vwZXD5kyhaFqfayNTCNrUQycFb-DepXp-pkss/w400-h225/Working+Pendulum+clock+with+Javascript.gif" alt=""></a>
                        </div>
                        <a href="" class="post-title">Create Responsive Navigation Bar using HTML & CSS </a>
                    </div>
                    <div class="post">
                        <div class="image">
                            <a href=""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpFIe5IJp2-eUklm3QIFKtptYc92mhAUY9dUFEvTDgU1ldOwLSHBFWvMijVUeoHkDujOPZDUqvUZeh1Rdtw-OaTGbOy79PVtP8xRfKw1vwZXD5kyhaFqfayNTCNrUQycFb-DepXp-pkss/w400-h225/Working+Pendulum+clock+with+Javascript.gif" alt=""></a>
                        </div>
                        <a href="" class="post-title">Create Responsive Navigation Bar using HTML & CSS </a>
                    </div>
                    <div class="post">
                        <div class="image">
                            <a href=""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpFIe5IJp2-eUklm3QIFKtptYc92mhAUY9dUFEvTDgU1ldOwLSHBFWvMijVUeoHkDujOPZDUqvUZeh1Rdtw-OaTGbOy79PVtP8xRfKw1vwZXD5kyhaFqfayNTCNrUQycFb-DepXp-pkss/w400-h225/Working+Pendulum+clock+with+Javascript.gif" alt=""></a>
                        </div>
                        <a href="" class="post-title">Create Responsive Navigation Bar using HTML & CSS </a>
                    </div>
                </div>
                <!-- widget 2 -->
                <div class="categories widget">
                    <div class="heading">
                        <p>Categories</p>
                    </div>
                    <div class="divider"></div>

                    <!-- categories  -->
                    <a href="" class="list">
                        <p href="">HTML & CSS</p>
                        <span class="count">(3)</span>
                    </a>
                    <a href="" class="list">
                        <p href="">JavaScript</p>
                        <span class="count">(3)</span>
                    </a>
                    <a href="" class="list">
                        <p href="">PHP</p>
                        <span class="count">(3)</span>
                    </a>
                    <a href="" class="list">
                        <p href="">Science & Technology</p>
                        <span class="count">(3)</span>
                    </a>
                    <a href="" class="list">
                        <p href="">Automobile</p>
                        <span class="count">(3)</span>
                    </a>
                    <!-- categories end -->
                </div>
                <!-- widget 3 -->
                <div class="newsletter widget">
                    <div class="heading">
                        <p>Subscribe to Newsletter</p>
                    </div>
                    <div class="divider"></div>
                    <form action="">
                        <input type="email" placeholder="Email" required>
                        <button id="submit" type="submit">Submit</button>
                        <label for="submit"><i class="far fa-paper-plane"></i></label>
                    </form>
                </div>
            </div>
            <!-- sidebar ends  -->
        </div>
        <!-- post and sidebar ends -->
    </div>
        <!-- footer start -->
<footer>
    <p>Copyright © 2021 | Rijan Neupane | All Rights Reserved</p>
</footer>
    <!-- footer ends -->
</body>

</html>

Second, create a CSS file with the name header.css and paste the given code into your CSS file. Remember, you’ve to create a file with a .css extension.

Header.css

    .header {
  width: 100%;
  height: 130px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
}

.header .logo {
  margin-left: 30px;
  width: 40%;
}

.header .logo a img {
  width: 300px;
}

.header .banner-ad {
  border: 1px solid #ddd;
  height: 100px;
  width: 50%;
}

@media (max-width: 800px) {
  .header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: auto;
  }
  .header .logo {
    margin: 10px 0px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .header .banner-ad {
    width: 90%;
  }
}

@media (max-width: 330px) {
  .header .logo a img {
    width: 200px;
  }
}

Then, create a CSS file with the name nav-bar.css and paste the given code into your CSS file. Remember, you’ve to create a file with a .css extension.

Nav-bar.css

    * {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

nav {
  width: 100%;
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-shadow: 0px 8px 15px -8px #dadada;
          box-shadow: 0px 8px 15px -8px #dadada;
  background-color: #fff;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999;
  overflow: hidden;
}

nav input[type="checkbox"] {
  display: none;
}

nav label {
  cursor: pointer;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

nav label .f-line {
  width: 40px;
  height: 5px;
  background-color: #000000;
  -webkit-transition: .3s all ease-in-out;
  transition: .3s all ease-in-out;
}

nav label .s-line {
  width: 30px;
  height: 5px;
  background-color: #000000;
  -webkit-transition: .3s all ease-in-out;
  transition: .3s all ease-in-out;
  margin-top: 5px;
}

nav label .t-line {
  width: 20px;
  height: 5px;
  background-color: #000000;
  -webkit-transition: .3s all ease-in-out;
  transition: .3s all ease-in-out;
  margin-top: 5px;
}

nav label:hover .s-line {
  margin-left: 10px;
  background-color: #ff002b;
}

nav label:hover .t-line {
  margin-left: 20px;
}

nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 30px;
}

nav ul li {
  list-style: none;
  margin-right: 20px;
}

nav ul li a {
  text-decoration: none;
  text-transform: uppercase;
  color: #3a3a3a;
  padding: 5px;
  font-size: 16px;
  font-family: sans-serif;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

nav ul li a::after {
  content: "";
  position: relative;
  width: 100%;
  height: 3px;
  background-color: #fff;
}

nav ul li a:hover,
nav ul li .active {
  color: #ff002b;
  -webkit-transition: .2s all ease-in-out;
  transition: .2s all ease-in-out;
}

nav ul li a:hover::after {
  content: "";
  position: relative;
  width: 100%;
  height: 3px;
  background-color: #ff002b;
  -webkit-animation: underline .5s;
          animation: underline .5s;
}

@-webkit-keyframes underline {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes underline {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

nav #check:checked ~ ul {
  left: 0;
  margin-left: 0px;
  padding: 0px 20px;
  -webkit-transition: .5s all ease-in-out;
  transition: .5s all ease-in-out;
}

@media (max-width: 900px) and (min-width: 650px) {
  nav ul {
    margin-right: 0px;
  }
  nav ul li {
    margin-right: 10px;
  }
  nav ul li a {
    font-size: 16px;
  }
}

@media (max-width: 650px) {
  nav {
    height: 60px;
  }
  nav label {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    margin-right: 20px;
  }
  nav ul {
    left: -100%;
    padding-left: 10px;
    padding-top: 100px;
    position: fixed;
    top: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: #3d3d3d;
    height: 100vh;
  }
  nav ul li {
    margin-top: 20px;
  }
  nav ul li a {
    color: #fff;
  }
  nav ul li a::after {
    background-color: #3d3d3d;
  }
  .container h1 {
    font-size: 30px;
  }
}

Now, create a CSS file with the name style.css and paste the given code into your CSS file. Remember, you’ve to create a file with a .css extension.

Style.css

    * {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ff002b;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #df062a;
}

.container {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 30px 0px;
  z-index: 100;
}

.container .hero {
  width: 85%;
  margin: 30px 0px;
  padding: 10px;
  border: 1px solid #ddd;
  background-color: #fff;
}

.container .hero .featured {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.container .hero .featured .main-featured {
  width: 60%;
  height: 400px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.container .hero .featured .main-featured .blog-image {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.container .hero .featured .main-featured .blog-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.container .hero .featured .main-featured .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0px -200px 105px -105px rgba(0, 0, 0, 0.75) inset;
          box-shadow: 0px -200px 105px -105px rgba(0, 0, 0, 0.75) inset;
}

.container .hero .featured .main-featured .overlay a {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container .hero .featured .main-featured .blog-title {
  position: absolute;
  margin: 0px 10px 30px 10px;
  font-size: 25px;
  font-family: sans-serif;
}

.container .hero .featured .main-featured .blog-title a {
  text-decoration: none;
  color: #fff;
}

.container .hero .featured .main-featured .meta-description {
  position: absolute;
  color: #fff;
  left: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}

.container .hero .featured .main-featured:hover .blog-image img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
  -webkit-transition: .3s all ease-in-out;
  transition: .3s all ease-in-out;
}

.container .hero .featured .sub-featured {
  width: 40%;
  margin-left: 4px;
}

.container .hero .featured .sub-featured .sub-featured1 {
  width: 100%;
  height: 198px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.container .hero .featured .sub-featured .sub-featured1 .blog-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}

.container .hero .featured .sub-featured .sub-featured1 .blog-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.container .hero .featured .sub-featured .sub-featured1 .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0px -200px 105px -105px rgba(0, 0, 0, 0.75) inset;
          box-shadow: 0px -200px 105px -105px rgba(0, 0, 0, 0.75) inset;
}

.container .hero .featured .sub-featured .sub-featured1 .overlay a {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container .hero .featured .sub-featured .sub-featured1 .blog-title {
  position: absolute;
  margin: 0px 10px 30px 10px;
  font-size: 20px;
}

.container .hero .featured .sub-featured .sub-featured1 .blog-title a {
  text-decoration: none;
  color: #fff;
}

.container .hero .featured .sub-featured .sub-featured1 .meta-description {
  position: absolute;
  color: #fff;
  left: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}

.container .hero .featured .sub-featured .sub-featured1:hover .blog-image img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
  -webkit-transition: .3s all ease-in-out;
  transition: .3s all ease-in-out;
}

.container .hero .featured .sub-featured .sub-featured2 {
  width: 100%;
  height: 198px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-top: 4px;
}

.container .hero .featured .sub-featured .sub-featured2 .blog-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}

.container .hero .featured .sub-featured .sub-featured2 .blog-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.container .hero .featured .sub-featured .sub-featured2 .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0px -200px 105px -105px rgba(0, 0, 0, 0.75) inset;
          box-shadow: 0px -200px 105px -105px rgba(0, 0, 0, 0.75) inset;
}

.container .hero .featured .sub-featured .sub-featured2 .overlay a {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container .hero .featured .sub-featured .sub-featured2 .blog-title {
  position: absolute;
  margin: 0px 10px 30px 10px;
  font-size: 20px;
}

.container .hero .featured .sub-featured .sub-featured2 .blog-title a {
  text-decoration: none;
  color: #fff;
}

.container .hero .featured .sub-featured .sub-featured2 .meta-description {
  position: absolute;
  color: #fff;
  left: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}

.container .hero .featured .sub-featured .sub-featured2:hover .blog-image img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
  -webkit-transition: .3s all ease-in-out;
  transition: .3s all ease-in-out;
}

.container .posts-and-sidebar {
  width: 85%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.container .posts-and-sidebar .posts {
  width: 70%;
  height: auto;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
}

.container .posts-and-sidebar .posts .heading {
  padding: 10px 0px;
}

.container .posts-and-sidebar .posts .heading p {
  font-family: sans-serif;
}

.container .posts-and-sidebar .posts .heading .divider {
  width: 100%;
  height: 3px;
  background-color: #ddd;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

.container .posts-and-sidebar .posts .heading .divider::before {
  content: '.';
  position: absolute;
  width: 50px;
  background-color: #ff002b;
}

.container .posts-and-sidebar .posts .post {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 20px 0px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.container .posts-and-sidebar .posts .post .image {
  width: 400px;
  height: 150px;
  background-color: #ff002b;
  overflow: hidden;
  position: relative;
}

.container .posts-and-sidebar .posts .post .image a img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  -webkit-transition: .2s all ease-in-out;
  transition: .2s all ease-in-out;
}

.container .posts-and-sidebar .posts .post .image a img:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  -webkit-filter: grayscale(56%);
          filter: grayscale(56%);
}

.container .posts-and-sidebar .posts .post .description {
  margin-left: 10px;
  width: 100%;
}

.container .posts-and-sidebar .posts .post .description h3 {
  font-family: sans-serif;
  font-size: 20px;
  margin-top: 5px;
}

.container .posts-and-sidebar .posts .post .description h3 a {
  text-decoration: none;
  color: #000000;
}

.container .posts-and-sidebar .posts .post .description h3 a:hover {
  color: #ff002b;
}

.container .posts-and-sidebar .posts .post .description .meta-data {
  margin-top: 10px;
  color: #666666;
}

.container .posts-and-sidebar .posts .post .description .short-description {
  margin-top: 10px;
  color: #222;
}

.container .posts-and-sidebar .posts .button {
  width: 100%;
  height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.container .posts-and-sidebar .posts .button button {
  padding: 10px 15px;
  font-size: 17px;
  border: none;
  background-color: #ff002b;
  color: #fff;
  -webkit-transition: .3s all ease-in-out;
  transition: .3s all ease-in-out;
  cursor: pointer;
}

.container .posts-and-sidebar .posts .button button:hover {
  background-color: #df062a;
}

.container .posts-and-sidebar .sidebar {
  width: 30%;
  height: auto;
  margin-left: 71%;
  overflow-x: hidden;
  position: absolute;
}

.container .posts-and-sidebar .sidebar .widget {
  width: 100%;
  padding: 10px 5px;
  border: 1px solid #ddd;
  background-color: #fff;
  margin-bottom: 10px;
}

.container .posts-and-sidebar .sidebar .widget .heading p {
  font-family: sans-serif;
  font-size: 16px;
  color: #000;
}

.container .posts-and-sidebar .sidebar .widget .divider {
  width: 100%;
  height: 3px;
  background-color: #ddd;
  margin: 10px 0px;
  position: relative;
  overflow: hidden;
}

.container .posts-and-sidebar .sidebar .widget .divider::before {
  content: '.';
  position: absolute;
  width: 50px;
  background-color: #ff002b;
}

.container .posts-and-sidebar .sidebar .popular-posts .post {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 15px;
}

.container .posts-and-sidebar .sidebar .popular-posts .post .image {
  width: 200px;
  height: 80px;
  overflow: hidden;
  border-radius: 2px;
}

.container .posts-and-sidebar .sidebar .popular-posts .post .image a img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: .3s all ease-in-out;
  transition: .3s all ease-in-out;
}

.container .posts-and-sidebar .sidebar .popular-posts .post .image a img:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  -webkit-filter: grayscale(56%);
          filter: grayscale(56%);
}

.container .posts-and-sidebar .sidebar .popular-posts .post .post-title {
  text-decoration: none;
  color: #000;
  font-family: sans-serif;
  font-size: 14px;
  width: 100%;
  padding-left: 5px;
  margin-top: 10px;
  font-weight: 600;
}

.container .posts-and-sidebar .sidebar .popular-posts .post .post-title:hover {
  color: #ff002b;
}

.container .posts-and-sidebar .sidebar .categories .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  color: #000;
  margin: 8px 0px;
}

.container .posts-and-sidebar .sidebar .categories .list p {
  width: 95%;
  font-family: sans-serif;
  font-size: 14px;
  border-left: 2px solid #fff;
  padding-left: 1px;
}

.container .posts-and-sidebar .sidebar .categories .list span {
  width: 5%;
  margin-right: 5px;
  font-family: sans-serif;
  font-size: 14px;
  color: #999999;
}

.container .posts-and-sidebar .sidebar .categories .list:hover {
  color: #ff002b;
}

.container .posts-and-sidebar .sidebar .newsletter {
  width: 100%;
}

.container .posts-and-sidebar .sidebar .newsletter form input {
  width: 70%;
  padding: 10px;
  font-size: 18px;
  outline: none;
  border: 1px solid #999;
}

.container .posts-and-sidebar .sidebar .newsletter form input:focus {
  border: 1px solid #ff002b;
}

.container .posts-and-sidebar .sidebar .newsletter form button {
  display: none;
}

.container .posts-and-sidebar .sidebar .newsletter form label {
  width: 30%;
}

.container .posts-and-sidebar .sidebar .newsletter form label i {
  font-size: 20px;
  padding: 10px 15px;
  border: 1px solid #ff002b;
  color: #ff002b;
  cursor: pointer;
  -webkit-transition: .3s all ease-in-out;
  transition: .3s all ease-in-out;
}

.container .posts-and-sidebar .sidebar .newsletter form label i:hover {
  background-color: #ff002b;
  color: #fff;
}

@media (max-width: 900px) and (min-width: 600px) {
  .container .hero {
    width: 95%;
  }
  .container .posts-and-sidebar {
    width: 95%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .container .posts-and-sidebar .posts {
    width: 100%;
    position: relative;
  }
  .container .posts-and-sidebar .posts .post .image {
    width: 300px;
    height: 100px;
  }
  .container .posts-and-sidebar .posts .post .description h3 {
    font-size: 16px;
  }
  .container .posts-and-sidebar .posts .post .description .short-description {
    font-size: 14px;
  }
  .container .posts-and-sidebar .sidebar {
    width: 100%;
    margin: 10px 0px;
    position: relative;
  }
}

@media (max-width: 600px) {
  .container .hero {
    width: 98%;
  }
  .container .hero .featured {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .container .hero .featured .main-featured {
    height: 200px;
    width: 100%;
  }
  .container .hero .featured .main-featured .blog-title {
    font-size: 20px;
  }
  .container .hero .featured .sub-featured {
    width: 100%;
    margin: 10px 0px 0px 0px;
  }
  .container .hero .featured .sub-featured .sub-featured1 {
    height: 200px;
  }
  .container .hero .featured .sub-featured .sub-featured2 {
    height: 200px;
    margin-top: 10px;
  }
  .container .posts-and-sidebar {
    width: 98%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .container .posts-and-sidebar .posts {
    width: 100%;
    position: relative;
  }
  .container .posts-and-sidebar .posts .post {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .container .posts-and-sidebar .posts .post .description {
    margin-left: 0;
  }
  .container .posts-and-sidebar .posts .post .image {
    height: 200px;
    width: 100%;
  }
  .container .posts-and-sidebar .sidebar {
    width: 100%;
    margin: 10px 0px;
    position: relative;
  }
  .container .posts-and-sidebar .sidebar .newsletter form input {
    font-size: 16px;
  }
  .container .posts-and-sidebar .sidebar .newsletter form label i {
    font-size: 18px;
  }
}

At last, create a CSS file with the name footer.css and paste the given code into your CSS file. Remember, you’ve to create a file with a .css extension.

Footer.css

    footer {
  width: 100%;
  height: 50px;
  background-color: #353535;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

footer p {
  font-size: 18px;
  color: #fff;
}

That’s all, now you’ve successfully created your own responsive blog website using HTML & CSS. If your code does not work or you’ve faced any errors/problems then please comment down your queries. If you feel this article had helped you, please share it with your friends. If you have any suggestions for me please mention them in the comment below.

You Might Also Like

Video preview of Responsive Blog Website

Responsive Blog Website in HTML & CSS [Source Codes]

File Structure

HTML

Header.css

Nav-bar.css

Style.css

Footer.css

Thank You :)

Post a Comment

Post a Comment

About Us

Contact Form