<!-- Content -->
<div class="wrapper">
      <h1>Guillermo Rodas is a Full-stack JavaScript Engineer from Colombia.</h1> 
      <strong>πŸ‡ΈπŸ‡ͺ Currently living in Stockholm, Sweden.</strong>
    <p>Overall in his career, he has witnessed how JavaScript is changing the way we build software in the present and how it is influencing the future.</p>
      He has worked mostly as a front-end developer on many UI/UX projects. However, don't hesitate in asking him about architecture, brainstorming, product design, Node.js and even about how to learn new things every day.

  <!-- footer -->
 * index.scss
 * - Add any styles you want here!
:root {
  --primary-color: tomato;

body {
  margin: 0;
  padding: 0;
  height: 100%;

body {
  background: #f5f5f5;
  color: #566b78;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;

h1 {
  margin-top: 1em;
  margin-bottom: 0.75em;
  line-height: 1.25;

strong {
  color: #333;

main {
  margin: 0 auto;
  max-width: 40em;

footer {
  display: flex;
  justify-content: center;
  background: #17171a;
  padding: 1em;
  margin-top: 2em;

ul {
  display: flex;
  justify-content: center;
  list-style: none;

ul > li {
  margin: 0 10px;

a {
  display: block;
  color: var(--primary-color);

.wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
// Importamos lit-html (solo esta disponible como modulo)
import {html, render} from 'https://unpkg.com/lit-html@1.2.1/lit-html.js';

const linkList = [
    url: "index.html",
    text: "Home"
    url: "https://www.twitter.com/glrodasz",
    text: "Twitter"
    url: "https://www.linkedin.com/in/guillermorodas",
    text: "LinkedIn"
    url: "https://github.com/glrodasz",
    text: "GitHub"

// Declaramos nuestro template esta vez usando un map
const footerTemplate = html`
    ${linkList.map(({ url, text}) => html`<li><a target="_blank" href=${url}>${text}</a></li>`)}

// Seleccionamos nuestro footer
const footer = document.querySelector('footer')
// Agregamos nuestro template al footer de nuestro documento
render(footerTemplate, footer);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.