diff --git a/about.css b/about.css new file mode 100644 index 0000000..a7f7e43 --- /dev/null +++ b/about.css @@ -0,0 +1,212 @@ +* { + margin: 0%; + padding: 0%; +} +body { + background-image: url(./pic/bg.jpg); + background-repeat: no-repeat; + background-size: cover; +} +#container { + width: 100vw; + height: 100vh; +} +#nav { + width: 100%; + height: 25%; + display: flex; + justify-content: space-between; +} +#logo { + width: 60px; + height: 60px; + cursor: pointer; +} +#logoa { + margin-left: 2%; + margin-top: 5%; + width: min-content; + height: min-content; + text-decoration: none; +} +#pokemonlogo { + padding-top: 2%; + padding-left: 4%; +} +#homeabout { + cursor: pointer; + width: min-content; + height: 50%; + font-size: 40px; + color: #ffcb05; + stroke: #395ca6; +} +#homea { + text-decoration: none; + margin-right: 3%; + margin-top: 5%; + width: min-content; + height: min-content; +} + +/* another div */ +#content { + width: 100%; + height: 75%; + display: flex; + flex-direction: row; +} +#left { + width: 65%; + height: 100%; + display: flex; + flex-direction: column; + gap: 30px; + align-items: center; + justify-content: center; +} +#textabout { + width: 60%; + height: 60%; + border-radius: 70px; + background-color: white; +} +#textabout p { + width: 90%; + height: 90%; + font-size: larger; + text-align: center; + line-height: 50px; + padding-top: 6%; + padding-left: 3%; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} +#btn-about { + width: 40%; + height: 10%; + background-color: white; + border-radius: 70px; + border: none; + font-size: larger; + cursor: pointer; +} +#btn-about a { + text-decoration: none; + color: black; +} +#btn-about:hover { + cursor: pointer; + box-shadow: 14px 8px 32px -10px rgba(0, 0, 0, 0.75); + -webkit-box-shadow: 14px 8px 32px -10px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 14px 8px 32px -10px rgba(0, 0, 0, 0.75); + transform: scale(0.9, 0.9); + transition-duration: 0.5s; + transition-timing-function: 1s; + transition-delay: 100ms; +} +#right { + width: 35%; + height: 100%; +} +#ash { + width: 90%; + height: 80%; + position: relative; + top: 20%; +} + +@media (max-width: 767px) { + #homea { + display: none; + } + #pokemonlogo { + width: 200px; + height: 100px; + } + #nav { + display: flex; + justify-content: space-around; + } + #left { + margin: auto; + margin-bottom: 50px; + } + #textabout { + width: 90%; + height: auto; + background-color: rgb(255, 203, 5, 0.7); + color: white; + } + #textabout p { + font-size: medium; + line-height: 40px; + } + #right { + display: none; + } + #btn-about { + margin-bottom: 30px; + background-color: rgb(255, 203, 5, 0.7); + } +} + +@media (min-width: 768px) and (max-width: 991px) { + #pokemonlogo { + display: none; + } + #nav { + display: flex; + justify-content: space-between; + } + #homea { + padding-right: 30px; + } + #pokemonlogo { + padding-left: 40px; + } + #textabout { + width: 70%; + height: 60%; + } + #textabout p { + font-size: medium; + line-height: 40px; + } + #left { + width: 80%; + height: auto; + } + #right { + width: 40%; + } +} +@media (min-width: 992px) and (max-width: 1200px) { + #pokemonlogo { + display: none; + } + #nav { + display: flex; + justify-content: space-between; + } + #homea { + padding-right: 30px; + } + #pokemonlogo { + padding-left: 40px; + } + #textabout { + width: 70%; + height: 45%; + } + #textabout p { + font-size: medium; + line-height: 40px; + } + #left { + width: 60%; + + } + #right { + width: 40%; + } +} diff --git a/about.html b/about.html new file mode 100644 index 0000000..899b47c --- /dev/null +++ b/about.html @@ -0,0 +1,41 @@ + + + + + + + Pokemon + + + + +
+ +
+
+
+

+ Welcome to the world of Pokemon! + We are here to present to you the details of the main characters of the series in a distinctive + manner and full of exciting information. + On this site, you will find everything you need to know about the beloved Pokemon characters. +

