From 8edd8b104084f317397ec55c791b05c143c2ade3 Mon Sep 17 00:00:00 2001 From: Jason Zhu Date: Sun, 5 Mar 2023 21:03:15 +1100 Subject: [PATCH] Added a sample static Pokemon card --- src/App.tsx | 2 + src/Pokemon.css | 92 ++++++++++++++++++++++++++++++++++++++++++ src/Pokemon.tsx | 32 +++++++++++++++ src/assets/cardimg.svg | 2 + 4 files changed, 128 insertions(+) create mode 100644 src/Pokemon.css create mode 100644 src/Pokemon.tsx create mode 100644 src/assets/cardimg.svg 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 ( +
+
+
#006
+
+ + + +
+
+
+ test image +
+
+

Charizard

+
+
+ ); +} diff --git a/src/assets/cardimg.svg b/src/assets/cardimg.svg new file mode 100644 index 0000000..ba18a92 --- /dev/null +++ b/src/assets/cardimg.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file