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
@@ -3,10 +3,57 @@
   <head>
     <meta charset="utf-8">
     <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
+    <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>
-    <script src="main.js" type="module"></script>
+
+<header>
+
+  <div id="boxTotoro">
+  <img id= "totoro"src="dataLoversExt/pngwing.com.png" alt="">
+</div>
+
+<div class="boxBanner">
+  <div><a href="#"><span><img class="icon"src="/dataLoversExt/dos-flecha (1).png"> Top movies</span></a></div>
+  <div><a href="#"><img class="icon"src="/dataLoversExt/filtrar.png">Characters</a></div>
+  </div>
+  </div>
+</header>
+
+<main>
+
+</main>
+    <!-- <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>
+<footer>
+<p id="footer">Universo Ghibli©</p>
+</footer> -->
+
+<div class="cuadricula" id="grid"></div>    
+<script src="main.js" type="module"></script>
+
   </body>
 </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,192 @@
+
+/* voy a experimentar utilizando flexbox en el layout */
+
+#boxTotoro {
+  display: flex;
+  justify-content: center;
+
+
+}
+ #totoro {
+  display: flex;
+   }
+
+.boxBanner{
+  display:flex;
+  background-color: yellow;
+  justify-content: space-between;
+
+}
+.icon{
+  width: 3em;
+  height:3em;
+  justify-content: center;
+
+}
+ a{
+  text-decoration: none;
+  justify-content: center;
+  }
+  #grid {
+    height: 100px; 
+    display: grid;
+    grid-template-areas: "a a a ";
+    grid-gap: 50px;
+    grid-auto-columns: 200px;
+    justify-content: center;
+  }
+
+  #grid > div {
+    background-color: lime;
+  }
+  .posterStyle {
+    width: 200px;
+    height: 284px;
+  }
+
+
+/* * {
+    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; */
+ */