<!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/stylepaises.css">

    <title>Pa√≠ses africanos</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>Todos Paises Africanos</h1>
    </header>
    <!-- lista de paises -->
    <section id="paises">
        <% paises.forEach(item => { %>

            <a class="card" href="/detalhes/<%= item.id %>">
                <img src="<%= item.bandeira %>" alt="">
                <h2>
                    <%= item.nome %>
                </h2>
         
            </a>
                
        <% }) %> 
    </section>
    <script src="/js/script.js"></script>  
    
</body>
</html>