News website Design with HTML, CSS and Bootstrap

In this article, we are going to design a plain, simple yet good looking website template for a news website or a blog. We will be using Bootstrap 5 and a little of custom CSS to make it look good.

Follow this video for complete guidance :

 

Source Code :

index.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device=width, initial-scale=1.0">
    <title>The News</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
  </head>

  <body>

    <div class="container">
      <div class="logo-wrapper d-flex align-items-center">
        <h1>
          <a href="index.html">
            The News
          </a>
        </h1>
      </div>
    </div>

      <div class="container-fluid menu">
        <div class="container">
          <div class="d-flex menu-items">
            <div class="active">
              <a href="index.html">Home</a>
            </div>
            <div>
              <a href="category.html">Health</a>
            </div>
            <div>
              <a href="category.html">Religion</a>
            </div>
            <div>
              <a href="category.html">Technology</a>
            </div>
            <div>
              <a href="category.html">Business</a>
            </div>
            <div>
              <a href="category.html">Politics</a>
            </div>
            <div>	
              <a href="category.html">Features</a>
            </div>
            <div>	
              <a href="category.html">Interviews</a>
            </div>
          </div>
        </div>
      </div>

      <div class="container main-news section">
        <div class="row">
          <div class="col-sm-12 col-md-6 col-xs-12 col-lg-6">
            <img class="thumb mb-3" src="https://letzcricket.com/uploads/news/ZqXXlQDeCffne57g.jpg">
            <h3>
              <a class="font-large" href="detail.html">
                Nepal and PNG to play ODI series in Oman
              </a>
            </h3>
          </div>
          <div class="col-sm-12 col-md-6 col-xs-12 col-lg-6">
            <div class="row">
              <div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
                <div class="image image-sm mb-1">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/Pk9jw3Z9iv8EBLxE.jpg">
                </div>
                <h3 class="mb-4">
                  <a href="detail.html">
                    Paras Khadka retires from international cricket
                  </a>
                </h3>

                <div class="image image-sm mb-1">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/jqvhlR2cpC3S3eQm.png">
                </div>
                <h3 class="mb-4">
                  <a href="detail.html">
                    New Zealand win inaugural World Test Championship
                  </a>
                </h3>

              </div>

              <div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
                <div class="image image-sm mb-1">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/LCfdygXg89FURcsM.jpeg">
                </div>
                <h3 class="mb-4">
                  <a href="detail.html">
                    Afridi to play Everest Premier League from Kathmandu Kings
                  </a>
                </h3>

                <div class="image image-sm mb-3">
                  <img class="thumb image-sm" src="https://letzcricket.com/uploads/news/VxmVhzyjAkw3hCaB.png">
                </div>
                <h3>
                  <a href="detail.html">
                    IPL 2021 to resume in UAE in September-October
                  </a>
                </h3>

              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="container section mt-4">
        <div class="section-title">
          <span>Analysis & Prediction</span>
        </div>
        <div class="row">
          <div class="col-sm-12 col-xs-12 col-md-3 col-lg-3">
            <div class="mb-2 image image-xs">
              <img class="thumb" src="https://letzcricket.com/uploads/news/zXhIbjMmry4D2Sup.png">
            </div>
            <a href="detail.html">
              India vs England 4th T20 : Match Prediction, Probabale XI, Fantasy Picks
            </a>
          </div>
          <div class="col-sm-12 col-xs-12 col-md-3 col-lg-3">
            <div class="mb-2 image image-xs">
              <img class="thumb" src="https://letzcricket.com/uploads/articles/6CdghhIpvYREvJ6a.png">
            </div>
            <a href="detail.html">
              Glenn Maxwell's All-Time IPL XI, Big names missing
            </a>
          </div>
          <div class="col-sm-12 col-xs-12 col-md-3 col-lg-3">
            <div class="mb-2 image image-xs">
              <img class="thumb" src="https://letzcricket.com/uploads/articles/dddNsPXVC6f5bmI5.jpg">
            </div>
            <a href="detail.html">
              Can Rohit be next Sehwag in Indian Test Cricket
            </a>
          </div>
          <div class="col-sm-12 col-xs-12 col-md-3 col-lg-3">
            <div class="mb-2 image image-xs">
              <img class="thumb" src="https://letzcricket.com/uploads/articles/sL1e41w4xUmSDA8L.jpg">
            </div>
            <a href="detail.html">
              Domestic Cricket changing the face of Nepali Cricket
            </a>
          </div>
        </div>
      </div>


      <div class="container section">
        <div class="row">
          <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
            <div class="mb-4 mt-4">
              <div class="section-title">
                <span>Latest Updates</span>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <div class="trending mt-4">
              <div class="section-title">
                <span>Trending</span>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/Pk9jw3Z9iv8EBLxE.jpg">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="detail.html">
                    Paras Khadka retires from international cricket
                  </a>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/articles/dddNsPXVC6f5bmI5.jpg">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="detail.html">
                    Can Rohit be next Sehwag in Indian Test Cricket
                  </a>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="detail.html">
                    India win series despite Sam Curran's Heroics
                  </a>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/ZqXXlQDeCffne57g.jpg">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="detail.html">
                    Domestic Cricket Changing the Face of Nepali Cricket
                  </a>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/LCfdygXg89FURcsM.jpeg">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="detail.html">
                    Afridi to play Everest Premier League from Kathmandu Kings
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>


    <script type="text/javascript">
      window.onscroll = function(){
        setSticky();
      }

      navbar = document.getElementsByClassName('menu')[0];
      var sticky = navbar.offsetTop;
      function setSticky(){
        if(window.pageYOffset >= sticky){
          navbar.classList.add('sticky');
        }else{
          navbar.classList.remove('sticky');
        }
      }
    </script>





  </body>

