index.html

<!DOCTYPE html>
<html lang="pt-BR" xmlns="http://www.w3.org/1999/html" class="scroll-smooth">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <!-- Primary Meta Tags -->
    <title>PyNE 2024 | Python Nordeste 2024</title>
    <meta name="description" content="PyNE24 | Python Nordeste 2024 | Natal - RN, Brasil | Em Agosto">
    
    <!-- Open Graph / Facebook Meta Tags -->
    <meta property="og:title" content="PyNE24 | Python Nordeste 2024 | Natal - RN, Brasil | Em Agosto">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://2024.pythonnordeste.org/">
    <meta property="og:description" content="PyNE24 | Python Nordeste 2024 | Natal - RN, Brasil | Em Agosto">
    <meta property="og:image" content="https://2024.pythonnordeste.org/assets/images/pyne24_logo.png">
    <!-- Twitter Meta Tags -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://2024.pythonnordeste.org/">
    <meta property="twitter:title" content="PyNE24 | Python Nordeste 2024 | Natal - RN, Brasil | Em Agosto">
    <meta property="twitter:description" content="PyNE24 | Python Nordeste 2024 | Natal - RN, Brasil | Em Agosto">
    <meta property="twitter:image" content="https://2024.pythonnordeste.org/assets/images/pyne24_logo.png">

    <script>console.log("\nPython Nordeste 2024\n\nPessoas > Tecnologia\n✊🏿✊🏾✊🏽✊✊🏼✊🏻 🏳️‍🌈🏳️‍⚧️♿\n ")</script>

    <link rel="stylesheet" href="assets/css/uikit.min.css" />
    <link rel="stylesheet" href="assets/css/custom.css" />
    
    <script src="assets/js/uikit.min.js"></script>
    <script src="assets/js/uikit-icons.min.js"></script>

    <script async src="https://www.googletagmanager.com/gtag/js?id=G-2MBT06C1Q2"></script>
    <script src="assets/js/volunteers.js"></script>
    <script>
        document.addEventListener("readystatechange", () => {
            if (document.readyState === "complete") {

                const modal = document.getElementById("modal-group-1");
                const modal_exibido = localStorage.getItem("modal-exibido");
    
                if (!modal_exibido) {
                    UIkit.modal(modal).show();
                    localStorage.setItem("modal-exibido", true);
                }
            }
        });
    </script>
</head>

