<!DOCTYPE html>
<html lang="pt-br">
<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/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap" rel="stylesheet">
    <title>Pokédex</title>
</head>
<body>
    <nav>
        <img src="/img/logo.png" class="img-fluid gif" alt="logo Pokédex">
        <ul>
            <li>
                <a href="index">Home</a>
            </li>
            <li>
                <a href="cadastro">Cadastro</a>
            </li>
            <li>
                <a href="detalhes">Detalhes</a>
            </li>
        </ul>
    </nav>
    <header>
        <img>
    </header>
    <main>

        <section id="cards">

            <% pokedex.forEach((pokemon) => { %>
                <div class="row">
                    <div class="pokemon">
                        <div class="card blue">
                            <h2 class="name"><%= pokemon.nome %></h2>
                            <span class="tipo"> Tipo: <%= pokemon.tipo %></span>                                
                            <img src="<%= pokemon.imagem %>" alt="" class="image">
                        </div>
                    </div>
                </div>

            <% }); %>
            

        </section>

    </main>

    <footer>
        <p>
            <a href="" target="_blank"> Pokedex JWO - Todos os Direitos Reservados 2022</a>
        </p>
    </footer>
    <script src="./JS/script.js"></script>     
</body>
</html>