<?php include 'inc/config.php'; $template['header_link'] = 'PAGES'; ?>
<?php include 'inc/template_start.php'; ?>
<?php include 'inc/page_head.php'; ?>

<!-- Page content -->
<div id="page-content">
    <!-- Article Header -->
    <div class="content-header">
        <div class="header-section clearfix">
            <a href="javascript:void(0)" class="pull-right">
                <img src="img/placeholders/avatars/avatar4.jpg" alt="Avatar" class="img-circle">
            </a>
            <h1>The autumn trip that changed my life</h1>
            <h2>It changed the way I think</h2>
        </div>
    </div>
    <!-- END Article Header -->

    <!-- Article Content -->
    <div class="row">
        <div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
            <!-- Article Block -->
            <div class="block">
                <!-- Article Title -->
                <div class="block-title">
                    <div class="block-options pull-right">
                        <a href="javascript:void(0)" class="btn btn-effect-ripple btn-warning" data-toggle="tooltip" title="Add to favorites"><i class="fa fa-star"></i></a>
                        <a href="javascript:void(0)" class="btn btn-effect-ripple btn-success" data-toggle="tooltip" title="Add bookmark"><i class="fa fa-bookmark"></i></a>
                        <a href="javascript:void(0)" class="btn btn-effect-ripple btn-danger" data-toggle="tooltip" title="Love it"><i class="fa fa-heart"></i></a>
                    </div>
                    <h2><i class="fa fa-clock-o"></i> September 20, 2014</h2>
                </div>
                <!-- END Article Title -->

                <!-- Article Content -->
                <article class="article-story">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit. Ut egestas tempor est, in cursus enim venenatis eget! Nulla quis ligula ipsum. Donec vitae ultrices dolor?</p>
                    <div class="push-top-bottom">
                        <div class="row">
                            <div class="col-sm-4 push-bit">
                                <a href="img/placeholders/photos/photo8.jpg" data-toggle="lightbox-image" title="Image Info">
                                    <img src="img/placeholders/photos/photo8.jpg" alt="Article Image" class="img-responsive center-block">
                                </a>
                            </div>
                            <div class="col-sm-4 push-bit">
                                <a href="img/placeholders/photos/photo9.jpg" data-toggle="lightbox-image" title="Image Info">
                                    <img src="img/placeholders/photos/photo9.jpg" alt="Article Image" class="img-responsive center-block">
                                </a>
                            </div>
                            <div class="col-sm-4 push-bit">
                                <a href="img/placeholders/photos/photo10.jpg" data-toggle="lightbox-image" title="Image Info">
                                    <img src="img/placeholders/photos/photo10.jpg" alt="Article Image" class="img-responsive center-block">
                                </a>
                            </div>
                        </div>
                    </div>
                    <p>Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit. Ut egestas tempor est, in cursus enim venenatis eget! Nulla quis ligula ipsum. Donec vitae ultrices dolor?</p>
                    <p>Donec lacinia venenatis metus at bibendum? In hac habitasse platea dictumst. Proin ac nibh rutrum lectus rhoncus eleifend. Sed porttitor pretium venenatis. Suspendisse potenti. Aliquam quis ligula elit. Aliquam at orci ac neque semper dictum. Sed tincidunt scelerisque ligula, et facilisis nulla hendrerit non. Suspendisse potenti. Pellentesque non accumsan orci. Praesent at lacinia dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <div class="push-top-bottom">
                        <div class="row">
                            <div class="col-sm-4 push-bit">
                                <a href="img/placeholders/photos/photo2.jpg" data-toggle="lightbox-image" title="Image Info">
                                    <img src="img/placeholders/photos/photo2.jpg" alt="Article Image" class="img-responsive center-block">
                                </a>
                            </div>
                            <div class="col-sm-4 push-bit">
                                <a href="img/placeholders/photos/photo13.jpg" data-toggle="lightbox-image" title="Image Info">
                                    <img src="img/placeholders/photos/photo13.jpg" alt="Article Image" class="img-responsive center-block">
                                </a>
                            </div>
                            <div class="col-sm-4 push-bit">
                                <a href="img/placeholders/photos/photo12.jpg" data-toggle="lightbox-image" title="Image Info">
                                    <img src="img/placeholders/photos/photo12.jpg" alt="Article Image" class="img-responsive center-block">
                                </a>
                            </div>
                        </div>
                    </div>
                    <p>Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit. Ut egestas tempor est, in cursus enim venenatis eget!</p>
                    <p>In hac habitasse platea dictumst. Proin ac nibh rutrum lectus rhoncus eleifend. Sed porttitor pretium venenatis. Suspendisse potenti. Aliquam quis ligula elit. Aliquam at orci ac neque semper dictum. Sed tincidunt scelerisque ligula, et facilisis nulla hendrerit non. Suspendisse potenti. Pellentesque non accumsan orci. Praesent at lacinia dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </article>
                <hr>
                <div class="block-section text-center">
                    <a href="javascript:void(0)" class="btn btn-effect-ripple btn-default" data-toggle="tooltip" title="Share on Facebook"><i class="fa fa-facebook"></i></a>
                    <a href="javascript:void(0)" class="btn btn-effect-ripple btn-default" data-toggle="tooltip" title="Share on Twitter"><i class="fa fa-twitter"></i></a>
                    <a href="javascript:void(0)" class="btn btn-effect-ripple btn-default" data-toggle="tooltip" title="Share on Google Plus"><i class="fa fa-google-plus"></i></a>
                    <a href="javascript:void(0)" class="btn btn-effect-ripple btn-default" data-toggle="tooltip" title="Share on Linkedin"><i class="fa fa-linkedin"></i></a>
                    <a href="javascript:void(0)" class="btn btn-effect-ripple btn-default" data-toggle="tooltip" title="Share on Pinterest"><i class="fa fa-pinterest"></i></a>
                </div>
                <!-- END Article Content -->
            </div>
            <!-- END Article Block -->

            <!-- Comments Block -->
            <div class="block">
                <!-- Comments Title -->
                <div class="block-title">
                    <h2><i class="fa fa-comments"></i> Comments (5)</h2>
                </div>
                <!-- END Comments Title -->

                <!-- Comments Content -->
                <ul class="media-list">
                    <li class="media">
                        <a href="javascript:void(0)" class="pull-left">
                            <img src="img/placeholders/avatars/avatar12.jpg" alt="Avatar" class="img-circle">
                        </a>
                        <div class="media-body">
                            <a href="javascript:void(0)"><strong>Nicoline Andersen</strong></a>
                            <span class="text-muted"><small><em>35 min ago</em></small></span>
                            <p>Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit.</p>
                        </div>
                    </li>
                    <li class="media">
                        <a href="javascript:void(0)" class="pull-left">
                            <img src="img/placeholders/avatars/avatar13.jpg" alt="Avatar" class="img-circle">
                        </a>
                        <div class="media-body">
                            <a href="javascript:void(0)"><strong>Josefina Orozco</strong></a>
                            <span class="text-muted"><small><em>10 hours ago</em></small></span>
                            <p>Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices.</p>
                            <ul class="media-list">
                                <li class="media">
                                    <a href="javascript:void(0)" class="pull-left">
                                        <img src="img/placeholders/avatars/avatar15.jpg" alt="Avatar" class="img-circle">
                                    </a>
                                    <div class="media-body">
                                        <a href="javascript:void(0)"><strong>George Romero</strong></a>
                                        <span class="text-muted"><small><em>10 min ago</em></small></span>
                                        <p>Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at.</p>
                                    </div>
                                </li>
                                <li class="media">
                                    <a href="javascript:void(0)" class="pull-left">
                                        <img src="img/placeholders/avatars/avatar14.jpg" alt="Avatar" class="img-circle">
                                    </a>
                                    <div class="media-body">
                                        <a href="javascript:void(0)"><strong>Gerald Sims</strong></a>
                                        <span class="text-muted"><small><em>1 hour ago</em></small></span>
                                        <p>Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque?</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="media">
                        <a href="javascript:void(0)" class="pull-left">
                            <img src="img/placeholders/avatars/avatar7.jpg" alt="Avatar" class="img-circle">
                        </a>
                        <div class="media-body">
                            <a href="javascript:void(0)"><strong>Donald Pierce</strong></a>
                            <span class="text-muted"><small><em>1 week ago</em></small></span>
                            <p>Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at.</p>
                        </div>
                    </li>
                </ul>
                <!-- END Comments Content -->
            </div>
            <!-- END Comments Block -->

            <!-- Add Comment Block -->
            <div class="block">
                <!-- Add Comment Title -->
                <div class="block-title">
                    <h2><i class="fa fa-plus"></i> Add Comment</h2>
                </div>
                <!-- END Add Comment Title -->

                <!-- Add Comment Content -->
                <form action="page_ready_article.php" method="post" class="form-horizontal" onsubmit="return false;">
                    <div class="form-group">
                        <div class="col-xs-6">
                            <input type="text" id="article-firstname" name="article-firstname" class="form-control" placeholder="Firstname">
                        </div>
                        <div class="col-xs-6">
                            <input type="text" id="article-lastname" name="article-lastname" class="form-control" placeholder="Lastname">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <textarea id="article-comment" name="article-comment" class="form-control" rows="5" placeholder="Comment.."></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <button type="submit" class="btn btn-effect-ripple btn-primary"><i class="fa fa-pencil"></i> Post Comment</button>
                        </div>
                    </div>
                </form>
                <!-- END Add Comment Content -->
            </div>
            <!-- END Add Comment Block -->
        </div>
    </div>
    <!-- END Article Content -->
</div>
<!-- END Page Content -->

<?php include 'inc/page_footer.php'; ?>
<?php include 'inc/template_scripts.php'; ?>
<?php include 'inc/template_end.php'; ?>