Animated cards (#2715)

* Add files via upload * Update styles.css * Create meta.json --------- Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com>
zero-to-mastery · Oct 14, 2024 · 22a98d8 · 22a98d8
1 parent 126e3d4
commit 22a98d8
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 0 deletions.
diff --git a/Art/PragyaTripathi990-cardsAnimation/index.html b/Art/PragyaTripathi990-cardsAnimation/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<div class="container">
+
+    <div class="box">
+
+
+
+        <h1>Card 1</h1>
+        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat aspernatur sint delectus. Ducimus molestias tempore doloribus reiciendis corrupti aspernatur, amet, in sit et iusto minus dolorum facilis pariatur quas id. lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat aspernatur sint delectus. Ducimus molestias tempore doloribus</p>
+        <button>Read More</button>
+    </div>
+
+    <div class="box">
+        <h1>Card 2</h1>
+        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat aspernatur sint delectus. Ducimus molestias tempore doloribus reiciendis corrupti aspernatur, amet, in sit et iusto minus dolorum facilis pariatur quas id. lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat aspernatur sint delectus. Ducimus molestias tempore doloribus</p>
+        <button>Read More</button>
+    </div>
+    <div class="box">
+        <h1>Card 3</h1>
+        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat aspernatur sint delectus. Ducimus molestias tempore doloribus reiciendis corrupti aspernatur, amet, in sit et iusto minus dolorum facilis pariatur quas id. lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat aspernatur sint delectus. Ducimus molestias tempore doloribus</p>
+        <button>Read More</button>
+    </div>
+</div>
+</body>
+</html>
diff --git a/Art/PragyaTripathi990-cardsAnimation/meta.json b/Art/PragyaTripathi990-cardsAnimation/meta.json
@@ -0,0 +1,4 @@
+{
+  "artName": "cards Animation",
+  "githubHandle": "PragyaTripathi990"
+}
diff --git a/Art/PragyaTripathi990-cardsAnimation/styles.css b/Art/PragyaTripathi990-cardsAnimation/styles.css
@@ -0,0 +1,70 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #F5F5F5; 
+}
+
+.box{
+    height: 26rem;
+    width: 20rem;
+    background-color: #ebdcf3;
+    border-radius: 12px;
+    padding: 30px;
+    padding-top: 70px;
+    display: flex;
+     align-items: center;
+     flex-direction: column; 
+     color: gray;
+     transition: transform 0.3s ease;   
+}
+.box:hover {
+    transform: translateY(-20px);
+}
+
+.container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 30px;
+    margin-top: 100px;  
+}
+
+.box button {
+    margin-top: 20px; 
+}
+
+button{
+    height: 40px;
+    width: 100px;
+    border-radius: 15px;
+    border-color: transparent;
+    background-color: #01AEF2;
+    color: white;
+    font-weight: 200;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  
+}
+
+.container .box {
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); 
+}
+
+ button:hover{
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6); 
+ transform: scale(1.2);
+} 
+
+.box:hover{
+    color:white;
+    background: linear-gradient(135deg, #9B59B6, #4A148C);
+}
+
+.box:hover button {
+    background-color: #1ABC9C; 
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6); 
+}
+
+