{% extends "./base.html" %}

{% block title %} Inicio {% endblock %}


{% block body %}
{% load static %}
<main id="main">
    <nav class="navbar" style="background:#003e4f">
        <div class="container-fluid">

        </div>
    </nav>
    <section class="portfolio section-bg">
        <!-- Carrusel de imagenes -->
        <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active" data-bs-interval="5000">
                    <img src="{% static 'img/OPS.jpg' %}" class="d-block w-100" alt="Imagen 1" width="640" height="600">
                </div>

                <div class="carousel-item" data-bs-interval="5000">
                    <img src="{% static 'img/virus.jpg' %}" class="d-block w-100" alt="imagen 2" width="640"
                        height="600">
                </div>

                <div class="carousel-item" data-bs-interval="5000">
                    <img src="{% static 'img/uso.jpg' %}" class="d-block w-100" alt="imagen 3" width="640" height="600">
                </div>

            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </section><!-- End carrusel Section -->
    <div class="py-5 text-center">
        <!-- <a href="{% url 'ventana' %}" class="cta boto">
            <span class="py-3 text-dark fs-5">Iniciar Detección</span>
            <svg width="7px" height="10px" viewBox="0 0 13 10">
                <path d="M1,5 L11,5"></path>
                <polyline points="8 1 12 5 8 9"></polyline>
            </svg>
        </a>  -->

        <div class="flex">
            <a href="{% url 'ventana' %}" class="bttn rounded shadow">Iniciar Detección</a>
          </div>
    </div>
    
    <section id="services" class="services">
        <!-- Intro -->
        <section class="w-75 mx-auto text-center pt-0" id="intro">
            <h1 class="text-primary p-1 fs-2 border-top border-4">Convierta el uso de la mascarilla en una parte normal
                de su interacción con otras personas.</h1>
            <p><span></span></p>
        </section>
 
        <section class="mx-auto text-center pt-0" style="color: #333;">
            <h4 class="text-center"><b>Indicaciones básicas sobre la manera de ponerse la mascarilla:</b></h4>
        </section>

        <!-- Categorias -->
        <section id="services" class="services">
            <!-- ... Tus otras secciones ... -->
        
            <!-- Categorías - Tarjetas -->
            <section class="container-fluid mx-auto">
                <div class="row mx-auto servicio-fila">
                    <!-- Tarjeta 1 -->
                    <div class="col-lg-4 col-md-6 col-sm-12 my-3 card">
                        <img src="{% static 'img/lavarse.png' %}" alt="Escolares" width="180" height="160">
                        <div class="card-body">
                            <h3 class="card-title text-center"><b>Lavarse</b></h3>
                            <p class="card-text">Lávese las manos antes de ponerse la mascarilla, y también antes y después de quitársela, y cada vez que la toque.</p>
                        </div>
                    </div>
        
                    <!-- Tarjeta 2 -->
                    <div class="col-lg-4 col-md-6 col-sm-12 my-3 card">
                        <img src="{% static 'img/usoC.png' %}" alt="Uso correcto de la mascarilla" width="180" height="160">
                        <div class="card-body">
                            <h3 class="card-title text-center"><b>Uso Correcto</b></h3>
                            <p class="card-text">Verifique que su mascarilla cubra completamente nariz, boca y barbilla para asegurar una protección efectiva.</p>
                        </div>
                    </div>
                    
        
                    <!-- Tarjeta 3 -->
                    <div class="col-lg-4 col-md-6 col-sm-12 my-3 card">
                        <img src="{% static 'img/valvula.png' %}" alt="Advertencia sobre mascarillas con válvula" width="180" height="160">
                        <div class="card-body">
                            <h3 class="card-title text-center"><b>Precaución con Válvulas</b></h3>
                            <p class="card-text">Evite el uso de mascarillas con válvulas ya que no ofrecen la protección adecuada para prevenir la propagación de virus.</p>
                        </div>
                    </div>                    
                </div>
            </section>
        
            <!-- ... Tu sección de contacto y pie de página ... -->
        </section>
        <!-- backgrond pie de la pagina -->

        <section id="seccion-contactos">
            <div id="bg-contactos">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                    <path fill="#000b76" fill-opacity="1"
                        d="M0,256L48,234.7C96,213,192,171,288,170.7C384,171,480,213,576,208C672,203,768,149,864,149.3C960,149,1056,203,1152,218.7C1248,235,1344,213,1392,202.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
                    </path>
                </svg>
            </div>
        </section>
    </section>

</main>






{% endblock %}