BizBlog

HTML5 Blog Template

Thank you for purchasing our Template. If you have any questions that are beyond the scope of this documentation file, please feel free to email via our user page contact form. Thank you so much!

How to get help:

We run support 24/7. You can expect a response within 24 hours.

[Note: Need Some Premium Customization Done? Contact Us Via Our User Page Contact Form. ]

INTRODUCTION

BizBlog is a Multipurpose Personal Blog HTML5 Template designed to build any kinds of Personal Blogging Website. It's an HTML5 template based on latest Bootstrap v4.x. Anyone can easily update/edit this template by following our Well Sorted Documentation.

Main Features of "BizBlog":

TEMPLATE STRUCTURE

Directory Structure Overview

HTML STRUCTURE

The "VOIPhone" template is a responsive HTML5 template based on Bootstrap v4.2.x. The structure is based on a flexible grid that lets you change HTML pages quickly and logically with a nestable system.

If you would like to edit the layout of any elements in the whole template, you would do the following:

CSS FILES AND STRUCTURE

"BigBlog" is using the following CSS files:

css/bootstrap.min.css Bootstrap 4 Framework
css/font-awesome.min.css Font Awesome
plugins/animate/animate.min.css Animate CSS
plugins/owlcarousel/owl.carousel.min.css Owl Carousel 2
plugins/magnific-popup/magnific-popup.css Magnific Popup
css/style.css Template Main Styles
css/custom.css Template Custom Styles

In our style.css file all the code are well structured as well as well commented. Here is the sample

JAVASCRIPT

js/jquery-1.12.1.min.js jQuery Library
js/bootstrap.bundle.min.js Bootstrap 4 Framework
plugins/owlcarousel/owl.carousel.min.js Owl Carousel 2
plugins/plugins/magnific-popup/jquery.magnific-popup.min.js Magnific Popup
js/scripts.js Template Main Scripts
js/custom.js Template Custom Scripts

INSTALLATION

Via FTP:

1. Open up your 'FTP Software' of choice and connect to your hosting

2. Browse to required directory (Usually: ./public_html)

3. Unzip the 'main_files.zip' and choose templates to upload.

4. Upload the template to the server.

FAQ

Once you finish setup successfully, you can customize it as you want. Some common frequently asked questions are given bellow.

Q. How to update existing theme?

Q. How to remove preloader?

Q. How to change logo?

Q. How to change menu items and links?

Q. How to edit banner content?

Q. How to change mailchimp newsletter form link?

Q. How to change social icons/logo/copyright text?

Q. How to change page title?

Q. How to change contact page info?

Q. How to change email and name to send form data?

COMPONENTS

Blog Cards STYLES

BizBlog Supports 5 Different Blog Card STYLES.

  • Card 01
  • Card 02
  • Card 03
  • Card 04
  • Card 05
  • Card 06

Card 01:


<!-- Post -->
<div class="post-default post-has-no-thumb">
    <div class="post-data">
        <!-- Category -->
        <div class="cats"><a href="category-result.html">Fashion</a></div>
        <!-- Title -->
        <div class="title">
            <h2><a href="blog-details.html">Understanding The Background Of Fashion</a></h2>
        </div>
        <!-- Post Meta -->
        <ul class="nav meta align-items-center">
            <li class="meta-author">
                <img src="assets/images/blog/author.jpg" alt="" class="img-fluid">
                <a href="#">Alex Garry</a>
            </li>
            <li class="meta-date"><a href="#">2 Feb 2019</a></li>
            <li class="meta-comments"><a href="#"><i class="fa fa-comment"></i> 2</a></li>
        </ul>
        <!-- Post Desc -->
        <div class="desc">
            <p>
                Integer at faucibus urna. Nullam condimentum leo id elit sagittis auctor. Curabitur elementum nunc...
            </p>
        </div>
    </div>
</div>
<!-- End of Post -->

Card 02:


