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

{% load static i18n %}

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

{% block page_content %}

<div class="row justify-content-center">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h4 class="card-title mb-1">Line Awesome Icons</h4>
                        <p class="text-muted mb-0">Use <code
                                class="fs-14">&lt;i class="las la-braille"&gt;&lt;/i&gt;</code></p>
                    </div><!--end col-->
                </div> <!--end row-->
            </div><!--end card-header-->
            <div class="card-body pt-0">
                <div class="row icon-demo-content">
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="lab la-accessible-icon"></i> lab la-accessible-icon
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-blind"></i> las la-blind
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-low-vision"></i> las la-low-vision
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-tty"></i> las la-tty
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-braille"></i> las la-braille
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-phone-volume"></i> las la-phone-volume
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-universal-access"></i> las la-universal-access
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="lar la-question-circle"></i> lar la-question-circle
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="lar la-bell"></i> lar la-bell
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-exclamation-circle"></i> las la-exclamation-circle
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-bell-slash"></i> las la-bell-slash
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-fish"></i> las la-fish
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-cat"></i> las la-cat
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-angle-down"></i> las la-angle-down
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-angle-up"></i> las la-angle-up
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-angle-left"></i> las la-angle-left
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-angle-right"></i> las la-angle-right
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-arrow-circle-down"></i> las la-arrow-circle-down
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-arrow-circle-up"></i> las la-arrow-circle-up
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-arrow-circle-left"></i> las la-arrow-circle-left
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="las la-arrow-circle-right"></i> las la-arrow-circle-right
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="lab la-facebook"></i> lab la-facebook
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="lab la-twitter"></i> lab la-twitter
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="lab la-whatsapp"></i> lab la-whatsapp
                    </div>
                </div><!--end row-->
                <div class="p-3 border border-primary bg-primary-subtle rounded">
                    <div class="row">
                        <div class="col">
                            <h5 class="text-primary fs-18 mb-1 fw-semibold">Line Awesome Icons</h5>
                            <p class="text-muted mb-0 fs-14">Swap Font Awesome for modern line icons in one line of
                                code.</p>
                            <p class="text-muted mb-0 fs-14">Line Awesome is a free alternative for Font Awesome 5.11.2.
                                It consists of ~1380 flat icons that offer complete coverage of the main Font Awesome
                                icon set.</p>
                        </div> <!--end col-->
                        <div class="col-auto align-self-center">
                            <a href="https://icons8.com/line-awesome" target="_blank" type="button"
                                class="btn btn-primary">More Icons</a>
                        </div> <!--end col-->
                    </div><!--end row-->
                </div><!--end div-->
            </div><!--end card-body-->
        </div><!--end card-->
    </div> <!--end col-->
</div><!--end row-->

{% endblock page_content %}