+
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/details.css b/details.css new file mode 100644 index 0000000..4ae9e80 --- /dev/null +++ b/details.css @@ -0,0 +1,137 @@ +* { + margin: 0%; + padding: 0%; +} +body { + background-image: url(./pic/bg3.jpg); + background-repeat: no-repeat; + background-size: cover; + /* height: 100vh; + background-color: #407b8b; */ +} +#container { + width: 100%; + height: 100vh; +} +#nav { + /* background-color: aqua; */ + width: 100%; + height: 20%; + display: flex; + justify-content: space-between; + margin-bottom: 5%; +} +#logo { + width: 60px; + height: 60px; + cursor: pointer; +} +#logoa { + margin-left: 2%; + margin-top: 5%; + width: min-content; + height: min-content; + text-decoration: none; +} +#pokemonlogo { + padding-top: 2%; + padding-left: 4%; +} +#homeabout { + cursor: pointer; + width: min-content; + height: 50%; + font-size: 40px; + color: #ffcb05; + stroke: #395ca6; +} +#homea { + text-decoration: none; + margin-right: 3%; + margin-top: 5%; + width: min-content; + height: min-content; +} +#main-container { + width: 80%; + height: 55%; + margin: auto; + display: flex; + justify-content: space-around; +} +#text-container { + /* margin-left: 15%; + margin-top: 5%; */ + background-color: #ecc971; + border-radius: 30px; + position: relative; + width: 50%; + box-shadow: 33px 28px 33px 0px rgba(0, 0, 0, 0.75); + -webkit-box-shadow: 33px 28px 33px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 33px 28px 33px 0px rgba(0, 0, 0, 0.75); +} +#txt-details { + /* border: 1px solid black; */ + width: max-content; + font-size: 30px; + text-align: left; + margin-left: 10%; + margin-top: 5%; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} +#pok-name { + font-weight: bolder; + color: #125063; +} +#img { + position: absolute; + left: 50%; + top: 45%; +} +#img img { + width: 400%; + height: auto; +} +@media (max-width: 767px) { + #text-container { + height: 70%; + width: 90%; + } + #pokemonlogo { + width: 200px; + height: 100px; + display: none; + } + #nav { + display: flex; + justify-content: space-around; + margin-bottom: 30%; + } + #txt-details { + text-align: left; + font-size: 30px; + } + #img-pok { + bottom: 25%; + right: 20%; + } + #img-pok img { + width: 200%; + height: 200%; + } +} +@media (min-width: 768px) and (max-width: 1000px) { + #txt-details { + text-align: left; + font-size: 30px; + line-height: 50px; + } + #img-pok { + bottom: 10%; + right: 6%; + } + #img-pok img { + width: 100%; + height: 100%; + } +} diff --git a/details.html b/details.html new file mode 100644 index 0000000..495b552 --- /dev/null +++ b/details.html @@ -0,0 +1,46 @@ + + + + + + + Details + + + + +
+ + +
+
+
+
+

+
+
+

types:

+

Abilities:

+

stats:

+

height:

+
+
+
+
+ +
+
+ +
+ + + + \ No newline at end of file diff --git a/details.js b/details.js new file mode 100644 index 0000000..6c4d266 --- /dev/null +++ b/details.js @@ -0,0 +1,59 @@ +let container = document.getElementById("text-container"); +// container.classList.add("text-container"); +let namePok = document.getElementById("pok-name"); +// namePok.classList.add("pok-name"); +let types = document.getElementById("types"); +let abilities = document.getElementById("abilities"); +let stats = document.getElementById("stats"); +let height = document.getElementById("height"); +let imgPok = document.getElementById("img-pok"); + +async function getPokemonDetails(name) { + try { + const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`); + const data = await response.json(); + return data; + } catch (error) { + return null; + } +} + +async function displayPokemonDetails() { + let searchParams = new URLSearchParams(window.location.search); + let name = searchParams.get("name"); + + let data = await getPokemonDetails(name); + console.log(data); + // namePok.classList.add("pok-name"); + namePok.textContent = data.name; + + imgPok.src = data.sprites.front_default; + + data.types.forEach((type, index) => { + if (index == 0) { + types.textContent += type.type.name; + } else { + types.textContent += " - " + type.type.name; + } + }); + + data.abilities.forEach((ability, index) => { + if (index == 0) { + abilities.textContent += ability.ability.name; + } else { + abilities.textContent += " - " + ability.ability.name; + } + }); + + data.stats.forEach((stat, index) => { + if (index == 0) { + stats.textContent += stat.base_stat; + } else { + stats.textContent += " - " + stat.base_stat; + } + }); + + height.textContent += " " + data.height; +} + +displayPokemonDetails(); diff --git a/home.css b/home.css new file mode 100644 index 0000000..c62c1b1 --- /dev/null +++ b/home.css @@ -0,0 +1,118 @@ +* { + margin: 0%; + padding: 0%; +} +body { + background-image: url(./pic/bg4.jpg); + background-repeat: no-repeat; + background-size: cover; + /* height: 100vh; + background-color: #407b8b; */ +} +#container { + width: 100%; + height: 100vh; +} +#nav { + /* background-color: aqua; */ + width: 100%; + height: 25%; + display: flex; + justify-content: space-between; +} +#logo { + width: 60px; + height: 60px; + cursor: pointer; +} +#logoa { + margin-left: 2%; + margin-top: 5%; + width: min-content; + height: min-content; + text-decoration: none; +} +#pokemonlogo { + padding-top: 2%; + padding-left: 4%; +} +#homeabout { + cursor: pointer; + width: min-content; + height: 50%; + font-size: 40px; + color: #ffcb05; + stroke: #395ca6; +} +#homea { + text-decoration: none; + margin-right: 3%; + margin-top: 5%; + width: min-content; + height: min-content; +} + +#card-container { + display: flex; + flex-wrap: wrap; + width: 100%; + /* background-color: antiquewhite; */ + gap: 30px; + justify-content: space-evenly; + align-content: center; + padding-bottom: 40px; + padding-top: 50px; +} +.card { + padding: 40px; + width: 150px; + height: 250px; + background-color: #f9c94e; + border-radius: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + margin-top: 2%; + border: 1px solid black; + box-shadow: -10px 10px 19px 0px rgba(0, 0, 0, 0.75); + -webkit-box-shadow: -10px 10px 19px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: -10px 10px 19px 0px rgba(0, 0, 0, 0.75); + cursor: pointer; +} +.cardpic { + width: 95%; + height: 80%; + /* background-color: black; */ + /* background-image: url(./pic/char.png); */ + background-size: 200px; + background-repeat: no-repeat; + text-align: center; + padding-top: 20px; +} +.cardpic img { + width: 100%; + height: 100%; +} +.cardname { + width: 95%; + height: 20%; + background-color: #676767; + border-radius: 10px; + color: white; + text-align: center; + padding-top: 15px; +} + +@media (max-width: 767px) { + #pokemonlogo { + width: 200px; + height: 100px; + display: none; + } + #nav { + display: flex; + justify-content: space-around; + } +} diff --git a/home.html b/home.html new file mode 100644 index 0000000..62e1757 --- /dev/null +++ b/home.html @@ -0,0 +1,36 @@ + + + + + + + Pokemon + + + + +
+ + +
+ +
+ +
+ + + + \ No newline at end of file diff --git a/home.js b/home.js new file mode 100644 index 0000000..d8cf571 --- /dev/null +++ b/home.js @@ -0,0 +1,69 @@ +let container = document.getElementById("card-container"); + +async function getPokemons() { + try { + let response = await fetch("https://pokeapi.co/api/v2/pokemon?limit=20"); + let data = await response.json(); + return data.results; + } catch (error) { + console.log(error) + } +} + +async function displayPokemons() { + let pokemons = await getPokemons(); + + pokemons.forEach(async(poke) => { + let card = document.createElement("div"); + card.classList.add("card"); + + let cardPic = document.createElement("div"); + cardPic.classList.add("cardpic"); + let cardImg = document.createElement("img"); + + let response = await fetch(`https://pokeapi.co/api/v2/pokemon/${poke.name}`); + let data = await response.json(); + cardImg.src = data.sprites.front_default; + + let cardName = document.createElement("div"); + cardName.classList.add("cardname"); + cardName.textContent = poke.name; + + cardPic.appendChild(cardImg) + card.appendChild(cardPic) + card.appendChild(cardName); + container.appendChild(card); + card.addEventListener("click",()=>{ + window.location.href=`./details.html?name=${poke.name}` + }); + }); +} +displayPokemons(); + + + + + + + + + + + + + + + +// async function getPokemonDetails(name) { +// let response = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`); +// let data = await response.json(); +// return data; +// } + +// async function displayPokemonDetails() { +// let searchParams = new URLSearchParams(window.location.search); +// let name = searchParams.get("name"); +// let data = await getPokemonDetails(name); +// cardImg.src = data.sprites.front_default; +// } +// displayPokemonDetails(); diff --git a/pic/ash.png b/pic/ash.png new file mode 100644 index 0000000..913764a Binary files /dev/null and b/pic/ash.png differ diff --git a/pic/bg.jpg b/pic/bg.jpg new file mode 100644 index 0000000..91ad721 Binary files /dev/null and b/pic/bg.jpg differ diff --git a/pic/bg2.jpg b/pic/bg2.jpg new file mode 100644 index 0000000..f82730b Binary files /dev/null and b/pic/bg2.jpg differ diff --git a/pic/bg3.jpg b/pic/bg3.jpg new file mode 100644 index 0000000..ab9eb16 Binary files /dev/null and b/pic/bg3.jpg differ diff --git a/pic/bg4.jpg b/pic/bg4.jpg new file mode 100644 index 0000000..4c56edf Binary files /dev/null and b/pic/bg4.jpg differ diff --git a/pic/char.png b/pic/char.png new file mode 100644 index 0000000..6b91d79 Binary files /dev/null and b/pic/char.png differ diff --git a/pic/logo.png b/pic/logo.png new file mode 100644 index 0000000..99096b5 Binary files /dev/null and b/pic/logo.png differ diff --git a/pic/pok.png b/pic/pok.png new file mode 100644 index 0000000..58ccf36 Binary files /dev/null and b/pic/pok.png differ