<!-- Post -->
<div class="post-default post-has-bg-img">
    <div class="post-thumb">
        <a href="blog-details.html">
            <div data-bg-img="assets/images/blog/4.jpg"></div>
        </a>
    </div>
    <div class="post-data">
        <!-- Category -->
        <div class="cats"><a href="category-result.html">Fashion</a></div>
        <!-- Title -->
        <div class="title">
            <h2><a href="blog-details.html">Understanding The Background <br> Of Fashion</a></h2>
        </div>
        <!-- Post Meta -->
        <ul class="nav meta align-items-center">
            <li class="meta-author">
                <img src="assets/images/blog/author.jpg" alt="" class="img-fluid">
                <a href="#">Alex Garry</a>
            </li>
            <li class="meta-date"><a href="#">2 Feb 2019</a></li>
            <li class="meta-comments"><a href="#"><i class="fa fa-comment"></i> 2</a></li>
        </ul>
    </div>
</div>
<!-- End of Post -->

Card 03:


<!-- Post -->
<div class="post-default post-has-right-thumb">
    <div class="d-flex flex-wrap">
        <div class="post-thumb align-self-stretch order-md-2">
            <a href="blog-details.html">
            <div data-bg-img="assets/images/blog/1.jpg"></div>
            </a>
        </div>
        <div class="post-data order-md-1">
            <!-- Category -->
            <div class="cats"><a href="category-result.html">Love</a></div>
            <!-- Title -->
            <div class="title">
                <h2><a href="blog-details.html">A Funny Thing That Happens In Relationships</a></h2>
            </div>
            <!-- Post Meta -->
            <ul class="nav meta align-items-center">
                <li class="meta-author">
                    <img src="assets/images/blog/author.jpg" alt="" class="img-fluid">
                    <a href="#">Alex Garry</a>
                </li>
                <li class="meta-date"><a href="#">2 Feb 2019</a></li>
                <li class="meta-comments"><a href="#"><i class="fa fa-comment"></i> 2</a></li>
            </ul>
            <!-- Post Desc -->
            <div class="desc">
                <p>
                    Integer at faucibus urna. Nullam condimentum leo id elit sagittis auctor. Curabitur elementum nunc...
                </p>
            </div>
            <!-- Read More Button -->
            <a href="blog-details.html" class="btn btn-primary">View More</a>
        </div>
    </div>
</div>
<!-- End of Post -->

Card 04:


<!-- Post -->
<div class="post-default post-has-front-title">
    <div class="post-thumb">
        <a href="blog-details.html"> <img src="assets/images/blog/4.jpg" alt="" class="img-fluid"> </a>
    </div>
    <div class="post-data">
        <!-- Category -->
        <div class="cats"><a href="category-result.html">Adventure</a></div>
        <!-- Title -->
        <div class="title">
            <h2><a href="blog-details.html">Top Things To Look For When There choosing A Safari Lodge</a></h2>
        </div>
    </div>
</div>
<!-- End of Post -->

Card 05:


<!-- Post -->
<div class="post-default">
    <div class="post-thumb">
        <a href="blog-details.html"> <img src="assets/images/blog/small/1.jpg" alt="" class="img-fluid"> </a>
    </div>
    <div class="post-data">
        <!-- Category -->
        <div class="cats"><a href="category-result.html">Love</a></div>
        <!-- Title -->
        <div class="title">
            <h2><a href="blog-details.html">Blaak Attack Earns Boels First 2019 Victory </a></h2>
        </div>
        <!-- Post Desc -->
        <div class="desc">
            <p>
                Duis mauris augue, efficitur eu arcu sit amet, posuere dignissim neque. Aenean enim sem, pharetra et magna....
            </p>
        </div>
    </div>
</div>
<!-- End of Post -->

Card 05:


<!-- Post -->
<div class="post-default post-has-video">
    <div class="post-thumb">
        <a href="blog-details.html">
            <div data-bg-img="assets/images/blog/6.jpg"></div>
        </a>
    </div>
    <div class="post-data">
        <!-- Category -->
        <div class="cats"><a href="category-result.html">Food</a></div>
        <!-- Title -->
        <div class="title">
            <h2><a href="blog-details.html">Five Important Facts Should Know About Recipe</a></h2>
        </div>
    </div>