<body>
    <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
        <div class="uk-navbar-center">
            <ul class="uk-navbar-nav uk-visible@s">
                <li><a class="uk-navbar-item" href="/">Inicio</a></li>
                <li><a class="uk-navbar-item" href="#sobre">Sobre</a></li>
                <li><a class="uk-navbar-item" href="#voluntarios">Voluntários</a></li>
                <li><a class="uk-navbar-item" href="#local">Local</a></li>
                <!-- <li><a class="uk-navbar-item" href="#patrocinio">Patrocínio</a></li> -->
                <li><a class="uk-navbar-item" href="#patrocinadoras">Patrocinadoras</a></li>
                <li><a class="uk-navbar-item" href="/speakers.html">Agenda</a></li>
                <li><a class="uk-navbar-item" href="/cdc.html">Código de Conduta</a></li>

            </ul>
            <a href="#" class="uk-navbar-toggle uk-hidden@s" uk-navbar-toggle-icon uk-toggle="target: #sidenav"></a>
        </div>

        <div class="uk-navbar-right uk-padding-small">
            <a href="https://github.com/pythonNordeste" uk-icon="icon: github; ratio: 1.3"></a>
            <a href="https://www.linkedin.com/company/pythonnordeste" uk-icon="icon: linkedin; ratio: 1.3"></a>
            <a href="https://www.instagram.com/pythonnordeste" uk-icon="icon: instagram; ratio: 1.3"></a>
        </div>
    </nav>

    <div id="sidenav" uk-offcanvas="flip: true" class="uk-offcanvas">
        <div class="uk-offcanvas-bar">
            <ul class="uk-nav">
                <li><a class="uk-navbar-item" href="/">Inicio</a></li>
                <li><a class="uk-navbar-item" href="#sobre">Sobre</a></li>
                <li><a class="uk-navbar-item" href="#local">Local</a></li>
                <!-- <li><a class="uk-navbar-item" href="#patrocinio">Patrocínio</a></li> -->
                <li><a class="uk-navbar-item" href="#patrocinadoras">Patrocinadoras</a></li>
                <li><a class="uk-navbar-item" href="/speakers.html">Agenda</a></li>
                <li><a class="uk-navbar-item" href="/cdc.html">Código de Conduta</a></li>

            </ul>
        </div>
    </div>
    <div class="uk-container">
        <div uk-grid class="hero">
            <img src="assets/images/LOGO-PYTHON-NORDESTE-2024.svg" class="uk-responsive-width uk-margin uk-margin-top"/>
            <h2 class="uk-width-1-1 uk-text-center uk-margin">
                09, 10 e 11 de agosto
            </h2>
            <p class="uk-margin">
                A Python Nordeste é o evento que reúne as comunidades Python do Nordeste.
                A edição 2024 busca, no resgate do processo artesanal 
                dos cartazes de rua, celebrar o toque humano. A ideia é encorajar 
                uma reflexão entre avanço e preservação das nossas heranças culturais,
                tecendo um diálogo entre passado e presente, não como uma resposta à
                inteligência artificial, mas como um lembrete de que no núcleo da 
                inovação sempre haverá um coração humano, pulsante e criativo.
            </p>
        </div>
        <img src="assets/images/DIV-COBRAS-PYTHON-NORDESTE-2024.svg" class="hr uk-margin" />
        
        <img src="assets/images/MURAL-PYTHON-NORDESTE-2024.svg" />

        <img src="assets/images/DIV-COBRAS-PYTHON-NORDESTE-2024.svg" class="hr uk-margin" />
    </div>

    <div class="scroll-smooth" id="sobre">
        <div class="evento-row uk-container uk-flex">
            <img src="assets/images/SOBRE.svg" class="uk-width-2-5@l"/>
            <div class="uk-width-3-5@l">
                <div>
                <h1>SOBRE O EVENTO</h1>
                <p>
                    A Python Nordeste é o <strong>maior encontro da comunidade Python</strong> na região. 
                    É um evento itinerante que ocorre anualmente nas cidades do Nordeste a mais de 10 anos. Em 2024 chegaremos 
                    a 12ª edição do evento!
                </p>
                <p>
                    Com foco na promoção da diversidade e troca de experiências e conhecimento, 
                    o evento é voltado para indivíduos de diversas áreas e origens, <strong>sem distinção</strong>
                    de conhecimento técnico ou atuação na área.
                </p> 
                <p>
                    O encontro visa difundir a linguagem entre universidades, empresas, instituições 
                    da sociedade civil e indivíduos em busca de novos conhecimentos, promovendo assim 
                    a difusão da cultura do Software Livre e o estímulo ao desenvolvimento na Região Nordeste. 
                </p>
                </div>
            </div>
        </div>
    </div>

    <div class="scroll-smooth uk-margin-large-top" id="voluntarios">

        <div>
            <h2 class="uk-text-center">VOLUNTÁRIOS</h3>
        </div>
        
        <div class="uk-margin-auto uk-flex-center" id="voluntarios-grid" uk-grid>
        </div>

        <img src="assets/images/DIV-COBRAS-PYTHON-NORDESTE-2024.svg" class="hr uk-margin uk-container" />

    </div>

    <div class="scroll-smooth uk-margin-bottom" id="patrocinadoras">
        <div>
            <h2 class="uk-text-center">CONFIRA AS NOSSAS PATROCINADORAS!</h3>
        </div>

        <div>
            <h4 class="uk-text-center">DIAMANTE</h3>

            <div class="uk-flex uk-flex-center">
                <a href="https://www.python.org/psf-landing/" target="_blank">
                    <img class="patrocinador-diamante" src="assets/images/patrocinio/psf-logo.png"/>
                </a>
            </div>
        </div>

        <div>
            <h4 class="uk-text-center">OURO</h3>

            <div class="uk-flex uk-flex-center">
                <a href="https://saveincloud.com/pt/solucoes-cloud/cloud-servidor-web/cloud-python/" title="hospedagem Python">
                    <img class="patrocinador-ouro" src="assets/images/patrocinio/save-in-cloud-logo.svg" alt="hospedagem Python">
                </a>
            </div>
        </div>
        <div>
            <h4 class="uk-text-center">PRATA</h3>
            <div class="uk-flex uk-flex-center">
                <a href="https://www.alura.com.br/" target="_blank">
                    <img class="patrocinador-prata" src="assets/images/patrocinio/LOGO_ALURA_FIAP.png"/>
                </a>
            </div>
        </div>
        <div>
            <h4 class="uk-text-center">BRONZE</h3>

            <div class="uk-flex uk-flex-center">
                <a href="https://www.vinta.com.br/" target="_blank">
                    <img class="patrocinador-bronze" src="assets/images/patrocinio/vinta-logo-blue.png"/>
                </a>
            </div>
        </div>

        <div>
            <h4 class="uk-text-center">COBRE</h4>

            <div class="uk-flex uk-flex-center uk-flex-wrap uk-flex-column@s">
                <a href="https://evolux.net.br/" target="_blank" class="uk-padding-small">
                    <img class="patrocinador-cobre" src="assets/images/patrocinio/evolux-logo.png"/>
                </a>

                <a href="https://sobre.jusbrasil.com.br/" target="_blank" class="uk-padding-small">
                    <img class="patrocinador-cobre" src="assets/images/patrocinio/jusbrasil.svg"/>
                </a>
            </div>
        </div>

        <div>
            <h4 class="uk-text-center">APOIO</h4>

            <div class="uk-flex uk-flex-center uk-flex-wrap uk-flex-column@s">
                <a href="https://sebrae.com.br/sites/PortalSebrae/" target="_blank" class="uk-padding-small">
                    <img class="patrocinador-cobre" src="assets/images/apoio/sebrae.svg"/>
                </a>

                <a href="https://sebrae.com.br/sites/PortalSebrae/sebraelab" target="_blank" class="uk-padding-small">
                    <img class="patrocinador-cobre" src="assets/images/apoio/sebraelab.png"/>
                </a>

                <a href="https://www.metropoledigital.ufrn.br/portal/" target="_blank" class="uk-padding-small">
                    <img style="max-width: 180px" src="assets/images/apoio/imd+parque.png"/>
                </a>
            </div>
        </div>
    </div>

    <div class="scroll-smooth" id="patrocinio">

        <div>
            <h2 class="uk-text-center">PATROCÍNIO</h3>
        </div>
        
        <div class="uk-margin-auto" style="max-width: 800px">
            <p class="uk-text-center">
                Baixe aqui o nosso plano de patrocínio com as 
                modalidades, benefícios e todas informações que 
                você precisa.
            </p>
        </div>

        <div class="width-max-content uk-margin-auto">
            <a href="https://drive.google.com/file/d/1i9-E1J3g2W_eF5bzeomsl-IKxKl7x58r/view?usp=sharing"
            class="uk-button uk-button-primary uk-text-bolder uk-margin-small-right"
            target="_blank">
                Media Kit (pt-br)
            </a>
            <a href="https://drive.google.com/file/d/1WvfelX-Sfp79YcUbf8Hs6e-MtPabVSmO/view?usp=sharing"
            class="uk-button uk-button-default uk-text-bolder"
            target="_blank">
                Media Kit (en)
            </a>
        </div>
    </div>

    <div class="scroll-smooth" id="local">
        <div class="uk-margin-auto">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12813.7309607872!2d-35.21194455738092!3d-5.827461537429716!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7b2557d62e3f36f%3A0x163ee617aef78273!2sEscola%20de%20Governo%20Cardeal%20Dom%20Eug%C3%AAnio%20de%20Ara%C3%BAjo%20Sales!5e0!3m2!1spt-BR!2sbr!4v1705543562022!5m2!1spt-BR!2sbr" height="450" style="border:0;" class="uk-width-1-1" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>

    <footer class="uk-footer uk-background-muted">
        <div class="uk-container">
            <div class="uk-grid-divider uk-child-width-expand@s" uk-grid>
                <div>
                    <h3>Sobre</h3>
                    <ul class="uk-list uk-list-bullet">
                        <li><a href="#sobre">Sobre</a></li>
                        <li>
                            <a href="https://maps.google.com/maps?ll=-5.830751,-35.216122&z=15&t=m&hl=pt-BR&gl=BR&mapclient=embed&cid=1602971506784567923"
                               target="_blank">
                                Local
                            </a>
                        </li>
                        <!-- <li>Keynotes</li> -->
                        <!-- <li><a href="#patrocinio">Patrocínio</a></li> -->
                        <li><a href="https://github.com/pythonNordeste/codigo-de-conduta">Código de Conduta (CDC)</a></li>
                        <!-- <li>Perguntas Frequentes</li> -->
                        <!-- <li>Programação</li> -->
                    </ul>
                </div>
                <div>
                    <h3>Créditos</h3>
                    <p>
                        A Python Nordeste 2024 em Natal, RN, é uma produção do 
                        <a href="https://blog.grupyrn.org/">GruPy RN</a>
                    </p>
                    <p>
                        Identidade visual e design por 
                        <a href="https://www.linkedin.com/in/lucas-lenin-456726162/"><u>Lucas Lenin</u></a>
                    </p>
                </div>
                <div>
                    <h3>Contato</h3>
                    <a href="mailto:nordeste@python.org.br">nordeste@python.org.br</a>
                    <div class="uk-grid-row-small">
                        <a href="https://github.com/pythonNordeste" class="uk-margin-small-right" uk-icon="icon: github; ratio: 1.3"></a>
                        <a href="https://www.linkedin.com/company/pythonnordeste" class="uk-margin-small-right" uk-icon="icon: linkedin; ratio: 1.3"></a>
                        <a href="https://www.instagram.com/pythonnordeste" class="uk-margin-small-right" uk-icon="icon: instagram; ratio: 1.3"></a>
                        <a href="https://t.me/pythonnordeste">
                            <img src="assets/images/ASSET-TELEGRAM-ICON.svg"/>
                        </a>
                    </div>
                </div>
            </div>
            <div class="uk-text-center uk-padding-small">
                <p>© 2024 Python Nordeste</p>
            </div>
        </div>
    </footer>
    
    <div id="modal-group-1" uk-modal>
        <div class="uk-modal-dialog">
            <button class="uk-modal-close-default" type="button" uk-close></button>
            <div class="uk-modal-header">
                <h2 class="uk-modal-title">Locais do Evento</h2>
            </div>
            <div class="uk-modal-body">
                <div class="uk-child-width-expand@s uk-text-center" uk-grid>
                    <div>
                        <div class="uk-text-center">
                            Dia 09/08
                        </div>
                        <div class="uk-text-center">
                            Tutoriais
                            <a href="https://www.even3.com.br/python-nordeste-2024/" target="_blank">
                                (para inscritos)
                            </a>
                            <span class="uk-margin-small-right" 
                                  uk-icon="question"
                                  style="color: black !important"
                                  uk-tooltip="Apenas participantes inscritos via Even3 podem participar dos tutoriais">
                            </span>
                        </div>
                        <figure>
                            <img src="assets/images/locais/imd.jpg" class="uk-responsive-width text-small"/>
                            <figcaption>
                                <a href="https://maps.app.goo.gl/BU6jCtU9rgztAajF8" target="_blank">
                                    Instituto Metrópole Digital (UFRN)
                                </a>
                            </figcaption>
                        </figure>
                    </div>
                    <div>
                        <div class="uk-text-center">Dias 10/08 e 11/08</div>
                        <div class="uk-text-center">
                            Palestras, Keynotes e Mais
                        </div>
                        <figure>
                            <img src="assets/images/locais/escola-de-governo-rn.jpg" class="uk-responsive-width"/>
                            <figcaption>
                                <a href="https://maps.app.goo.gl/Rgoh8QVLnKT8EnXQA" target="_blank">
                                    Escola de Governo do RN
                                </a>
                            </figcaption>
                        </figure>
                    </div>
                </div>
            </div>
            <div class="uk-modal-footer uk-flex uk-flex-between">
                <button class="uk-button uk-button-default uk-modal-close" type="button">Cancelar</button>
                <a href="#modal-group-2" class="uk-button uk-button-primary" uk-toggle>Próximo</a>
            </div>
        </div>
    </div>
    
    <div id="modal-group-2" uk-modal>
        <div class="uk-modal-dialog">
            <button class="uk-modal-close-default" type="button" uk-close></button>
            <div class="uk-modal-header">
                <h2 class="uk-modal-title">Codigo de Conduta</h2>
            </div>
            <div class="uk-modal-body">
                <p>
                    Para garantir um ambiente amistoso, de boa convivência, inclusivo e livre de intimidação a PyNE 
                    segue um código de conduta. É de extrema importâncias que todos os participantes 
                    <a href="/cdc.html">o tenham lido.</a>
                </p>
            </div>
            <div class="uk-modal-footer uk-flex uk-flex-between">
                <button class="uk-button uk-button-default uk-modal-close" type="button">Cancelar</button>
                <a href="#modal-group-1" class="uk-button uk-button-primary" uk-toggle>Anterior</a>
            </div>
        </div>
    </div>
</body>
</html>