<!DOCTYPE html>
<html class="" 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" />
    <%- include('./partials/header.ejs')%>
    <link rel="stylesheet" href="../styles/styleC.css">
    <title>PEMBU</title>

  </head>
  <body>
    <%- include('./partials/Nav')%> 
    <%- include('./partials/navegacion')%>



    <div
      id="carouselExampleCaptions"
      class="carousel slide"
      data-bs-ride="carousel"
    >
      <div class="carousel-indicators">
        <button
          type="button"
          data-bs-target="#carouselExampleCaptions"
          data-bs-slide-to="0"
          class="active"
          aria-current="true"
          aria-label="Slide 1"
        ></button>
        <button
          type="button"
          data-bs-target="#carouselExampleCaptions"
          data-bs-slide-to="1"
          aria-label="Slide 2"
        ></button>
        <button
          type="button"
          data-bs-target="#carouselExampleCaptions"
          data-bs-slide-to="2"
          aria-label="Slide 3"
        ></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="img//portadas/1.1.jpg" class="d-block w-100" alt="..." />
          <div class="carousel-caption d-none d-md-block">
            <h5>PEMBU</h5>
            <p>Programa de Estaciones Meteorológicas del Bachillerato Universitario</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="img//portadas/3.1.jpg" class="d-block w-100" alt="..." />
          <div class="carousel-caption d-none d-md-block">
            <h5>Aportaciones</h5>
            <p>
              contribuye a difundir el conocimiento de las condiciones locales
              de la atmósfera de la Ciudad de México y su zona conurbada.
            </p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="img//portadas/2.1.jpg" class="d-block w-100" alt="..." />
          <div class="carousel-caption d-none d-md-block">
            <h5>..</h5>
            <p>..</p>
          </div>
        </div>
      </div>
      <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#carouselExampleCaptions"
        data-bs-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button
        class="carousel-control-next"
        type="button"
        data-bs-target="#carouselExampleCaptions"
        data-bs-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    <div class="container">
      <div class="text-center my-5">
        <h1>Articulos</h1>
        <hr />
      </div>
      <div class="row">
        <% for(i=0; i < articulos.length; i++) { %>
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="card mb-5 shadow p-3 mb-5 bg-dark animate__animated animate__fadeInUp rounded">
            <div class="overflow">
              <img src="/img/<%=articulos[i].imagen%>" class="img-fluid card-img-top" alt="" />
            </div>
            
            <div class="card-body text-light">
              <div class="card-title">
                <h2><%=articulos[i].titulo %></h2>
              </div>
              <div class="card-text">
                <p><% if(articulos[i].descripcion.length <= 22){ %></p>

                <p class="card-text"><%= articulos[i].descripcion%></p>
                <% } else{ %>
                <p class="card-text">
                  <%= articulos[i].descripcion.slice(0, 20) + "...."%>
                </p>
                <% } %>
              </div>
              <a
                href="/articulo/<%=articulos[i].handle%>"
                class="btn btn-outline-light roundend-0 float-end btn-dark"
                id="<%=articulos[i].id%>"
                >Leer mas</a
              >
            </div>
          </div>
        </div>
        <%}%>
      </div>
    </div>
    <%- include('partials/footer')%>
  </body>
</html>
