finished styling

sonata22 · Dec 15, 2023 · c1be918 · c1be918
1 parent 83408ef
commit c1be918
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 58 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,20 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Corben&family=Mulish&family=Outfit:wght@300;400;600&family=Raleway:wght@300&display=swap"
+    rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git 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;
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -44,33 +44,43 @@ 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 (
-    <>
+    <div style={priceAndExpDate}>
       <div style={priceElement}>
         <div>
           <div style={rhombusIconTop}></div>
           <div style={rhombusIconBottom}></div>
         </div>
         <p style={priceText}>{price + " ETH"}</p>
       </div>
-    </>
+      <div style={priceElement}>
+        <svg width="10px" height="10px" viewBox="0 0 24 24" id="meteor-icon-kit__solid-clock" fill="none" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M13 11V4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4V12C11 12.5523 11.4477 13 12 13H18C18.5523 13 19 12.5523 19 12C19 11.4477 18.5523 11 18 11H13ZM12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24Z" fill="hsl(215, 51%, 70%)" /></svg>
+        <p>2 days left</p>
+      </div>
+    </div>
   )
 }
 
@@ -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 (
     <>
-      <div className="nft-template">
+      <div style={nftTemplate}>
         <div
           style={imgWithHoverStyle}
           onMouseEnter={() => { 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 (
-    <div style={rootDivStyle}>
-      <h1 style={h1Style}>NFT Preview Card Template</h1>
-      <div style={nfts}>
-        {
-          nftComponentData.map(
-            (nftData) => <NftComponent data={nftData} key={nftData.id} />
-          )
-        }
-      </div>
+    <div style={nfts}>
+      {
+        nftComponentData.map(
+          (nftData) => <NftComponent data={nftData} key={nftData.id} />
+        )
+      }
     </div>
   )
 }