<?php get_header();
the_content();
?>

<!-- Banner Section Code Start-->
<!-------------------->
<div id="banner" style="background-image: url(<?php echo get_template_directory_uri(); ?>/images/banner-image.png);">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1>Blog News</h1>
            </div>
            <div class="col-sm-6 offset-sm-3">
                <p>All of us have been in a position where we were unable to find the most suitable host or even knew
                    what kind of web hosting service we needed. We decided to take action and went on with the idea of
                    making full</p>
            </div>
        </div>
    </div>
</div>
<!-------------------->
<!-- Banner Section Code End-->

<!-- Blog Posts Section Code Start-->
<!-------------------->
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Library</li>
                </ol>
            </nav>
        </div>

        <div class="col-sm-8">
            <div class="row">
                <?php
                if (have_posts()) : ?>
                <?php while (have_posts()) : the_post(); ?>
                <div class="col-lg-6">
                    <img class="blogImage" src="<?php echo the_post_thumbnail(); ?>
                    <h3><?php the_title(); ?></h3>
                    <div class="row">
                        <div class="col-sm-6 colBorder">
                            <img class="blogUser"
                                 src="">
                            <h5><?php the_author(); ?></h5>
                        </div>
                        <div class="col-sm-6">
                            <h5 class="pt-1 responsive"><?php echo get_the_date(); ?></h5>
                        </div>
                    </div>
                </div>

                    <?php endwhile; ?>
            <div class="d-flex j-content-center">
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                    <?php the_posts_pagination( array(
                        'mid_size' => 6,
                        'prev_text' => __( '&laquo;', 'textdomain' ),
                        'next_text' => __( '&raquo;', 'textdomain' ),
                    ) ); ?>
                    </ul>
                </nav>
            </div>
                <?php else : ?>
                <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
                <?php endif; ?>
            </div>
