<!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/reset.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/header.css">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/index.css">
  <title>Home</title>

  
</head>

<body>
  
  <%- include('header'); %>

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

      <main class="index">
        <% artigo.forEach(item => { %>
          
          <section class="index__card">
            <article class="card_content">
              <a class="linken" href="/artigo/<%= item.id %>">

                <img src="<%= item.imagem %>" alt="Imagem do tema" class="card__img">

                <h2 class="card__titulo">
                  <%= item.titulo %>
                </h2>

                <h2 class="nomeArtigo">
                  by: <%= item.nome %>
                </h2>

                <h2 class="emailArtigo">
                  email: <%= item.email %>
                </h2>

              </a>

            </article>
          </section>
          <% }) %>
      </main>

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

</html>