<!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" />
    <title>Pok√©dex</title>
  </head>
  <body>
    <nav>
      <input type="checkbox" id="nav" class="hidden" />
      <label for="nav" class="nav-open"><i></i><i></i><i></i></label>
      <div class="nav-container">
        <ul>
          <li><a href="/">HOME</a></li>
          <li><a href="/cadastro/">CADASTRAR</a></li>
          <li><a href="/#cards">POKEMON</a></li>
          <li><a href="/curiosidade">CURIOSIDADE</a></li>
        </ul>
      </div>
    </nav>

    <main>
      <section class="items">
        <h1>Loja dos Peaky`s</h1>
        <% loja.forEach((items) =>{ %>
        <div class="item">
          <a class="item2" href="/detalhes/<%= loja.indexOf(items) %>">
            <img src="<%= items.imagem %>" alt="item" />
            <h2><%= items.nome %></h2>
            <h3 class="itemTipo"><%= items.tamanho %></h3>
        </div>
        <% }) %>
      </section>
    </main>
      <footer>
        <a
          href="https://www.linkedin.com/in/kellbber-barcarolo-71a848230/"
          target="_blank"
          >Kellber Barcolo</a>
        <a href="https://www.linkedin.com/in/monicashdias/" target="_blank"
          >Monica Dias</a>
        <p>Todos os direitos reservados &copy;</p>
      </footer>
    <script src="/JS/script.js"></script>
  </body>
</html>
