{% extends "pages/abstract/default.html.twig" %}

{% set page_active = "about" %}

{# Overrides blocks in head of base template #}
{% block page_title %}{{translate("ABOUT")}}{% endblock %}

{% block page_description %}All about my UserFrosting website.{% endblock %}

{% block body_matter %}

    <!-- Intro Content -->
    <div class="row">
        <div class="col-md-6">
            <img class="img-responsive" src="https://via.placeholder.com/700x450.png" alt="">
        </div>
        <div class="col-md-6">
            <h2>About Modern Business</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed voluptate nihil eum consectetur similique? Consectetur, quod, incidunt, harum nisi dolores delectus reprehenderit voluptatem perferendis dicta dolorem non blanditiis ex fugiat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, magni, aperiam vitae illum voluptatum aut sequi impedit non velit ab ea pariatur sint quidem corporis eveniet. Odit, temporibus reprehenderit dolorum!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, consequuntur, modi mollitia corporis ipsa voluptate corrupti eum ratione ex ea praesentium quibusdam? Aut, in eum facere corrupti necessitatibus perspiciatis quis?</p>
        </div>
    </div>
    <!-- /.row -->

    <!-- Team Members -->
    <div class="row">
        <div class="col-lg-12">
            <h2 class="page-header">Our Team</h2>
        </div>
        <div class="col-md-4 text-center">
            <div class="thumbnail">
                <img class="img-responsive" src="https://via.placeholder.com/700x450.png" alt="">
                <div class="caption">
                    <h3>John Smith<br>
                        <small>Job Title</small>
                    </h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste saepe et quisquam nesciunt maxime.</p>
                    <ul class="list-inline">
                        <li><a href="#"><i class="fas fa-2x fa-facebook-square"></i></a>
                        </li>
                        <li><a href="#"><i class="fas fa-2x fa-linkedin-square"></i></a>
                        </li>
                        <li><a href="#"><i class="fas fa-2x fa-twitter-square"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="thumbnail">
                <img class="img-responsive" src="https://via.placeholder.com/700x450.png" alt="">
                <div class="caption">
                    <h3>John Smith<br>
                        <small>Job Title</small>
                    </h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste saepe et quisquam nesciunt maxime.</p>
                    <ul class="list-inline">
                        <li><a href="#"><i class="fas fa-2x fa-facebook-square"></i></a>
                        </li>
                        <li><a href="#"><i class="fas fa-2x fa-linkedin-square"></i></a>
                        </li>
                        <li><a href="#"><i class="fas fa-2x fa-twitter-square"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="thumbnail">
                <img class="img-responsive" src="https://via.placeholder.com/700x450.png" alt="">
                <div class="caption">
                    <h3>John Smith<br>
                        <small>Job Title</small>
                    </h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste saepe et quisquam nesciunt maxime.</p>
                    <ul class="list-inline">
                        <li><a href="#"><i class="fas fa-2x fa-facebook-square"></i></a>
                        </li>
                        <li><a href="#"><i class="fas fa-2x fa-linkedin-square"></i></a>
                        </li>
                        <li><a href="#"><i class="fas fa-2x fa-twitter-square"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="thumbnail">
                <img class="img-responsive" src="https://via.placeholder.com/700x450.png" alt="">
                <div class="caption">
                    <h3>John Smith<br>
                        <small>Job Title</small>
                    </h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste saepe et quisquam nesciunt maxime.</p>
                    <ul class="list-inline">
                        <li><a href="#"><i class="fas fa-2x fa-facebook-square"></i></a>
                        </li>
                        <li><a href="#"><i class="fas fa-2x fa-linkedin-square"></i></a>
                        </li>
                        <li><a href="#"><i class="fas fa-2x fa-twitter-square"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="thumbnail">
                <img class="img-responsive" src="https://via.placeholder.com/700x450.png" alt="">
                <div class="caption">
                    <h3>John Smith<br>
                        <small>Job Title</small>
                    </h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste saepe et quisquam nesciunt maxime.</p>
                    <ul class="list-inline">
                        <li><a href="#"><i class="fas fa-2x fa-facebook-square"></i></a>
                        </li>
                        <li><a href="#"><i class="fas fa-2x fa-linkedin-square"></i></a>
                        </li>
                        <li><a href="#"><i class="fas fa-2x fa-twitter-square"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="thumbnail">
                <img class="img-responsive" src="https://via.placeholder.com/700x450.png" alt="">
                <div class="caption">
                    <h3>John Smith<br>
                        <small>Job Title</small>
                    </h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste saepe et quisquam nesciunt maxime.</p>
                    <ul class="list-inline">
                        <li><a href="#"><i class="fas fa-2x fa-facebook-square"></i></a>
                        </li>
                        <li><a href="#"><i class="fas fa-2x fa-linkedin-square"></i></a>
                        </li>
                        <li><a href="#"><i class="fas fa-2x fa-twitter-square"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->

    <!-- Our Customers -->
    <div class="row">
        <div class="col-lg-12">
            <h2 class="page-header">Our Customers</h2>
        </div>
        <div class="col-md-2 col-sm-4 col-xs-6">
            <img class="img-responsive customer-img" src="https://via.placeholder.com/500x300.png" alt="">
        </div>
        <div class="col-md-2 col-sm-4 col-xs-6">
            <img class="img-responsive customer-img" src="https://via.placeholder.com/500x300.png" alt="">
        </div>
        <div class="col-md-2 col-sm-4 col-xs-6">
            <img class="img-responsive customer-img" src="https://via.placeholder.com/500x300.png" alt="">
        </div>
        <div class="col-md-2 col-sm-4 col-xs-6">
            <img class="img-responsive customer-img" src="https://via.placeholder.com/500x300.png" alt="">
        </div>
        <div class="col-md-2 col-sm-4 col-xs-6">
            <img class="img-responsive customer-img" src="https://via.placeholder.com/500x300.png" alt="">
        </div>
        <div class="col-md-2 col-sm-4 col-xs-6">
            <img class="img-responsive customer-img" src="https://via.placeholder.com/500x300.png" alt="">
        </div>
    </div>
    <!-- /.row -->
{% endblock %}
