Laboratoria · LauriLugo · May 5, 2023 · May 5, 2023 · May 9, 2023 · May 9, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/castleInTheSky.html b/src/castleInTheSky.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>El castillo en el cielo</title>
+  <link rel="stylesheet" href="styleCastleInTheSky.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Bubbler+One&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <header>
+    <img src="./images-data/titulo.png" href="" alt="Studio Ghibli movies" class="tituloStudioGhibliMovies">
+    <nav>
+      <ul>
+        <li><a href="#">Página de inicio</a></li>
+        <li><a href="#">Producciones</a></li>
+        <li><a href="#">Más detalles</a></li>
+      </ul>
+    </nav>
+  </header>
+  <div id="backgroundCastleInTheSky">
+
+    <h1 class="tituloPelicula"> El castillo en el cielo</h1>
+
+    <div class="posterDescripcion">
+      <img id="posterCastleInTheSky" src="" alt="">
+      <p class="descripcion">The orphan Sheeta inherited a mysterious crystal that links her to the mythical sky-kingdom
+        of Laputa. With the help of resourceful Pazu and a rollicking band of sky pirates, she makes her way to the
+        ruins of the once-great civilization. Sheeta and Pazu must outwit the evil Muska, who plans to use Laputa's
+        science to make himself ruler of the world</p>
+    </div>
+    <h2 class="subtitulo" id="fecha">Fecha de lanzamiento:</h2>
+    <br>
+    <h2 class="subtitulo">Personajes principales:</h2>
+    <div class="personajes">
+      <div class="tarjeta">
+        <img src="./images-data/totoroazul.png" class="personajesPrincipales" alt="">
+        <h4 class="nombrePersonaje">Nombre</h4>
+      </div>
+      <div class="espacioPersonajes"></div>
+      <div class="tarjeta">
+        <img src="./images-data/totoroazul.png" class="personajesPrincipales" alt="">
+        <h4 class="nombrePersonaje">Nombre</h4>
+      </div>
+      <div class="espacioPersonajes"></div>
+      <div class="tarjeta">
+        <img src="./images-data/totoroazul.png" class="personajesPrincipales" alt="">
+        <h4 class="nombrePersonaje">Nombre</h4>
+      </div>
+      <div class="espacioPersonajes"></div>
+      <div class="tarjeta">
+        <img src="./images-data/totoroazul.png" class="personajesPrincipales" alt="">
+        <h4 class="nombrePersonaje">Nombre</h4>
+      </div>
+      <div class="espacioPersonajes"></div>
+      <div class="tarjeta">
+        <img src="./images-data/totoroazul.png" class="personajesPrincipales" alt="">
+        <h4 class="nombrePersonaje">Nombre</h4>
+      </div>
+      <div class="espacioPersonajes"></div>
+    </div>
+
+    <h2 class="subtitulo">Directores y productores:</h2>
+    <div class="personajes">
+      <div class="tarjeta">
+        <img src="./images-data/totoroazul.png" class="personajesPrincipales" alt="">
+        <h4 class="nombrePersonaje">Nombre</h4>
+      </div>
+      <div class="espacioPersonajes"></div>
+      <div class="tarjeta">
+        <img src="./images-data/totoroazul.png" class="personajesPrincipales" alt="">
+        <h4 class="nombrePersonaje">Nombre</h4>
+      </div>
+      <div class="espacioPersonajes"></div>
+      <div class="tarjeta">
+        <img src="./images-data/totoroazul.png" class="personajesPrincipales" alt="">
+        <h4 class="nombrePersonaje">Nombre</h4>
+      </div>
+      <div class="espacioPersonajes"></div>
+      <div class="tarjeta">
+        <img src="./images-data/totoroazul.png" class="personajesPrincipales" alt="">
+        <h4 class="nombrePersonaje">Nombre</h4>
+      </div>
+      <div class="espacioPersonajes"></div>
+      <div class="tarjeta">
+        <img src="./images-data/totoroazul.png" class="personajesPrincipales" alt="">
+        <h4 class="nombrePersonaje">Nombre</h4>
+      </div>
+      <div class="espacioPersonajes"></div>
+    </div>
+
+    <h2 class="subtitulo">Datos curiosos/premiaciones:</h2>
+    <p class="datos">datos</p>
+  </div>
+
+
+
+  <footer class="footer">
+    <p>«Dime, ¿cuáles son los límites? Los límites son tres: el cielo, la imaginación y tú misma.»</P>
+    <img src="./images-data/totoroazul.png" alt="">
+    <br>
+    <br>
+  </footer>
+</body>
+
+<script src="main.js" type="module"></script>
+
+</html>
diff --git a/src/images-data/TransparenciaMiyazaki.jpg b/src/images-data/TransparenciaMiyazaki.jpg
diff --git a/src/images-data/descarga.jpg b/src/images-data/descarga.jpg
diff --git a/src/images-data/facebook.png b/src/images-data/facebook.png
diff --git a/src/images-data/flores.jpg b/src/images-data/flores.jpg
diff --git a/src/images-data/instagram.png b/src/images-data/instagram.png
diff --git a/src/images-data/titulo.png b/src/images-data/titulo.png
diff --git a/src/images-data/totoroazul.png b/src/images-data/totoroazul.png
diff --git a/src/images-data/twitter.png b/src/images-data/twitter.png
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,236 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="main.js" type="module"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Ghibli movies</title>
+  <link rel="stylesheet" href="style.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Bubbler+One&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <header>
+    <img src="./images-data/titulo.png" href="" alt="Studio Ghibli movies" class="tituloStudioGhibliMovies">
+    <nav class="navegacion">
+      <ul>
+        <li><a href="#">Página de inicio</a></li>
+        <li><a href="#">Producciones</a></li>
+        <li><a href="#">Más detalles</a></li>
+      </ul>
+    </nav>
+  </header>
+  <img src="./images-data/TransparenciaMiyazaki.jpg" alt="encabezado" class="encabezado">
+  <div id="barra-de-busqueda">
+    <input type="text" id="inputBuscar" placeholder="Buscar">
+  </div>
+  <input type="submit" class="boton" id="btn" value="Buscar">
+  <!-- 
+<ul id="box-search">
+    <li><a href="#">Totoro</a></li>
+</ul>  -->
+  <!-- 
+<div id="cover-ctn-search"></div>
+contenedos de busqieda -->
+  <!-- <div id="introduccion">
+      <div>
+    </div>
+  </div> -->
+  <div class="intro">
+    <p class="introduccion"> Studio Ghibli sorprende al mundo con largometrajes únicos, llenos de meticulosos detalles y
+      mensajes significativos para nuestra sociedad.
+      Este estudio de animación japonesa expone una visión diferente del anime, con un dibujo mucho más artesanal y
+      auténtico. Sus películas promueven la protección del medio ambiente, transmiten un mensaje antibelicista y
+      reivindica el protagonismo de los personajes femeninos y de su fuerza interior, todo eso combinado con esa
+      peculiar
+      fantasía única de Ghibli que baña cada una de sus animaciones, la cual es tomada de las leyendas y mitos propios
+      del folclore nipón.</p>
+    <div class="espacio"></div>
+    <img src="./images-data/descarga.jpg" alt="Studio Ghibli Logo" class="logo">
+  </div>
+  <div class="producciones">
+    <br>
+    <h1>Producciones</h1>
+    <br>
+    <h3>Haz clic en cada una de las portadas y revive la magia de estas maravillosas animaciones</h3>
+    <p>Ordenar por</p>
+    <br>
+    <br>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterCastleInTheSky" src="" alt="poster">
+      <div class="overlay" onclick="window.location.href='castleInTheSky.html'">
+        <p>El castillo en el cielo</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterMyNeighborTotoro" src="" alt="poster">
+      <div class="overlay">
+        <p>Mi vecino Totoro</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterKikisDeliveryService" src="" alt="poster">
+      <div class="overlay">
+        <p>Nicky, la aprendiz de bruja</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterGraveOfTheFireflies" src="" alt="poster">
+      <div class="overlay">
+        <p>La tumba de las luciérnagas</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterOnlyYesterday" src="" alt="poster">
+      <div class="overlay">
+        <p>Recuerdos del ayer</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterPorcoRosso" src="" alt="poster">
+      <div class="overlay">
+        <p>Porco Rosso</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterPomPoko" src="" alt="poster">
+      <div class="overlay">
+        <p>Pompoko</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterWhisperOfTheHeart" src="" alt="poster">
+      <div class="overlay">
+        <p>Susurros del corazón</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterPrincessMononoke" src="" alt="poster">
+      <div class="overlay">
+        <p>La princesa Mononoke</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterMyNeighborsTheYamadas" src="" alt="poster">
+      <div class="overlay">
+        <p>Mis vecinos los Yamada</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterSpiritedAway" src="" alt="poster">
+      <div class="overlay">
+        <p>El viaje de Chihiro</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterTheCatReturns" src="" alt="poster">
+      <div class="overlay">
+        <p>Haru en el reino de los gatos</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterHowlsMovingCastle" src="" alt="poster">
+      <div class="overlay">
+        <p>El castillo ambulante</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterTalesFromEarthsea" src="" alt="poster">
+      <div class="overlay">
+        <p>Cuentos de Terramar</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterPonyoOnTheCliffByTheSea" src="" alt="poster">
+      <div class="overlay">
+        <p>Ponyo en el acantilado</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterTheSecretWorldOfArrietty" src="" alt="poster">
+      <div class="overlay">
+        <p>Arrietty y el mundo de los diminutos</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterFromUpOnPoppyHill" src="" alt="poster">
+      <div class="overlay">
+        <p>La colina de las amapolas</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterTheWindRises" src="" alt="poster">
+      <div class="overlay">
+        <p>El viento se levanta</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterTheTaleOfThePrincessKaguya" src="" alt="poster">
+      <div class="overlay">
+        <p>El cuento de la princesa Kaguya</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <img class="img-normalizada" id="posterWhenMarnieWasThere" src="" alt="poster">
+      <div class="overlay">
+        <p>El recuerdo de Marnie</p>
+      </div>
+    </div>
+
+    <div class="overlay">
+    </div>
+    <br>
+    <br>
+  </div>
+  <div class="mas-detalles">
+    <br>
+    <p> Sigue las redes sociales oficiales para no perderte ninguna novedad </p>
+    <br>
+    <img onclick="window.location.href='https://www.facebook.com/GhibliUSA'" src="./images-data/facebook.png"
+      alt="facebook" id="facebook">
+    <img onclick="window.location.href='https://www.instagram.com/ghibliusa/'" src="./images-data/instagram.png"
+      alt="instagram" id="instagram">
+    <img onclick="window.location.href='https://twitter.com/JP_GHIBLI'" src="./images-data/twitter.png" alt="twitter"
+      id="twitter">
+    <br>
+    <br>
+
+    <div>
+      <img class="flores" src="./images-data/flores.jpg" alt="flores">
+
+    </div>
+</body>
+
+
+
+
+<footer class="footer">
+  <p>«Dime, ¿cuáles son los límites? Los límites son tres: el cielo, la imaginación y tú misma.»</P>
+  <img src="./images-data/totoroazul.png" alt="">
+  <br>
+  <br>
+</footer>
+<script src="main.js" type="module"></script>
+
+</html>