sticky card styling update

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

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/parallax-cards/src/App.js b/parallax-cards/src/App.js
@@ -6,7 +6,7 @@ function App() {
   const [data, setData] = useState(cardsData)
 
   return (
-    <div>
+    <div className="main">
       {data.map((item, index) => {
         return (
           <Card key={index} item={item} />

diff --git a/parallax-cards/src/Card.js b/parallax-cards/src/Card.js
@@ -4,9 +4,10 @@ function Card({ item }) {
 
   const {title, description, src, link, color} = item
   return (
-    <div>
-      <h2>{title}</h2>
-      <p>{description}</p>
+    <div className='card-container'>
+      <div className="card" style={{background: color}}>
+
+      </div>
     </div>
   )
 }

diff --git a/parallax-cards/src/index.css b/parallax-cards/src/index.css
@@ -3,5 +3,31 @@
 body {
   margin: 0;
   font-family: "Noto Sans", sans-serif;
-
+}
+
+.main {
+  margin-top: 50vh;
+  margin-bottom: 100vh;
+}
+
+
+.card-container {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: sticky;
+  top: 0;
+}
+
+.card {
+  height: 400px;
+  width: 800px;
+  border-radius: 25px;
+}
+
+@media (max-width: 1024px) {
+  .card {
+    width: 600px;
+  }
 }