From 22a98d8421f4ac37ed408cad302e4b4c0b3020b7 Mon Sep 17 00:00:00 2001 From: PragyaTripathi990 <16pragyatripathi@gmail.com> Date: Mon, 14 Oct 2024 14:12:09 +0530 Subject: [PATCH] Animated cards (#2715) * Add files via upload * Update styles.css * Create meta.json --------- Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com> --- .../index.html | 33 +++++++++ .../meta.json | 4 ++ .../styles.css | 70 +++++++++++++++++++ 3 files changed, 107 insertions(+) create mode 100644 Art/PragyaTripathi990-cardsAnimation/index.html create mode 100644 Art/PragyaTripathi990-cardsAnimation/meta.json create mode 100644 Art/PragyaTripathi990-cardsAnimation/styles.css diff --git a/Art/PragyaTripathi990-cardsAnimation/index.html b/Art/PragyaTripathi990-cardsAnimation/index.html new file mode 100644 index 000000000..0d7dfbf31 --- /dev/null +++ b/Art/PragyaTripathi990-cardsAnimation/index.html @@ -0,0 +1,33 @@ + + + + + + Document + + + +
+ +
+ + + +

Card 1

+

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

+ +
+ +
+

Card 2

+

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

+ +
+
+

Card 3

+

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

+ +
+
+ + \ No newline at end of file diff --git a/Art/PragyaTripathi990-cardsAnimation/meta.json b/Art/PragyaTripathi990-cardsAnimation/meta.json new file mode 100644 index 000000000..53ebc3476 --- /dev/null +++ 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 new file mode 100644 index 000000000..3a08a1e79 --- /dev/null +++ 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); +} + +