</html>

category.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device=width, initial-scale=1.0">
    <title>The News</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
  </head>

  <body>

    <div class="container">
      <div class="logo-wrapper d-flex align-items-center">
        <h1>
          <a href="index.html">
            The News
          </a>
        </h1>
      </div>
    </div>
    <div class="container-fluid menu">
        <div class="container">
          <div class="d-flex menu-items">
            <div class="active">
              <a href="index.html">Home</a>
            </div>
            <div>
              <a href="category.html">Health</a>
            </div>
            <div>
              <a href="category.html">Religion</a>
            </div>
            <div>
              <a href="category.html">Technology</a>
            </div>
            <div>
              <a href="category.html">Business</a>
            </div>
            <div>
              <a href="category.html">Politics</a>
            </div>
            <div>	
              <a href="category.html">Features</a>
            </div>
            <div>	
              <a href="category.html">Interviews</a>
            </div>
          </div>
        </div>
      </div>

      <div class="container main-news">
        <div class="row">
          <div class="col-8">
            
            <div class="mb-4 mt-4 section">
              <div class="section-title">
                <span>Latest Updates</span>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8`">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
              <div class="row mb-3 bb-1 pt-0">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <h5>
                    <a href="detail.html">
                      India win series despite Sam Curran's heroics
                    </a>
                  </h5>
                  <small>29th August, 2021</small>
                  <p class="summary pt-3">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-4">
            <div class="trending mt-4">
              <div class="section-title">
                <span>Trending</span>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="images/paras.jpeg">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="">
                    Paras Khadka retires from international cricket
                  </a>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/articles/dddNsPXVC6f5bmI5.jpg">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="">
                    Can Rohit be next Sehwag in Indian Test Cricket
                  </a>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="">
                    India win series despite Sam Curran's Heroics
                  </a>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="images/nepal.jpeg">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="">
                    Domestic Cricket Changing the Face of Nepali Cricket
                  </a>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="images/afridi.jpeg">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="">
                    Afridi to play Everest Premier League from Kathmandu Kings
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <script type="text/javascript">
      window.onscroll = function(){
        setSticky();
      }

      navbar = document.getElementsByClassName('menu')[0];
      var sticky = navbar.offsetTop;
      function setSticky(){
        if(window.pageYOffset >= sticky){
          navbar.classList.add('sticky');
        }else{
          navbar.classList.remove('sticky');
        }
      }
    </script>

detail.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device=width, initial-scale=1.0">
    <title>The News</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
  </head>

  <body>

    <div class="container">
      <div class="logo-wrapper d-flex align-items-center">
        <h1>
          <a href="index.html">
            The News
          </a>
        </h1>
      </div>
    </div>
    <div class="container-fluid menu">
        <div class="container">
          <div class="d-flex menu-items">
            <div class="active">
              <a href="index.html">Home</a>
            </div>
            <div>
              <a href="category.html">Health</a>
            </div>
            <div>
              <a href="category.html">Religion</a>
            </div>
            <div>
              <a href="category.html">Technology</a>
            </div>
            <div>
              <a href="category.html">Business</a>
            </div>
            <div>
              <a href="category.html">Politics</a>
            </div>
            <div>	
              <a href="category.html">Features</a>
            </div>
            <div>	
              <a href="category.html">Interviews</a>
            </div>
          </div>
        </div>
      </div>

      <div class="container main-news">
        <div class="row">
          <div class="col-8">
            <h1>Nepal and PNG to play ODI series in Oman</h1>
            <small>27th August, 2021</small>
            <p class="mt-4 summary">Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
            <img src="https://letzcricket.com/uploads/news/ZqXXlQDeCffne57g.jpg" class="mt-3 thumb">
            <div class="story mt-4">
              <p>Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
              <p>Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
              <p>Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs. Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
              <p>Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
              <p>Despite heroic innings from the bat of Sam Curran, India defeated England by 7 runs to win the 3 match series 2-1. Chasing a target of 330 runs to win, the visiting team finished on 322/9 falling short of the target by 7 runs.</p>
            </div>
<hr>
            <div class="container section mt-4 no-pad">
        <div class="section-title">
          <span>Recommended</span>
        </div>
        <div class="row">
          <div class="col-sm-12 col-xs-12 col-md-3 col-lg-3">
            <div class="mb-2 image image-xs">
              <img class="thumb" src="https://letzcricket.com/uploads/news/zXhIbjMmry4D2Sup.png">
            </div>
            <a href="">
              India vs England 4th T20 : Match Prediction, Probabale XI, Fantasy Picks
            </a>
          </div>
          <div class="col-sm-12 col-xs-12 col-md-3 col-lg-3">
            <div class="mb-2 image image-xs">
              <img class="thumb" src="https://letzcricket.com/uploads/articles/6CdghhIpvYREvJ6a.png">
            </div>
            <a href="">
              Glenn Maxwell's All-Time IPL XI, Big names missing
            </a>
          </div>
          <div class="col-sm-12 col-xs-12 col-md-3 col-lg-3">
            <div class="mb-2 image image-xs">
              <img class="thumb" src="https://letzcricket.com/uploads/articles/dddNsPXVC6f5bmI5.jpg">
            </div>
            <a href="">
              Can Rohit be next Sehwag in Indian Test Cricket
            </a>
          </div>
          <div class="col-sm-12 col-xs-12 col-md-3 col-lg-3">
            <div class="mb-2 image image-xs">
              <img class="thumb" src="https://letzcricket.com/uploads/articles/sL1e41w4xUmSDA8L.jpg">
            </div>
            <a href="">
              Domestic Cricket changing the face of Nepali Cricket
            </a>
          </div>
        </div>
      </div>
          </div>
          <div class="col-4">
            <div class="trending mt-4">
              <div class="section-title">
                <span>Trending</span>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/Pk9jw3Z9iv8EBLxE.jpg">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="">
                    Paras Khadka retires from international cricket
                  </a>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/articles/dddNsPXVC6f5bmI5.jpg">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="">
                    Can Rohit be next Sehwag in Indian Test Cricket
                  </a>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/vGWpKyVU7jHXz5K8.png">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="">
                    India win series despite Sam Curran's Heroics
                  </a>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/ZqXXlQDeCffne57g.jpg">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="">
                    Domestic Cricket Changing the Face of Nepali Cricket
                  </a>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                  <img class="thumb" src="https://letzcricket.com/uploads/news/LCfdygXg89FURcsM.jpeg">
                </div>
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                  <a href="">
                    Afridi to play Everest Premier League from Kathmandu Kings
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <script type="text/javascript">
      window.onscroll = function(){
        setSticky();
      }

      navbar = document.getElementsByClassName('menu')[0];
      var sticky = navbar.offsetTop;
      function setSticky(){
        if(window.pageYOffset >= sticky){
          navbar.classList.add('sticky');
        }else{
          navbar.classList.remove('sticky');
        }
      }
    </script>

style.css

a{
  color: #cc6060;
  text-decoration: none;
}

a:hover{
  color: #519ac5fc;
}
.logo-wrapper{
  text-transform: uppercase;
  padding: 30px 0px;
}
.menu{
  padding-left: 0px;
  background: #519ac5fc;
}
.menu .container{
  padding-left: 0px;
}
.menu-items .active{
  background: #2483d6;
}
.menu .menu-items a{
  text-decoration: none;
  color: #fff;
  padding: 10px 30px;
  display: block;
}
.menu .menu-items a:hover{
  background: #2483d6;
}
.thumb{
  width: 100%;
}
.main-news{
  margin-top: 20px;
}
.main-news h3{
  line-height: 0.75;
}
.main-news h3 a{
  font-size: 17px;
  text-decoration: none;
  font-weight: 600;
}
.image{
  overflow: hidden;
}
.image-sm{
  max-height: 180px;
}
.image-sm img{
  height: 180px;
}
.image-xs{
  max-height: 140px;
}
.image-xxs{
  max-height: 100px;
}
.image img{
  object-fit: cover;
}
.font-large{
  font-size: 0.9em!important;
  font-weight: 600!important;
}
.section-title{
  position: relative;
  margin-bottom: 20px;
}
.section-title span{
  font-weight: 400;
  font-size: 17px;
  color: #519ac5fc;
}
.section-title span:after{
  content: '';
  position: absolute;
  background: #519ac5fc;
  width: 50px;
  height: 2px;
  left: 0;
  bottom: 0;
}
.bb-1{
  padding: 20px 0px;
  border-bottom: 1px solid #eee;
}
.section{
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}
small{
  color: #999;
}
.summary{
  color: #777;
}
.trending .row{
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.sticky{
  position: fixed;
  top: 0;
  width: 100%;
}
.no-pad{
  padding-left: 0px!important;
}

 

Recommended For You

About the Author: Ritesh Ghimire

Ritesh is a Computer Engineer, Web Developer and an active cricket follower.