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/Castle in the Sky.html b/src/Castle in the Sky.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>El castillo en el cielo</title>
+  <link rel="stylesheet" href="styleFilms.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> <!-- Sección de encabezado/barra de navegación  -->
+    <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"> <!-- Sección de la película -->
+
+    <h1 id="tituloPelicula" class="tituloPelicula"></h1>
+
+    <div class="posterDescripcion"> <!-- Inyectamos poster y descripción  -->
+      <img id="posterCastleInTheSky" src="" alt="">
+      <p id="descripcion" class="descripcion"></p>
+    </div>
+    <div class="unaLinea">
+      <h3 class="subtitulo arreglarMargen">Fecha de lanzamiento:</h3>
+      <p id="fechaDeLanzamiento" class="fechaLanzamiento arreglarMargen"></p>
+    </div>
+    <div class="unaLinea">
+      <h3 class="subtitulo arreglarMargen">Puntaje:</h3>
+      <p id="score" class="fechaLanzamiento arreglarMargen"></p>
+    </div>
+
+    <h3 class="subtitulo">Personajes principales:</h3>
+    <div class="personajes">
+      <div class="tarjeta">
+        <img src="" class="personajesPrincipales" id="pazu" alt="">
+        <h4 class="nombrePersonaje" id="nombrePazu"></h4>
+      </div>
+      <div class="espacioPersonajes"></div>
+      <div class="tarjeta">
+        <img src="" class="personajesPrincipales" id="lusheeta" alt="">
+        <h4 class="nombrePersonaje" id="nombreLusheeta"></h4>
+      </div>
+      <div class="espacioPersonajes"></div>
+      <div class="tarjeta">
+        <img src="" class="personajesPrincipales" id="dola" alt="">
+        <h4 class="nombrePersonaje" id="nombreDola"></h4>
+      </div>
+      <div class="espacioPersonajes"></div>
+      <div class="tarjeta">
+        <img src="" class="personajesPrincipales" id="uncle" alt="">
+        <h4 class="nombrePersonaje" id="nombreUncle"></h4>
+      </div>
+      <div class="espacioPersonajes"></div>
+      <div class="tarjeta">
+        <img src="" class="personajesPrincipales" id="louis" alt="">
+        <h4 class="nombrePersonaje" id="nombreLouis"></h4>
+      </div>
+    </div>
+
+    <h3 class="subtitulo">Directores y productores:</h3>
+    <div class="personajes">
+      <div class="tarjeta">
+        <img src="./images-data/hayao-miyazaki.png" class="personajesPrincipales" alt="">
+        <h4 class="nombrePersonaje" id="director"></h4>
+        <p class="texto">Director</p>
+      </div>
+      <div class="espacioPersonajes"></div>
+      <div class="tarjeta">
+        <img src="./images-data/isao-takahata.jpg" class="personajesPrincipales" alt="">
+        <h4 class="nombrePersonaje" id="producer"></h4>
+        <p class="texto">Productor</p>
+      </div>
+      <div class="espacioPersonajes"></div>
+    </div>
+
+    <h3 class="subtitulo">Datos curiosos/premiaciones:</h3>
+    <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>
+  <script src="Castle in the Sky.js" type="module"></script>
+
+</body>
+
+
+</html>
diff --git a/src/Castle in the Sky.js b/src/Castle in the Sky.js
@@ -0,0 +1,64 @@
+// traemos la data y la guardamos en una variable
+import data from './data/ghibli/ghibli.js';
+var listaPeliculas = data.films;
+
+/////////////////////////////////////////// TITULO
+
+const titulo = document.getElementById('tituloPelicula'); // capturamos el id del titulo de la película y lo guardamos en una variable
+titulo.innerHTML = listaPeliculas[0].title; // aquí llamamos el elemento que necesitamos
+
+/////////////////////////////////////////// POSTER
+
+const poster = document.getElementById('posterCastleInTheSky'); 
+poster.src = listaPeliculas[0].poster; 
+
+/////////////////////////////////////////// DESCRIPCION
+
+const descripcion = document.getElementById('descripcion'); 
+descripcion.innerHTML = listaPeliculas[0].description; 
+
+/////////////////////////////////////////// FECHA 
+
+const fechaDeLanzamiento = document.getElementById('fechaDeLanzamiento'); 
+fechaDeLanzamiento.innerHTML = listaPeliculas[0].release_date; 
+
+/////////////////////////////////////////// PUNTAJE
+
+const puntaje = document.getElementById('score'); 
+puntaje.innerHTML = listaPeliculas[0].rt_score; 
+
+/////////////////////////////////////////// PERSONAJES
+
+var personajes = document.getElementById('pazu'); 
+personajes.src = listaPeliculas[0].people[0].img; 
+var personajes = document.getElementById('nombrePazu'); 
+personajes.innerHTML = listaPeliculas[0].people[0].name;
+
+var personajes = document.getElementById('lusheeta'); 
+personajes.src = listaPeliculas[0].people[1].img; 
+var personajes = document.getElementById('nombreLusheeta'); 
+personajes.innerHTML = listaPeliculas[0].people[1].name;
+
+var personajes = document.getElementById('dola'); 
+personajes.src = listaPeliculas[0].people[2].img; 
+var personajes = document.getElementById('nombreDola'); 
+personajes.innerHTML = listaPeliculas[0].people[2].name;
+
+var personajes = document.getElementById('uncle'); 
+personajes.src = listaPeliculas[0].people[4].img; 
+var personajes = document.getElementById('nombreUncle'); 
+personajes.innerHTML = listaPeliculas[0].people[4].name;
+
+var personajes = document.getElementById('louis'); 
+personajes.src = listaPeliculas[0].people[7].img; 
+var personajes = document.getElementById('nombreLouis'); 
+personajes.innerHTML = listaPeliculas[0].people[7].name;
+
+/////////////////////////////////////////// DIRECTOR Y PRODUCTORES
+
+var director = document.getElementById('director'); 
+director.innerHTML = listaPeliculas[0].director; 
+
+var producer = document.getElementById('producer'); 
+producer.innerHTML = listaPeliculas[0].producer;  
+
diff --git a/src/My Neighbor Totoro.html b/src/My Neighbor Totoro.html
diff --git a/src/My Neighbor Totoro.js b/src/My Neighbor Totoro.js
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/hayao-miyazaki.png b/src/images-data/hayao-miyazaki.png
diff --git a/src/images-data/instagram.png b/src/images-data/instagram.png
diff --git a/src/images-data/isao-takahata.jpg b/src/images-data/isao-takahata.jpg
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,108 @@
 <!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> <!-- Sección de encabezado/barra de navegación  -->