</div>
<!-- End of Post -->

Widgets STYLES

BizBlog Supports 09 Different Widgets STYLES.

  • About
  • Featured Post
  • Select Category
  • Ad
  • Instagram Post
  • Newsletter
  • Recent Post
  • Most Commented Post
  • Tags

Widget Style 01:


<!-- Author Widget -->
<div class="widget widget-about">
    <!-- Widget Content -->
    <div class="widget-content">
        <!-- Author Image -->
        <div class="author-image">
            <img src="assets/images/blog/author.jpg" alt="" class="img-fluid">
        </div>
        <!-- Author Name -->
        <div class="author-name text-center">
            <a href="#"> Alex Garry </a>
        </div>
        <!-- Author Social Links -->
        <div class="author-social text-center">
            <a href="#"><i class="fa fa-facebook"></i></a>
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-linkedin"></i></a>
            <a href="#"><i class="fa fa-google-plus"></i></a>
        </div>
        <!-- Author Text -->
        <div class="author-text text-center">
            In consequat, quam id sodales hendrerit, eros mi molestie leo, nec lacinia risus neque tristique augue. Proin tempus urna vel.
        </div>
    </div>
    <!-- End of Widget Content -->
</div>
<!-- End of Author Widget -->

Widget Style 02:


<!-- Featured Posts -->
<div class="widget widget-featured-post">
    <!-- Widget Title -->
    <h4 class="widget-title">
        Featured Post
    </h4>
    <!-- End of Widget Title -->

    <!-- Widget Content -->
    <div class="widget-content">
        <!-- Single Post -->
        <div class="featured-post">
            <!-- Post Thumbnail -->
            <a href="blog-details.html">
                <img src="assets/images/sidebar/fp-1.jpg" alt="" class="img-fluid">
            </a>
            <!-- Post Title -->
            <div class="featured-post-title">
                <h6> <a href="blog-details.html">Guide To Experiencing The Magical Sabino Canyon In Tucson</a> </h6>
            </div>
        </div>
        <!-- End of Single Post -->

        <!-- Single Post -->
        <div class="featured-post">
            <!-- Post Thumbnail -->
            <a href="blog-details.html">
                <img src="assets/images/sidebar/fp-2.jpg" alt="" class="img-fluid">
            </a>
            <!-- Post Title -->
            <div class="featured-post-title">
                <h6><a href="blog-details.html">Inspired To Move: Celebrating Dance and Black History Month</a></h6>
            </div>
        </div>
        <!-- End of Single Post -->
    </div>
    <!-- End of Widget Content -->
</div>
<!-- End of Featured Posts -->

Widget Style 03:


<!-- Select Category -->
<div class="widget widget-select-category">
    <!-- Widget Content -->
    <div class="widget-content">
        <!-- Select -->
        <select>
            <option selected>Choose category</option>
            <option value="1">Love</option>
            <option value="2">Fashion</option>
            <option value="3">Travel</option>
            <option value="4">Adventure</option>
            <option value="5">Sports</option>
            <option value="6">Food</option>
            <option value="7">Lifestyle</option>
            <option value="8">Technology</option>
        </select>
    </div>
    <!-- End of Widget Content -->
</div>
<!-- End of Select Category -->

Widget Style 04:


<!-- Ad Widget -->
<div class="widget widget-ad">
    <!-- Widget Content -->
    <div class="widget-content">
        <a href="#">
            <img src="assets/images/sidebar/ad.jpg" alt="" class="img-fluid">
        </a>
    </div>
    <!-- End of Widget Content -->
</div>
<!-- End of Ad Widget -->

Widget Style 05:


