diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..e69de29b diff --git a/src/25.png b/src/25.png new file mode 100644 index 00000000..ed7d6e88 Binary files /dev/null and b/src/25.png differ diff --git a/src/background.jpeg b/src/background.jpeg new file mode 100644 index 00000000..cd86f1a7 Binary files /dev/null and b/src/background.jpeg differ diff --git a/src/card.png b/src/card.png new file mode 100644 index 00000000..3445446a Binary files /dev/null and b/src/card.png differ diff --git a/src/data.js b/src/data.js index 6291453d..dca28fbc 100644 --- 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 index 5aef81f0..2f113abc 100644 --- a/src/index.html +++ b/src/index.html @@ -6,7 +6,38 @@ -
+
+
+ +
+
+
+ +
+ +
+renderizar-data +
+
+ + + +
+ +main diff --git a/src/main.js b/src/main.js index 71c59f2d..7cf23cf3 100644 --- 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 = `
+// +//

nombre

+//
` +// 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) \ No newline at end of file diff --git a/src/pokebola.png b/src/pokebola.png new file mode 100644 index 00000000..89829487 Binary files /dev/null and b/src/pokebola.png differ diff --git a/src/pokedex.png b/src/pokedex.png new file mode 100644 index 00000000..266178cc Binary files /dev/null and b/src/pokedex.png differ diff --git a/src/pokeverse.png b/src/pokeverse.png new file mode 100644 index 00000000..c27c1993 Binary files /dev/null and b/src/pokeverse.png differ diff --git a/src/style.css b/src/style.css index e69de29b..beb186e5 100644 --- 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; +} \ No newline at end of file