<template id="card-template">
  <div class="card">
    <h1 class="title"></h1>
    <p class="description"></p>
  </div>
</template>

<div id="card-list" class="card-flex"></div>

body {
  background: #ecf0f1;
}

.card-flex {
  display: flex;
  flex-wrap: wrap;
}

.card {
  font-family: Arial;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
  max-width: 200px;
  width: 100%;
  padding: 10px 20px;
  margin: 10px;
  border-radius: 4px;
}

h1 {
  font-size: 24px;
  color: #34495e;
}

p {
  color: #2c3e50;
  font-size: 12px;
}

const template = document.getElementById('card-template');

const places = [
  { title: 'La Floresta', description: 'La Estación Floresta es la quinta de la Línea B del Metro de Medellín del centro al occidente y la tercera en sentido inverso.' },
  { title: 'San Javier', description: 'La Estación San Javier es la séptima y última estación de la línea B del Metro de Medellín, así como la primera de la línea J.' },
  { title: 'Santa Lucia', description: 'La Estación Santa Lucía es la sexta estación de la línea B del Metro de Medellín del centro al occidente y la segunda en sentido contrario.' }
];


places.forEach(book => {
  const deep = true;
  const instance = document.importNode(template.content, deep);
  instance.querySelector('.title').innerHTML = book.title;
  instance.querySelector('.description').innerHTML = book.description;
  
  document.getElementById('card-list').appendChild(instance);
});