<!-- Instagram Widget -->
<div class="widget widget-instagram">
    <!-- Widget Title -->
    <h4 class="widget-title">
        Instagram Post
    </h4>
    <!-- End of Widget Title -->

    <!-- Widget Content -->
    <div class="widget-content">
        <ul class="insta-gallery">
            <li>
                <!-- Instagram Post Image -->
                <a href="#"><img src="assets/images/sidebar/instagram/1.jpg" alt="" class="img-fluid"></a>
            </li>
            <li>
                <!-- Instagram Post Image -->
                <a href="#"><img src="assets/images/sidebar/instagram/2.jpg" alt="" class="img-fluid"></a>
            </li>
            <li>
                <!-- Instagram Post Image -->
                <a href="#"><img src="assets/images/sidebar/instagram/3.jpg" alt="" class="img-fluid"></a>
            </li>
            <li>
                <!-- Instagram Post Image -->
                <a href="#"><img src="assets/images/sidebar/instagram/4.jpg" alt="" class="img-fluid"></a>
            </li>
            <li>
                <!-- Instagram Post Image -->
                <a href="#"><img src="assets/images/sidebar/instagram/5.jpg" alt="" class="img-fluid"></a>
            </li>
            <li>
                <!-- Instagram Post Image -->
                <a href="#"><img src="assets/images/sidebar/instagram/6.jpg" alt="" class="img-fluid"></a>
            </li>
        </ul>
        <!-- Instagram Follow Button -->
        <a href="#" class="btn btn-block btn-instagram">
            <i class="fa fa-instagram"></i> Follow Me
        </a>
    </div>
    <!-- End of Widget Content -->
</div>
<!-- End of Instagram Widget -->

Widget Style 06:


<!-- Newsletter Widget -->
<div class="widget widget-newsletter">
    <!-- Widget Title -->
    <h4 class="widget-title">
        Newsletter
    </h4>
    <!-- End of Widget Title -->

    <!-- Widget Content -->
    <div class="widget-content">
        <!-- Newsletter Text -->
        <p>Sign up and receive recent blog and article in your inbox every week.</p>
        <!-- Newsletter Form -->
        <div class="newsletter">
            <form action="https://themelooks.us13.list-manage.com/subscribe/post?u=79f0b132ec25ee223bb41835f&amp;id=f4e0e93d1d" method="post" novalidate>
                <input type="text" class="form-control" placeholder="Your Email">
                <button class="btn btn-block btn-default">Subscribe</button>
            </form>
        </div>
    </div>
    <!-- End of Widget Content -->
</div>
<!-- End of Newsletter Widget -->

Widget Style 07:


<!-- Recent Post Widget -->
<div class="widget widget-recent-post">
    <!-- Widget Title -->
    <h4 class="widget-title">
        Recent Post
    </h4>
    <!-- End of Widget Title -->

    <!-- Widget Content -->
    <div class="widget-content">
        <!-- Single Post -->
        <div class="wrp-cover">
            <!-- Post Thumbnail -->
            <div class="post-thumb">
                <a href="blog-details.html">
                    <img src="assets/images/sidebar/rp-1.jpg" alt="" class="img-fluid">
                </a>
            </div>
            <!-- Post Title -->
            <div class="post-title">
                <a href="blog-details.html">Apple Admits To Macbook and Macbook Pro</a>  
            </div>
        </div>

        <!-- Single Post -->
        <div class="wrp-cover">
            <!-- Post Thumbnail -->
            <div class="post-thumb">
                <a href="blog-details.html">
                    <img src="assets/images/sidebar/rp-2.jpg" alt="" class="img-fluid">
                </a>
            </div>
            <!-- Post Title -->
            <div class="post-title">
                <a href="blog-details.html"> Feel The Love, And Things On My Mind </a>
            </div>
        </div>

        <!-- Single Post -->
        <div class="wrp-cover">
            <!-- Post Thumbnail -->
            <div class="post-thumb">
                <a href="blog-details.html">
                    <img src="assets/images/sidebar/rp-3.jpg" alt="" class="img-fluid">
                </a>
            </div>
            <!-- Post Title -->
            <div class="post-title">
                <a href="blog-details.html"> This Apple Crisp Makes The Entire House Smell Dreamy </a>
            </div>
        </div>

        <!-- Single Post -->
        <div class="wrp-cover">
            <!-- Post Thumbnail -->
            <div class="post-thumb">
                <a href="blog-details.html">
                    <img src="assets/images/sidebar/rp-4.jpg" alt="" class="img-fluid">
                </a>
            </div>
            <!-- Post Title -->
            <div class="post-title">
                <a href="blog-details.html">20-Minute Thai Coconut Hot Chicken Soup</a> 
            </div>
        </div>
    </div>
    <!-- End of Widget Content -->
