{% extends 'stela_control/content/index.html' %}
{% load static %}
{% load hosts %}
{% load i18n %}
{% load tz %}
{% load crispy_forms_tags %}
{% load humanize %}
{% load stelatags %}
{% block sidebar %}
{% endblock %}
{% block bsCall %}
{% endblock  %}
{% block title %}
<h1 class="oxanium mx-4 text-dark pt-4 mb-0">{% trans "Staff" %}&nbsp; <i class="fa-solid fa-users"></i></h1>
{% endblock  %}
{% block content_section %}
        <section id="content">
            <div class="content-wrap d-flex align-items-center">
                <div class="container">
    
                    <div class="row justify-content-center mb-2">
                        <div class="col-xl-6 col-lg-8 text-center">
                            <h3 class="h1 fw-bold mb-3">Team Lists</h3>
                        </div>
                    </div>
                    <div class="vh-50">
                        <div class="row justify-content-center gutter-50 col-mb-30">
    
                            <div class="col-lg-4">
                                <div class="d-flex align-items-center p-3 border border-default bg-light rounded-3">
                                    <img src="demos/articles/images/authors/2.jpg" alt="Author" class="rounded-circle me-3" width="64" height="64">
                                    <div>
                                        <h4 class="mb-0"><a class="text-dark" href="#">Gordon Norman</a></h4>
                                        <h5 class="text-muted mb-0 fw-normal">CEO</h5>
                                    </div>
                                </div>
                            </div>
        
                            <div class="col-lg-4">
                                <div class="d-flex align-items-center p-3 border border-default bg-light rounded-3">
                                    <img src="demos/articles/images/authors/1.jpg" alt="Author" class="rounded-circle me-3" width="64" height="64">
                                    <div>
                                        <h4 class="mb-0"><a class="text-dark" href="#">Miles Tone</a></h4>
                                        <h5 class="text-muted mb-0 fw-normal">CTO</h5>
                                    </div>
                                </div>
                            </div>
        
                            <div class="col-lg-4">
                                <div class="d-flex align-items-center p-3 border border-default bg-light rounded-3">
                                    <img src="demos/articles/images/authors/3.jpg" alt="Author" class="rounded-circle me-3" width="64" height="64">
                                    <div>
                                        <h4 class="mb-0"><a class="text-dark" href="#">Max Conversion</a></h4>
                                        <h5 class="text-muted mb-0 fw-normal">CFO</h5>
                                    </div>
                                </div>
                            </div>
        
                            <div class="col-lg-4">
                                <div class="d-flex align-items-center p-3 border border-default bg-light rounded-3">
                                    <img src="images/blocks/preview/team/1.jpg" alt="Author" class="rounded-circle me-3" width="64" height="64">
                                    <div>
                                        <h4 class="mb-0"><a class="text-dark" href="#">Jim Séchen</a></h4>
                                        <h5 class="text-muted mb-0 fw-normal">UX Designer</h5>
                                    </div>
                                </div>
                            </div>
        
                            <div class="col-lg-4">
                                <div class="d-flex align-items-center p-3 border border-default bg-light rounded-3">
                                    <img src="images/blocks/preview/team/2.jpg" alt="Author" class="rounded-circle me-3" width="64" height="64">
                                    <div>
                                        <h4 class="mb-0"><a class="text-dark" href="#">Richard Tea</a></h4>
                                        <h5 class="text-muted mb-0 fw-normal">UI Designer</h5>
                                    </div>
                                </div>
                            </div>
        
                            <div class="col-lg-4">
                                <div class="d-flex align-items-center p-3 border border-default bg-light rounded-3">
                                    <img src="images/blocks/preview/team/3.jpg" alt="Author" class="rounded-circle me-3" width="64" height="64">
                                    <div>
                                        <h4 class="mb-0"><a class="text-dark" href="#">Hanson Deck</a></h4>
                                        <h5 class="text-muted mb-0 fw-normal">Support</h5>
                                    </div>
                                </div>
                            </div>
        
                        </div>
        
                        <div class="line"></div>
        
                        <div class="row justify-content-center gutter-50 col-mb-30">
        
                            <div class="col-lg-4">
                                <div class="d-flex align-items-center border border-default rounded">
                                    <img width="100" height="100" src="demos/articles/images/authors/2.jpg" alt="Author" class="rounded-start me-3 h-100">
                                    <div class="ps-3">
                                        <h4 class="mb-0"><a class="text-dark" href="#">Gordon Norman</a></h4>
                                        <h5 class="text-muted mb-0 fw-normal">CEO</h5>
                                    </div>
                                </div>
                            </div>
        
                            <div class="col-lg-4">
                                <div class="d-flex align-items-center border border-default rounded-3">
                                    <img width="100" height="100" src="demos/articles/images/authors/1.jpg" alt="Author" class="rounded-start me-3 h-100">
                                    <div class="ps-3">
                                        <h4 class="mb-0"><a class="text-dark" href="#">Miles Tone</a></h4>
                                        <h5 class="text-muted mb-0 fw-normal">CTO</h5>
                                    </div>
                                </div>
                            </div>
        
                            <div class="col-lg-4">
                                <div class="d-flex align-items-center border border-default rounded-3">
                                    <img width="100" height="100" src="demos/articles/images/authors/3.jpg" alt="Author" class="rounded-start me-3 h-100">
                                    <div class="ps-3">
                                        <h4 class="mb-0"><a class="text-dark" href="#">Max Conversion</a></h4>
                                        <h5 class="text-muted mb-0 fw-normal">CFO</h5>
                                    </div>
                                </div>
                            </div>
        
                            <div class="col-lg-4">
                                <div class="d-flex align-items-center border border-default rounded-3">
                                    <img width="100" height="100" src="images/blocks/preview/team/1.jpg" alt="Author" class="rounded-start me-3 h-100">
                                    <div class="ps-3">
                                        <h4 class="mb-0"><a class="text-dark" href="#">Jim Séchen</a></h4>
                                        <h5 class="text-muted mb-0 fw-normal">UX Designer</h5>
                                    </div>
                                </div>
                            </div>
        
                            <div class="col-lg-4">
                                <div class="d-flex align-items-center border border-default rounded-3">
                                    <img width="100" height="100" src="images/blocks/preview/team/2.jpg" alt="Author" class="rounded-start me-3 h-100">
                                    <div class="ps-3">
                                        <h4 class="mb-0"><a class="text-dark" href="#">Richard  Tea</a></h4>
                                        <h5 class="text-muted mb-0 fw-normal">UI Designer</h5>
                                    </div>
                                </div>
                            </div>
        
                            <div class="col-lg-4">
                                <div class="d-flex align-items-center border border-default rounded-3">
                                    <img width="100" height="100" src="images/blocks/preview/team/3.jpg" alt="Author" class="rounded-start me-3 h-100">
                                    <div class="ps-3">
                                        <h4 class="mb-0"><a class="text-dark" href="#">Hanson Deck</a></h4>
                                        <h5 class="text-muted mb-0 fw-normal">Support</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
{% endblock  %}