From 2f8af05cc24b7956900bcd653b3601ce2fc38368 Mon Sep 17 00:00:00 2001 From: karenFlores Date: Fri, 28 Feb 2020 11:09:45 -0600 Subject: [PATCH 1/9] =?UTF-8?q?dise=C3=B1o=20de=20pagina?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.html | 45 ++++++++++++++ src/style.css | 164 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 209 insertions(+) diff --git a/src/index.html b/src/index.html index 7c800043..2fd16090 100644 --- a/src/index.html +++ b/src/index.html @@ -8,6 +8,51 @@ + +
+
+
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+

Bienvenido Nombre
En esta aplicación podras encontrar
todos los pokemosnes de la región Kanto,
primera generación desde Bulbasaur hasta Mew.

+
+
+
+
+
+ +
+
+
+
+ +
+
+ + + + + + + + +
diff --git a/src/style.css b/src/style.css index e69de29b..1f01ce56 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,164 @@ +.contenedor{ + display: flex; + flex-flow: column nowrap; + width: 1350px; + height: 2500px; + background-image: url(https://i.ibb.co/DQbvRx0/Untitled-5.jpg); + background-size: contain; +} + +.contenedor-inicio{ + width: 1350px; + height: 650px; + background-image: url(https://i.ibb.co/k4cCtVK/fondo-inicio-peque-o.jpg); + background-position: center; + background-attachment: contain; + background-size: contain; + background-repeat: no-repeat; + + display: flex; + flex-flow: column nowrap; +} + +.logo-letras img{ + flex: 1 1 auto; + margin-top: 5px; + margin-left: 430px; + width: 500px; + height: 180px; + align: center; +} + +.boton-pokebola img{ + flex: 1 1 auto; + margin-top: 60px; + margin-left: 595px; + width: 140px; + height: 170px; +} + +.contenido{ + width: 1350px; + height: 2500px; + background-image: url(https://i.ibb.co/DQbvRx0/Untitled-5.jpg); + background-size: contain; +} + +.contenedor-contenido{ + margin-top: 60px; + margin-left: 100px; + background-color: white; + width: 1150px; + height: 2500px; + align: center; + opacity: 0.8; + +} + +.header{ + margin-top: 30px; + margin-left: 100px; + background-color: #5037D4; + width: 1150px; + height: 80px; +} + +.logo-principal{ + align: center; + margin-left: 500px; + width: 160px; + height: 200px; +} +.container-portada{ + margin-top: 20px; + width: 300; + height: 150px; + background-image: url(https://i.ibb.co/vPLZJ16/cabeza-21.png); + background-size:200%; + background-color: white; + + + animation: movimiento 20s infinite linear alternate; +} + +@keyframes movimiento { + from{ + background-position: left; + + }to{ + background-position: right; + } + +} + +.capa-degradado{ + width: 1000px; + height: 150px; + position: absolute; + background: -webkit-linear-gradient(left, rgba(255,255,255, 4.9), rgba(255,255,255, 0.0)); +} + +.container-details{ + width: 100%; + max-width: 1200px; + position: relative; + margin-left: auto; +} + +.details{ + width: 100%; + max-width: 500px; + position: relative; + top: 20px; +} + +p{ + margin-top: 5px; + margin-left: 50px; + padding-bottom: 30px; + padding-top: 20px; + font-size: 1.5em; + font-family: arial bold; + opacity: 0.99 +} + +.pokemones{ + margin-top: 10px; +} + + + +.cuadrado{ + width: 400px; + height: 60px; + align; left; + background-color: #7FFF00; +} + +.cuadrado-blanco:{ + margin-left: 500px; + width: 100px; + height: 60px; + background-color: white; + + +} + +.cuadrado-1{ + margin-left: 750px; + width: 400px; + height: 60px; + background-color: #7FFF00; +} + + + +.aside{ + width: 300px; + height: 2000px; + align; left: auto; + margin-left: 20px; + margin-top: 50px; + background-color: #5037D4; + opacity: 0.6; +} From 78b0422a7c99df058770a2d0a2e7fef4598b65c1 Mon Sep 17 00:00:00 2001 From: akaren29 Date: Fri, 28 Feb 2020 11:25:59 -0600 Subject: [PATCH 2/9] Ingreso de div --- src/index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/index.html b/src/index.html index 2fd16090..3f550a37 100644 --- a/src/index.html +++ b/src/index.html @@ -18,6 +18,11 @@
+
+

Ingresa tú nombre:

+ + +
From c018044951b2cdf6acaed1e18b05e1073e9e46dc Mon Sep 17 00:00:00 2001 From: akaren29 Date: Mon, 2 Mar 2020 12:36:15 -0600 Subject: [PATCH 3/9] Obtendiendo data de .js --- src/data.js | 2 +- src/main.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/data.js b/src/data.js index 951191c6..b6fbe186 100644 --- a/src/data.js +++ b/src/data.js @@ -1,7 +1,7 @@ // import data from './data/injuries/injuries.js'; // import data from './data/lol/lol.js'; // import data from './data/patient/patient.js'; -// import data from './data/pokemon/pokemon.js'; + import data from './data/pokemon/pokemon.js'; // import data from './data/rickandmorty/rickandmorty.js'; // import data from './data/steam/steam.js'; // import data from './data/steam/worldbank.js'; diff --git a/src/main.js b/src/main.js index 1463fecf..5e6024bd 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,4 @@ -import { example } from './data.js'; + import data from './data/pokemon/pokemon.js'; +console.log(data); -console.log(example); From 1d7003fda278e934f22728dbb02b69ec97f1deb9 Mon Sep 17 00:00:00 2001 From: akaren29 Date: Thu, 5 Mar 2020 08:21:53 -0600 Subject: [PATCH 4/9] =?UTF-8?q?Lista=20funci=C3=B3n=20para=20mostrar=20en?= =?UTF-8?q?=20tarjetas=20a=20los=20Pokemones?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/data.js | 2 + src/index.html | 37 +++++++++------ src/main.js | 36 ++++++++++++++- src/style.css | 120 +++++++++++++++++++++++++++++++++++++++++-------- 4 files changed, 162 insertions(+), 33 deletions(-) diff --git a/src/data.js b/src/data.js index b6fbe186..49825fd9 100644 --- a/src/data.js +++ b/src/data.js @@ -8,6 +8,8 @@ // esta es una función de ejemplo +//Traer nombre + export const example = () => { return 'example'; }; diff --git a/src/index.html b/src/index.html index 3f550a37..68f46632 100644 --- a/src/index.html +++ b/src/index.html @@ -15,15 +15,19 @@
-
-
+
+
+
+
+ +
+
+ + +
-
-

Ingresa tú nombre:

- - -
+
@@ -35,23 +39,27 @@
-

Bienvenido Nombre
En esta aplicación podras encontrar
todos los pokemosnes de la región Kanto,
primera generación desde Bulbasaur hasta Mew.

+
+

En esta aplicación podras encontrar
todos los pokémones de la región Kanto,
primera generación desde Bulbasaur hasta Mew.

+
+

Pokémones
+
-
+ +
+
- -
- + @@ -60,5 +68,8 @@
+ + + - + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 5e6024bd..20398a2d 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,36 @@ - import data from './data/pokemon/pokemon.js'; -console.log(data); + import POKEMON from './data/pokemon/pokemon.js'; + //console.log(POKEMON.pokemon); + // funcion traer nombre +let obtenerNombre = name => { + let nameresult = document.getElementById('namecontent').value; + if (nameresult.length > 0){ + document.getElementById('paginaContenedorNombre').innerText=('Hola ' + nameresult + ' Bienvenid@'); + } +} +let botonacceder = document.getElementById('acceder'); +botonacceder.addEventListener('click', obtenerNombre); + +//Funcion traer pokemones a pagina contenedor + const data = POKEMON.pokemon; + const template = (list) => { + let templateListPokemon= ''; + list.forEach((data) => { + const card = ` +
+
+ +

${data.num}

+
+

${data.name}

+
${data.type}
+
+
+
+ `; + templateListPokemon += card; + }); + document.getElementById('container-cards').innerHTML = templateListPokemon + }; + template(data); \ No newline at end of file diff --git a/src/style.css b/src/style.css index 1f01ce56..3bd69691 100644 --- a/src/style.css +++ b/src/style.css @@ -22,16 +22,26 @@ .logo-letras img{ flex: 1 1 auto; - margin-top: 5px; + margin-top: 0; margin-left: 430px; width: 500px; height: 180px; align: center; } +#namecontent{ + margin-left: 520px; + width: 300px; + height: 40px; + font-size: 20px; + text-align: center; + border-radius: 20px; + +} + .boton-pokebola img{ flex: 1 1 auto; - margin-top: 60px; + margin-top: 15px; margin-left: 595px; width: 140px; height: 170px; @@ -45,7 +55,7 @@ } .contenedor-contenido{ - margin-top: 60px; + margin-top: 80px; margin-left: 100px; background-color: white; width: 1150px; @@ -55,6 +65,16 @@ } +#paginaContenedorNombre{ + margin-top: 40px; + margin-left: 50px; + padding-top: 20px; + text-align: center; + font-family: arial black; + font-size: 25px; + opacity: 0.99; +} + .header{ margin-top: 30px; margin-left: 100px; @@ -70,9 +90,9 @@ height: 200px; } .container-portada{ - margin-top: 20px; + margin-top: 30px; width: 300; - height: 150px; + height: 180px; background-image: url(https://i.ibb.co/vPLZJ16/cabeza-21.png); background-size:200%; background-color: white; @@ -92,10 +112,11 @@ } .capa-degradado{ + margin-left: 70px; width: 1000px; - height: 150px; + height: 180px; position: absolute; - background: -webkit-linear-gradient(left, rgba(255,255,255, 4.9), rgba(255,255,255, 0.0)); + background: -webkit-linear-gradient(left, rgba(255,255,255, 0.0), rgba(255,255,255, 4.9), rgba(255,255,255, 0.0)); } .container-details{ @@ -117,8 +138,9 @@ p{ margin-left: 50px; padding-bottom: 30px; padding-top: 20px; - font-size: 1.5em; - font-family: arial bold; + text-align: center; + font-family: arial; + font-size:25px; opacity: 0.99 } @@ -129,24 +151,36 @@ p{ .cuadrado{ - width: 400px; + margin-top: 30px; + width: 350px; height: 60px; align; left; background-color: #7FFF00; } -.cuadrado-blanco:{ - margin-left: 500px; - width: 100px; - height: 60px; - background-color: white; +.pokemones p{ + margin-right: 40px; + margin-top: -90px; + font-size: 50px; + text-align: center; + font-family: arial black; + text-shadow: 2px 0px 0px #0090FF, + 0px 2px 0px #0090FF, + -2px 0px 0px #0090FF, + 0px -2px 0px #0090FF; +} + +.pokemones a{ + text-decoration: none } + .cuadrado-1{ - margin-left: 750px; - width: 400px; + margin-top: -140px; + margin-left: 800px; + width: 350px; height: 60px; background-color: #7FFF00; } @@ -154,11 +188,61 @@ p{ .aside{ - width: 300px; + display: inline-flex; + width: 250px; height: 2000px; align; left: auto; margin-left: 20px; margin-top: 50px; background-color: #5037D4; opacity: 0.6; + border-radius: 30px; } + +.container-cards{ + display: inline-flex; + width:870px; + height:2000px; +} + +.card-link{ + margin: 10px 20px 5px 20px; +} +.card-link:hover .pos-title{ + transition: color 0.3 ease; + color: rgb(154,205,50); +} +.card-link:hover .post-image{ + transition:opacity 0.3s ease; + opacity: 0.9; +} +.blog-card{ + height: 150px; + width: 150px; + background-color: #ffffff; + border-radius: 10px; + box-shadow: 0 4px 20px rgba(0,0,0,0.16); + color:rgb(0,0,205); + float: left; + font-size: 21px; + text-align: center; + margin-bottom: 15px; + display: grid; + align-content: center; + padding: 30px 20px 40px 20px; +} +.blog-card { + height: 135px; + width: 145px; + background-color: #ffffff; + border-radius: 10px; + box-shadow: 0 4px 20px rgba(0,0,0,0.16); + color: #2B4D86; + float: left; + font-size: 21px; + text-align: center; + margin-bottom: 15px; + display: grid; + align-content: center; + padding: 30px 20px 40px 20px; +} \ No newline at end of file From bb7dfa2e6973e91508027944410735b4dde4a91b Mon Sep 17 00:00:00 2001 From: akaren29 Date: Thu, 5 Mar 2020 08:28:11 -0600 Subject: [PATCH 5/9] test --- src/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 20398a2d..e26b6a9b 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,5 @@ import POKEMON from './data/pokemon/pokemon.js'; - //console.log(POKEMON.pokemon); + console.log(POKEMON.pokemon); // funcion traer nombre let obtenerNombre = name => { From c602afe970901d678f77e3aac3930803704afe51 Mon Sep 17 00:00:00 2001 From: akaren29 Date: Fri, 6 Mar 2020 13:33:00 -0600 Subject: [PATCH 6/9] Cambios en divs --- src/index.html | 7 +++++-- src/main.js | 2 +- src/style.css | 38 +++++++++++++++++++++++++------------- 3 files changed, 31 insertions(+), 16 deletions(-) diff --git a/src/index.html b/src/index.html index 68f46632..66f16b93 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,8 @@ Data Lovers - + @@ -52,7 +53,9 @@
-
+
+
+
diff --git a/src/main.js b/src/main.js index e26b6a9b..c38c5f23 100644 --- a/src/main.js +++ b/src/main.js @@ -19,7 +19,7 @@ botonacceder.addEventListener('click', obtenerNombre); list.forEach((data) => { const card = `
-
+

${data.num}

diff --git a/src/style.css b/src/style.css index 3bd69691..fb8adb69 100644 --- a/src/style.css +++ b/src/style.css @@ -1,10 +1,15 @@ +html{ + background-image: url(https://i.ibb.co/DQbvRx0/Untitled-5.jpg); + background-size: contain; + background-repeat: repeat-y; +} + .contenedor{ display: flex; flex-flow: column nowrap; width: 1350px; height: 2500px; - background-image: url(https://i.ibb.co/DQbvRx0/Untitled-5.jpg); - background-size: contain; + } .contenedor-inicio{ @@ -50,8 +55,6 @@ .contenido{ width: 1350px; height: 2500px; - background-image: url(https://i.ibb.co/DQbvRx0/Untitled-5.jpg); - background-size: contain; } .contenedor-contenido{ @@ -191,7 +194,6 @@ p{ display: inline-flex; width: 250px; height: 2000px; - align; left: auto; margin-left: 20px; margin-top: 50px; background-color: #5037D4; @@ -199,11 +201,12 @@ p{ border-radius: 30px; } -.container-cards{ +/*.container-cards, .card-link{ display: inline-flex; width:870px; height:2000px; -} + margin: 10px 20px 5px 20px; +}*/ .card-link{ margin: 10px 20px 5px 20px; @@ -216,21 +219,30 @@ p{ transition:opacity 0.3s ease; opacity: 0.9; } -.blog-card{ - height: 150px; - width: 150px; - background-color: #ffffff; +#container-principal-cards{ + display: inline-block; + width:500px; + background-color: pink; + flex-direction: column; +} +.container-cards{ + display:flex; +} +/* .container-cards{ + /*height: 150px; + width: 150px;*/ + /* margin: 10px 20px 5px 20px border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.16); color:rgb(0,0,205); - float: left; font-size: 21px; text-align: center; margin-bottom: 15px; display: grid; + grid-template-columns: 100px 100px 100px 100px; align-content: center; padding: 30px 20px 40px 20px; -} +} */ .blog-card { height: 135px; width: 145px; From 25a5e9efedcb4c1678053d3bd4973424947c2cce Mon Sep 17 00:00:00 2001 From: akaren29 Date: Sat, 7 Mar 2020 23:13:32 -0600 Subject: [PATCH 7/9] Se alineo los pokemones y se agrego option para ordenar --- src/index.html | 33 +++++++++++++------- src/main.js | 4 +-- src/style.css | 85 ++++++++++++++++++++++++-------------------------- 3 files changed, 64 insertions(+), 58 deletions(-) diff --git a/src/index.html b/src/index.html index 66f16b93..204d681a 100644 --- a/src/index.html +++ b/src/index.html @@ -31,7 +31,7 @@
-
+
@@ -48,22 +48,33 @@

Pokémones
-
+
- -
- -
-
-
- -
+
+
+
+ +
+
+ +
+
+
+
- + + +
diff --git a/src/main.js b/src/main.js index c38c5f23..e74f0e70 100644 --- a/src/main.js +++ b/src/main.js @@ -19,7 +19,7 @@ botonacceder.addEventListener('click', obtenerNombre); list.forEach((data) => { const card = `
-
+

${data.num}

@@ -31,6 +31,6 @@ botonacceder.addEventListener('click', obtenerNombre); `; templateListPokemon += card; }); - document.getElementById('container-cards').innerHTML = templateListPokemon + document.getElementById('container-cards-pokemon').innerHTML = templateListPokemon }; template(data); \ No newline at end of file diff --git a/src/style.css b/src/style.css index fb8adb69..11f3e194 100644 --- a/src/style.css +++ b/src/style.css @@ -54,7 +54,7 @@ html{ .contenido{ width: 1350px; - height: 2500px; + height: 2500px; } .contenedor-contenido{ @@ -65,8 +65,7 @@ html{ height: 2500px; align: center; opacity: 0.8; - -} + } #paginaContenedorNombre{ margin-top: 40px; @@ -188,28 +187,25 @@ p{ background-color: #7FFF00; } - - .aside{ display: inline-flex; - width: 250px; + width: 200px; height: 2000px; - margin-left: 20px; + margin-left: 10px; margin-top: 50px; background-color: #5037D4; opacity: 0.6; border-radius: 30px; } - -/*.container-cards, .card-link{ - display: inline-flex; - width:870px; - height:2000px; - margin: 10px 20px 5px 20px; -}*/ - +#ListadePokemones{ + display:inline-flex; + width: 1350px; + height: 2500px; +} .card-link{ - margin: 10px 20px 5px 20px; + margin: 10px 20px 10px 20px; + display:flex; + width:30px; } .card-link:hover .pos-title{ transition: color 0.3 ease; @@ -219,42 +215,41 @@ p{ transition:opacity 0.3s ease; opacity: 0.9; } -#container-principal-cards{ - display: inline-block; - width:500px; - background-color: pink; - flex-direction: column; -} + +.container-cards-pokemon{/*Padre div de la lista de pokemones*/ + display:grid; + grid-template-columns: 200px 200px 200px 200px; + margin-top: 40px; + margin-left: 40px; + grid-gap:30px; /*Indica el espacion entre lìneas*/ + width: 800px; +} .container-cards{ - display:flex; -} -/* .container-cards{ - /*height: 150px; - width: 150px;*/ - /* margin: 10px 20px 5px 20px + background-color: #ffffff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.16); color:rgb(0,0,205); + float: left; font-size: 21px; text-align: center; margin-bottom: 15px; display: grid; - grid-template-columns: 100px 100px 100px 100px; + grid-gap:30px; align-content: center; padding: 30px 20px 40px 20px; -} */ -.blog-card { - height: 135px; - width: 145px; - background-color: #ffffff; - border-radius: 10px; - box-shadow: 0 4px 20px rgba(0,0,0,0.16); - color: #2B4D86; - float: left; - font-size: 21px; - text-align: center; - margin-bottom: 15px; - display: grid; - align-content: center; - padding: 30px 20px 40px 20px; -} \ No newline at end of file +} +#orderPokemon{ + overflow: hidden; + text-align: center; + margin: 120px auto; + background: red; + border: none; + border-radius: 12px; + color: #ffffff; + margin-bottom: 10px; + align-content: center; + font-size: 18px; +} + #orderPokemon:hover{ + background: rgb(35,95,190); + } \ No newline at end of file From 9abe98507e59ae2567138a9f6e3fdb44a152c844 Mon Sep 17 00:00:00 2001 From: akaren29 Date: Wed, 11 Mar 2020 09:50:57 -0600 Subject: [PATCH 8/9] =?UTF-8?q?Se=20implemento=20funci=C3=B3n=20ordenar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/data.js | 50 +++++-- src/index.html | 24 ++-- src/main.js | 77 ++++++---- src/style.css | 373 ++++++++++++++++++++++++++++++++++++++++--------- 4 files changed, 403 insertions(+), 121 deletions(-) diff --git a/src/data.js b/src/data.js index 49825fd9..973b0f70 100644 --- a/src/data.js +++ b/src/data.js @@ -1,15 +1,39 @@ -// import data from './data/injuries/injuries.js'; -// import data from './data/lol/lol.js'; -// import data from './data/patient/patient.js'; - import data from './data/pokemon/pokemon.js'; -// import data from './data/rickandmorty/rickandmorty.js'; -// import data from './data/steam/steam.js'; -// import data from './data/steam/worldbank.js'; -// esta es una función de ejemplo + const sortData = (data, sortBy, sortOrder) => { + let arrOrder = []; + /*Ordenar Alfabeticamente*/ + if (sortBy === 'name'){ + if (sortOrder === 'A-Z'){ + arrOrder = data.sort(function(abc,bcd){ + if (abc.name > bcd.name) return 1; + if (abc.name === bcd.name) return 0; + return -1; + }); + }else{ + arrOrder = data.sort(function (abc, bcd){ + if (bcd.name > abc.name) return 1; + if (bcd.name === abc.name) return 0; + return -1; + }); + } + /*Ordenar por número*/ + } else if (sortBy === 'number'){ + if (sortOrder === 'asc'){ + arrOrder = data.sort(function (abc, bcd){ + if(abc.num > bcd.num) return 1; + if(abc.num === bcd.num) return 0; + return -1; + }); + }else { + arrOrder = data.sort(function(abc, bcd){ + if (bcd.num > abc.num) return 1; + if (bcd.num === abc.num) return 0; + return -1; + }); + } + } + return arrOrder; + }; -//Traer nombre - -export const example = () => { - return 'example'; -}; + +export default sortData \ No newline at end of file diff --git a/src/index.html b/src/index.html index 204d681a..c7cbb9a7 100644 --- a/src/index.html +++ b/src/index.html @@ -31,7 +31,7 @@
-
+
@@ -48,10 +48,9 @@

Pokémones
-
- +
-
+
+
+
- +
- + - - + +
@@ -81,9 +80,8 @@
- - - + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index e74f0e70..1097b708 100644 --- a/src/main.js +++ b/src/main.js @@ -1,36 +1,55 @@ - import POKEMON from './data/pokemon/pokemon.js'; - console.log(POKEMON.pokemon); +import data from './data/pokemon/pokemon.js'; +import sorData from './data.js'; +//console.log(data.pokemon); - // funcion traer nombre +// funcion traer nombre let obtenerNombre = name => { - let nameresult = document.getElementById('namecontent').value; - if (nameresult.length > 0){ - document.getElementById('paginaContenedorNombre').innerText=('Hola ' + nameresult + ' Bienvenid@'); - } + let nameresult = document.getElementById('namecontent').value; + if (nameresult.length > 0){ + document.getElementById('paginaContenedorNombre').innerText=('Hola ' + nameresult + ' Bienvenid@'); + } } let botonacceder = document.getElementById('acceder'); -botonacceder.addEventListener('click', obtenerNombre); +botonacceder.addEventListener('click', obtenerNombre); //Funcion traer pokemones a pagina contenedor - const data = POKEMON.pokemon; - const template = (list) => { - let templateListPokemon= ''; - list.forEach((data) => { - const card = ` -
-
- -

${data.num}

-
-

${data.name}

-
${data.type}
-
-
-
- `; - templateListPokemon += card; - }); - document.getElementById('container-cards-pokemon').innerHTML = templateListPokemon - }; - template(data); \ No newline at end of file +const pokemones = data.pokemon; +const template = () => { + let templateListPokemon= ''; + pokemones.forEach((pokemon) => { + const card = ` +
+
+
+
+
+

${pokemon.num}

+

${pokemon.name}

+
Tipo: ${pokemon.type}
+
+
+
+ `; + templateListPokemon += card; + }); + document.getElementById('container-cards-pokemon').innerHTML = templateListPokemon +}; +template(pokemones); + + + //Función para ordenar a los pokemones + document.getElementById('orderPokemon').addEventListener( 'click', (event) =>{ + const selectedIndex = event.currentTarget.selectedIndex; + if (selectedIndex === 1){ + template(sorData(pokemones, 'name', 'A-Z')); + }else if (selectedIndex === 2){ + template(sorData(pokemones, 'name', 'Z-A')); + }else if (selectedIndex === 3){ + template(sorData(pokemones, 'number', 'asc')); + }else if(selectedIndex === 4){ + template(sorData(pokemones, 'number', 'des')); + } + }); + + \ No newline at end of file diff --git a/src/style.css b/src/style.css index 11f3e194..a99f4a09 100644 --- a/src/style.css +++ b/src/style.css @@ -2,18 +2,23 @@ html{ background-image: url(https://i.ibb.co/DQbvRx0/Untitled-5.jpg); background-size: contain; background-repeat: repeat-y; + } + .contenedor{ display: flex; flex-flow: column nowrap; - width: 1350px; + width: 100%; + max-width: 1350px; height: 2500px; - + + } .contenedor-inicio{ - width: 1350px; + width: 100%; + max-width: 1350px; height: 650px; background-image: url(https://i.ibb.co/k4cCtVK/fondo-inicio-peque-o.jpg); background-position: center; @@ -29,14 +34,17 @@ html{ flex: 1 1 auto; margin-top: 0; margin-left: 430px; - width: 500px; - height: 180px; + width: 80%; + max-width: 500px; + height: 90%; + max-height: 180px; align: center; } #namecontent{ margin-left: 520px; - width: 300px; + width: 100%; + max-width: 300px; height: 40px; font-size: 20px; text-align: center; @@ -45,7 +53,7 @@ html{ } .boton-pokebola img{ - flex: 1 1 auto; + flex: 1 2 auto; margin-top: 15px; margin-left: 595px; width: 140px; @@ -53,19 +61,22 @@ html{ } .contenido{ - width: 1350px; - height: 2500px; + width: 100%; + max-width: 1350px; + max-height: 2500px; } .contenedor-contenido{ margin-top: 80px; margin-left: 100px; background-color: white; - width: 1150px; - height: 2500px; + width: 100%; + max-width: 1150px; + max-height: 2500px; align: center; opacity: 0.8; - } + +} #paginaContenedorNombre{ margin-top: 40px; @@ -77,6 +88,10 @@ html{ opacity: 0.99; } +input#show:checked ~ div#content { + display:block; +} + .header{ margin-top: 30px; margin-left: 100px; @@ -88,13 +103,15 @@ html{ .logo-principal{ align: center; margin-left: 500px; - width: 160px; - height: 200px; + width: 100%; + max-width: 160px; + max-height: 200px; } .container-portada{ margin-top: 30px; - width: 300; - height: 180px; + width: 100%; + max-width: 300; + max-height: 180px; background-image: url(https://i.ibb.co/vPLZJ16/cabeza-21.png); background-size:200%; background-color: white; @@ -121,6 +138,7 @@ html{ background: -webkit-linear-gradient(left, rgba(255,255,255, 0.0), rgba(255,255,255, 4.9), rgba(255,255,255, 0.0)); } + .container-details{ width: 100%; max-width: 1200px; @@ -154,9 +172,10 @@ p{ .cuadrado{ margin-top: 30px; - width: 350px; + width: 90%; + max-width: 350px; height: 60px; - align; left; + align: left; background-color: #7FFF00; } @@ -179,77 +198,299 @@ p{ } + .cuadrado-1{ margin-top: -140px; margin-left: 800px; - width: 350px; + width: 90%; + max-width: 350px; height: 60px; background-color: #7FFF00; } -.aside{ - display: inline-flex; - width: 200px; - height: 2000px; - margin-left: 10px; - margin-top: 50px; - background-color: #5037D4; - opacity: 0.6; - border-radius: 30px; + + +//* diseño de tarjeta */ +article { + display:inline-flex; + width: 80%; + height: 80vw; + box-sizing: border-box; + background-color: green; +} + +.container-cards{ + flex-direction: row; + margin: 10px; +} + + +.container-botones{ + width: 20vw; + height: } + + + #ListadePokemones{ display:inline-flex; - width: 1350px; - height: 2500px; + width: 100%; + height: 100%; + background-color: white; } + .card-link{ - margin: 10px 20px 10px 20px; + margin: 10px; display:flex; - width:30px; -} -.card-link:hover .pos-title{ - transition: color 0.3 ease; - color: rgb(154,205,50); -} -.card-link:hover .post-image{ - transition:opacity 0.3s ease; - opacity: 0.9; } .container-cards-pokemon{/*Padre div de la lista de pokemones*/ display:grid; - grid-template-columns: 200px 200px 200px 200px; - margin-top: 40px; - margin-left: 40px; - grid-gap:30px; /*Indica el espacion entre lìneas*/ - width: 800px; -} + grid-template-columns: 190px 190px 190px 190px; + width: 100%; + margin: 30px 20px 20px 15px; + grid-gap:25px; /*Indica el espacion entre lìneas*/ + background-color: white; +} + .container-cards{ - background-color: #ffffff; - border-radius: 10px; - box-shadow: 0 4px 20px rgba(0,0,0,0.16); - color:rgb(0,0,205); - float: left; - font-size: 21px; - text-align: center; - margin-bottom: 15px; - display: grid; - grid-gap:30px; - align-content: center; - padding: 30px 20px 40px 20px; -} + display: grid; + margin: 10px; + padding: 10px; + width: 100%; + align-content: center; + background-color: white; + background: -webkit-linear-gradient(bottom, rgba(145,219,202, 1.9), rgba(255,255,255, 0.0)); + border: 5px solid #5037D4; + border-radius: 15px; + box-shadow: 0 10px 20px rgba(0,0,0,0.35); + +} + +.container-cards:hover { +-webkit-transform:scale(1.25); +-moz-transform:scale(1.25); +-ms-transform:scale(1.25); +-o-transform:scale(1.25); +transform:scale(1.25); +border: 5px solid #7FFF00; +} + +.cuadro-dentro{ + width: 11vw; + height: 17vw; + align.content: center; + background-color: white; + border-radius: 15px; + align.content: center + +} + +.contimg{ + margin: 4px 10px 5px 16px; + width: 100%; + height: 8vw; +} + +.article-details{ + width: 11vw; + height: 7vw; + border-radius:7px; + align-content: center + +} +.cards .img{ + width: 100%; + opacity: 100% +} + +.cuadro-dentro .nombre{ + margin-top: -27px; + font-size: 22px; + text-align: center; + font-family: arial black; + text-shadow: 2px 0px 0px #98C934, + 0px 2px 0px #98C934, + -2px 0px 0px #98C934, + 0px -2px 0px #98C934; +} + + +.cuadro-dentro .num{ + margin-left: 5px; + margin-bottom: 25px; + font-size: 16px; + text-align: center; + font-family: arial black; + opacity: 0.9; + +} +.tipo { + margin-top: -33px; + padding: 2px; + text-align: center; + font-size: 16px; + font-family: arial black; +} + + +aside{ + display: inline-flex; + width:25%; + height: 1000px; + margin-left: 20px; + margin-top: 50px; + background-color: #5037D4; + opacity: 0.6; + border-radius: 30px; +} + + + #orderPokemon{ - overflow: hidden; + height: 35px; text-align: center; - margin: 120px auto; - background: red; + margin: 90px 10px 25px 10px; + background: #FF0D40; border: none; - border-radius: 12px; + border-radius: 15px; color: #ffffff; margin-bottom: 10px; - align-content: center; + font-family: arial black; font-size: 18px; + text-align:center; } #orderPokemon:hover{ - background: rgb(35,95,190); - } \ No newline at end of file + background: #FFA30D + + } + #orderPokemon:hover { + -webkit-transform:scale(1.25); + -moz-transform:scale(1.25); + -ms-transform:scale(1.25); + -o-transform:scale(1.25); + transform:scale(1.25); + } + + + + + #hierva{ + margin-top: -18px; + margin-left: 28px; + width: 25px; + background-color: #98C934; + font-family: arial black; + font-size: 6px; + text-align: center; + border: 2px solid #387013; + border-radius: 4px; + opacity: 0.99; + + + } + + #veneno{ + margin-top: -12px; + margin-left: 58px; + width: 25px; + background-color: #9E6698; + font-family: arial black; + font-size: 6px; + text-align: center; + border: 2px solid #584177; + border-radius: 4px; + opacity: 0.99; + + } + #debilidades p{ + margin-top: 4px; + margin-left: 3px; + font-size: 8px; + font-family: arial black; + } + + #fuego{ + margin-top: -8px; + margin-left: 15px; + width: 27px; + background-color: #EB6530; + font-family: arial black; + font-size: 6px; + text-align: center; + border: 2px solid #D33F29; + border-radius: 4px; + opacity: 0.99; + + } + #volador{ + margin-top: -12px; + margin-left: 50px; + width: 27px; + background-color: #A8A2A6; + font-family: arial black; + font-size: 6px; + text-align: center; + border: 2px solid #463B4D; + border-radius: 4px; + opacity: 0.99; + + } + #hielo{ + margin-top: 2px; + margin-left: 15px; + width: 27px; + background-color: #02AFEB; + font-family: arial black; + font-size: 6px; + text-align: center; + border: 2px solid #143B86; + border-radius: 4px; + opacity: 0.99; + + } + #psiquico{ + margin-top: -12px; + margin-left: 50px; + width: 27px; + background-color: #F50F57; + font-family: arial black; + font-size: 6px; + text-align: center; + border: 2px solid #C50E4E; + border-radius: 4px; + opacity: 0.99; + + } + + + @media scren and (max-width: 700px){ + .contenedor{ + width: 100%; + } + .aside{ + width: 100%; + + } + } + .logo-letras img{ + flex: 1 1 auto; + margin-top: 0; + align-items: center; + width: 80%; + max-width: 500px; + height: 90%; + max-height: 180px; + align: center; + } + + + @media scren and (max-width: 400px){ + .contenedor{ + width: 100%; + } + .aside{ + display: none; + + } + } \ No newline at end of file From 6a623c5254dce880f20f815b6f9b06440192b6a4 Mon Sep 17 00:00:00 2001 From: akaren29 Date: Fri, 13 Mar 2020 13:27:12 -0600 Subject: [PATCH 9/9] Cambios finales --- src/data.js | 85 +++++++++------ src/index.html | 61 ++++++----- src/main.js | 84 ++++++++++++--- src/style.css | 276 +++++++++++++++++++++++++++++++++++++------------ 4 files changed, 369 insertions(+), 137 deletions(-) diff --git a/src/data.js b/src/data.js index 973b0f70..81e7d29a 100644 --- a/src/data.js +++ b/src/data.js @@ -1,39 +1,56 @@ const sortData = (data, sortBy, sortOrder) => { - let arrOrder = []; - /*Ordenar Alfabeticamente*/ - if (sortBy === 'name'){ - if (sortOrder === 'A-Z'){ - arrOrder = data.sort(function(abc,bcd){ - if (abc.name > bcd.name) return 1; - if (abc.name === bcd.name) return 0; - return -1; - }); - }else{ - arrOrder = data.sort(function (abc, bcd){ - if (bcd.name > abc.name) return 1; - if (bcd.name === abc.name) return 0; + let arrOrder = []; + /*Ordenar Alfabeticamente*/ + if (sortBy === 'name'){ + if (sortOrder === 'A-Z'){ + arrOrder = data.sort(function(abc,bcd){ + if (abc.name > bcd.name) return 1; + if (abc.name === bcd.name) return 0; return -1; - }); - } - /*Ordenar por número*/ - } else if (sortBy === 'number'){ - if (sortOrder === 'asc'){ - arrOrder = data.sort(function (abc, bcd){ - if(abc.num > bcd.num) return 1; - if(abc.num === bcd.num) return 0; - return -1; - }); - }else { - arrOrder = data.sort(function(abc, bcd){ - if (bcd.num > abc.num) return 1; - if (bcd.num === abc.num) return 0; - return -1; - }); - } + }); + }else{ + arrOrder = data.sort(function (abc, bcd){ + if (bcd.name > abc.name) return 1; + if (bcd.name === abc.name) return 0; + return -1; + }); + } + /*Ordenar por número*/ + } else if (sortBy === 'number'){ + if (sortOrder === 'asc'){ + arrOrder = data.sort(function (abc, bcd){ + if(abc.num > bcd.num) return 1; + if(abc.num === bcd.num) return 0; + return -1; + }); + }else { + arrOrder = data.sort(function(abc, bcd){ + if (bcd.num > abc.num) return 1; + if (bcd.num === abc.num) return 0; + return -1; + }); + } + } + return arrOrder; + }; + + + + + +//funcion filtrar + +const filterData = (data, condition) => { + let arrType = []; + for (let i = 0; i < data.length; i++) { + for (let x = 0; x < data[i].type.length; x++) { + if (data[i].type[x] === condition) { + arrType.push(data[i]); } - return arrOrder; - }; + } + } + return arrType; +}; - -export default sortData \ No newline at end of file +export {sortData, filterData} \ No newline at end of file diff --git a/src/index.html b/src/index.html index c7cbb9a7..006e37cb 100644 --- a/src/index.html +++ b/src/index.html @@ -2,16 +2,18 @@ - Data Lovers + POKEFAN + +
-
+
@@ -20,7 +22,7 @@
- +
@@ -30,7 +32,7 @@
- +
@@ -51,37 +53,48 @@
-
- -
- - -
- - - - - -
- - - + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 1097b708..1002f4ee 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,6 @@ import data from './data/pokemon/pokemon.js'; -import sorData from './data.js'; -//console.log(data.pokemon); +import {sortData,filterData} from './data.js'; +console.log(data.pokemon); // funcion traer nombre let obtenerNombre = name => { @@ -13,20 +13,21 @@ let botonacceder = document.getElementById('acceder'); botonacceder.addEventListener('click', obtenerNombre); + //Funcion traer pokemones a pagina contenedor const pokemones = data.pokemon; -const template = () => { +const template = (list) => { let templateListPokemon= ''; - pokemones.forEach((pokemon) => { + list.forEach((pokemones) => { const card = `
-
+
-

${pokemon.num}

-

${pokemon.name}

-
Tipo: ${pokemon.type}
+

${pokemones.num}

+

${pokemones.name}

+
Tipo: ${pokemones.type}
@@ -42,14 +43,69 @@ template(pokemones); document.getElementById('orderPokemon').addEventListener( 'click', (event) =>{ const selectedIndex = event.currentTarget.selectedIndex; if (selectedIndex === 1){ - template(sorData(pokemones, 'name', 'A-Z')); + template(sortData(pokemones, 'name', 'A-Z')); }else if (selectedIndex === 2){ - template(sorData(pokemones, 'name', 'Z-A')); + template(sortData(pokemones, 'name', 'Z-A')); }else if (selectedIndex === 3){ - template(sorData(pokemones, 'number', 'asc')); + template(sortData(pokemones, 'number', 'asc')); }else if(selectedIndex === 4){ - template(sorData(pokemones, 'number', 'des')); + template(sortData(pokemones, 'number', 'des')); + } + }); + + + //filtrado por tipo + document.getElementById('typePokemones').addEventListener('change', (event) => { + const selectedIndex = event.currentTarget.selectedIndex; + if (selectedIndex === 1) { + template(filterData(pokemones, 'Water')); + } else if (selectedIndex === 2) { + template(filterData(pokemones, 'Bug')); + } else if (selectedIndex === 3) { + template(filterData(pokemones, 'Dragon')); + console.log((filterData(pokemones, 'Dragon'))) + } else if (selectedIndex === 4) { + template(filterData(pokemones, 'Electric')); + } else if (selectedIndex === 5) { + template(filterData(pokemones, 'Ghost')); + } else if (selectedIndex === 6) { + template(filterData(pokemones, 'Fire')); + } else if (selectedIndex === 7) { + template(filterData(pokemones, 'Ice')); + } else if (selectedIndex === 8) { + template(filterData(pokemones, 'Fighting')); + } else if (selectedIndex === 9) { + template(filterData(pokemones, 'Normal')); + } else if (selectedIndex === 10) { + template(filterData(pokemones, 'Grass')); + } else if (selectedIndex === 11) { + template(filterData(pokemones, 'Psychic')); + } else if (selectedIndex === 12) { + template(filterData(pokemones, 'Rock')); + } else if (selectedIndex === 13) { + template(filterData(pokemones, 'Ground')); + } else if (selectedIndex === 14) { + template(filterData(pokemones, 'Poison')); + } else if (selectedIndex === 15) { + template(filterData(pokemones , 'Flying')); } - }); + }); + + + // se muestra la segunda y desaparece la primera seccion + document.getElementById("acceder").addEventListener('click', () => { + document.getElementById("segunda-seccion").style.display = 'block'; + document.getElementById("header-inicio").style.display = 'none'; + }); + + // se muestra la segunda y desaparece la primera seccion + document.getElementById("verOrder").addEventListener('click', () => { + document.getElementById("segunda-seccion").style.display = 'block'; + document.getElementById("header-inicio").style.display = 'none'; + }); - \ No newline at end of file + // se muestra la segunda y desaparece la primera seccion + document.getElementById("verFiltro").addEventListener('click', () => { + document.getElementById("segunda-seccion").style.display = 'block'; + document.getElementById("header-inicio").style.display = 'none'; + }); \ No newline at end of file diff --git a/src/style.css b/src/style.css index a99f4a09..d57af16b 100644 --- a/src/style.css +++ b/src/style.css @@ -1,22 +1,38 @@ html{ + width: 100vw; background-image: url(https://i.ibb.co/DQbvRx0/Untitled-5.jpg); background-size: contain; background-repeat: repeat-y; } +body{ + width: auto; + height: 100%; + +} .contenedor{ display: flex; flex-flow: column nowrap; width: 100%; - max-width: 1350px; - height: 2500px; + max-width: 1550px; + height: 100%; + margin:auto; + background-size: cover !important; + -webkit-background-size: cover !important; + -moz-background-size: cover !important; + -o-background-size: cover !important; + box-sizing: border-box; } .contenedor-inicio{ + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; width: 100%; max-width: 1350px; height: 650px; @@ -26,24 +42,29 @@ html{ background-size: contain; background-repeat: no-repeat; + display: flex; flex-flow: column nowrap; } .logo-letras img{ - flex: 1 1 auto; - margin-top: 0; - margin-left: 430px; + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; width: 80%; max-width: 500px; - height: 90%; - max-height: 180px; + min-width: 50%; + height: 100%; + max-height: 200px; align: center; } #namecontent{ - margin-left: 520px; - width: 100%; + display: block; + margin-left: auto; + margin-right: auto; + width: 90%; max-width: 300px; height: 40px; font-size: 20px; @@ -53,38 +74,48 @@ html{ } .boton-pokebola img{ - flex: 1 2 auto; - margin-top: 15px; - margin-left: 595px; - width: 140px; - height: 170px; + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; + align: right; + width: 10%; + height: 12%; } .contenido{ + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; width: 100%; max-width: 1350px; max-height: 2500px; } .contenedor-contenido{ - margin-top: 80px; - margin-left: 100px; - background-color: white; + display: block; + padding-top: 9vw; + margin-top: auto; + margin-left: auto; + margin-right: auto; width: 100%; max-width: 1150px; max-height: 2500px; align: center; - opacity: 0.8; + } #paginaContenedorNombre{ - margin-top: 40px; - margin-left: 50px; + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; padding-top: 20px; text-align: center; font-family: arial black; - font-size: 25px; + font-size: 5vh; opacity: 0.99; } @@ -93,28 +124,31 @@ input#show:checked ~ div#content { } .header{ - margin-top: 30px; - margin-left: 100px; + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; background-color: #5037D4; - width: 1150px; - height: 80px; + width: 85.5%; + height: 7vw; } .logo-principal{ - align: center; - margin-left: 500px; - width: 100%; - max-width: 160px; - max-height: 200px; + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; + width: 15%; } .container-portada{ - margin-top: 30px; + display: block; + margin-top: -5%; + margin-left: auto; + margin-right: auto; width: 100%; - max-width: 300; - max-height: 180px; background-image: url(https://i.ibb.co/vPLZJ16/cabeza-21.png); background-size:200%; - background-color: white; + background-repeat: no-repeat; animation: movimiento 20s infinite linear alternate; @@ -131,15 +165,22 @@ input#show:checked ~ div#content { } .capa-degradado{ - margin-left: 70px; - width: 1000px; - height: 180px; + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; + width: 82%; + height: 14.2vw; position: absolute; background: -webkit-linear-gradient(left, rgba(255,255,255, 0.0), rgba(255,255,255, 4.9), rgba(255,255,255, 0.0)); } .container-details{ + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; width: 100%; max-width: 1200px; position: relative; @@ -154,8 +195,10 @@ input#show:checked ~ div#content { } p{ - margin-top: 5px; - margin-left: 50px; + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; padding-bottom: 30px; padding-top: 20px; text-align: center; @@ -165,24 +208,33 @@ p{ } .pokemones{ - margin-top: 10px; + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; } .cuadrado{ + display: block; + margin-top: auto; + margin-left: auto; + margin-right: 100%; margin-top: 30px; width: 90%; max-width: 350px; - height: 60px; + height: 5vw; align: left; background-color: #7FFF00; } .pokemones p{ - margin-right: 40px; - margin-top: -90px; - font-size: 50px; + display: block; + margin-left: auto; + margin-right: auto; + margin-top: -7vw; + font-size: 3.3em; text-align: center; font-family: arial black; text-shadow: 2px 0px 0px #0090FF, @@ -193,6 +245,10 @@ p{ } .pokemones a{ + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; text-decoration: none } @@ -200,11 +256,13 @@ p{ .cuadrado-1{ - margin-top: -140px; - margin-left: 800px; + display: block; + margin-top: -150px; + margin-left: 70%; + margin-right: auto; width: 90%; max-width: 350px; - height: 60px; + height: 5vw; background-color: #7FFF00; } @@ -212,52 +270,78 @@ p{ //* diseño de tarjeta */ article { + position: relative; display:inline-flex; + margin-top: auto; + margin-left: auto; + margin-right: auto; + margin-top: 30px; width: 80%; height: 80vw; box-sizing: border-box; - background-color: green; + background-color: white; } .container-cards{ flex-direction: row; - margin: 10px; + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; + position: relative; } .container-botones{ + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; width: 20vw; - height: } #ListadePokemones{ + position: relative; display:inline-flex; + margin-top: auto; + margin-left: auto; + margin-right: auto; width: 100%; height: 100%; - background-color: white; + background-color: rgba(255,255,255,0.8); } .card-link{ + position: relative; + height: auto; margin: 10px; display:flex; + z-index: auto; } .container-cards-pokemon{/*Padre div de la lista de pokemones*/ display:grid; + align: right ; + position: relative; grid-template-columns: 190px 190px 190px 190px; width: 100%; - margin: 30px 20px 20px 15px; + height: auto; + margin: 30px 20px 20px 7px; grid-gap:25px; /*Indica el espacion entre lìneas*/ - background-color: white; + box-sizing: border-box; } + + .container-cards{ + position: static; display: grid; margin: 10px; - padding: 10px; + padding: 13px; width: 100%; + height: 17vw; align-content: center; background-color: white; background: -webkit-linear-gradient(bottom, rgba(145,219,202, 1.9), rgba(255,255,255, 0.0)); @@ -287,7 +371,12 @@ border: 5px solid #7FFF00; } .contimg{ - margin: 4px 10px 5px 16px; + position: relative; + display: block; + padding-left: 1vw; + margin-top: auto; + margin-left: auto; + margin-right: auto; width: 100%; height: 8vw; } @@ -299,14 +388,23 @@ border: 5px solid #7FFF00; align-content: center } + .cards .img{ + position: absolute; + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; width: 100%; - opacity: 100% + max-width: 20px; } .cuadro-dentro .nombre{ - margin-top: -27px; - font-size: 22px; + display: block; + margin-left: auto; + margin-right: auto; + margin-top: -2vw; + font-size: 1.4em; text-align: center; font-family: arial black; text-shadow: 2px 0px 0px #98C934, @@ -336,18 +434,32 @@ border: 5px solid #7FFF00; aside{ display: inline-flex; - width:25%; + width:22%; height: 1000px; margin-left: 20px; margin-top: 50px; - background-color: #5037D4; + background-color: rgba(80,55,212,0.8); opacity: 0.6; border-radius: 30px; } +aside{ +/* position: fixed; + top:1vw; + float: left;*/ +} + +select option{ + text-align: center; +} #orderPokemon{ + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; + width: 17vw; height: 35px; text-align: center; margin: 90px 10px 25px 10px; @@ -359,19 +471,53 @@ aside{ font-family: arial black; font-size: 18px; text-align:center; + text-shadow: 3px 3px 3px rgba(0,0,0,0.95); + box-shadow: 0 15px 10px rgba(0,0,0,0.45); } #orderPokemon:hover{ background: #FFA30D } #orderPokemon:hover { - -webkit-transform:scale(1.25); - -moz-transform:scale(1.25); - -ms-transform:scale(1.25); - -o-transform:scale(1.25); - transform:scale(1.25); + -webkit-transform:scale(1.3); + -moz-transform:scale(1.3); + -ms-transform:scale(1.3); + -o-transform:scale(1.3); + transform:scale(1.3); } + #typePokemones{ + display: block; + margin-top: auto; + margin-left: auto; + margin-right: auto; + width: 17vw; + height: 35px; + text-align: center; + + background: #FFA30D; + border: none; + border-radius: 15px; + color: #ffffff; + margin-bottom: 10px; + font-family: arial black; + font-size: 18px; + text-align:center; + text-shadow: 3px 3px 3px rgba(0,0,0,0.95); + box-shadow: 0 15px 10px rgba(0,0,0,0.45); + } + #typePokemones:hover{ + background: #FF0D40; + + } + #typePokemones:hover { + -webkit-transform:scale(1.3); + -moz-transform:scale(1.3); + -ms-transform:scale(1.3); + -o-transform:scale(1.3); + transform:scale(1.3); + } +