</div>
<!-- End of Recent Post Widget -->

Widget Style 08:


<!-- Most Commented Post Widget -->
<div class="widget widget-most-commented-post">
    <!-- Widget Title -->
    <h4 class="widget-title">
        Most Commented Post
    </h4>
    <!-- End of Widget Title -->

    <!-- Widget Content -->
    <div class="widget-content">
        <!-- Post Carousel -->
        <div class="wmcp-cover owl-carousel" data-owl-mouse-drag="true" data-owl-dots="true" data-owl-margin="20">
            <!-- Carousel Item -->
            <div class="wmcp-item">
                <!-- Single Post -->
                <div class="wmc-post">
                    <a href="blog-details.html">
                        <img src="assets/images/sidebar/mcp-1.jpg" alt="" class="img-fluid">
                    </a>
                    <div class="wmc-post-title">
                        <h6> <a href="blog-details.html"> Understanding The Background Of Fashion </a></h6>
                    </div>
                </div>
                <!-- End of Single Post -->

                <!-- Single Post -->
                <div class="wmc-post">
                    <a href="blog-details.html">
                        <img src="assets/images/sidebar/mcp-2.jpg" alt="" class="img-fluid">
                    </a>
                    <div class="wmc-post-title">
                        <h6> <a href="blog-details.html">12-inch MacBook Refurb $830, Apple Watch Series</a> </h6>
                    </div>
                </div>
                <!-- End of Single Post -->
            </div>
            <!-- End of Carousel Item -->

            <!-- Carousel Item -->
            <div class="wmcp-item">
                <!-- Single Post -->
                <div class="wmc-post">
                    <a href="blog-details.html">
                        <img src="assets/images/sidebar/mcp-1.jpg" alt="" class="img-fluid">
                    </a>
                    <div class="wmc-post-title">
                        <h6> <a href="blog-details.html"> Understanding The Background Of Fashion </a></h6>
                    </div>
                </div>
                <!-- End of Single Post -->

                <!-- Single Post -->
                <div class="wmc-post">
                    <a href="blog-details.html">
                        <img src="assets/images/sidebar/mcp-2.jpg" alt="" class="img-fluid">
                    </a>
                    <div class="wmc-post-title">
                        <h6> <a href="blog-details.html">12-inch MacBook Refurb $830, Apple Watch Series</a> </h6>
                    </div>
                </div>
                <!-- End of Single Post -->
            </div>
            <!-- End of Carousel Item -->

            <!-- Carousel Item -->
            <div class="wmcp-item">
                <!-- Single Post -->
                <div class="wmc-post">
                    <a href="blog-details.html">
                        <img src="assets/images/sidebar/mcp-1.jpg" alt="" class="img-fluid">
                    </a>
                    <div class="wmc-post-title">
                        <h6> <a href="blog-details.html"> Understanding The Background Of Fashion </a></h6>
                    </div>
                </div>
                <!-- End of Single Post -->

                <!-- Single Post -->
                <div class="wmc-post">
                    <a href="blog-details.html">
                        <img src="assets/images/sidebar/mcp-2.jpg" alt="" class="img-fluid">
                    </a>
                    <div class="wmc-post-title">
                        <h6> <a href="blog-details.html">12-inch MacBook Refurb $830, Apple Watch Series</a> </h6>
                    </div>
                </div>
                <!-- End of Single Post -->
            </div>
            <!-- End of Carousel Item -->
        </div>
        <!-- End of Post Carousel -->

    </div>
    <!-- End of Widget Content -->
