desktop ui updates

aman-maharshi · May 23, 2024 · 8cd8fe5 · 8cd8fe5
1 parent caf7524
commit 8cd8fe5
Show file tree

Hide file tree

Showing 20 changed files with 71 additions and 29 deletions.
diff --git a/parallax-cards/build/asset-manifest.json b/parallax-cards/build/asset-manifest.json
@@ -1,13 +1,13 @@
 {
   "files": {
-    "main.css": "./static/css/main.83f8d106.css",
-    "main.js": "./static/js/main.527222b0.js",
+    "main.css": "./static/css/main.01735c15.css",
+    "main.js": "./static/js/main.d6de880f.js",
     "index.html": "./index.html",
-    "main.83f8d106.css.map": "./static/css/main.83f8d106.css.map",
-    "main.527222b0.js.map": "./static/js/main.527222b0.js.map"
+    "main.01735c15.css.map": "./static/css/main.01735c15.css.map",
+    "main.d6de880f.js.map": "./static/js/main.d6de880f.js.map"
   },
   "entrypoints": [
-    "static/css/main.83f8d106.css",
-    "static/js/main.527222b0.js"
+    "static/css/main.01735c15.css",
+    "static/js/main.d6de880f.js"
   ]
 }
diff --git a/parallax-cards/build/index.html b/parallax-cards/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>React App</title><script defer="defer" src="./static/js/main.527222b0.js"></script><link href="./static/css/main.83f8d106.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>Cards Parallax</title><script defer="defer" src="./static/js/main.d6de880f.js"></script><link href="./static/css/main.01735c15.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/parallax-cards/build/india.jpg b/parallax-cards/build/india.jpg
diff --git a/parallax-cards/build/nyc.jpg b/parallax-cards/build/nyc.jpg
diff --git a/parallax-cards/build/static/css/main.01735c15.css b/parallax-cards/build/static/css/main.01735c15.css
diff --git a/parallax-cards/build/static/css/main.01735c15.css.map b/parallax-cards/build/static/css/main.01735c15.css.map
diff --git a/parallax-cards/build/static/css/main.83f8d106.css b/parallax-cards/build/static/css/main.83f8d106.css
diff --git a/parallax-cards/build/static/css/main.83f8d106.css.map b/parallax-cards/build/static/css/main.83f8d106.css.map
diff --git a/...ax-cards/build/static/js/main.527222b0.js → ...ax-cards/build/static/js/main.d6de880f.js b/...ax-cards/build/static/js/main.527222b0.js → ...ax-cards/build/static/js/main.d6de880f.js
diff --git a/...ld/static/js/main.527222b0.js.LICENSE.txt → ...ld/static/js/main.d6de880f.js.LICENSE.txt b/...ld/static/js/main.527222b0.js.LICENSE.txt → ...ld/static/js/main.d6de880f.js.LICENSE.txt
diff --git a/...ards/build/static/js/main.527222b0.js.map → ...ards/build/static/js/main.d6de880f.js.map b/...ards/build/static/js/main.527222b0.js.map → ...ards/build/static/js/main.d6de880f.js.map
diff --git a/parallax-cards/build/swiss.jpg b/parallax-cards/build/swiss.jpg
diff --git a/parallax-cards/build/tokyo.jpg b/parallax-cards/build/tokyo.jpg
diff --git a/parallax-cards/public/india.jpg b/parallax-cards/public/india.jpg
diff --git a/parallax-cards/public/nyc.jpg b/parallax-cards/public/nyc.jpg
diff --git a/parallax-cards/public/swiss.jpg b/parallax-cards/public/swiss.jpg
diff --git a/parallax-cards/public/tokyo.jpg b/parallax-cards/public/tokyo.jpg
diff --git a/parallax-cards/src/Card.js b/parallax-cards/src/Card.js
@@ -2,11 +2,24 @@ import React from 'react'
 
 function Card({ item }) {
 
-  const {title, description, src, link, color} = item
+  const { title, description, src, link, color } = item
   return (
     <div className='card-container'>
-      <div className="card" style={{background: color}}>
-
+      <div className="card" style={{ background: color }}>
+        <div className="card__title">{title}</div>
+        <div className="card__row">
+          <div className="card__left">
+            <div className="card__description">{description}</div>
+            <div className="card__link">
+              <a href={link} target="_blank" rel="noreferrer">Go to website</a>
+            </div>
+          </div>
+          <div className="card__right">
+            <div className="card__image">
+              <img src={src} alt={title} />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   )

diff --git a/parallax-cards/src/data.js b/parallax-cards/src/data.js
@@ -2,35 +2,28 @@ export const cardsData = [
   {
     title: "Matthias Leidinger",
     description: "Originally hailing from Austria, Berlin-based photographer Matthias Leindinger is a young creative brimming with talent and ideas.",
-    src: "rock.jpg",
+    src: "/tokyo.jpg",
     link: "https://www.ignant.com/2023/03/25/ad2186-matthias-leidingers-photographic-exploration-of-awe-and-wonder/",
     color: "#BBACAF"
   },
   {
     title: "Clément Chapillon",
     description: "This is a story on the border between reality and imaginary, about the contradictory feelings that the insularity of a rocky, arid, and wild territory provokes”—so French photographer Clément Chapillon describes his latest highly captivating project Les rochers fauves (French for ‘The tawny rocks’).",
-    src: "tree.jpg",
+    src: "/nyc.jpg",
     link: "https://www.ignant.com/2022/09/30/clement-chapillon-questions-geographical-and-mental-isolation-with-les-rochers-fauves/",
     color: "#977F6D"
   },
   {
     title: "Zissou",
     description: "Though he views photography as a medium for storytelling, Zissou’s images don’t insist on a narrative. Both crisp and ethereal, they’re encoded with an ambiguity—a certain tension—that lets the viewer find their own story within them.",
-    src: "water.jpg",
+    src: "/swiss.jpg",
     link: "https://www.ignant.com/2023/10/28/capturing-balis-many-faces-zissou-documents-the-sacred-and-the-mundane-of-a-fragile-island/",
     color: "#C2491D"
   },
-  {
-    title: "Mathias Svold and Ulrik Hasemann",
-    description: "The coastlines of Denmark are documented in tonal colors in a pensive new series by Danish photographers Ulrik Hasemann and Mathias Svold; an ongoing project investigating how humans interact with and disrupt the Danish coast.",
-    src: "house.jpg",
-    link: "https://www.ignant.com/2019/03/13/a-photographic-series-depicting-the-uncertain-future-of-denmarks-treasured-coastlines/",
-    color: "#B62429"
-  },
   {
     title: "Mark Rammers",
     description: "Dutch photographer Mark Rammers has shared with IGNANT the first chapter of his latest photographic project, ‘all over again’—captured while in residency at Hektor, an old farm in Los Valles, Lanzarote. Titled ‘Beginnings’, the mesmerizing collection of images is a visual and meditative journey into the origins of regrets and the uncertainty of stepping into new unknowns.",
-    src: "cactus.jpg",
+    src: "/india.jpg",
     link: "https://www.ignant.com/2023/04/12/mark-rammers-all-over-again-is-a-study-of-regret-and-the-willingness-to-move-forward/",
     color: "#88A28D"
   }

diff --git a/parallax-cards/src/index.css b/parallax-cards/src/index.css
@@ -5,6 +5,10 @@ body {
   font-family: "Noto Sans", sans-serif;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 .main {
   margin-top: 50vh;
   margin-bottom: 100vh;
@@ -24,10 +28,42 @@ body {
   height: 400px;
   width: 800px;
   border-radius: 25px;
+  padding: 2rem;
+  color: #2c2c2c;
+}
+
+.card__title {
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 2rem;
+}
+
+.card__link a {
+  color: #2c2c2c;
+}
+
+.card__row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
 }
 
+.card__image {
+  height: 250px;
+}
+
+.card__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 25px;
+  object-position: bottom;
+}
+
+
 @media (max-width: 1024px) {
   .card {
     width: 600px;
   }
-}
+}