TechWomanCode · TechWomanCode · May 30, 2019
diff --git a/images/GirlPower2.jpg b/images/GirlPower2.jpg
diff --git a/images/girlcan.jpg b/images/girlcan.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="styles/style.css">
+    <link href="https://fonts.googleapis.com/css?family=Sacramento&display=swap" rel="stylesheet">
+    <title>My test Page - Girl Power</title>
+  </head>
+
+  <body>
+    <h1>Girl Power</h1>
+    <img src="images/GirlPower2.jpg" alt="Girl Power">
+    <p id="lema">"La belleza debería comenzar en el alma y el corazón, de
+      otra manera los cosméticos son inútiles".<br> <em> - Chanel - </em></p>
+
+  <p>Las mujeres somos poderosas porque:</p>
+  <ul>
+    <li>No somos ni sumisas ni devotas</li>
+    <li>Somos libres, lindas y locas </li>
+    <li>Porque Nada nos detiene, somos imparables y seguimos adelante</li>
+  </ul>
+
+  <p>Te recomiendo escuchar esta canción haciendo
+    <a href="https://www.youtube.com/watch?v=i7X6nO0R9jA" target="_blank">clic aquí</a></p>
+  </body>
+  <button>Cambiar de usuario</button>
+  <script src="scripts/main.js"></script>
+</html>
diff --git a/scripts/main.js b/scripts/main.js
@@ -0,0 +1,33 @@
+
+var miImage =  document.querySelector('img');
+
+miImage.onclick = function() {
+  var miSrc = miImage.getAttribute('src');
+  if(miSrc === 'images/GirlPower2.jpg') {
+    miImage.setAttribute('src','images/girlcan.jpg');
+  } else {
+    miImage.setAttribute ('src', 'images/GirlPower2.jpg');
+  }
+}
+
+
+var miBoton = document.querySelector('button');
+var miTitulo = document.querySelector( 'h1');
+
+function estableceNombreUsuario() {
+    var miNombre = prompt('Por favor, ingresa tu nombre.');
+    localStorage.setItem('nombre', miNombre);
+    miTitulo.textContent = 'Girl Power is,' + miNombre;
+}
+
+if (!localStorage.getItem('nombre')) {
+    estableceNombreUsuario();
+}
+else {
+    var nombreAlmacenado = localStorage.getItem('nombre');
+    miTitulo.textContent = 'Girl Power is,' + nombreAlmacenado;
+}
+
+miBoton.onclick = function() {
+    estableceNombreUsuario();
+}
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,52 @@
+* {
+font-family: 'Sacramento', cursive;
+}
+html {
+  background-color: #FFD4BF;
+}
+
+body{
+  background-color:#ffd8dc;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 20px 20px 20px;
+  border: 5px solid #ffdcbb;
+}
+h1 {
+  font-size:60pt;
+  text-align: center;
+  margin: 0 auto;
+  padding: 20px 0 20px 0;
+  text-shadow: 3px 3px 5px #C95FA2, -3px -3px 5px #C95FA2;
+}
+
+p, ul {
+  font-size:20pt;
+  letter-spacing: 3px;
+  line-height: 2;
+}
+#lema {
+color: #E9208F;
+border: 2px solid #C95FA2;
+padding: 5px;
+text-align: justify;
+}
+
+#lema em {
+  color: #E856A7;
+  font-size: 14pt;
+  font-weight: bold;
+}
+
+img {
+  display: block;
+  margin: 0 auto;
+}
+
+button{
+font-size: 18pt;
+text-align: center;
+font-weight: bold;
+margin: 0 auto;
+display: block;
+}