+    <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"><!-- Sección de barra de búsqueda -->
+  <div id="barra-de-busqueda">
+    <input type="text" id="searchInput" placeholder="Buscar">
+  </div>
+  <input type="submit" class="boton" id="searchButton" 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"> <!-- Sección de introducción -->
+    <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 id="searchResult">
+  </div>
+
+  <div class="producciones"> <!-- Sección de producciones/películas -->
+      <br>
+    <h1>Producciones</h1>
+    <h3>Haz clic en cada una de las portadas y revive la magia de estas maravillosas animaciones</h3>
+    <br>
+    <label for="">Ordenar por:</label><!-- label permite dar un título o descripción a un campo de formulario -->
+    <!-- agregamos lista despegable para ordenar de A-Z y Z-A, por Año y por puntaje -->
+    <select id="ordenar">
+      <option value="az">Título de A a Z</option>
+      <option value="za">Título de Z a A</option>
+      <option value="año">Año</option>
+      <option value="puntaje">Puntaje</option>
+    </select>
+    <br>
+    <br>
+
+    <!-- Creamos el div "escenario" para guardar todas las peliculas -->
+    <div id="escenario">
+    </div>
+    <!-- Creamos el div "overlay" para poder cubrir las imágenes cuando pasamos el mouse por encima  -->
+    <div class="overlay">
+    </div>
+    <br>
+    <br>
+  </div>
+
+  <div class="mas-detalles"><!-- Sección de más detalles, donde agregamos los enlaces a las redes sociales -->
+    <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">
+  </div>
+  <div>
+    <img class="flores" src="./images-data/flores.jpg" alt="flores">
+  </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>
+  <script src="main.js" type="module"></script> <!-- El enlace a JS va antes del cierre del body-->
+</body>
+
+
+</html>