\n
\n )\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n Cards Parallax
\n\r\n
\r\n )\r\n}\r\n\r\nexport default Card","import { useState } from \"react\";\nimport { cardsData } from \"./data\";\nimport Card from \"./Card\"\n\nfunction App() {\n const [data, setData] = useState(cardsData)\n\n return (\n \r\n
\r\n {title}
\r\n \r\n
\r\n \r\n
\r\n {description}
\r\n \r\n Go to website\r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \n {data.map((item, index) => {\n return (\n
\n )\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n
-
-
+
)
diff --git a/parallax-cards/src/data.js b/parallax-cards/src/data.js
index 07d823b..313be89 100644
--- 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
index 2c7a601..35463ec 100644
--- 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;
}
-}
+}
\ No newline at end of file
+
{title}
+
+
+
+ {description}
+
+ Go to website
+
+
+
+
+
+
+