Laboratoria · katalimbu · Feb 2, 2023 · Feb 2, 2023 · Feb 3, 2023 · Feb 7, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/data/ghibli/ghibli.js b/src/data/ghibli/ghibli.js
@@ -1,4 +1,5 @@
-export default {
+
+  const ghibli = {
   "studio": "Studio Ghibli Inc.",
   "films": [
     {
@@ -1865,7 +1866,7 @@ export default {
       "description": "14-year-old Arrietty and the rest of the Clock family live in peaceful anonymity as they make their own home from items 'borrowed' from the house's human inhabitants. However, life changes for the Clocks when a human boy discovers Arrietty.",
       "director": "Hiromasa Yonebayashi",
       "producer": "Toshio Suzuki",
-      "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/4/46/The_Borrower_Arrietty.jpg",
+      "poster": "https://i.ebayimg.com/images/g/SGkAAOSwEChhOVvq/s-l500.jpg",
       "release_date": "2010",
       "rt_score": "95",
       "people": [
@@ -2432,4 +2433,6 @@ export default {
       "vehicles": []
     }
   ]
-}
+  }
+
+export default ghibli;
diff --git a/src/dataLoversExt/Castle_in_the_Sky .png b/src/dataLoversExt/Castle_in_the_Sky .png
diff --git a/src/dataLoversExt/EstadoCuenta.pdf b/src/dataLoversExt/EstadoCuenta.pdf
diff --git a/src/dataLoversExt/Grave_of_the_Fireflies_Japanese_poster.webp b/src/dataLoversExt/Grave_of_the_Fireflies_Japanese_poster.webp
diff --git a/src/dataLoversExt/My_Neighbor_Totoro.png b/src/dataLoversExt/My_Neighbor_Totoro.png
diff --git a/src/dataLoversExt/dos-flecha (1).png b/src/dataLoversExt/dos-flecha (1).png
diff --git a/src/dataLoversExt/filtrar.png b/src/dataLoversExt/filtrar.png
diff --git a/src/dataLoversExt/kiki.png b/src/dataLoversExt/kiki.png
diff --git a/src/dataLoversExt/pngwing.com.png b/src/dataLoversExt/pngwing.com.png
diff --git a/src/dataLoversExt/prototipo de alta.pdf b/src/dataLoversExt/prototipo de alta.pdf
diff --git a/src/imagen totoro/ordenar-alt.png b/src/imagen totoro/ordenar-alt.png
diff --git a/src/imagen totoro/totoro banner .png b/src/imagen totoro/totoro banner .png
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,72 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="UTF-8">
+    <meta name=“viewport” content="width=device-width, initial-scale=1.0">
     <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
+    <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=Cinzel:wght@700&family=Libre+Bodoni:wght@500;700&family=Playfair+Display&display=swap" rel="stylesheet">
   </head>
+
   <body>
-    <div id="root"></div>
+    <header>
+      <div id="boxTotoro">
+        <img id= "totoro"src="dataLoversExt/pngwing.com.png" alt="">
+      </div>
+
+      <div class="boxBanner">
+        <div>
+          <a href="#">
+            <div class="alinear">
+              <img class="icon"src="/dataLoversExt/dos-flecha (1).png" /> 
+              <span class="iconlabel"> Top movies</span>
+            </div>
+          </a>
+        </div>
+
+        <div>
+          <a href="#">
+            <img class="icon"src="/dataLoversExt/filtrar.png">
+            <span class="iconlabel">Characters</span>
+          </a>
+        </div>
+      </div>
+    </header>
+
+    <div class="grid-container" id="grid"></div>    
     <script src="main.js" type="module"></script>
+
+    <footer>
+      <p id="footer">Universo Ghibli©</p>
+    </footer>
+
   </body>
+
+    <!-- <header>
+<p class="title">Explora el mundo de fantasía</p>
+<nav><img id="barnerImg" src="dataLoversExt/pngwing.com.png">
+</nav>
+    </header>
+    <main>
+      <br>
+      <br>
+      <div class="btn">
+        <a href="#"><span> <img id="orderIcon"src="/dataLoversExt/dos-flecha (1).png"> Top movies  </span></a> 
+      </div>
+      <br>
+      <div class="btn2">
+        <a href="#"><span> <img id="orderIcon"src="/dataLoversExt/filtrar.png"> Characters</span></a>
+      </div>
+      <br>
+      <br>
+      <br>
+      <br>
+
+    </main>
+  -->
+
+
+
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,38 @@
-import { example } from './data.js';
-// import data from './data/lol/lol.js';
-import data from './data/pokemon/pokemon.js';
-// import data from './data/rickandmorty/rickandmorty.js';
 
-console.log(example, data);
+import ghibli from './data/ghibli/ghibli.js';
+
+function showTitleImage() {
+  const principal = document.getElementById('grid');
+
+  if (principal) {
+    //este for es para recorrer el array films 
+    //parte en 0 , hasta que se recorra todo el arreglo, el i++ es que recorra uno tras otro
+    for (let i = 0; i < ghibli.films.length; i++) {
+
+      const divColumna = document.createElement('div');
+      const creaDiv = document.createElement('div');
+      const creaimg = document.createElement('img');
+
+      divColumna.setAttribute('class', 'columna');
+
+      creaDiv.innerHTML = ghibli.films[i].title;
+      creaDiv.classList.add("posterTitle");
+
+      // console.log(ghib
+      // console.log(ghibli.films)
+      // console.log(ghibli.films[i])
+      // console.log(ghibli.films[i].title)
+      creaimg.setAttribute('src', ghibli.films[i].poster)
+      creaimg.classList.add("posterStyle");
+      divColumna.appendChild(creaDiv);
+      divColumna.appendChild(creaimg);
+      principal.appendChild(divColumna);
+    }
+
+
+  }
+}
+showTitleImage()
+
+
+// console.log(ghibli);
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,246 @@
+
+/* voy a experimentar utilizando flexbox en el layout */
+*{
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 15px;
+}
+.header{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 100px;
+}
+#boxTotoro {
+  display: flex;
+  justify-content: center;  
+
+}
+#boxTotoro img{
+  width: 1024px;
+  height: 426px;
+  display: flex;
+  justify-content: center;
+}  
+.boxBanner{
+  display:flex;
+  background-color: yellow;
+  justify-content: space-between;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.icon{
+  width: 3em;
+  height:3em;
+  justify-content: center;  
+}
+
+a {
+  text-decoration: none;
+  justify-content: center;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+.posterStyle {
+  width: 200px;
+  height: 284px;
+}
+
+@media screen and (min-width: 300px) {
+  .grid-container {
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-gap: 50px;
+    grid-auto-columns: 200px;
+    justify-content: center;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .grid-container {
+    display: grid;
+    grid-template-columns: auto auto auto;
+    grid-gap: 50px;
+    grid-auto-columns: 200px;
+    justify-content: center;
+  }
+}
+
+@media screen and (min-width: 300px) {
+  #totoro {
+    height: 15rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  #totoro {
+    height: 20rem;
+  }
+}
+@media screen and (min-width: 300px) {
+  .iconlabel {
+    display: none;
+  }
+}
+@media screen and (min-width: 750px) {
+  .iconlabel {
+    display: contents;
+  }
+}
+
+
+
+  /* //hasta la 55 esta comentado y es lo que funciona  */
+
+/* * {
+    box-sizing: border-box;
+
+  }
+
+  .columna {
+    float: left;
+    width: 25%;
+    padding-right: 5px;
+    padding-bottom: 24px;
+  }
+
+  .cuadricula::after {
+    content: "";
+    clear: both;
+    display: flex;
+  }
+
+  .cuadricula {
+  font-family: 'Playfair Display', serif;
+  text-align: center;
+  color:#001858;
+  font-size: 1.4em;
+  }
+
+  .title {
+    font-family:'Libre Bodoni', serif; 
+    font-size: 2.5em;
+    color:#001858;
+    position: relative;
+    top: 3em;
+    text-align: center;
+}
+header {
+  margin-bottom: -4em;
+}
+  #barnerImg {
+    width: 1024px;
+    height: 426px;
+    position: relative;
+    display: relative;
+  }
+
+  @media (min-width: 640px){
+
+     #barnerImg {
+      width: 512px;
+      height: 213px;
+     }
+
+  }
+header,footer {
+  background-color:#f3d2c1;
+}
+footer{
+  color:#001858;
+  font-family:'Libre Bodoni', serif;
+  min-height: 5em;
+  }
+#footer{
+  text-align: center;
+  padding: 2em;
+}
+main {
+  background-color:#fef6e4 ;
+}
+.btn2 {
+
+  top: 50%;
+  left: 90%;
+}
+.btn{
+  top: 50%;
+  left: 10%;
+}
+.btn, .btn2 {
+  padding-top: 1em;
+  padding-bottom: -3em;
+  position:absolute;
+  transform: translate(-50%, -50%);
+}
+
+a{
+  display: block;
+  width: 150px;
+  height: 3em;
+  line-height: 40px;
+  font-size: 15px;
+  font-family: 'Playfair Display', serif; ;
+  text-decoration: none;
+  color:#001858;
+  border: 2px solid #f582ae;
+  letter-spacing: 2px;
+  text-align: center;
+  position: relative;
+  transition: all .35s;
+}
+
+a span{
+  position: relative;
+  z-index: 2;
+}
+
+a:after{
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  background: #f582ae;
+  transition: all .35s;
+}
+
+a:hover{
+  color: #001858;
+}
+
+a:hover:after{
+  width: 100%;
+}
+#orderIcon {
+  width: 25px;
+  height: 25px;
+  margin-bottom: -.5em;
+}
+
+.posterStyle {
+  width: 200px;
+  height: 284px;
+  border: 5px solid #000;
+}
+
+.posterTitle {
+margin-top: 3em;
+padding-bottom:2em;
+}
+
+
+
+
+  /* font-family: 'Cinzel', serif;
+font-family: 'Libre Bodoni', serif;
+font-family: 'Playfair Display', serif; */
+