<!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">
    <title>Loja de Games</title>
    <link rel="stylesheet" href="/css/style.css">

</head>

<body>

    <header>
        
        <%- include('./components/navbar') %>

    </header>

    <main>

        <section id="jogos">
    
            <% game.forEach(element => { %>
 

            <a href="/detalhes/<%=element.id%>" class="card">

                <div class="card-title">

                    <h2> <%= element.nome %>  </h2>

                </div>

                <div class="card-img">

                    <img src="<%= element.imagem %>" alt="imagem">

                </div>

                <div class="card-info">

                    <div class="card-descricao">

                        <p> Descrição: <%= element.descricao %>
                        <p>

                    </div>

                    <div class="card-preco">

                        <p> Preço: <%= element.preço %> R$ <p>

                    </div>

                    <div class="card-estoque">

                        <p> Estoque: <%= element.estoque %> <p>

                    </div>

                    <div class="card-genero">

                        <p> Gênero: <%= element.genero %>
                        <p>

                    </div>

                    <div class="Plataforma">

                        <p> Plataforma: <%= element.plataforma %>
                        <p>

                    </div>

                </div>

            </a>

            <% }) %>

        </section>

    </main>

</body>

</html>