<!-- Content -->
<div class="wrapper">
<main>
<header>
<h1>Guillermo Rodas is a Full-stack JavaScript Engineer from Colombia.</h1>
<strong>πΈπͺ Currently living in Stockholm, Sweden.</strong>
</header>
<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>
<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.
</p>
</main>
<!-- footer -->
<footer></footer>
</div>
/**
* index.scss
* - Add any styles you want here!
*/
:root {
--primary-color: tomato;
}
html,
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;
}
h1,
h2,
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`
<ul>
${linkList.map(({ url, text}) => html`<li><a target="_blank" href=${url}>${text}</a></li>`)}
</ul>
`;
// Seleccionamos nuestro footer
const footer = document.querySelector('footer')
// Agregamos nuestro template al footer de nuestro documento
render(footerTemplate, footer);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.