Skip to content

Instantly share code, notes, and snippets.

@alejandrolechuga

alejandrolechuga/index.html

Created February 12, 2018 01:05
Show Gist options
  • Save alejandrolechuga/e2a2b35c8a299fdbd66427f6fc509b02 to your computer and use it in GitHub Desktop.
Save alejandrolechuga/e2a2b35c8a299fdbd66427f6fc509b02 to your computer and use it in GitHub Desktop.
Download ZIP
stringmultiline
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h4>Mi Pagina</h4>
<div id="contenido">
</div>
</body>
</html>
Raw
script.js
// Strings
// Multiline
/**
<div class="profile">
<div>
<img src="https://img00.deviantart.net/e79b/i/2012/174/c/f/caramelldansen_by_cole_the_meerkat-d54iugd.png">
</div>
<div>
<div><strong>Software Developer</strong></div>
<div class="bio">Hola soy Alejandro, soy desarrollador web y amo javascript </div>
</div>
</div>
**/
var user = {
img: 'https://img00.deviantart.net/e79b/i/2012/174/c/f/caramelldansen_by_cole_the_meerkat-d54iugd.png',
titulo: 'Medico',
bio: 'Hola soy Fernando, soy desarrol lador web y amo javascript '
}
var template = `<div class="profile">
<div>
<img src="${user.img}">
</div>
<div>
<div><strong>${user.titulo}</strong></div>
<div class="bio">${user.bio}</div>
</div>
</div>`;
console.log(template)
var contenedor = document.getElementById('contenido');
contenedor.innerHTML = template;
Raw
style.css
#contenido {
padding: 5px;
height: 500px;
width: 500px;
}
.profile {
background-color: white;
width: 200px;
border: 1px solid gray;
padding: 5px;
font-family: Helvetica;
}
.profile img{
border: 1px solid brown;
width: 50px
}
.profile .bio {
font-size: 14px;
color: gray;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment