{% extends "./layouts/base.html" %}
{% load static %}
{% block title %}Nuestro Equipo{% endblock %}
{% block extra_css %}
    <link rel="stylesheet" href='{% static 'css/home.css'%}'">
    <link rel="stylesheet" href='{% static 'css/about.css'%}'">
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/7.2.3/css/flag-icons.min.css'">
{% endblock %}

{% block nav %}
    {% include "./components/static_header.html" %}
{% endblock %}

{% block  content %}
<div id="main-container" class="container" style="padding: 120px 0 20px">
    <div class="main-content">
    <h1>NUESTRO EQUIPO</h1>
        <div class="team-container">

            <div class="team-member">
                <img src="{% static "images/members/manfort.webp" %}" alt="Manfort">
                <h3>MANFORT</h3>
                <p>Fundador, Administrador, Control de Calidad y Diseñador</p>
                <p><span class="fi fi-mx"></span> México</p>
                <div class="social-icons">
                    <a href="https://www.youtube.com/@ElmanfortLogic"><i class="bi bi-youtube"></i></a>
                    <a href="https://x.com/manfort157249"><i class="bi bi-twitter-x"></i></a>
                    <a href="#"><i class="bi bi-discord"></i></a>
                </div>
            </div>

            <div class="team-member">
                <img src="{% static "images/members/rozank.webp" %}" alt="Rozank">
                <h3>ROZANK</h3>
                <p>Administrador, Editor, Diseñador y Escritor</p>
                <p><span class="fi fi-ve"></span> Venezuela</p>
                <div class="social-icons">
                    <a href="https://www.youtube.com/@rozanku"><i class="bi bi-youtube"></i></a>
                    <a href="https://x.com/RozankART"><i class="bi bi-twitter-x"></i></a>
                    <a href="https://ko-fi.com/rozankvod"><svg fill="#000000" width="25px" height="25px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/></svg></a>
                </div>
            </div>

            <div class="team-member">
                <img src="{% static "images/members/morgot.webp" %}" alt="Morgot">
                <h3>MORGOT</h3>
                <p>Administrador, Calidad, Tesorero y Escritor</p>
                <p><span class="fi fi-es"></span> España</p>
                <div class="social-icons">
                    <a href="https://www.youtube.com/@Morgot9"><i class="bi bi-youtube"></i></a>
                    <a href="https://x.com/Morgot08747825"><i class="bi bi-twitter-x"></i></a>
                </div>
            </div>

            <div class="team-member">
                <img src="{% static "images/members/edmateo.webp" %}" alt="Edmateo">
                <h3>EDMATEO</h3>
                <p>Programador Full Stack</p>
                <p><span class="fi fi-co"></span> Colombia</p>
                <div class="social-icons">
                    <a href="https://edmateo.site"><i class="bi bi-link-45deg"></i></a>
                    <a href="mailto:mineestasedmateo@proton.me"><i class="bi bi-envelope"></i></a>
                </div>
            </div>
            
            <div class="team-member">
                <img src="{% static "images/members/Etzzio .jpg" %}" alt="Morgot">
                <h3>MORGOT</h3>
                <p>Administrador, Calidad, Tesorero y Escritor</p>
                <p><span class="fi fi-es"></span> España</p>
                <div class="social-icons">
                    <a href="https://www.youtube.com/@Morgot9"><i class="bi bi-youtube"></i></a>
                    <a href="https://x.com/Morgot08747825"><i class="bi bi-twitter-x"></i></a>
                </div>
            </div>
            
        </div>
    </div>
</div>
{% endblock %}