{% extends "layout.html" %}

{% set title = 'Doctors' %}

{% set hero = 'half' %}

{% set aside = 'active' %}

{% block content %}

<section>
    <div class="container-fluid">
        <div class="sec-pad hero-img cover {{hero}}" style="background-image: url('_assets/img/cover/doctors.jpg')">
            <div class="row">
                <div class="col-sm-4 col-sm-offset-1">
                    <div class="hero-con vcenter">
                        <div class="hero-text">
                            <h2 class="no-margin text-upper d-inline">
                                caresquare
                            </h2>
                            <hr>
                            <p class="text-right">
                                for Doctors
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad about">
    <div class="container-fluid">
        <div class="row">
            <aside class="col-sm-3">
                <ul>
                    <li><a href="about.html" class="capitalize">our story</a></li>
                    <li><a href="patients.html" class="capitalize">patients</a></li>
                    <li class="{{aside}}"><a href="doctors.html" class="capitalize">doctors</a></li>
                </ul>
            </aside>
            <div class="col-sm-9">
                <div class="content">
                    <div class="block">
                        <h3>
                            Lorem ipsum dolor sit amet
                        </h3>
                        <p>
                            Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                        </p>
                    </div>
                    <div class="block">
                        <h3>
                            Sed ut perspiciatis unde omnis iste natus
                        </h3>
                        <ol>
                            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                            <li>Aenean commodo ligula eget dolor. Aenean massa. </li>
                            <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </li>
                            <li>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</li>
                        </ol>
                    </div>
                    <div class="block">
                        <h3>
                            Nemo enim ipsam voluptatem quia
                        </h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
                        </p>
                        <ol>
                            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                            <li>Aenean commodo ligula eget dolor. Aenean massa. </li>
                            <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </li>
                            <li>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</li>
                        </ol>
                    </div>
                </div>
                <form action="" class="doctor-form">
                    <h3 class="text-upper text-bold no-margin bb pbmd d-inline mbxxlg">Join The network</h3>
                    <div class="row">
                        <div class="col-sm-6">
                            <input type="text" class="mbxxlg" placeholder="Name">
                        </div>
                        <div class="col-sm-6">
                            <input type="text" class="mbxxlg" placeholder="Title">
                        </div>
                        <div class="col-sm-6">
                            <input type="text" class="mbxxlg" placeholder="Speciality">
                        </div>
                        <div class="col-sm-6">
                            <input type="email" class="mbxxlg" placeholder="Email">
                        </div>
                        <div class="col-sm-6">
                            <input type="number" class="mbxxlg" placeholder="Phone">
                        </div>
                        <div class="col-sm-6">
                            <input type="email" class="mbxxlg" placeholder="City/ Region">
                        </div>
                    </div>
                    <div class="text-center">
                        <button class="btn btn-black mtxxlg d-inline">Join</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad">
    <div class="container-fluid">
        <div class="download-app sec-pad prlg pllg">
            <div class="row">
                <div class="col-lg-5 col-md-6 col-sm-8 col-lg-offset-1">
                    <div class="download-app-co">
                        <h3 class="text-upper text-bold no-margin mbmd">download our app</h3>
                        <p class="text-semibold">
                            Get <strong class="text-bold">Caresquare </strong>app for FREE
                        </p>
                    </div>
                </div>
                <div class="col-lg-5 col-md-6 col-sm-4">
                    <div class="download text-right">
                        <a href="#" class="mrmd d-inline">
                            <img src="_assets/img/google-play.png" alt="">
                        </a>
                        <a href="#" class="d-inline">
                            <img src="_assets/img/app-store.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock content %}