{% extends 'layout-vertical.html' %}

{% load static i18n %}

{% block title %}Rizz{% endblock %}

{% block page_content %}

<div class="row justify-content-center">
    <div class="col-md-6 col-lg-6">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h4 class="card-title">Avatars Circle</h4>
                    </div><!--end col-->
                </div> <!--end row-->
            </div><!--end card-header-->
            <div class="card-body pt-0">
                <div class="d-flex align-items-center">
                    <a class="me-2 d-inline-block" href="#">
                        <img src="{% static '/images/users/avatar-9.jpg' %}" alt="user"
                            class="thumb-xxl rounded-circle">
                    </a>
                    <a class="me-2 d-inline-block" href="#">
                        <img src="{% static '/images/users/avatar-9.jpg' %}" alt="user" class="thumb-xl rounded-circle">
                    </a>
                    <a class="me-2 d-inline-block" href="#">
                        <img src="{% static '/images/users/avatar-9.jpg' %}" alt="user" class="thumb-lg rounded-circle">
                    </a>
                    <a class="me-2 d-inline-block" href="#">
                        <img src="{% static '/images/users/avatar-9.jpg' %}" alt="user" class="thumb-md rounded-circle">
                    </a>
                    <a class="me-2 d-inline-block" href="#">
                        <img src="{% static '/images/users/avatar-9.jpg' %}" alt="user" class="thumb-sm rounded-circle">
                    </a>
                    <a class="me-2 d-inline-block" href="#">
                        <img src="{% static '/images/users/avatar-9.jpg' %}" alt="user" class="thumb-xs rounded-circle">
                    </a>
                </div>
            </div><!--end card-body-->
        </div><!--end card-->
    </div> <!--end col-->
    <div class="col-md-6 col-lg-6">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h4 class="card-title">Avatars Square</h4>
                    </div><!--end col-->
                </div> <!--end row-->
            </div><!--end card-header-->
            <div class="card-body pt-0">
                <div class="d-flex align-items-center">
                    <a class="me-2 d-inline-block" href="#">
                        <img src="{% static '/images/users/avatar-9.jpg' %}" alt="user" class="thumb-xxl rounded">
                    </a>
                    <a class="me-2 d-inline-block" href="#">
                        <img src="{% static '/images/users/avatar-9.jpg' %}" alt="user" class="thumb-xl rounded">
                    </a>
                    <a class="me-2 d-inline-block" href="#">
                        <img src="{% static '/images/users/avatar-9.jpg' %}" alt="user" class="thumb-lg rounded">
                    </a>
                    <a class="me-2 d-inline-block" href="#">
                        <img src="{% static '/images/users/avatar-9.jpg' %}" alt="user" class="thumb-md rounded">
                    </a>
                    <a class="me-2 d-inline-block" href="#">
                        <img src="{% static '/images/users/avatar-9.jpg' %}" alt="user" class="thumb-sm rounded">
                    </a>
                    <a class="me-2 d-inline-block" href="#">
                        <img src="{% static '/images/users/avatar-9.jpg' %}" alt="user" class="thumb-xs rounded">
                    </a>
                </div>
            </div><!--end card-body-->
        </div><!--end card-->
    </div> <!--end col-->
</div><!--end row-->

