{% set page_title = 'Minimal Classic Agency - About Us' %}
{% set header_show = true %}
{% set header_title = 'We create successful digital<br> <em class="fw-400">products</em>' %}
{% set header_subtitle = 'New Branding Agency' %}
{% set header_show = true %}
{% set header_image = 'assets/images/header-about-us.jpg' %}
{% set header_image_overlay = 'rgba(12, 12, 12, 0.6)' %}
{% set header_size = 'lg' %}
{% set header_text_color = 'text-white' %}
{% extends 'layouts/layout-minimal-classic-agency.html' %}

{% block content %}

<!-- START: We Are Designers -->
<div class="nk-box bg-white">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6">
                <div class="bg-image bg-image-parallax">
                    <img src="assets/images/services-1.jpg" alt="" class="jarallax-img">
                </div>
                <div class="nk-gap-6"></div>
                <div class="nk-gap-6"></div>
                <div class="nk-gap-6"></div>
                <div class="nk-gap-6"></div>
            </div>
            <div class="col-lg-6">
                <div class="nk-gap-4"></div>

                <div class="nk-box-4 mw-620">
                    <h2 class="display-4">Who we are</h2>
                    <div class="nk-gap mnt-5"></div>

                    <p>Vestibulum gravida volutpat ipsum non ultrices. Praesent vitae risus. Ut a erat ullamcorper, accumsan felis lacinia, hendrerit. Vivamus scelerisque posuere arcu, eu malesuada purus.</p>
                    <p>Suspendisse hendrerit mi vel sapien ultrices gravida. Proin non vehicula, pulvinar lorem vitae, pharetra augue.</p>

                    <img src="assets/images/about-me-signature.png" alt="" class="nk-img-fit">
                </div>

                <div class="nk-gap-4"></div>
            </div>
        </div>
    </div>
</div>
<!-- END: We Are Designers -->

<!-- START: We Are Developers -->
<div class="nk-box bg-white">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 order-lg-2">
                <div class="bg-image bg-image-parallax">
                    <img src="assets/images/services-4.jpg" alt="" class="jarallax-img">
                </div>
                <div class="nk-gap-6"></div>
                <div class="nk-gap-6"></div>
                <div class="nk-gap-6"></div>
                <div class="nk-gap-6"></div>
            </div>
            <div class="col-lg-6">
                <div class="nk-gap-4"></div>

                <div class="nk-box-4 mw-620 mlauto">
                    <h2 class="display-4">Professional Skills</h2>
                    <div class="nk-gap mnt-5"></div>

                    <div class="nk-progress nk-progress-sm nk-count" data-progress="75" data-progress-mask="{$}%">
                        <div class="nk-progress-title">UI/UX Design <span class="nk-progress-percent">75%</span></div>
                        <div class="nk-progress-line">
                            <div style="width: 75%"></div>
                        </div>
                    </div>

                    <div class="nk-gap"></div>
                    <div class="nk-progress nk-progress-sm nk-count" data-progress="90" data-progress-mask="{$}%">
                        <div class="nk-progress-title">Web Development <span class="nk-progress-percent">90%</span></div>
                        <div class="nk-progress-line">
                            <div style="width: 90%"></div>
                        </div>
                    </div>

                    <div class="nk-gap"></div>
                    <div class="nk-progress nk-progress-sm nk-count" data-progress="65" data-progress-mask="{$}%">
                        <div class="nk-progress-title">Marketing <span class="nk-progress-percent">65%</span></div>
                        <div class="nk-progress-line">
                            <div style="width: 65%"></div>
                        </div>
                    </div>
                </div>

                <div class="nk-gap-4"></div>
            </div>
        </div>
    </div>
</div>
<!-- END: We Are Developers -->

