<%- include('includes/head.ejs') %>

<!DOCTYPE html>
<html>
    <head><meta charset="utf-8"></head>
    <style>
        .container {
            margin: 0 auto;
            max-width: 85em;
            line-height: 1.5;
            padding: 1em 1em;
        }
        .card {
            margin-top: 20px;
            margin-right: 10px;
            margin-left: 10px;
        }
        .section {
            margin: 0 auto;
            max-width: 85em;
            line-height: 35;
            padding: 1em 1em;  
        }
        h3, p{
            padding-left: 20px;
        }
    </style>
    <body>
        <title>Laboratorio 12 EJS</title>
        <div class="row row-cols-1 row-cols-md-3 g-4">
            <div class="col">
              <div class="card">
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASsAAACoCAMAAACPKThEAAAAA1BMVEVDhfVehWTeAAAASElEQVR4nO3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAICXAcTgAAG6EJuyAAAAAElFTkSuQmCC" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Azul</h5>
                  <p class="card-text">Conoce más sobre el color azul.</p>
                  <a href="/azul" class="btn btn-primary">Go</a>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="card">
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAADgCAMAAAAt85rTAAAAA1BMVEX/xVGzA0teAAAASElEQVR4nO3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAICXAcTgAAG6EJuyAAAAAElFTkSuQmCC" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Amarillo</h5>
                  <p class="card-text">Conoce más sobre el color amarillo.</p>
                  <a href="/amarillo" class="btn btn-primary">Go</a>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="card">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Flag_of_Libya_%281977%E2%80%932011%29.svg/360px-Flag_of_Libya_%281977%E2%80%932011%29.svg.png" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Verde</h5>
                  <p class="card-text">Conoce más sobre el color verde.</p>
                  <a href="/verde" class="btn btn-primary">Go</a>
                </div>
              </div>
            </div>
          </div>
          <br><br>
          <section>
            <h3>¿Qué otros templating engines existen para node?</h3>
            <p><ul>
                <li>Handlebars: Es un motor de plantillas basado en la sintaxis de Mustache que se centra en la simplicidad y la flexibilidad.</li>
                <li>Pug (antes llamado Jade): Es un motor de plantillas que se basa en la indentación para indicar la estructura de la página.</li>
                <li>Nunjucks: Es un motor de plantillas de JavaScript que se basa en la sintaxis de Jinja2 de Python.</li>
                <li>Marko: Es un motor de plantillas optimizado para la velocidad que se centra en la eficiencia del renderizado en el servidor y el cliente.</li>
            </ul></p>
          </section>
    </body>
</html>