<!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, user-scalable=no">
    
    <meta name="description" content="">
    <meta name="author" content="">
    
    <title>HostWHMCS - Responsive Web Hosting and WHMCS Template</title>

    <!-- ====Favicons==== -->
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <link rel="icon" href="favicon.png" type="image/x-icon">
    
    
    <!-- ====Google Font Stylesheet==== -->
    <link href='https://fonts.googleapis.com/css?family=Raleway:300,400,900' rel='stylesheet' type='text/css'>

    <!-- ====Font Awesome Stylesheet==== -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    
    <!-- ====Bootstrap Stylesheet==== -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <!-- ====Main Stylesheet==== -->
    <link href="style.css" rel="stylesheet">
    
    <!-- ====Responsive Stylesheet==== -->
    <link href="css/responsive-style.css" rel="stylesheet">
    
    <!-- ====Theme Color Stylesheet==== -->
    <link href="css/colors/theme-color-1.css" rel="stylesheet" id="changeColorScheme">

    <!-- HTML5 Shim and Respond.js IE9 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!-- Preloader Start -->
    <div id="preloader">
        <div class="preloader loading">
            <span class="slice"></span>
            <span class="slice"></span>
            <span class="slice"></span>
            <span class="slice"></span>
            <span class="slice"></span>
            <span class="slice"></span>
        </div>
    </div>
    <!-- Preloader End -->

    <!-- Wrapper Start -->
    <div class="wrapper">
        <!-- Header Area Start -->
        <header id="header">
            <!-- Header Navbar Start -->
            <nav class="header--navbar dark navbar navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                        <!-- Navbar Toggle Button Start -->
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#headerNav">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <!-- Navbar Toggle Button End -->
                        <!-- Logo Start -->
                        <a href="index.html" class="header--logo navbar-brand">
                            <span><i class="fa fm fa-rocket"></i>Host</span>WHMCS
                        </a>
                        <!-- Logo End -->
                    </div>
                    <!-- Header Nav Start -->
                    <div id="headerNav" class="navbar-collapse collapse">
                        <div class="header--login-btn">
                            <a href="login.html" class="btn--primary btn--ripple">Login</a>
                        </div>
                        
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="index.html">Home</a></li>
                            <li class="dropdown">
                                <a href="#" data-toggle="dropdown">Hosting<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="shared-hosting.html">Shared Hosting</a></li>
                                    <li><a href="reseller-hosting.html">Reseller Hosting</a></li>
                                    <li><a href="vps-hosting.html">VPS Hosting</a></li>
                                    <li><a href="dedicated-hosting.html">Dedicated Hosting</a></li>
                                </ul>
                            </li>
                            <li><a href="domain.html">Domain</a></li>
                            <li class="dropdown">
                                <a href="#" data-toggle="dropdown">Pages<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="about.html">About</a></li>
                                    <li><a href="faq.html">FAQ</a></li>
                                    <li><a href="testimonial.html">Testimonial</a></li>
                                    <li><a href="login.html">Login</a></li>
                                    <li><a href="signup.html">Signup</a></li>
                                    <li><a href="affiliate.html">Affiliate</a></li>
                                    <li><a href="404.html">404</a></li>
                                </ul>
                            </li>
                            <li class="dropdown active">
                                <a href="#" data-toggle="dropdown">Blog<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li class="active"><a href="blog.html">Blog</a></li>
                                    <li><a href="blog-sidebar-left.html">Blog Sidebar Left</a></li>
                                    <li><a href="blog-sidebar-right.html">Blog Sidebar Right</a></li>
                                    <li><a href="blog-details.html">Blog Details</a></li>
                                </ul>
                            </li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </div>
                    <!-- Header Nav End -->
                </div>
            </nav>
            <!-- Header Navbar End -->
        </header>
        <!-- Header Area End -->
        <!-- Page Header Start -->
        <div id="pageHeader">
            <div class="container">
                <div class="section--title">
                    <div class="row">
                        <div class="col-md-6">
                            <!-- Page Title Start -->
                            <h2>Blog <span>Page</span></h2>
                            <!-- Page Title End -->
                        </div>
                        <div class="col-md-6">
                            <!-- Page Breadcrumb Start -->
                            <div class="page-header--breadcrumb">
                                <ul class="breadcrumb">
                                    <li><a href="index.html">Home</a></li>
                                    <li class="active">Blog</li>
                                </ul>
                            </div>
                            <!-- Page Breadcrumb End -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page Header End -->
        <!-- Blog Area Start -->
        <div id="blog">
            <div class="container">
                <div class="row">
                    <!-- Blog Content Start -->
                    <div class="blog--content col-md-8 col-md-offset-2 text-center">
                        <!-- Blog Post Start -->
                        <article class="blog--post">
                            <!-- Blog Post Image Start -->
                            <div class="blog--post-img">
                                <img src="img/blog-img/blog-post-01.gif" alt="">
                            </div>
                            <!-- Blog Post Image End -->
                            <!-- Blog Post Title Start -->
                            <div class="blog--post-title">
                                <h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
                            </div>
                            <!-- Blog Post Title End -->
                            <!-- Blog Post Meta Start -->
                            <div class="blog--post-meta">
                                <span class="author">By <a href="#">Admin</a></span>
                                <span class="separator">/</span>
                                <a href="#" class="date">1-1-2016</a>
                                <span class="separator">|</span>
                                <a href="#" class="comments">4 Comments</a>
                            </div>
                            <!-- Blog Post Meta End -->
                            <!-- Blog Post Content Start -->
                            <div class="blog--post-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed voluptates amet perspiciatis possimus repellat, dolore aut eos beatae consectetur velit sunt quidem veritatis accusantium eveniet natus facilis eius nulla esse!</p>
                                <a href="#" class="read--more btn--primary btn--ripple">Read More</a>
                            </div>
                            <!-- Blog Post Content End -->
                        </article>
                        <!-- Blog Post End -->
                        <!-- Blog Post Start -->
                        <article class="blog--post">
                            <!-- Blog Post Image Start -->
                            <div class="blog--post-img">
                                <img src="img/blog-img/blog-post-02.jpg" alt="">
                            </div>
                            <!-- Blog Post Image End -->
                            <!-- Blog Post Title Start -->
                            <div class="blog--post-title">
                                <h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
                            </div>
                            <!-- Blog Post Title End -->
                            <!-- Blog Post Meta Start -->
                            <div class="blog--post-meta">
                                <span class="author">By <a href="#">Admin</a></span>
                                <span class="separator">/</span>
                                <a href="#" class="date">1-1-2016</a>
                                <span class="separator">|</span>
                                <a href="#" class="comments">4 Comments</a>
                            </div>
                            <!-- Blog Post Meta End -->
                            <!-- Blog Post Content Start -->
                            <div class="blog--post-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed voluptates amet perspiciatis possimus repellat, dolore aut eos beatae consectetur velit sunt quidem veritatis accusantium eveniet natus facilis eius nulla esse!</p>
                                <a href="#" class="read--more btn--primary btn--ripple">Read More</a>
                            </div>
                            <!-- Blog Post Content End -->
                        </article>
                        <!-- Blog Post End -->
                        <!-- Blog Post Start -->
                        <article class="blog--post">
                            <!-- Blog Post Youtube Video Start -->
                            <div class="blog--post-video">
                                <div class="embed-responsive embed-responsive-16by9">
                                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/WDMWOiJb3CA?showinfo=0&controls=0&rel=0&wmode=transparent"></iframe>
                                </div>
                            </div>
                            <!-- Blog Post Youtube Video End -->
                            <!-- Blog Post Title Start -->
                            <div class="blog--post-title">
                                <h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
                            </div>
                            <!-- Blog Post Title End -->
                            <!-- Blog Post Meta Start -->
                            <div class="blog--post-meta">
                                <span class="author">By <a href="#">Admin</a></span>
                                <span class="separator">/</span>
                                <a href="#" class="date">1-1-2016</a>
                                <span class="separator">|</span>
                                <a href="#" class="comments">4 Comments</a>
                            </div>
                            <!-- Blog Post Meta End -->
                            <!-- Blog Post Content Start -->
                            <div class="blog--post-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed voluptates amet perspiciatis possimus repellat, dolore aut eos beatae consectetur velit sunt quidem veritatis accusantium eveniet natus facilis eius nulla esse!</p>
                                <a href="#" class="read--more btn--primary btn--ripple">Read More</a>
                            </div>
                            <!-- Blog Post Content End -->
                        </article>
                        <!-- Blog Post End -->
                        <!-- Blog Post Start -->
                        <article class="blog--post">
                            <!-- Blog Post Vimeo Video Start -->
                            <div class="blog--post-video">
                                <div class="embed-responsive embed-responsive-16by9">
                                    <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/154190504?byline=0&badge=0&title=0"></iframe>
                                </div>
                            </div>
                            <!-- Blog Post Vimeo Video End -->
                            <!-- Blog Post Title Start -->
                            <div class="blog--post-title">
                                <h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
                            </div>
                            <!-- Blog Post Title End -->
                            <!-- Blog Post Meta Start -->
                            <div class="blog--post-meta">
                                <span class="author">By <a href="#">Admin</a></span>
                                <span class="separator">/</span>
                                <a href="#" class="date">1-1-2016</a>
                                <span class="separator">|</span>
                                <a href="#" class="comments">4 Comments</a>
                            </div>
                            <!-- Blog Post Meta End -->
                            <!-- Blog Post Content Start -->
                            <div class="blog--post-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed voluptates amet perspiciatis possimus repellat, dolore aut eos beatae consectetur velit sunt quidem veritatis accusantium eveniet natus facilis eius nulla esse!</p>
                                <a href="#" class="read--more btn--primary btn--ripple">Read More</a>
                            </div>
                            <!-- Blog Post Content End -->
                        </article>
                        <!-- Blog Post End -->
                        <!-- Blog Post Start -->
                        <article class="blog--post">
                            <!-- Blog Post Local Video Start -->
                            <div class="blog--post-video">
                                <video controls poster="media/video.jpg">
                                    <source src="media/video.mp4" type="video/mp4">
                                </video>
                            </div>
                            <!-- Blog Post Local Video End -->
                            <!-- Blog Post Title Start -->
                            <div class="blog--post-title">
                                <h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
                            </div>
                            <!-- Blog Post Title End -->
                            <!-- Blog Post Meta Start -->
                            <div class="blog--post-meta">
                                <span class="author">By <a href="#">Admin</a></span>
                                <span class="separator">/</span>
                                <a href="#" class="date">1-1-2016</a>
                                <span class="separator">|</span>
                                <a href="#" class="comments">4 Comments</a>
                            </div>
                            <!-- Blog Post Meta End -->
                            <!-- Blog Post Content Start -->
                            <div class="blog--post-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed voluptates amet perspiciatis possimus repellat, dolore aut eos beatae consectetur velit sunt quidem veritatis accusantium eveniet natus facilis eius nulla esse!</p>
                                <a href="#" class="read--more btn--primary btn--ripple">Read More</a>
                            </div>
                            <!-- Blog Post Content End -->
                        </article>
                        <!-- Blog Post End -->
                        <!-- Blog Post Start -->
                        <article class="blog--post">
                            <!-- Blog Post Soundcloud Audio Start -->
                            <div class="blog--post-audio">
                                <div class="embed-responsive embed-responsive-16by9">
                                    <iframe class="embed-responsive-item" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/34019569&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
                                </div>
                            </div>
                            <!-- Blog Post Soundcloud Audio End -->
                            <!-- Blog Post Title Start -->
                            <div class="blog--post-title">
                                <h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
                            </div>
                            <!-- Blog Post Title End -->
                            <!-- Blog Post Meta Start -->
                            <div class="blog--post-meta">
                                <span class="author">By <a href="#">Admin</a></span>
                                <span class="separator">/</span>
                                <a href="#" class="date">1-1-2016</a>
                                <span class="separator">|</span>
                                <a href="#" class="comments">4 Comments</a>
                            </div>
                            <!-- Blog Post Meta End -->
                            <!-- Blog Post Content Start -->
                            <div class="blog--post-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed voluptates amet perspiciatis possimus repellat, dolore aut eos beatae consectetur velit sunt quidem veritatis accusantium eveniet natus facilis eius nulla esse!</p>
                                <a href="#" class="read--more btn--primary btn--ripple">Read More</a>
                            </div>
                            <!-- Blog Post Content End -->
                        </article>
                        <!-- Blog Post End -->
                        <!-- Blog Post Start -->
                        <article class="blog--post">
                            <!-- Blog Post Local Audio Start -->
                            <div class="blog--post-audio">
                                <audio src="media/audio.mp3" controls>Your browser does not support the <code>audio</code> element.</audio>
                            </div>
                            <!-- Blog Post Local Audio End -->
                            <!-- Blog Post Title Start -->
                            <div class="blog--post-title">
                                <h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
                            </div>
                            <!-- Blog Post Title End -->
                            <!-- Blog Post Meta Start -->
                            <div class="blog--post-meta">
                                <span class="author">By <a href="#">Admin</a></span>
                                <span class="separator">/</span>
                                <a href="#" class="date">1-1-2016</a>
                                <span class="separator">|</span>
                                <a href="#" class="comments">4 Comments</a>
                            </div>
                            <!-- Blog Post Meta End -->
                            <!-- Blog Post Content Start -->
                            <div class="blog--post-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed voluptates amet perspiciatis possimus repellat, dolore aut eos beatae consectetur velit sunt quidem veritatis accusantium eveniet natus facilis eius nulla esse!</p>
                                <a href="#" class="read--more btn--primary btn--ripple">Read More</a>
                            </div>
                            <!-- Blog Post Content End -->
                        </article>
                        <!-- Blog Post End -->
                        <!-- Blog Post Start -->
                        <article class="blog--post">
                            <!-- Blog Post Title Start -->
                            <div class="blog--post-title">
                                <h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
                            </div>
                            <!-- Blog Post Title End -->
                            <!-- Blog Post Meta Start -->
                            <div class="blog--post-meta">
                                <span class="author">By <a href="#">Admin</a></span>
                                <span class="separator">/</span>
                                <a href="#" class="date">1-1-2016</a>
                                <span class="separator">|</span>
                                <a href="#" class="comments">4 Comments</a>
                            </div>
                            <!-- Blog Post Meta End -->
                            <!-- Blog Post Content Start -->
                            <div class="blog--post-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed voluptates amet perspiciatis possimus repellat, dolore aut eos beatae consectetur velit sunt quidem veritatis accusantium eveniet natus facilis eius nulla esse!</p>
                                <a href="#" class="read--more btn--primary btn--ripple">Read More</a>
                            </div>
                            <!-- Blog Post Content End -->
                        </article>
                        <!-- Blog Post End -->

                        <!-- Blog Post Pagination Start -->
                        <nav class="blog--post-pagination">
                            <ul class="pagination">
                                <li><a href="#"><i class="fa fa-angle-double-left"></i></a></li>
                                <li><a href="#"><i class="fa fa-angle-left"></i></a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i></a></li>
                                <li><a href="#"><i class="fa fa-angle-double-right"></i></a></li>
                            </ul>
                        </nav>
                        <!-- Blog Post Pagination End -->
                    </div>
                    <!-- Blog Content End -->
                </div>
            </div>
        </div>
        <!-- Blog Area End -->
        <!-- Subscribe Area Start -->
        <div id="subscribe">
            <div class="subscribe--sticky">
                <div class="container">
                    <!-- Subscribe Content Start -->
                    <div class="subscribe--content" data-bg-img="img/subscribe-img/bg.png">
                        <div class="row">
                            <div class="col-md-4">
                                <!-- Section Title Start -->
                                <div class="section--title block">
                                    <h2>Subscribe To Our<span>Newsletter</span></h2>
                                </div>
                                <!-- Section Title End -->
                            </div>
                            <div class="col-md-8">
                                <!-- Subscribe Form Start -->
                                <div class="subscribe--form">
                                    <form action="http://themelooks.us12.list-manage.com/subscribe/post?u=50e1e21235cbd751ab4c1ebaa&amp;id=ac81d988e4" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate="novalidate">
                                        <div class="input--text">
                                            <input type="text" value="" name="EMAIL" placeholder="Enter your email address">
                                            <span class="highlight"></span>
                                        </div>
                                        <button type="submit" class="btn--primary btn--ripple">Subscribe</button>
                                    </form>
                                </div>
                                <!-- Subscribe Form End -->
                            </div>
                        </div>
                    </div>
                    <!-- Subscribe Content End -->
                </div>
            </div>
        </div>
        <!-- Subscribe Area End -->
        <!-- Footer Area Start -->
        <footer id="footer">
            <div class="container">
                <!-- Footer Background Image Start -->
                <div class="footer--bg" data-bg-img="img/footer-img/bg.png"></div>
                <!-- Footer Background Image End -->
                <div class="row">
                    <!-- Footer Widget Start -->
                    <div class="col-md-4 col-md-offset-2 footer--widget">
                        <!-- Footer About Widget Start -->
                        <div class="footer--about">
                            <h2>About Us</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In odio pariatur nobis blanditiis, non labore quidem sapiente provident dolorem et atque distinctio deleniti mollitia nostrum velit iste, aperiam eaque! Soluta! Impedit harum quis maxime ducimus  laborum nesciunt soluta tempore aperiam ex quasi minus.</p>
                            <a href="#"><i class="fa fm fa-angle-double-right"></i>Read More</a>
                        </div>
                        <!-- Footer About Widget End -->
                    </div>
                    <!-- Footer Widget End -->
                    <!-- Footer Widget Start -->
                    <div class="col-md-3 footer--widget">
                        <!-- Footer Links Widget Start -->
                        <div class="footer--links">
                            <h2>Useful Links</h2>
                            <ul>
                                <li><a href="#"><i class="fa fm fa-angle-double-right"></i>About Us</a></li>
                                <li><a href="#"><i class="fa fm fa-angle-double-right"></i>FAQ</a></li>
                                <li><a href="#"><i class="fa fm fa-angle-double-right"></i>Terms of Service</a></li>
                                <li><a href="#"><i class="fa fm fa-angle-double-right"></i>Privacy</a></li>
                                <li><a href="#"><i class="fa fm fa-angle-double-right"></i>Contact Us</a></li>
                            </ul>
                        </div>
                        <!-- Footer Links Widget End -->
                    </div>
                    <!-- Footer Widget End -->
                    <!-- Footer Widget Start -->
                    <div class="col-md-3 footer--widget">
                        <!-- Footer Contact Widget Start -->
                        <div class="footer--contact">
                            <h2>Contact</h2>
                            <a href="#" class="btn-block btn--primary btn--ripple"><i class="fa fm fa-comment"></i>LIVE CHAT</a>
                            <a href="tel:+444000000" class="btn-block btn--primary btn--ripple"><i class="fa fm fa-phone"></i>+444 000 000</a>
                            <a href="mailto:example@example.com" class="btn-block btn--primary btn--ripple"><i class="fa fm fa-envelope"></i>example@example.com</a>

                            <div class="footer--contact-social">
                                <ul class="nav navbar-nav">
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                                    <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                    <li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>
                                    <li><a href="#"><i class="fa fa-github"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- Footer Contact Widget End -->
                    </div>
                    <!-- Footer Widget End -->
                </div>
            </div>
            <!-- Footer Copyright Start -->
            <div class="footer--copyright text-center">
                <div class="container">
                    <p>Copyright &copy; 2016 <a href="#">HostWHMCS</a>. All Rights Reserved.</p>
                </div>
            </div>
            <!-- Footer Copyright End -->
        </footer>
        <!-- Footer Area End -->
        <!-- Back To Top Button Start -->
        <div id="backToTop">
            <a href="#top" class="btn--primary btn--ripple"><i class="fa fa-angle-up"></i></a>
        </div>
        <!-- Back To Top Button Start -->
    </div>
    <!-- Wrapper End -->

    <!-- ====jQuery Library==== -->
    <script src="js/jquery-3.1.0.min.js"></script>

    <!-- ====Bootstrap Core Script==== -->
    <script src="js/bootstrap.min.js"></script>

    <!-- ====jQuery Validate Plugin==== -->
    <script src="js/jquery.validate.min.js"></script>

    <!-- ====RetinaJS Plugin==== -->
    <script src='js/retina.min.js'></script>

    <!-- ====Color Switcher Plugin==== -->
    <script src='js/custom-color-switcher.js'></script>

    <!-- ====Main Script==== -->
    <script src="js/main.js"></script>
</body>
</html>