</div>
<!-- End of Most Commented Post Widget -->

Widget Style 09:


<!-- Tags Cloud Widget -->
<div class="widget widget-tag-cloud">
    <!-- Widget Title -->
    <h4 class="widget-title">
        Tags
    </h4>
    <!-- End of Widget Title -->

    <!-- Widget Content -->
    <div class="widget-content tagcloud">
        <a href="#">Fashion</a>
        <a href="#">Art</a>
        <a href="#">Lifestyle</a>
        <a href="#">Love</a>
        <a href="#">Travel</a>
        <a href="#">Health</a>
        <a href="#">Education</a>
        <a href="#">Movie</a>
        <a href="#">Games</a>
        <a href="#">Sports</a>
    </div>
    <!-- End of Widget Content -->
</div>
<!-- End of Tags Cloud Widget -->

Post STYLES

BizBlog Supports 09 Different Widgets STYLES.

Q. How to Define Post Layout Style?

  • Open '.html' file in a text editor (For example: 'blog-details-video.html').
  • Find the Class 'post-details-cover'
  • Add an extra Class 'post-has-video-thumb' with 'post-details-cover' Class
  • [Please Remember]
  • No Extra Class For Default
  • 'post-has-video-thumb' For Video Post
  • 'post-has-full-width-image' For Full Width Post
  • 'post-has-audio-thumb' For Audio Post
  • 'post-has-slide-thumb' For Slide Post
  • Default
  • Full Width
  • Video
  • Slide
  • Audio

Post Style 01:


<!-- Post Thumbnail -->
<div class="post-thumb-cover">
    <div class="post-thumb">
        <img src="assets/images/blog/4.jpg" alt="" class="img-fluid">
    </div>
    <!-- Post Meta Info -->
    <div class="post-meta-info">
        <!-- Category -->
        <p class="cats">
            <a href="#">Featured</a>
            <a href="#">Adventure</a>
        </p>

        <!-- Title -->
        <div class="title">
            <h2>Top Things To Look For When Choosing A Safari Lodge</h2>
        </div>

        <!-- Meta -->
        <ul class="nav meta align-items-center">
            <li class="meta-author">
                <img src="assets/images/blog/author.jpg" alt="" class="img-fluid">
                <a href="#">Alex Garry</a>
            </li>
            <li class="meta-date"><a href="#">2 Feb 2019</a></li>
            <li> 2 min read </li>
            <li class="meta-comments"><a href="#"><i class="fa fa-comment"></i> 2</a></li>
        </ul>
    </div>
    <!-- End of Post Meta Info -->
</div>
<!-- End oF Post Thumbnail -->

Post Style 02:


<!-- Post Thumbnail -->
<div class="post-thumb-cover">
    <div class="post-thumb">
        <img src="assets/images/blog/4.jpg" alt="" class="img-fluid">
    </div>
    <!-- Post Meta Info -->
    <div class="post-meta-info">
        <!-- Category -->
        <p class="cats">
            <a href="#">Featured</a>
            <a href="#">Adventure</a>
        </p>

        <!-- Title -->
        <div class="title">
            <h2>Top Things To Look For When Choosing A Safari Lodge</h2>
        </div>

        <!-- Meta -->
        <ul class="nav meta align-items-center">
            <li class="meta-author">
                <img src="assets/images/blog/author.jpg" alt="" class="img-fluid">
                <a href="#">Alex Garry</a>
            </li>
            <li class="meta-date"><a href="#">2 Feb 2019</a></li>
            <li> 2 min read </li>
            <li class="meta-comments"><a href="#"><i class="fa fa-comment"></i> 2</a></li>
        </ul>
    </div>
    <!-- End of Post Meta Info -->
</div>
<!-- End oF Post Thumbnail -->

Post Style 03:


