team.html

{% extends 'base.html' %}

{% block active %}
<a href="index.html" class="nav-item nav-link">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="domain.html" class="nav-item nav-link">Domain</a>
<a href="hosting.html" class="nav-item nav-link">Hosting</a>
<div class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
        <div class="dropdown-menu m-0">
            <a href="team.html" class="dropdown-item active">Our Team</a>
                <a href="testimonial.html" class="dropdown-item">Testimonial</a>
                    <a href="comparison.html" class="dropdown-item">Comparison</a>
        </div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
{% endblock active %}

{% block body %}

<!-- Full Screen Search Start -->
<div class="modal fade" id="searchModal" tabindex="-1">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content" style="background: rgba(29, 40, 51, 0.8);">
            <div class="modal-header border-0">
                <button type="button" class="btn bg-white btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body d-flex align-items-center justify-content-center">
                <div class="input-group" style="max-width: 600px;">
                    <input type="text" class="form-control bg-transparent border-light p-3" placeholder="Type search keyword">
                    <button class="btn btn-light px-4"><i class="bi bi-search"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Full Screen Search End -->
<!-- Domain Search Start -->
<div class="container-xxl domain mb-5" style="margin-top: 90px;">
    <div class="container px-lg-5">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="section-title position-relative text-center mx-auto mb-4 pb-4 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
                    <h1 class="mb-3">Search Your Domain</h1>
                    <p class="mb-1">
                        Search across 30+ domains to find your mentor who aligns with your interest.
                    </p>
                </div>
                <div class="position-relative w-100 my-3 wow fadeInUp" data-wow-delay="0.3s">
                    <form action="{% url 'home:profile_search' %}" method="GET">
                        <input class="form-control bg-transparent w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your domain name" id="query" name="query">
                        <button type="submit" class="btn btn-primary py-2 px-3 position-absolute top-0 end-0 mt-2 me-2">Search</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Domain Search End -->

<!-- Team Start -->
<div class="container-xxl py-5">
    <div class="container px-lg-5">
        <div class="section-title position-relative text-center mx-auto mb-5 pb-4 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
            <h1 class="mb-3">Choose your own mentor</h1>
            <p class="mb-1">Choose your own mentor according to your interest and help.</p>
        </div>
        <div class="row g-4">
        {% if query_profiles %}
        {% for mentor in query_profiles %}
            <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="team-item border-top border-5 border-primary rounded shadow overflow-hidden">
                    <div class="text-center p-4">
                        <img class="img-fluid rounded-circle mb-4" src="{{ mentor.photo.url }}" alt="">
                        <h5 class="fw-bold mb-1">{{mentor.username}}</h5>
                        <small>{{mentor.role}}</small>
                    </div>
                    <div class="d-flex justify-content-center bg-primary p-3">
                        <!-- <a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-facebook-f"></i></a> -->
                        <button>Know More</button>
                    </div>
                </div>
            </div>
        {% endfor %}
        {% else %}
            <br> <div>No Results Found. Search again!</div><br><br><br><br>
        {% endif %}
        {% for mentor in mentor_profiles %}
            <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="team-item border-top border-5 border-primary rounded shadow overflow-hidden">
                    <div class="text-center p-4">
                        <img class="img-fluid rounded-circle mb-4" src="{{ mentor.photo.url }}" alt="">
                        <h5 class="fw-bold mb-1">{{mentor.username}}</h5>
                        <small>{{mentor.role}}</small>
                    </div>
                    <div class="d-flex justify-content-center bg-primary p-3">
                        <!-- <a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-facebook-f"></i></a> -->
                        <button>Know More</button>
                    </div>
                </div>
            </div>
        {% endfor %}
        </div>
    </div>
</div>
<!-- Team End -->

{% endblock body %}