<!--            <div class="d-flex j-content-center">-->
<!--                <nav aria-label="Page navigation example">-->
<!--                    <ul class="pagination">-->
<!--                        <li class="page-item">-->
<!--                            <a class="page-link" href="#" aria-label="Previous">-->
<!--                                <span aria-hidden="true">&laquo;</span>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li class="page-item"><a class="page-link" href="#">01</a></li>-->
<!--                        <li class="page-item"><a class="page-link" href="#">02</a></li>-->
<!--                        <li class="page-item"><a class="page-link" href="#">03</a></li>-->
<!--                        <li class="page-item"><a class="page-link" href="#">04</a></li>-->
<!--                        <li class="page-item"><a class="page-link" href="#">05</a></li>-->
<!--                        <li class="page-item"><a class="page-link" href="#">06</a></li>-->
<!---->
<!--                        <li class="page-item">-->
<!--                            <a class="page-link" href="#" aria-label="Next">-->
<!--                                <span aria-hidden="true">&raquo;</span>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </nav>-->
<!--            </div>-->
        </div>
        <div class="col-md-4">
            <div class="sideBarBox">
                <div class="sideBar">
                    <img src="images/sidebar-hosting-icon.png">
                    <h2>How fast is your hosting?</h2>
                </div>
                <div class="col-sm-12">
                    <form class="form-inline">
                        <input class="form-control sidebarInput" type="search" placeholder="Enter URL"
                               aria-label="Search">
                        <button class="btn btn-outline-success testButton dark" type="submit">Test</button>
                    </form>
                </div>
            </div>
            <div class="sideBarBox">
                <div class="recentTitleBox">
                    <div class="d-flex spaceBetween">
                        <h4>Recent Posts</h4>
                        <img src="images/recent-icon.png">
                    </div>
                </div>
                <div class="d-flex j-content-center">
                    <img class="bottomStyle" src="images/bottom-style.png">
                </div>
                <div class="col-sm-12">
                    <div class="media">
                        <img class="recentImage" src="images/recent-image-1.png" alt=""/>
                        <div class="media-body">
                            <h6>How Much Money Do </h6>
                            <div class="sideBarHeading">
                                <p>Do you to Make Money Online in 2018 but scared of scams?</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="borderBottom"></div>
                <div class="col-sm-12">
                    <div class="media">
                        <img class="recentImage" src="images/recent-image-2.png" alt=""/>
                        <div class="media-body">
                            <h6>7 Cheap Cloud Hosting Providers </h6>
                            <div class="sideBarHeading">
                                <p>Do you to Make Money Online in 2018 but scared of scams?</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="borderBottom"></div>
                <div class="col-sm-12">
                    <div class="media">
                        <img class="recentImage" src="images/recent-image-3.png" alt=""/>
                        <div class="media-body">
                            <h6>35 Legitimate Ways To Make</h6>
                            <div class="sideBarHeading">
                                <p>Do you to Make Money Online in 2018 but scared of scams?</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="borderBottom"></div>
                <div class="col-sm-12">
                    <div class="media">
                        <img class="recentImage" src="images/recent-image-4.png" alt=""/>
                        <div class="media-body">
                            <h6>Future Of SEO in 2019</h6>
                            <div class="sideBarHeading">
                                <p>Do you to Make Money Online in 2018 but scared of scams?</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sideBarBox">
                <div class="recentTitleBox">
                    <div class="d-flex spaceBetween">
                        <h4>Top New Posts</h4>
                        <img src="images/recent-icon.png">
                    </div>
                </div>
                <div class="d-flex j-content-center">
                    <img class="bottomStyle" src="images/bottom-style.png">
                </div>
                <div class="col-sm-12">
                    <div class="media">
                        <img class="recentImage" src="images/recent-image-1.png" alt=""/>
                        <div class="media-body">
                            <h6>How Much Money Do </h6>
                            <div class="sideBarHeading">
                                <p>Do you to Make Money Online in 2018 but scared of scams?</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="borderBottom"></div>
                <div class="col-sm-12">
                    <div class="media">
                        <img class="recentImage" src="images/recent-image-2.png" alt=""/>
                        <div class="media-body">
                            <h6>7 Cheap Cloud Hosting Providers </h6>
                            <div class="sideBarHeading">
                                <p>Do you to Make Money Online in 2018 but scared of scams?</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="borderBottom"></div>
                <div class="col-sm-12">
                    <div class="media">
                        <img class="recentImage" src="images/recent-image-3.png" alt=""/>
                        <div class="media-body">
                            <h6>35 Legitimate Ways To Make</h6>
                            <div class="sideBarHeading">
                                <p>Do you to Make Money Online in 2018 but scared of scams?</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="borderBottom"></div>
                <div class="col-sm-12">
                    <div class="media">
                        <img class="recentImage" src="images/recent-image-4.png" alt=""/>
                        <div class="media-body">
                            <h6>Future Of SEO in 2019</h6>
                            <div class="sideBarHeading">
                                <p>Do you to Make Money Online in 2018 but scared of scams?</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sideBarBox pb-0">
                <div class="recentTitleBox">
                    <div class="d-flex spaceBetween">
                        <h4>Top Hosting</h4>
                        <img src="images/hosting-icon.png">
                    </div>
                </div>
                <div class="d-flex j-content-center">
                    <img class="bottomStyle" src="images/bottom-style.png">
                </div>
                <div class="col-sm-12">
                    <div class="d-flex spaceBetween">
                        <img class="hostingLogo" src="images/hosting-logo.png">
                        <button class="btn btn-outline-success reviewButton" type="submit"><i class="fas fa-eye"></i>
                            Review
                        </button>
                    </div>
                </div>
                <div class="borderBottom"></div>
                <div class="col-sm-12">
                    <div class="d-flex spaceBetween">
                        <img class="hostingLogo" src="images/hosting-logo.png">
                        <button class="btn btn-outline-success reviewButton" type="submit"><i class="fas fa-eye"></i>
                            Review
                        </button>
                    </div>
                </div>
                <div class="borderBottom"></div>
                <div class="col-sm-12">
                    <div class="d-flex spaceBetween">
                        <img class="hostingLogo" src="images/hosting-logo.png">
                        <button class="btn btn-outline-success reviewButton" type="submit"><i class="fas fa-eye"></i>
                            Review
                        </button>
                    </div>
                </div>
                <div class="borderBottom"></div>
                <div class="col-sm-12">
                    <div class="d-flex spaceBetween">
                        <img class="hostingLogo" src="images/hosting-logo.png">
                        <button class="btn btn-outline-success reviewButton" type="submit"><i class="fas fa-eye"></i>
                            Review
                        </button>
                    </div>
                </div>
                <div class="borderBottom"></div>
                <div class="col-sm-12">
                    <div class="d-flex spaceBetween">
                        <img class="hostingLogo" src="images/hosting-logo.png">
                        <button class="btn btn-outline-success reviewButton" type="submit"><i class="fas fa-eye"></i>
                            Review
                        </button>
                    </div>
                </div>
                <div class="borderBottom"></div>
                <div class="col-sm-12">
                    <div class="d-flex spaceBetween">
                        <img class="hostingLogo" src="images/hosting-logo.png">
                        <button class="btn btn-outline-success reviewButton" type="submit"><i class="fas fa-eye"></i>
                            Review
                        </button>
                    </div>
                </div>
            </div>
            <div class="sideBarBox">
                <div class="sideBar newsletterPadding">
                    <img src="images/newsletter-icon.png">
                    <h2>Newsletter</h2>
                </div>
                <div class="col-sm-12">
                    <form class="form-inline">
                        <input class="form-control sidebarInput w65" type="search" placeholder="Newsletter"
                               aria-label="Search">
                        <button class="btn btn-outline-success testButton orange " type="submit">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-------------------->
<!-- Blog Posts Section Code End-->

<!-- Subscribe Section Code Start-->
<!-------------------->
    <div class="subscribeBackground">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="subscribeTitle">
                        <h3>SUBSCRIBE TO MY NEWSLETTER</h3>
                        <h2>Stay up to date with my blogging news</h2>
                    </div>
                </div>
                <div class="col-sm-4">
                    <input type="name" class="form-control SubscribeInput" id="exampleInputName"
                           aria-describedby="emailHelp" placeholder="Name">
                </div>
                <div class="col-sm-4">
                    <input type="email" class="form-control SubscribeInput" id="exampleInputEmail1"
                           aria-describedby="emailHelp" placeholder="Email">
                </div>
                <div class="col-sm-4">
                    <button class="btn orange updateButton" type="submit">Stay Update!</button>
                </div>
            </div>
        </div>
    </div>
<!-------------------->
<!-- Subscribe Section Code End-->


<?php get_footer(); ?>
