{% load static %}

<!--End of Title section-->
<div class="section section-md">
    <div class="container">
        <div class="row mb-5">
            <div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
                <div class="card shadow">
                    <img src="{% static 'assets/img/blog/image-1.jpg' %}" class="card-img-top rounded-top"
                        alt="Themesberg office">
                    <div class="card-body">
                        <span class="h6 icon-tertiary small"><span class="fas fa-medal me-2"></span>Awards</span>
                        <h3 class="h5 card-title mt-3">We partnered up with Google</h3>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                        <a href="#" class="btn btn-primary btn-sm">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4 mb-5 mb-md-7 mb-lg-0">
                <div class="card border-0 overflow-hidden">
                    <div class="position-relative">
                        <img src="{% static 'assets/img/team/profile-picture-1.jpg' %}" class="card-img-top"
                            alt="Neil Portrait">
                    </div>
                    <div
                        class="card-body position-relative mt-n6 mx-2 bg-white border border-gray-300 text-center rounded">
                        <h3 class="h5 card-title">Neil D. Sims</h3>
                        <span class="text-gray"><span class="fas fa-map-marker-alt me-2"></span>New York,
                            USA</span>
                        <p class="mt-3">Neil drives the technical strategy of the platform and brand.</p>
                        <div class="btn-group">
                            <button class="btn btn-secondary btn-icon">
                                <span class="me-1"><span class="far fa-user"></span></span>
                                Follow
                            </button>
                            <button class="btn btn-primary" aria-label="mesage button" title="message button">
                                <span aria-hidden="true" class="far fa-envelope"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
                <div class="card shadow text-center">
                    <!-- Header -->
                    <div class="card-header bg-white p-3">
                        <h3 class="text-primary mb-4">Basic</h3>
                        <span class="d-block">
                            <span class="display-1 text-dark fw-bold">
                                <span class="align-top font-medium">$</span>19
                            </span>
                            <span class="d-block text-gray font-small">/ month</span>
                        </span>
                    </div>
                    <!-- End Header -->
                    <!-- Content -->
                    <div class="card-body">
                        <ul class="list-unstyled mb-4">
                            <li class="list-item pb-3"><strong>1</strong> free domain</li>
                            <li class="list-item pb-3">Storage space: <strong>5GB</strong></li>
                            <li class="list-item pb-3"><strong>100k</strong> monthly visitors</li>
                            <li class="list-item pb-3">One-click staging site</li>
                            <li class="list-item pb-3">Search engine wizard </li>
                            <li class="list-item pb-3">Community support</li>
                        </ul>
                        <div class="d-grid"><a href="#" class="btn btn-primary animate-up-1">Purchase now</a></div>
                    </div>
                    <!-- End Content -->
                </div>
            </div>
            <div class="col-12 mt-5">
                <div class="card shadow mb-6">
                    <div class="card-body px-5 py-5 text-center text-md-left">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h2 class="mb-3">Get in touch</h2>
                                <p class="mb-0">
                                    If you need any help with our products or services, choose one of the following ways
                                    to contact us.
                                </p>
                            </div>
                            <div class="col-12 col-md-6 mt-4 mt-md-0 text-md-right">
                                <a href="#" class="btn btn-primary">
                                    <span class="me-1">
                                        <span class="fas fa-headphones"></span>
                                    </span>
                                    Contact Us
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>