Laboratoria · ShantalEslava · May 22, 2023 · May 22, 2023 · May 23, 2023
diff --git a/src/images/SolyLuna.jpg b/src/images/SolyLuna.jpg
diff --git a/src/images/astrología.png b/src/images/astrología.png
diff --git a/src/images/lectura-tarot.png b/src/images/lectura-tarot.png
diff --git a/src/images/tarot.png b/src/images/tarot.png
diff --git a/src/images/tarotlogo.png b/src/images/tarotlogo.png
diff --git a/src/images/the-tower.png b/src/images/the-tower.png
diff --git a/src/index.html b/src/index.html
@@ -6,7 +6,83 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
+    <header>
+
+    <img class="tarot"src="images/tarotlogo.png" width="50px" height="50px">
+      <!-- se pone en horizontal con css\-->  
+    <ul > 
+
+        <button class="header_buttons"> Home </button>
+        <button class="header_buttons"> Gallery </button>
+        <button class="header_buttons"> Quick lecture </button>
+    </ul>
+
+
+    <form>
+
+        <input type="search" class="header_search" placeholder="Search card">
+        <input type="submit" class="header_search_go" value="Go!">
+
+    </form>
+
+
+
+  </header>
+
+  <main>
+    <div id="banner">
+      <!--<img src="images/astrología.png">-->
+        <button class="buttonSearch" type="button">Find out more</button>
+    </div>
+    <div id="">
+      <img class=""src="images/sol.png"> <!--Hay que añadirle una clase a las imagenes por si solas ya que si las dejamos como img en el css nos va a alterar todas al tratar de modificarlas-->
+    </div>
+    <div class="containerBody">
+      <div class="card">
+        <figure>
+          <img src="images/tarot.png">
+        </figure>
+        <div class="contentCard">
+          <h3>¿Did you know?</h3>
+          <p>No se sabe con exactitud quien fusionó los Arcanos Mayores con los Menores, pero se cree que surgió de la cultura gitana.</p>
+          <a href="https://es.wikipedia.org/wiki/Tarot_(adivinaci%C3%B3n)">Read more</a>
+          </div>
+      </div>
+      <div class="card">
+        <figure>
+          <img src="images/the-tower.png">
+        </figure>
+        <div class="contentCard">
+          <h3>The meaning</h3>
+          <p>No se sabe con exactitud quien fusionó los Arcanos Mayores con los Menores, pero se cree que surgió de la cultura gitana.</p>
+          <a href="https://www.monografias.com/trabajos34/curso-tarot/curso-tarot">Read more</a>
+          </div>
+      </div>
+      <div class="card">
+        <figure>
+          <img src="images/lectura-tarot.png">
+        </figure>
+        <div class="contentCard">
+          <h3>Learn how to read</h3>
+          <p>No se sabe con exactitud quien fusionó los Arcanos Mayores con los Menores, pero se cree que surgió de la cultura gitana.</p>
+          <a href="https://www.lanacion.com.ar/horoscopo/como-leer-las-cartas-del-tarot-guia-simplificada-nid07102022/#:~:text=El%20tarot%20es%20una%20disciplina,a%20ciertas%20preguntas%20del%20consultante.">Read more</a>
+          </div>
+      </div>
+    </div>
+
+    <div id="">
+      <img src="images/sol.png">
+    </div>
+
+    <div id="banner">
+      <img src="images/astrología.png">
+        <button class="buttonSearch" type="button">Complete gallery</button>
+    </div>
+
     <div id="root"></div>
+  </main>
+    <footer><p>Copyright 2023©</p></footer>
     <script src="main.js" type="module"></script>
+    <script src="data.js" type="module"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1 @@
-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 tarot from './data/tarot/tarot.js';
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,94 @@
+header{
+    height: 5rem;
+    display: inline-flex;
+    width: auto;
+}
+.tarotlogo{
+    width: 50px;
+    height: 50px;
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+    display: flex;
+
+}
+.header_buttons{
+   display: inline-block;
+   border-style: solid;
+   border-color: #550303;
+   background-color: whitesmoke;
+   border-radius: 1rem;
+   font-family: Verdana, Geneva, Tahoma, sans-serif;
+   color: #550303;
+   border-width: 2px;
+width: max-content;
+margin-right: 2rem;
+padding: 5px 15px 5px 15px;
+}
+.header_buttons:hover{
+    color: goldenrod;
+
+}
+header .header_search{
+    display:inline-block;
+    width: 300px;
+    height: 20px;
+    border: none;
+    outline: none;
+    margin-top: 1rem;
+    margin-left: 15rem;
+    border-radius: 2rem;
+}
+header .header_search:hover{
+    box-shadow: 0 1px 7px 0px #120230;
+}
+header .header_search_go{
+    height: 36px;
+    background-color:aliceblue;
+    border: 0 5px 0 0;
+    border-color:#0e0224;
+    font-size: 14px;
+    color:#550303;
+    border-radius: 6px;
+    padding: 0 15px;
+    margin-right: 15px;
+}
+header .header_search_go:hover{
+    box-shadow: 0 1px 10px 0px #0e0224;
+}
+
+.fondo1 {
+    width: 100%;
+    height: 300px;
+    object-fit: cover;
+    object-position: bottom;
+  }
+
+  body{
+    background-color: #0F2E5C;
+  }
+
+.buttonSearch{
+    border-style: solid;
+    border-color: #550303;
+    background-color: whitesmoke;
+    border-radius: 2em;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    color: #550303;
+    border-style:solid;
+    padding: 0.2em;
+    font-size: large;
+    margin-left: 39%;
+
+}
+
+.containerBody{
+    color: whitesmoke;
+    width: 100%;
+    display: flex;
+    max-width: 1100px;
+    margin: auto;
+}
+
+footer{
+    color: whitesmoke;
+}