Añadimos la barra menú, que ya es responsive

Laboratoria · Daynizyvc · Jun 28, 2019 · Jun 28, 2019 · Jun 28, 2019 · Jun 28, 2019
commit c2069dd3850437ca612a26bde873ca6961d52338
diff --git a/images/Pokmon.jpg b/images/Pokmon.jpg
diff --git a/images/allPokemones.jpg b/images/allPokemones.jpg
diff --git a/images/iconColor.png b/images/iconColor.png
diff --git a/images/iconGraph.png b/images/iconGraph.png
diff --git a/images/iconoInicio b/images/iconoInicio
diff --git a/images/imagesOne.png b/images/imagesOne.png
diff --git a/images/pokemones.jpg b/images/pokemones.jpg
diff --git a/src/index.html b/src/index.html
@@ -8,6 +8,7 @@
     <title>Pokemon Start</title>
     <link rel="icon" type="image/jpeg" href="../images/icon.jpg"/>
     <link rel="stylesheet" href="style.css" />
+    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Rajdhani|Shadows+Into+Light&display=swap" rel="stylesheet"> 
 
   </head>
   <body>
@@ -17,11 +18,46 @@
     <header class = "header">
       <figure class ="titulo">
         <a>
-          <img src="../images/titulo.gif">
+          <img src="../images/titulo.gif" width="100%">
         </a>
       </figure>
     </header>
 
+    <nav class = "options">
+      <div class="option-one">
+        <figure class = "home">
+          <a>
+            <img src="../images/iconoInicio" width="40%">
+          </a>
+        </figure>
+      </div>
+
+      <div class = "option-two">
+        <figure class="show-pokemon">
+          <a>
+            <img src="../images/imagesOne.png" width="60%">
+          </a>
+        </figure>
+      </div>
+
+      <div class = "option-three">
+        <figure class = "stadistics">
+          <a>
+            <img src = "../images/iconColor.png"  width = 60%>
+          </a>
+        </figure>
+      </div>
+    </nav>
+
+    <section class="information">
+      <div>
+
+      </div>
+      <div>
+
+      </div>
+    </section>
+
    <section class = "all-Pokemon" id="all-Pokemon">
 
    </section>

diff --git a/src/main.js b/src/main.js
@@ -6,7 +6,7 @@ const mostrarData = () => {
         pokeCard += 
 
         `<div class = "box-Pokemon">
-            <div class = "img">
+            <div class = "img-P">
                 <img class = "poke-img" src = "${element.img}"/>
             </div>
             <div class = "datos">
@@ -22,4 +22,10 @@ const mostrarData = () => {
     });
  allPokemon.innerHTML = pokeCard;
 };
-mostrarData();
+
+mostrarData();
+
+/*let numPokemon = POKEMON.pokemon.type.filter(function(element){
+    return element.lenght < 4;
+});
+console.log(numPokemon);*/
diff --git a/src/style.css b/src/style.css
@@ -1,20 +1,94 @@
 *{
-    background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
+    margin: 0%;
 }
 
+body{
+    padding: 0%;
+}
 .header{
     display: flex;
     justify-content: center;
-    background: white;
+    align-items: center;
+    background:white;
+    margin: 0%;
+    width: 100vw;
+    height: 25vh;
+}
+
+.titulo{
+    display: flex;
+    width: 50%;
+    height: 70%;
+}
+
+.options{
+    width: 100%wv;
+    height: 20%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background:black;
+}
+
+.option-one{
+    width: 30%;    
+    display: flex;
+}
+
+.option-two{
+    width: 20%;    
+    display: flex;
+}
+
+.option-three{
+    width: 20%;
+    display: flex;
 }
 
 .all-Pokemon{
     display: flex;
     flex-wrap: wrap;
+    align-content: space-between;
+    justify-content: space-between;
+    background: red;
+}
+
+.box-Pokemon{
+    width: 20%;
+    justify-content: space-between;
+    background: rgba(247, 247, 111);
+    border: 20px solid #d5fa02; 
+    align-items: center;
+   |padding: 1%;
+    margin: 20px;
+    filter: drop-shadow(5px, 5px, 10px, #444);
 }
 
 .datos{
     display: flex;
-    justify-content: space-around;
+    justify-content: space-around;   
+    margin: auto;
+    align-items: center;
+    border-radius: 15px;
+   }
+
+.img-P{
+    align-self: flex-start;
+    justify-self: flex-start;
+    padding: 10%;
+
+}
+
+.number{
+    font-family: 'Indie Flower', cursive;
+    font-family: 'Rajdhani', sans-serif;
+    font-family: 'Shadows Into Light', cursive;
+    font-size: 3em;
 }
 
+.name{
+    font-family: 'Indie Flower', cursive;
+    font-family: 'Rajdhani', sans-serif;
+    font-family: 'Shadows Into Light', cursive;
+    font-size: 3em;   
+}