<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="/css/stylehome.css">

    <title>África Desmistificada</title>
</head>

<body>
    
    <nav>
        <a class="logo" href="/">Home</a>
        <a class="logo" href="/quemsomos">Quem Somos</a>
        <a class="logo" href="/sobre">Sobre</a>
        <a class="logo" href="/cadastro">Cadastrar</a>
    </nav>

    <header>
        <h1>África Desmistificada</h1>
    </header>
    <section>
        <div id= "informacoes1">
            <h4>África Mediterrânea</h4>
            <p>Compreende os países localizados no norte do continente africano, próximos ao mar Mediterrâneo</p>
        </div>

        <figure>
            <img src="/img/continenteAfricano.png" height= 600px alt= "Mapa do continente africano" usemap= "#divisao">
        </figure>
        <map name= "divisao">
            <area id= "medit" shape="rect" coords="5 2 450 150" href="/paises" alt="África Mediterrânea">
            <area id= "subsa" shape="rect" coords="2 120 600 600" href="/paises" alt="África Subsaariana">
            
        </map>
        

        <div id= "informacoes">
            <h4>África Subsaariana</h4>
            <p>Antes chamada África negra, corresponde à parte do continente africano situada ao sul do Deserto do Saara. Chamada de subsaariana por estar ao sul do Saara. É constituída de quarenta e oito Estados, cujas fronteiras resultaram da descolonização</p>
        </div>

    </section>

</body>
</html>