{% set header_title = 'Info Boxes / Alerts' %}
{% set header_size = 'sm' %}
{% extends 'layouts/layout-1.html' %}

{% block content %}
    <div class="nk-gap-4"></div>

    <div class="container">

        <!-- START: Info Box 1 -->
        <div class="nk-info-box bg-main-1">
            <div class="nk-info-box-icon">
                <i class="ion-information-circled"></i>
            </div>
            Thing place. In lesser waters creepeth his place us give multiply fruitful under. Make. Also were, you're make make likeness.
        </div>
        <!-- END: Info Box 1 -->

        <!-- START: Info Box 2 -->
        <div class="nk-info-box bg-danger">
            <div class="nk-info-box-icon">
                <i class="ion-alert-circled"></i>
            </div>
            Hath days lesser meat signs very. Fruit second can't moved seas meat two. Grass face isn't forth firmament dry. Don't.
        </div>
        <!-- END: Info Box 2 -->

        <!-- START: Info Box 3 -->
        <div class="row">
            <div class="col-md-6">
                <div class="nk-info-box bg-info">
                    <div class="nk-info-box-icon">
                        <i class="ion-help-buoy"></i>
                    </div>
                    <div class="nk-info-box-close nk-info-box-close-btn">
                        <i class="ion-android-close"></i>
                    </div>
                    Hath days lesser meat signs very. Fruit second can't moved seas meat two. Grass face isn't forth firmament dry. Don't.
                    <div class="nk-gap"></div>
                    <a href="#" class="nk-btn nk-btn-lg link-effect-4">
                        <span>Help Me</span>
                        <span class="icon"><i class="ion-help-circled"></i></span>
                    </a>
                </div>
            </div>
            <div class="col-md-6">
                <div class="nk-info-box bg-main-3">
                    <div class="nk-info-box-icon">
                        <i class="ion-paintbrush"></i>
                    </div>
                    <div class="nk-info-box-close nk-info-box-close-btn">
                        <i class="ion-android-close"></i>
                    </div>
                    Grass his itself. Subdue lesser have without female deep set tree together fourth under brought don't seasons seed saw third.
                    <div class="nk-gap"></div>
                    <a href="#" class="nk-info-box-close nk-btn nk-btn-lg link-effect-4 nk-btn-circle">Got It</a>
                </div>
            </div>
        </div>
        <!-- END: Info Box 3 -->

        <!-- START: Info Box 4 -->
        <div class="nk-info-box nk-info-box-noicon">
            <div class="nk-info-box-close nk-info-box-close-btn">
                <i class="ion-android-close"></i>
            </div>
            No Icon :'(
        </div>
        <!-- END: Info Box 4 -->
    </div>

    <div class="nk-gap-4"></div>
    <div class="nk-gap-4"></div>
{% endblock %}