<!-- START: Features -->
<div class="nk-box bg-dark-1 text-white">
    <div class="bg-image bg-image-parallax">
        <img src="assets/images/bg-pattern.jpg" alt="" class="jarallax-img">
    </div>
    <div class="nk-gap-5 mnt-6"></div>
    <div class="container">
        <div class="row vertical-gap">
            <div class="col-md-6 col-lg-3">
                <div class="nk-ibox-3">
                    <div class="nk-ibox-icon">
                        <span class="pe-7s-diamond"></span>
                    </div>
                    <div class="nk-ibox-cont">
                        <div class="nk-ibox-title">Creative Ideas</div>
                        <div class="nk-ibox-text">Donec finibus ulicies vulputate mollis massa laoreet</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="nk-ibox-3">
                    <div class="nk-ibox-icon">
                        <span class="pe-7s-arc"></span>
                    </div>
                    <div class="nk-ibox-cont">
                        <div class="nk-ibox-title">Really Clean Code</div>
                        <div class="nk-ibox-text">Donec finibus ulicies vulputate mollis massa laoreet</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="nk-ibox-3">
                    <div class="nk-ibox-icon">
                        <span class="pe-7s-headphones"></span>
                    </div>
                    <div class="nk-ibox-cont">
                        <div class="nk-ibox-title">Support 24/7</div>
                        <div class="nk-ibox-text">Donec finibus ulicies vulputate mollis massa laoreet</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="nk-ibox-3">
                    <div class="nk-ibox-icon">
                        <span class="pe-7s-medal"></span>
                    </div>
                    <div class="nk-ibox-cont">
                        <div class="nk-ibox-title">Talented Team</div>
                        <div class="nk-ibox-text">Donec finibus ulicies vulputate mollis massa laoreet</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="nk-gap-5 mnt-6"></div>
</div>
<!-- END: Features -->

<!-- START: Our Info Tabs -->
<div class="nk-box bg-white">
    <div class="nk-gap-5 mnb-6"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 offset-lg-2">
                <!-- START: Tabs -->
                <div class="nk-tabs text-center">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" href="#tabs-1-1" role="tab" data-toggle="tab">Our History</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tabs-1-2" role="tab" data-toggle="tab">Our Mission</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tabs-1-3" role="tab" data-toggle="tab">Our Principles</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade show active" id="tabs-1-1">
                            Ut tempor blandit ligula et vulputate. In at nec lorem laoreet ornare in in orci etiam non. Suspendisse fermentum, nulla ac malesuada tristique, nulla tellus lacus, eu facilisis nunc tellus augue.
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tabs-1-2">
                            I light is for second, seas let third beginning shall our was void in hath evening and, beast beginning night signs replenish gathered void midst very have two beast he let seasons you meat. Behold doesn't face.
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tabs-1-3">
                            Days they're a image appear creepeth wherein. Waters. Over midst abundantly open Greater. Thing whose meat replenish, male. Behold a fish dry under herb fifth he from our evening moveth bring.
                        </div>
                    </div>
                </div>
                <!-- END: Tabs -->
            </div>
        </div>
    </div>
    <div class="nk-gap-5 mnt-6"></div>
</div>
<!-- END: Our Info Tabs -->