<div class="row justify-content-center">
    <div class="col-md-6 col-lg-6">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h4 class="card-title">Text Avatars Circle</h4>
                    </div><!--end col-->
                </div> <!--end row-->
            </div><!--end card-header-->
            <div class="card-body pt-0">
                <div class="d-flex align-items-center">
                    <span
                        class="thumb-xxl justify-content-center d-flex align-items-center bg-success-subtle text-success rounded-circle me-2">MT</span>
                    <span
                        class="thumb-xl justify-content-center d-flex align-items-center bg-pink-subtle text-pink rounded-circle me-2">MT</span>
                    <span
                        class="thumb-lg justify-content-center d-flex align-items-center bg-purple-subtle text-purple rounded-circle me-2">MT</span>
                    <span
                        class="thumb-md justify-content-center d-flex align-items-center bg-warning-subtle text-warning rounded-circle me-2">MT</span>
                    <span
                        class="thumb-sm justify-content-center d-flex align-items-center bg-info-subtle text-info rounded-circle me-2">MT</span>
                    <span
                        class="thumb-xs justify-content-center d-flex align-items-center bg-dark-subtle text-dark rounded-circle me-2">MT</span>
                </div><!--end /div-->
            </div><!--end card-body-->
        </div><!--end card-->
    </div> <!--end col-->
    <div class="col-md-6 col-lg-6">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h4 class="card-title">Text Avatars Square</h4>
                    </div><!--end col-->
                </div> <!--end row-->
            </div><!--end card-header-->
            <div class="card-body pt-0">
                <div class="d-flex align-items-center">
                    <span
                        class="thumb-xxl justify-content-center d-flex align-items-center bg-success-subtle text-success rounded me-2">MT</span>
                    <span
                        class="thumb-xl justify-content-center d-flex align-items-center bg-pink-subtle text-pink rounded me-2">MT</span>
                    <span
                        class="thumb-lg justify-content-center d-flex align-items-center bg-purple-subtle text-purple rounded me-2">MT</span>
                    <span
                        class="thumb-md justify-content-center d-flex align-items-center bg-warning-subtle text-warning rounded me-2">MT</span>
                    <span
                        class="thumb-sm justify-content-center d-flex align-items-center bg-info-subtle text-info rounded me-2">MT</span>
                    <span
                        class="thumb-xs justify-content-center d-flex align-items-center bg-dark-subtle text-dark rounded me-2">MT</span>
                </div><!--end /div-->
            </div><!--end card-body-->
        </div><!--end card-->
    </div> <!--end col-->
</div><!--end row-->

<div class="row justify-content-center">
    <div class="col-md-6 col-lg-6">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h4 class="card-title">Icon Avatars Circle</h4>
                    </div><!--end col-->
                </div> <!--end row-->
            </div><!--end card-header-->
            <div class="card-body pt-0">
                <div class="d-flex align-items-center">
                    <span
                        class="thumb-xxl justify-content-center d-flex align-items-center bg-success text-white rounded-circle me-2">
                        <i class="iconoir-profile-circle"></i>
                    </span>
                    <span
                        class="thumb-xl justify-content-center d-flex align-items-center bg-pink text-white rounded-circle me-2">
                        <i class="iconoir-profile-circle"></i>
                    </span>
                    <span
                        class="thumb-lg justify-content-center d-flex align-items-center bg-purple text-white rounded-circle me-2">
                        <i class="iconoir-profile-circle"></i>
                    </span>
                    <span
                        class="thumb-md justify-content-center d-flex align-items-center bg-warning text-white rounded-circle me-2">
                        <i class="iconoir-profile-circle"></i>
                    </span>
                    <span
                        class="thumb-sm justify-content-center d-flex align-items-center bg-info text-white rounded-circle me-2">
                        <i class="iconoir-profile-circle"></i>
                    </span>
                    <span
                        class="thumb-xs justify-content-center d-flex align-items-center bg-dark text-white rounded-circle me-2">
                        <i class="iconoir-profile-circle"></i>
                    </span>
                </div><!--end /div-->
            </div><!--end card-body-->
        </div><!--end card-->
    </div> <!--end col-->
    <div class="col-md-6 col-lg-6">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h4 class="card-title">Icon Avatars Square</h4>
                    </div><!--end col-->
                </div> <!--end row-->
            </div><!--end card-header-->
            <div class="card-body pt-0">
                <div class="d-flex align-items-center">
                    <span
                        class="thumb-xxl justify-content-center d-flex align-items-center bg-success text-white rounded me-2">
                        <i class="iconoir-people-tag"></i>
                    </span>
                    <span
                        class="thumb-xl justify-content-center d-flex align-items-center bg-pink text-white rounded me-2">
                        <i class="iconoir-people-tag"></i>
                    </span>
                    <span
                        class="thumb-lg justify-content-center d-flex align-items-center bg-purple text-white rounded me-2">
                        <i class="iconoir-people-tag"></i>
                    </span>
                    <span
                        class="thumb-md justify-content-center d-flex align-items-center bg-warning text-white rounded me-2">
                        <i class="iconoir-people-tag"></i>
                    </span>
                    <span
                        class="thumb-sm justify-content-center d-flex align-items-center bg-info text-white rounded me-2">
                        <i class="iconoir-people-tag"></i>
                    </span>
                    <span
                        class="thumb-xs justify-content-center d-flex align-items-center bg-dark text-white rounded me-2">
                        <i class="iconoir-people-tag"></i>
                    </span>
                </div><!--end /div-->
            </div><!--end card-body-->
        </div><!--end card-->
    </div> <!--end col-->
</div><!--end row-->

{% endblock page_content %}