<?php include 'inc/config.php'; ?>
<?php include 'inc/template_start.php'; ?>
<?php include 'inc/page_head.php'; ?>

<!-- Intro -->
<section class="site-section site-section-top site-section-light themed-background-dark">
    <div class="container">
        <h1 class="text-center animation-fadeInQuickInv"><strong>Find the perfect service.</strong></h1>
    </div>
</section>
<!-- END Intro -->

<!-- Jobs -->
<section class="site-content site-section">
    <div class="container">
        <div class="row push-bit">
            <div class="col-md-4">
                <a href="javascript:void(0)" class="portfolio-item themed-background-danger visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick" data-element-offset="-20">
                    <h2 class="site-heading h3 text-center">
                        <strong class="text-uppercase">Web Design</strong>
                    </h2>
                    <div class="portfolio-item-icon">
                        <i class="gi gi-briefcase text-dark-op"></i>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div>
                                <strong>Design Studio</strong>
                            </div>
                            <em>5 Projects</em>
                        </div>
                        <div class="col-xs-6 text-right">
                            <span class="h2 text-light-op"><strong>$899</strong></span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="javascript:void(0)" class="portfolio-item themed-background-info visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick" data-element-offset="-20">
                    <h2 class="site-heading h3 text-center">
                        <strong class="text-uppercase">Web Development</strong>
                    </h2>
                    <div class="portfolio-item-icon">
                        <i class="gi gi-cogwheels text-dark-op"></i>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div>
                                <strong>Develop Studio</strong>
                            </div>
                            <em>10 Projects</em>
                        </div>
                        <div class="col-xs-6 text-right">
                            <span class="h2 text-light-op"><strong>$999</strong></span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="javascript:void(0)" class="portfolio-item themed-background-amethyst visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick" data-element-offset="-20">
                    <h2 class="site-heading h3 text-center">
                        <strong class="text-uppercase">Logo Design</strong>
                    </h2>
                    <div class="portfolio-item-icon">
                        <i class="gi gi-vector_path_circle text-dark-op"></i>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div>
                                <strong>Logo Studio</strong>
                            </div>
                            <em>25 Projects</em>
                        </div>
                        <div class="col-xs-6 text-right">
                            <span class="h2 text-light-op"><strong>$399</strong></span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="javascript:void(0)" class="portfolio-item themed-background-flat visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick" data-element-offset="-20">
                    <h2 class="site-heading h3 text-center">
                        <strong class="text-uppercase">Icon Design</strong>
                    </h2>
                    <div class="portfolio-item-icon">
                        <i class="gi gi-webcam text-dark-op"></i>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div>
                                <strong>Icon Studio</strong>
                            </div>
                            <em>3 Projects</em>
                        </div>
                        <div class="col-xs-6 text-right">
                            <span class="h2 text-light-op"><strong>$499</strong></span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="javascript:void(0)" class="portfolio-item themed-background-social visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick" data-element-offset="-20">
                    <h2 class="site-heading h3 text-center">
                        <strong class="text-uppercase">Marketing</strong>
                    </h2>
                    <div class="portfolio-item-icon">
                        <i class="gi gi-charts text-dark-op"></i>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div>
                                <strong>Marketing Studio</strong>
                            </div>
                            <em>9 Projects</em>
                        </div>
                        <div class="col-xs-6 text-right">
                            <span class="h2 text-light-op"><strong>$599</strong></span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="javascript:void(0)" class="portfolio-item themed-background-classy visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick" data-element-offset="-20">
                    <h2 class="site-heading h3 text-center">
                        <strong class="text-uppercase">Web hosting</strong>
                    </h2>
                    <div class="portfolio-item-icon">
                        <i class="gi gi-server text-dark-op"></i>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div>
                                <strong>Hosting Studio</strong>
                            </div>
                            <em>65 Projects</em>
                        </div>
                        <div class="col-xs-6 text-right">
                            <span class="h2 text-light-op"><strong>$29</strong></span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="javascript:void(0)" class="portfolio-item themed-background-creme visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick" data-element-offset="-20">
                    <h2 class="site-heading h3 text-center">
                        <strong class="text-uppercase">App Design</strong>
                    </h2>
                    <div class="portfolio-item-icon">
                        <i class="gi gi-iphone text-dark-op"></i>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div>
                                <strong>App Studio</strong>
                            </div>
                            <em>7 Projects</em>
                        </div>
                        <div class="col-xs-6 text-right">
                            <span class="h2 text-light-op"><strong>$999</strong></span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="javascript:void(0)" class="portfolio-item themed-background-warning visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick" data-element-offset="-20">
                    <h2 class="site-heading h3 text-center">
                        <strong class="text-uppercase">App Development</strong>
                    </h2>
                    <div class="portfolio-item-icon">
                        <i class="gi gi-settings text-dark-op"></i>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div>
                                <strong>App Studio</strong>
                            </div>
                            <em>15 Projects</em>
                        </div>
                        <div class="col-xs-6 text-right">
                            <span class="h2 text-light-op"><strong>$3499</strong></span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="javascript:void(0)" class="portfolio-item themed-background-success visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick" data-element-offset="-20">
                    <h2 class="site-heading h3 text-center">
                        <strong class="text-uppercase">Consultant</strong>
                    </h2>
                    <div class="portfolio-item-icon">
                        <i class="gi gi-suitcase text-dark-op"></i>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div>
                                <strong>Pro Studio</strong>
                            </div>
                            <em>19 Projects</em>
                        </div>
                        <div class="col-xs-6 text-right">
                            <span class="h2 text-light-op"><strong>$699</strong></span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>
<!-- END Jobs -->

<!-- Quick Stats -->
<section class="site-content site-section themed-background-default">
    <div class="container">
        <!-- Stats Row -->
        <!-- CountTo (initialized in js/app.js), for more examples you can check out https://github.com/mhuggins/jquery-countTo -->
        <div class="row">
            <div class="col-sm-4">
                <div class="counter site-block">
                    <span data-toggle="countTo" data-to="600" data-after="+"></span>
                    <small>Jobs</small>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="counter site-block">
                    <span data-toggle="countTo" data-to="5500" data-after="+"></span>
                    <small>Customers</small>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="counter site-block">
                    <span data-toggle="countTo" data-to="7400" data-after="+"></span>
                    <small>Projects</small>
                </div>
            </div>
        </div>
        <!-- END Stats Row -->
    </div>
</section>
<!-- END Quick Stats -->

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