{% extends "layout.html" %}

{% set title = 'Projects' %}

{% block content %}

<section class="intro">
    <div class='container'>
        <div class="intro-content">
            <div id="holder">
                <h2 class="no-margin mbmd">Explore OrdoChao's latest projects</h2>
                <div id="slogans">
                    <p class="slogan text-center"><strong>We'd love to hear from you!</strong></p>
                    <p class="slogan text-center"><strong>a new brand software comapany based</strong></p>
                    <p class="slogan text-center"><strong>a new brand software comapany</strong></p>
                    <p class="slogan text-center"><strong>a new brand software comapany based in Egypt,</strong></p>
                    <p class="slogan text-center"><strong>a new brand software comapany based in</strong></p>
                    <p class="slogan text-center"><strong>a new brand software</strong></p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad">
    <div class="container">
        <div class="row">
            <nav class="filter mbxxlg">
                <a href="#" class="capitalize active" data-hover>engineering</a>
                <a href="#" class="capitalize" data-hover>software</a>
                <a href="#" class="capitalize" data-hover>visualization</a>
            </nav>
            <div class="col-sm-6">
                <div class="project">
                    <figure class="project-img cover" style="background-image: url('_assets/img/projects/01.jpg')">
                        <figcaption class="project-content">
                            <h3 class="no-margin mblg text-bold">Project title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi eligendi et labore officia rem! Aut delectus ea earum eos facere.</p>
                            <a href="project.html" class="capitalize mtxxlg d-inline" data-hover>learn more</a>
                        </figcaption>
                    </figure>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="project">
                    <figure class="project-img cover" style="background-image: url('_assets/img/projects/02.jpg')">
                        <figcaption class="project-content">
                            <h3 class="no-margin mblg text-bold">Project title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi eligendi et labore officia rem! Aut delectus ea earum eos facere.</p>
                            <a href="project.html" class="capitalize mtxxlg d-inline" data-hover>learn more</a>
                        </figcaption>
                    </figure>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="project">
                    <figure class="project-img cover" style="background-image: url('_assets/img/projects/03.jpg')">
                        <figcaption class="project-content">
                            <h3 class="no-margin mblg text-bold">Project title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi eligendi et labore officia rem! Aut delectus ea earum eos facere.</p>
                            <a href="project.html" class="capitalize mtxxlg d-inline" data-hover>learn more</a>
                        </figcaption>
                    </figure>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="project">
                    <figure class="project-img cover" style="background-image: url('_assets/img/projects/04.jpg')">
                        <figcaption class="project-content">
                            <h3 class="no-margin mblg text-bold">Project title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi eligendi et labore officia rem! Aut delectus ea earum eos facere.</p>
                            <a href="project.html" class="capitalize mtxxlg d-inline" data-hover>learn more</a>
                        </figcaption>
                    </figure>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="project">
                    <figure class="project-img cover" style="background-image: url('_assets/img/projects/05.jpg')">
                        <figcaption class="project-content">
                            <h3 class="no-margin mblg text-bold">Project title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi eligendi et labore officia rem! Aut delectus ea earum eos facere.</p>
                            <a href="project.html" class="capitalize mtxxlg d-inline" data-hover>learn more</a>
                        </figcaption>
                    </figure>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="project">
                    <figure class="project-img cover" style="background-image: url('_assets/img/projects/06.jpg')">
                        <figcaption class="project-content">
                            <h3 class="no-margin mblg text-bold">Project title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi eligendi et labore officia rem! Aut delectus ea earum eos facere.</p>
                            <a href="project.html" class="capitalize mtxxlg d-inline" data-hover>learn more</a>
                        </figcaption>
                    </figure>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="bg-image cover"></div>
{% include 'partials/footer.html' %}

{% endblock content %}