<!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="/style.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <h1>
        <div class="barra">
          <% menu.forEach ( (item) => { %>
          <a href="<%= item.link %>"> <%= item.title%></a>

          <%} )%>
        </div>
      </h1>
    </header>

    <main>
      <section id="cards">
        <h2>Lista de Pokemons</h2>

        <div class="card">
          <img src="<%= pokedex[id].imagem %>" alt="" />
          <h3><%= pokedex[id].nome %></h3>
          <p class="descricao"><%= pokedex[id].descricao %></p>
          <p>NÃºmero: <%= pokedex[id].id %></p>
          <p>Tipo: <%= pokedex[id].tipo %></p>
          <p>Altura: <%= pokedex[id].altura %></p>
          <p>Peso: <%= pokedex[id].peso %></p>
          <p>Categoria: <%= pokedex[id].categoria %></p>
          <p>Habilidade: <%= pokedex[id].habilidade %></p>
        </div>
      </section>
    </main>
  </body>
</html>
