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}
+
+

+

+
+
+
+ );
+}
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;
+}