<!-- Post Thumbnail -->
<div class="post-thumb-cover">
    <!-- Post Meta Info -->
    <div class="post-meta-info">
        <!-- Category -->
        <p class="cats">
            <a href="#">Featured</a>
            <a href="#">Adventure</a>
        </p>

        <!-- Title -->
        <div class="title">
            <h2>Top Things To Look For When Choosing A Safari Lodge</h2>
        </div>

        <!-- Meta -->
        <ul class="nav meta align-items-center">
            <li class="meta-author">
                <img src="assets/images/blog/author.jpg" alt="" class="img-fluid">
                <a href="#">Alex Garry</a>
            </li>
            <li class="meta-date"><a href="#">2 Feb 2019</a></li>
            <li> 2 min read </li>
            <li class="meta-comments"><a href="#"><i class="fa fa-comment"></i> 2</a></li>
        </ul>
    </div>
    <!-- End of Post Meta Info -->

    <div class="post-thumb">
        <div class="vid-post-thumb-ol"></div>
        <img src="assets/images/blog/4.jpg" alt="" class="img-fluid">
        <a href="http://www.youtube.com/watch?v=7HKoqNJtMTQ" class="vid-play-btn"><i class="fa fa-play"></i></a>
    </div>
</div>
<!-- End oF Post Thumbnail -->

Post Style 04:


<!-- Post Thumbnail -->
<div class="post-thumb-cover">
    <div class="post-thumb owl-carousel" data-owl-autoplay="true" data-owl-animate-in="fadeIn" data-owl-nav="true">
        <img src="assets/images/blog/4.jpg" alt="" class="img-fluid">
        <img src="assets/images/blog/3.jpg" alt="" class="img-fluid">
        <img src="assets/images/blog/2.jpg" alt="" class="img-fluid">
        <img src="assets/images/blog/1.jpg" alt="" class="img-fluid">
    </div>
    
    <!-- Post Meta Info -->
    <div class="post-meta-info">
        <!-- Category -->
        <p class="cats">
            <a href="#">Featured</a>
            <a href="#">Adventure</a>
        </p>

        <!-- Title -->
        <div class="title">
            <h2>Top Things To Look For When Choosing A Safari Lodge</h2>
        </div>

        <!-- Meta -->
        <ul class="nav meta align-items-center">
            <li class="meta-author">
                <img src="assets/images/blog/author.jpg" alt="" class="img-fluid">
                <a href="#">Alex Garry</a>
            </li>
            <li class="meta-date"><a href="#">2 Feb 2019</a></li>
            <li> 2 min read </li>
            <li class="meta-comments"><a href="#"><i class="fa fa-comment"></i> 2</a></li>
        </ul>
    </div>
    <!-- End of Post Meta Info -->
</div>
<!-- End oF Post Thumbnail -->

Post Style 05:


<!-- Post Thumbnail -->
<div class="post-thumb-cover">
    <div class="post-thumb">
        <iframe allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/315461526&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
    </div>

    <!-- Post Meta Info -->
    <div class="post-meta-info">
        <!-- Category -->
        <p class="cats">
            <a href="#">Featured</a>
            <a href="#">Adventure</a>
        </p>

        <!-- Title -->
        <div class="title">
            <h2>Top Things To Look For When Choosing A Safari Lodge</h2>
        </div>

        <!-- Meta -->
        <ul class="nav meta align-items-center">
            <li class="meta-author">
                <img src="assets/images/blog/author.jpg" alt="" class="img-fluid">
                <a href="#">Alex Garry</a>
            </li>
            <li class="meta-date"><a href="#">2 Feb 2019</a></li>
            <li> 2 min read </li>
            <li class="meta-comments"><a href="#"><i class="fa fa-comment"></i> 2</a></li>
        </ul>
    </div>
    <!-- End of Post Meta Info -->
</div>
<!-- End oF Post Thumbnail -->

SOURCE AND CREADITS

Photos:

Fonts Used:

Frameworks / Libraries:

Plugins Used:

CHANGE LOGS

14 May, 2019 - Version 1.0 (First release)