{% extends 'layouts/base.html' %}
{% load static %}


{% block content %}
    <main>
        {% include 'includes/pre-loader.html' %}

        <!-- Hero -->
        <div class="section-header pb-6 bg-primary text-white">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 col-md-8 text-center">
                        <h1 class="display-3 mb-4">Dropdowns</h1>
                        <p class="lead mb-5">Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included JavaScript plugin.</p>
                        <div class="alert bg-secondary" role="alert">
                            <span class="fas fa-info-circle"></span>
                            <a class="fw-bold text-white text-underline mx-1" href="https://themesberg.com/docs/pixel-bootstrap/components/buttons/" target="_blank">See our Documentation</a> for a detailed technical explanation.
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- End of Hero -->
        {% include 'includes/components/_dropdowns.html' %}
    </main>
{% endblock content %}