<!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/style.css">
    <title>Pokédex</title>
</head>
<body>

  <nav>
    <a id="P" href="/">Pokédex</a>
    <a id="Home" href="/">Home</a>
    <a id="registrar" href="cadastro">Cadastro</a>
 </nav>

 <% if(message != "") {  %>
  <section id="message">
      <p><%= message %></p> <span id="close">&times;</span>
  </section>
<% }  %>

 <header><h1>Pokédex</h1></header>



 <section>
   <% pokedex.forEach(function(card, index){ %>
    <div >
      <a class="card" href="/detalhes/<%=index %>"><img src="<%= card.imagem%>" alt="Imagens Pokémons"></a>
      <h2><%= card.nome %></h2>
      <h4><%= card.tipo %></h4>
    </div>
  <% }) %>
  </section>
 





 
  <script src="/js/script.js"></script>
</body>

</html>