<!-- START: Our Team -->
<div class="nk-team-block">
    <div class="nk-team-member active">
        <div class="nk-team-member-letter">E</div>
        <div class="nk-team-member-name">Edwin Charles</div>
        <div class="nk-team-member-post">Web Developer</div>
        <div class="nk-team-member-bio">Ut tempor blandit ligula et vul. In at nibh nec lorem.</div>
        <img class="nk-team-member-photo" src="assets/images/team-member-1.jpg" alt="Edwin Charles">
        <ul class="nk-team-member-social">
            <li><a href="#"><span class="fa fa-facebook"></span></a></li>
            <li><a href="#"><span class="fa fa-twitter"></span></a></li>
            <li><a href="#"><span class="fa fa-google-plus"></span></a></li>
        </ul>
    </div>
    <div class="nk-team-member">
        <div class="nk-team-member-letter">D</div>
        <div class="nk-team-member-name">Donna Flowers</div>
        <div class="nk-team-member-post">Web Designer</div>
        <div class="nk-team-member-bio">Ut tempor blandit ligula et vul. In at nibh nec lorem.</div>
        <img class="nk-team-member-photo" src="assets/images/team-member-2.jpg" alt="Donna Flowers">
        <ul class="nk-team-member-social">
            <li><a href="#"><span class="fa fa-facebook"></span></a></li>
            <li><a href="#"><span class="fa fa-twitter"></span></a></li>
            <li><a href="#"><span class="fa fa-google-plus"></span></a></li>
        </ul>
    </div>
    <div class="nk-team-member">
        <div class="nk-team-member-letter">A</div>
        <div class="nk-team-member-name">April Copeland</div>
        <div class="nk-team-member-post">Team Lead</div>
        <div class="nk-team-member-bio">Ut tempor blandit ligula et vul. In at nibh nec lorem.</div>
        <img class="nk-team-member-photo" src="assets/images/team-member-4.jpg" alt="April Copeland">
        <ul class="nk-team-member-social">
            <li><a href="#"><span class="fa fa-facebook"></span></a></li>
            <li><a href="#"><span class="fa fa-twitter"></span></a></li>
            <li><a href="#"><span class="fa fa-google-plus"></span></a></li>
        </ul>
    </div>
    <div class="nk-team-member">
        <div class="nk-team-member-letter">R</div>
        <div class="nk-team-member-name">Richard Kennedy</div>
        <div class="nk-team-member-post">Art Director</div>
        <div class="nk-team-member-bio">Ut tempor blandit ligula et vul. In at nibh nec lorem.</div>
        <img class="nk-team-member-photo" src="assets/images/team-member-3.jpg" alt="Richard Kennedy">
        <ul class="nk-team-member-social">
            <li><a href="#"><span class="fa fa-facebook"></span></a></li>
            <li><a href="#"><span class="fa fa-twitter"></span></a></li>
            <li><a href="#"><span class="fa fa-google-plus"></span></a></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<!-- END: Our Team -->

<!-- START: Features -->
<div class="nk-box bg-dark-1 text-white">
    <div class="bg-image bg-image-parallax">
        <img src="assets/images/bg-pattern.jpg" alt="" class="jarallax-img">
    </div>
    <div class="nk-gap-5 mnt-6"></div>
    <div class="container">
        <div class="row vertical-gap">
            <div class="col-md-6 col-lg-3">
                <div class="nk-ibox-1">
                    <div class="nk-ibox-icon">
                        <span class="pe-7s-portfolio"></span>
                    </div>
                    <div class="nk-ibox-cont">
                        <div class="nk-ibox-title">548</div>
                        <div class="nk-ibox-text">Projects Completed</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="nk-ibox-1">
                    <div class="nk-ibox-icon">
                        <span class="pe-7s-clock"></span>
                    </div>
                    <div class="nk-ibox-cont">
                        <div class="nk-ibox-title">1465</div>
                        <div class="nk-ibox-text">Working Hours</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="nk-ibox-1">
                    <div class="nk-ibox-icon">
                        <span class="pe-7s-star"></span>
                    </div>
                    <div class="nk-ibox-cont">
                        <div class="nk-ibox-title">612</div>
                        <div class="nk-ibox-text">Positive Feedbacks</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="nk-ibox-1">
                    <div class="nk-ibox-icon">
                        <span class="pe-7s-like"></span>
                    </div>
                    <div class="nk-ibox-cont">
                        <div class="nk-ibox-title">735</div>
                        <div class="nk-ibox-text">Happy Clients</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="nk-gap-5 mnt-6"></div>
</div>
<!-- END: Features -->

<!-- START: Contact Me -->
<div class="bg-gray-2 text-center">
    <div class="nk-gap-5 mnb-12"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 offset-lg-2">
                <h2 class="h1">Let's work together</h2>
                <div class="nk-gap-1 mnt-15"></div>
                <p>Donec orci sem, pretium ac dolor et, faucibus faucibus mauris. Etiam aliquet, faucibus, nisi eros vehicula lorem.</p>
                <div class="nk-gap mnt-9"></div>
                <a href="#" class="nk-btn nk-btn-long nk-btn-color-dark-2">Contact Me</a>
            </div>
        </div>
    </div>
    <div class="nk-gap-5"></div>
</div>
<!-- END: Contact Me -->

{% endblock %}