Laboratoria · PaolaMayte · Aug 17, 2022 · Aug 18, 2022 · Aug 19, 2022 · Aug 19, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/25.png b/src/25.png
diff --git a/src/background.jpeg b/src/background.jpeg
diff --git a/src/card.png b/src/card.png
diff --git a/src/data.js b/src/data.js
@@ -1,4 +1,6 @@
 // estas funciones son de ejemplo
+Layout
+
 
 export const example = () => {
   return 'example';
@@ -7,3 +9,5 @@ export const example = () => {
 export const anotherExample = () => {
   return 'OMG';
 };
+
+main
diff --git a/src/index.html b/src/index.html
@@ -6,7 +6,38 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div id="root"></div>
+    <header>
+      <figure>
+        <img src="pokeverse.png"  width="295" height="265"/>
+      </figure>
+    </header>
+     <div class="pokedex">
+      <img src="pokedex.png" width="1350"  />
+    </div>
+    <nav>
+      <div class="dropdown">
+        <div class="select">
+          <span class="selected">
+           Región 
+          </span>
+          <div class="caret"></div>
+        </div>
+        <ul class="menu">
+        <li>Opcion 1</li>
+        <li>Opcion 1</li>
+      </ul>
+      </div>
+    </nav>
+    <main>
+renderizar-data
+      <div id="root"></div>
+    </main>
+
+
+
+    <div id="main"></div>
+  </main>
+main
     <script src="main.js" type="module"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,51 @@
-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 allData from './data/pokemon/pokemon.js'
+const root = document.getElementById ('root')
+root.classList = 'displayStyle'
+import data from './data/pokemon/pokemon.js'
+const main = document.getElementById ('main')
+main.classList.add('main')
+
+const pokemons= data.pokemon
+// data.pokemon.forEach(element =>{
+// const card = `<div class="card">
+// <img src="25.png">
+// <h3>nombre</h3> 
+// </div>`
+// main.append (card)
+// })
+
+// crear tarjetas para cada pokemon:
+const generadorHTML=(pokemon)=>{
+    const div = document.createElement('div')
+
+    div.classList='card'
+
+    const img = document.createElement('img')
+    img.setAttribute('src',pokemon.img)
+    img.classList= 'pokemon'
+
+    const num = document.createElement('h3')
+    num.textContent = '#' + pokemon.num
+    num.classList='num'
+    div.classList.add('card')
+
+    const img = document.createElement('img')
+    img.setAttribute('src',pokemon.img)
+    img.classList.add('card>img')
+
+    const num = document.createElement('h2')
+    num.textContent = pokemon.num
+    num.classList.add('card>h2')
+
+
+    const name = document.createElement('h3')
+    name.textContent = pokemon.name
+    name.classList.add('card>h3')
+
+    div.append(num,img,name)
+    return div  
+}
+
+pokemons.forEach(onePokemon=>main.appendChild(generadorHTML(onePokemon)))
+//console.log(data.pokemon[i=0].num)
diff --git a/src/pokebola.png b/src/pokebola.png
diff --git a/src/pokedex.png b/src/pokedex.png
diff --git a/src/pokeverse.png b/src/pokeverse.png
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,106 @@
+@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+body{
+    background-image: url(background.jpeg);
+    background-size: cover;
+    background-attachment: fixed;
+    }
+
+header{
+    margin-left: 45px;
+}
+
+.pokedex{
+    position: absolute;
+    top: 120px; 
+}
+
+
+.displayStyle {
+    width: 100%;
+    margin-left: 50px;
+.main {
+    margin-left: 40px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 120px;
+    padding:20px;
+}  
+
+.card {
+  background: linear-gradient(232.63deg, rgba(63, 62, 138, 0.7) -11.97%, rgba(169, 67, 171, 0.7) 100.56%);
+  box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
+  /* background-image: pokebola.png; */
+  width: 200px;
+  height: 250px;
+  border-radius: 5px;
+  text-align: center;
+  -webkit-transform: skew(-25deg);
+  /* -moz-transform: skew(25deg);
+  -o-transform: skew(25deg);  */
+}
+
+.pokemon {
+    -webkit-transform: skew(25deg);
+}
+
+
+
+/* .card {
+
+} 
+.card {
+    margin-left: 40px;
+    width: 200px;
+    height: 300px;
+    border-radius: 40px;
+    box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
+  }
+
+.card >img{
+    width: 100%;
+    padding-top: 30px;  
+}
+
+.card > h2{
+    color: white;
+    font-family: 'Rubik', sans-serif;
+    text-align: left;
+    padding-top: 0px;
+}
+
+.card > h3{
+    color: white;
+    font-family: 'Rubik', sans-serif;
+    text-align: center;
+    padding-top: 10px;  
+}
+
+ /* main {
+display: flex;
+  flex-wrap: wrap;
+  margin: -0.5rem;
+}   */
+
+ h3{
+    -webkit-transform: skew(25deg);
+    color: white;
+    font-family: 'Rubik', sans-serif; 
+} 
+
+.num {
+    text-align: left;
+    padding-left: 18px;
+}
+
+nav {
+    display: flex;
+    position:absolute;
+    margin-left: 750px;
+    margin-top: -130px;
+}
+.selected{
+    font-family: 'Press Start 2P', cursive;
+    color: white;
+}