Mag Express Free Responsive Template

In this article we’ll go through all the steps required to build a Blog website by using Bootstrap & JavaScript. This template is fully responsive & free to use. Also this template is build by using core languages without using any plugin or anything else.

Mag Express is a modern style news website template. It uses a bright yellow color as the primary color of the website template. The color of the template easily demands one attention. One of the best free magazine HTML website templates. It is a multi-page website template with all the necessary pages pre-designed for you. This template follows the latest HTML5, CSS3, and Bootstrap framework. It is a lightweight theme that loads faster. It is also mobile responsive and can be viewed clearly on any device.

First, we going to build Header of website

              
<header id="header">
  <div class="row">
    <div class="col-lg-12 col-md-12">
      <div class="header_top">
        <div class="header_top_left">
          <ul class="top_nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="pages/page.html">About</a></li>
            <li><a href="pages/contact.html">Contact</a></li>
            <li><a href="pages/404.html">Error Page</a></li>
          </ul>
        </div>
        <div class="header_top_right">
          <form action="#" class="search_form">
            <input type="text" placeholder="Text to Search">
            <input type="submit" value="">
          </form>
        </div>
      </div>
      <div class="header_bottom">
        <div class="header_bottom_left"><a class="logo" href="index.html">mag<strong>Express</strong> <span>A Pro Magazine Template</span></a></div>
        <div class="header_bottom_right"><a href="#"><img src="images/addbanner_728x90_V1.jpg" alt=""></a></div>
      </div>
    </div>
  </div>
</header>
              
            

Next, we going to build Footer of this blog template

              
  <footer id="footer">
  <div class="footer_top">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="single_footer_top wow fadeInLeft">
            <h2>Flicker Images</h2>
            <ul class="flicker_nav">
              <li><a href="#"><img src="images/75x75.jpg" alt=""></a></li>
              <li><a href="#"><img src="images/75x75.jpg" alt=""></a></li>
              <li><a href="#"><img src="images/75x75.jpg" alt=""></a></li>
              <li><a href="#"><img src="images/75x75.jpg" alt=""></a></li>
              <li><a href="#"><img src="images/75x75.jpg" alt=""></a></li>
              <li><a href="#"><img src="images/75x75.jpg" alt=""></a></li>
              <li><a href="#"><img src="images/75x75.jpg" alt=""></a></li>
              <li><a href="#"><img src="images/75x75.jpg" alt=""></a></li>
            </ul>
          </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="single_footer_top wow fadeInDown">
            <h2>Labels</h2>
            <ul class="labels_nav">
              <li><a href="#">Gallery</a></li>
              <li><a href="#">Business</a></li>
              <li><a href="#">Games</a></li>
              <li><a href="#">Fashion</a></li>
              <li><a href="#">Sports</a></li>
              <li><a href="#">Technology</a></li>
              <li><a href="#">Slider</a></li>
              <li><a href="#">Life &amp; Style</a></li>
            </ul>
          </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="single_footer_top wow fadeInRight">
            <h2>About Us</h2>
            <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed nec laoreet orci, eget ullamcorper quam. Phasellus lorem neque, </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer_bottom">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
          <div class="footer_bottom_left">
            <p>Copyright &copy; 2045 <a href="index.html">magExpress</a></p>
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
          <div class="footer_bottom_right">
            <p>Developed BY Wpfreeware</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>
              
            

Next, to build animated card. Where user can see the blog head & thumbnail

              
  <div class="col-lg-6 col-md-6 col-sm6">
  <div class="content_top_right">
    <ul class="featured_nav wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
      <li><img src="images/300x215x1.jpg" alt="">
        <div class="title_caption"><a href="pages/single.html">Sed luctus semper odio aliquam rhoncus</a></div>
      </li>
      <li><img src="images/300x215x2.jpg" alt="">
        <div class="title_caption"><a href="pages/single.html">Sed luctus semper odio aliquam rhoncus</a></div>
      </li>
      <li><img src="images/300x215x3.jpg" alt="">
        <div class="title_caption"><a href="pages/single.html">Sed luctus semper odio aliquam rhoncus</a></div>
      </li>
      <li><img src="images/300x215x4.jpg" alt="">
        <div class="title_caption"><a href="pages/single.html">Sed luctus semper odio aliquam rhoncus</a></div>
      </li>
    </ul>
  </div>
</div>
              
            

For every website, side content is also important where you will show extra information to user.

              
  <div class="single_bottom_rightbar">
  <h2>Recent Post</h2>
  <ul class="small_catg popular_catg wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
    <li>
      <div class="media wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> <a href="#" class="media-left"><img alt="" src="images/112x112.jpg"> </a>
        <div class="media-body">
          <h4 class="media-heading"><a href="#">Duis condimentum nunc pretium lobortis </a></h4>
          <p>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra </p>
        </div>
      </div>
    </li>
    <li>
      <div class="media wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> <a href="#" class="media-left"><img alt="" src="images/112x112.jpg"> </a>
        <div class="media-body">
          <h4 class="media-heading"><a href="#">Duis condimentum nunc pretium lobortis </a></h4>
          <p>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra </p>
        </div>
      </div>
    </li>
    <li>
      <div class="media wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> <a href="#" class="media-left"><img alt="" src="images/112x112.jpg"> </a>
        <div class="media-body">
          <h4 class="media-heading"><a href="#">Duis condimentum nunc pretium lobortis </a></h4>
          <p>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra </p>
        </div>
      </div>
    </li>
  </ul>
</div>
              
            

Above is the basic structure for building any blog website template. Also there is 404 Error Page, Article Page, Contact Page & many more with all assests, css, js & many more. Just go through from code & feel free to make changes according to you.

You will get all files, when you download the source code. And after than you can edit it according to you

if you face any issues you can contact by asking question with article link.

You can go through Demo as well as Download source code for the same & make changes according to you