diff --git a/src/App.js b/src/App.js index 6fd1528..94fd276 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,17 @@ import React from "react"; + +import { mockPokemonData } from "./mock/pokeData"; +import PokeCard from "./components/PokeCard"; import "./styles.css"; export default function App() { + const { sprites, name, video } = mockPokemonData; return (

Welcome to your second mini challenge!

+
+ +
); } diff --git a/src/components/PokeCard.js b/src/components/PokeCard.js index e69de29..438a6be 100644 --- a/src/components/PokeCard.js +++ b/src/components/PokeCard.js @@ -0,0 +1,18 @@ +import React from "react"; + +export default function PokeCard({ sprites, name, video }) { + return ( +
+

{name}

+
+ Default + Shiny +
+
+ + Go to the video! + +
+
+ ); +} diff --git a/src/styles.css b/src/styles.css index 59b0604..98fb853 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2,3 +2,44 @@ font-family: sans-serif; text-align: center; } + +.pokeCard { + border: solid #ddd; + border-width: 1rem 0.5rem 2rem; + padding: 1rem; + margin: 1rem; + background-color: #18bfdc; + border-radius: 10px 10px 0px 30px; +} + +.pokemonControls { + padding: 1rem; +} + +.pokemonControls a { + color: white; +} + +.pokemonControls a:hover { + transition: all 0.5s; + color: #990000; +} + +.pokemonsContainer { + width: 80%; + margin: auto; + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.pokemonName { + width: 100%; +} + +.pokemonImages img { + border-radius: 50%; + background-color: white; + border: 1px solid #eee; + margin: 0.5rem; +}