From c1be9189ca730259af01195be6b5218986d3bb3a Mon Sep 17 00:00:00 2001 From: sonata22 Date: Fri, 15 Dec 2023 19:58:45 +0200 Subject: [PATCH] finished styling --- index.html | 29 +++++++++++++--------- src/App.css | 18 ++++---------- src/App.jsx | 69 ++++++++++++++++++++++++++++------------------------- 3 files changed, 58 insertions(+), 58 deletions(-) diff --git a/index.html b/index.html index 0c589ec..390d50f 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,20 @@ - - - - - Vite + React - - -
- - - + + + + + + + + Vite + React + + + +
+ + + + \ No newline at end of file diff --git a/src/App.css b/src/App.css index e0acd10..bf10a74 100644 --- a/src/App.css +++ b/src/App.css @@ -1,17 +1,12 @@ -/* Fonts */ -@import url('https://fonts.googleapis.com/css2?family=Corben&family=Mulish&family=Outfit:wght@300;400;600&family=Raleway:wght@300&display=swap'); - #root { min-width: 800px; - height: auto; - padding: 4rem 0 4rem 0; + min-height: auto; + padding: 6rem 0 6rem 0; background: hsl(216, 55%, 11%); display: flex; justify-content: center; align-items: center; align-content: flex-start; - flex-wrap: wrap; - gap: 30px; margin: 0; } @@ -24,11 +19,6 @@ p { font-weight: 300; } -.nft-template { - width: 220px; - height: auto; - background: hsl(214, 49%, 17%); - border-radius: 10px; - box-shadow: 0 10px 1em 0px hsl(213, 71%, 8%); - padding: 15px; +body { + margin: 0px; } \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 40092b0..696418e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -44,25 +44,31 @@ const Price = ({ price }) => { gap: "5px", }; const rhombusIconTop = { - width: "9px", - height: "14px", + width: "8px", + height: "13px", background: cyan, clipPath: "polygon(0% 50%, 50% 0%, 100% 50%, 50% 70%)", position: "absolute", }; const rhombusIconBottom = { - width: "9px", - height: "14px", + width: "8px", + height: "13px", background: cyan, clipPath: "polygon(3% 55%, 50% 73%, 97% 55%, 50% 100%)", position: "relative", }; const priceText = { color: cyan, - fontSize: "11px", + fontSize: "12px", } + const priceAndExpDate = { + display: "flex", + alignItems: "center", + justifyContent: "space-between", + } + return ( - <> +
@@ -70,7 +76,11 @@ const Price = ({ price }) => {

{price + " ETH"}

- +
+ +

2 days left

+
+
) } @@ -168,10 +178,20 @@ const NftComponent = (nftData) => { justifyContent: "center", alignItems: "center", }; - + const nftTemplate = { + width: "220px", + height: "auto", + background: "#15273F", + borderRadius: "10px", + boxShadow: "0 10px 1em 0px #061323", + padding: "15px", + display: "flex", + flexDirection: "column", + justifyContent: "flex-start", + } return ( <> -
+
{ setEyeIconOpacity("1"); setOpacity("0.7"); }} @@ -205,35 +225,18 @@ const NftComponent = (nftData) => { } function App() { - const h1Style = { - fontFamily: "Outfit", - marginTop: "15px", - marginBottom: "15px", - fontSize: "25px", - color: white, - fontWeight: "600", - }; const nfts = { display: "flex", gap: "20px", } - const rootDivStyle = { - display: "flex", - flexDirection: "column", - justifyContent: "center", - alignItems: "center", - gap: "15px", - } + return ( -
-

NFT Preview Card Template

-
- { - nftComponentData.map( - (nftData) => - ) - } -
+
+ { + nftComponentData.map( + (nftData) => + ) + }
) }