ui.php

<?php $title = 'Inimigos invisíveis: fumaça das queimadas agrava Covid-19 na Amazônia'; ?>
<?php include './blocks/header.php'; ?>

<style>
    <?php include './src/less/style.css'; ?>
</style>


<div class="amz" id="story0">
    <section class="full header-story"> </section>

    <section>
        <H1>Drug trafficking routes</H1>
        <H2>Drug trafficking routes</H2>
        <H3>Drug trafficking routes</H3>
    </section>

    <section>
        <H2>Paragrafos</H2>
        <p class="big">The Amazon, known as the largest rainforest in the world, also functions as a source and transit point for illegally extracted jungle resources and narcotics, linking nine countries together. 
        As criminal economies expand in size, the levels of violence and deforestation worsen, and the Amazon and its communities face an existential threat.</p>
        <p class="caption">The Amazon, known as the largest rainforest in the world, also functions as a source and transit point for illegally extracted jungle resources and narcotics, linking nine countries together. 
        As criminal economies expand in size, the levels of violence and deforestation worsen, and the Amazon and its communities face an existential threat.</p>
        <p class="quote">Beneath the lush canopy of the world's most biodiverse ecosystem lies a darker reality, hidden behind the natural splendor. A labyrinth of thousands of rivers allows criminal groups to move freely while the dense forest cover enables them to evade detection.</p>
        <p>The remoteness and lack of infrastructure cause a profound disconnect between Amazon communities and capital cities. Historically neglected by their governments, entire regions and populations are left isolated and excluded.
        Porous and difficult to control, borderlands are marked by an obscure convergence of guerrilla movements, criminal startups and multinational organized crime.</p>
        <p>Armed groups, drug traffickers and illegal miners encroach on or invade protected areas and Indigenous territories. In some places, park guards have been forced to abandon their posts.</p>
        <p>Some Indigenous communities rent their land for drug crops or mining. Those who resist risk assassination. Despite efforts to protect the Amazon and its indigenous and traditional peoples, criminal groups have seized control of remote regions.</p>
        <p>This is the Amazon Underworld, where cycles of crime & destruction are fueled by a multibillion-dollar illegal trade in drugs, gold and arms.</p>
    </section>

    <section>
        <H2>Botoes</H2>
        <button class="btn big">VOLTAR AO TOPO</button>
        <button  class="btn">FAMÍLIA do NORTE</button>
        <button  class="btn">read more <span class="arrow"></span></button>
        <button  class="btn-close"><span ></span></button>
    </section>

    <section >
        <H2>Imagens</H2>
        <H3>Estilo Full</H3>
        <div class="image-container full">
        <img src="./assets/img/foto1.png">
        </div>
        <H3>Estilo Half</H3>
        <div class="image-container half">
            <img src="./assets/img/foto2.png" >
        </div>
        <H3>Estilo Destaque</H3>
        <div class="image-container destaque">
            <img src="./assets/img/foto1.png">
        </div>
    </section>

    <section class="full bege borda01">
        <div class="main-content">
            <div class="content">   
                <h1> BORDA 01 </h1>
            </div>
        </div>
    </section>

    <section class="full bege borda02">
        <div class="main-content">
            <div class="content">   
                <h1> BORDA 02 </h1>
            </div>
        </div>
    </section>

    <section class="full bege borda03">
        <div class="main-content">
            <div class="content">   
                <h1> BORDA 03 </h1>
            </div>
        </div>
    </section>
    
    <section >
        <img src="./assets/img/faca.svg" >
        <H1>Criminal & armed groups</H1>
        <p class="big">The Amazon, known as the largest rainforest in the world, also functions as a source and transit point for illegally extracted jungle resources and narcotics, linking nine countries together. 
        As criminal economies expand in size, the levels of violence and deforestation worsen, and the Amazon and its communities face an existential threat.</p>
        <p class="caption">The Amazon, known as the largest rainforest in the world, also functions as a source and transit point for illegally extracted jungle resources and narcotics, linking nine countries together. 
        As criminal economies expand in size, the levels of violence and deforestation worsen, and the Amazon and its communities face an existential threat.</p>
        <p class="quote">Beneath the lush canopy of the world's most biodiverse ecosystem lies a darker reality, hidden behind the natural splendor. A labyrinth of thousands of rivers allows criminal groups to move freely while the dense forest cover enables them to evade detection.</p>
    </section>

    <section class="full bege borda03">
        <div class="main-content">
            <div class="content">   
                <p class="quote citacao">  A pack of Coca-Cola costs one gram [of gold], a box of chicken is two grams. Everything is like that. A package of sausages is one gram​​. Everything is expensive, very expensive (Cabeludo)</p>
            </div>
        </div>
    </section>

    <section class="full bege borda02">
        <div class="main-content">
            <div class="twocols">   
                <div class="image-container destaque">
                    <img src="./assets/img/foto1.png">
                </div>
                <div>
                    <p class="quote citacao">  A pack of Coca-Cola costs one gram [of gold], a box of chicken is two grams. Everything is like that. A package of sausages is one gram​​. Everything is expensive, very expensive (Cabeludo)</p>
                    <p class="caption">
                    Photo: The mercury used by miners accumulates in the food chain, affecting people who depend on fish for protein, especially Indigenous communities |  Alex Rufino
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section class="full ouro borda01">
        <div class="main-content">
            <div class="twocols">   
                <div class="image-container destaque">
                    <img src="./assets/img/foto2.png">
                </div>
                <div>
                    <p class="bignumber tbege">AT US$ 54 A GRAM,</p>
                    <p class="big"> the price in Japurá, a smuggler or a dredge owner could be carrying the value of a middle-class apartment in Manaus in his pocket.</p>
                    <p class="caption">
                    Photo: The mercury used by miners accumulates in the food chain, affecting people who depend on fish for protein, especially Indigenous communities |  Alex Rufino
                    </p>
                </div>
            </div>
        </div>
    </section>
 
    <!-- Componente Banner Mapa -->
    <section class="full borda01 mapa">
        <div class="content">
            <div class="twocols">         
                <div>
                    <div class="tags">
                        <button class="tag ativo">Exército de Libertação Nacional</button>
                        <button class="tag">farc dissidents</button>
                        <button class="tag">primeiro comando da capital</button>
                        <button class="tag">comando vermelho</button>
                        <button class="tag">sindicatos</button>
                    </div>
                    <div class="title">
                        <span>Exército de Libertação Nacional, ELN</span>
                        <img src="./assets/img/eln.png" >
                    </div>
                    <div class="linha">  
                        <span class="item">Main presence:</span>
                        <span class="value">Colombia & Venezuela</span>
                    </div>
                    <div class="linha" style="flex-direction: row;">  
                        <div class="coll" style="margin-right:6rem;">
                            <span class="item">Est. members:</span>
                            <span class="value">XXX.XXX</span>
                        </div>
                        <div class="coll">
                            <span class="item">Founded:</span>
                            <span class="value">1964</span>
                        </div>
                    </div>
                    <div class="linha">  
                        <span class="item">Political/ideological stance:</span>
                        <span class="value">Marxist guerrilla group</span>
                    </div>
                    <div class="linha">  
                        <span class="item">Main economies:</span>
                        <span class="value">Illegal gold mining and taxing the drug trade</span>
                    </div>
                </div>
                <div >
                  
                </div>
            </div>
        </div>
    </section>

    <!-- Componente Banner Green -->
    <section class="full banner-green{">
        <div class="main-content">
            <h1 class="tbege">
            STORY MAP LAURA
            </h1>
        </div>
    </section>

    <!-- Componente Banner Cards -->
    <section class="full cards" >
        <div class="card">
            <div class="image"><img src="./assets/img/card1.png" ></div>
            <div class="infos">
                <div class="local">country + country</div>
                <div class="title">Gold spurs crime & corruption on Brazil-Colombia border</div>
                <button  class="btn">read more <span class="arrow"></span></button>
            </div>
        </div>

        <div class="card">
            <div class="image"><img src="./assets/img/card2.png" ></div>
            <div class="infos">
                <div class="local">country + country</div>
                <div class="title">Gold spurs crime & corruption on Brazil-Colombia border</div>
                <button  class="btn">read more <span class="arrow"></span></button>
            </div>
        </div>

        <div class="card">
            <div class="image"><img src="./assets/img/card3.png" ></div>
            <div class="infos">
                <div class="local">country + country</div>
                <div class="title">Gold spurs crime & corruption on Brazil-Colombia border</div>
                <button  class="btn">read more <span class="arrow"></span></button>
            </div>
        </div>

        <div class="card">
            <div class="image"><img src="./assets/img/card1.png" ></div>
            <div class="infos">
                <div class="local">country + country</div>
                <div class="title">Gold spurs crime & corruption on Brazil-Colombia border</div>
                <button  class="btn">read more <span class="arrow"></span></button>
            </div>
        </div>
    </section>

    <!-- Componente Big Numbers -->
    <section class="full bignumber">
        <div class="main-content">
            <img src="./assets/img/story1_big_number.png" >
            <p class="big"> If the approximately</p>
            <h1 class="tverdeescuroa">150 dragas on the Puruê Riverpays 30 grams of gold</h1>
            <p class="big"> a month each, the military police collects in the river </p>
            <h1 class="tverdeescuroa">about US$ 3 million annualy.</h1>
        </div>
    </section>

    <!-- Componente Infografico -->

    <section class="full borda01 infografico">
        <div class="main-content">
            <h2>Miners report paying protection money to Brazil’s Military Police</h2>
            <p class="big">
                For days at a time, police patrol the Puruê River in boats with powerful outboard motors, stopping at dredges and collecting their gold.
            <p>
            <div class="info-cards">
    
                <div class="card">
                    <div class="image-area">
                        <img src="./assets/img/infografico-icon1.png" >
                    </div>
                    <p>
                    Military Police function as vigilantes protecting miners from thieves & guerrillas.
                    </p>
                </div>

                <div class="card">
                    <div class="image-area">
                        <img src="./assets/img/infografico-icon2.png" >
                    </div>
                    <p>
                    The Military Police collects a monthly 30 grams of gold per mining dredge.
                    </p>
                </div>

                <div class="card">
                    <div class="image-area">
                        <img src="./assets/img/infografico-icon3.png" >
                    </div>
                    <p>
                    Military Police traffickers gold over X route.
                    </p>
                </div>

                <div class="card">
                    <div class="image-area">
                        <img src="./assets/img/infografico-icon4.png" >
                    </div>
                    <p>
                    The Prefeitura de Japurá also collects up to 50 grams a month per mining dredge.
                    </p>
                </div>

            </div>
        </div>
    </section>



    <section class="full branco" style="padding: 6rem 0;">
        <div class="main-content">
            <img src="./assets/img/faca.svg" >
            <H1>todas as histórias do projeto</H1>
            <p  style="padding: 1rem 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
            <button  class="btn big">CONHEÇA</button>
        </div>
    </section>

  
  


</div>

<!-- Footer -->
<?php include './blocks/footer.php'; ?>