diff --git a/src/App.tsx b/src/App.tsx
index af4393e..629a77a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,12 +2,14 @@ import React from 'react';
import './App.css';
import { Header } from './Header';
import { Filters } from './Filters';
+import { Pokemon } from './Pokemon';
function App() {
return (
);
}
diff --git a/src/Pokemon.css b/src/Pokemon.css
new file mode 100644
index 0000000..0f86993
--- /dev/null
+++ b/src/Pokemon.css
@@ -0,0 +1,92 @@
+:root {
+ --grass: #5FBD58;
+ --bug: #92BC2C;
+ --dark: #595761;
+ --dragon: #0C69C8;
+ --electric: #F2D94E;
+ --fairy: #EE90E6;
+ --fighting: #D3425F;
+ --fire: #dc872f;
+ --flying: #A1BBEC;
+ --ghost: #5F6DBC;
+ --ground: #DA7C4D;
+ --ice: #75D0C1;
+ --normal: #A0A29F;
+ --poison: #B763CF;
+ --psychic: #ff2ca8;
+ --rock: #a38c21;
+ --steel: #5695A3;
+ --water: #539DDF;
+}
+
+.thumbnail__container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1.5rem 0;
+ margin: 2rem;
+ /* border: 15px solid var(--cardborder); */
+ border-radius: 1rem;
+ min-width: 220px;
+ height: 285px;
+ text-align: center;
+ /* box-shadow: 0 5px 25px 1px rgb(0 0 0 / 50%); */
+ box-shadow:
+ 0 1.6px 1.6px rgba(0, 0, 0, 0.023),
+ 0 3.8px 3.8px rgba(0, 0, 0, 0.034),
+ 0 6.9px 6.9px rgba(0, 0, 0, 0.041),
+ 0 11.4px 11.4px rgba(0, 0, 0, 0.049),
+ 0 18.8px 18.8px rgba(0, 0, 0, 0.056),
+ 0 32.8px 32.8px rgba(0, 0, 0, 0.067),
+ 0 71px 71px rgba(0, 0, 0, 0.09)
+;
+ transition: all 0.2s ease-in-out;
+}
+
+.thumbnail__container:hover {
+ transform: scale(1.2);
+}
+
+.info__icon:hover {
+ opacity: 1;
+}
+
+.info__icon {
+ margin-right: 15px;
+ margin-top: -4px;
+ font-size: 25px;
+ opacity: 0.5;
+}
+
+h3 {
+ font-family: 'Press Start 2P', cursive;
+ margin-bottom: 0.2rem;
+}
+
+.thumbnail__container .poke__number {
+ border-radius: 1rem;
+ padding: 0.2rem 0.4rem;
+ font-weight: 400;
+ font-size: 35px;
+ font-family: 'Teko', sans-serif;
+}
+
+.thumbnail__container img {
+ width: 120px;
+ height: 120px;
+}
+
+.thumbnail__container small {
+ text-transform: capitalize;
+}
+
+.card__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.poke__name h3 {
+ margin-top: 0px;
+}
diff --git a/src/Pokemon.tsx b/src/Pokemon.tsx
new file mode 100644
index 0000000..2b0ff71
--- /dev/null
+++ b/src/Pokemon.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import './Pokemon.css';
+import testimage from './assets/cardimg.svg';
+
+export function Pokemon() {
+ return (
+
+
+
+
+
+
+
Charizard
+
+
+