From b65dd07e1d96528d2d0ee9868b5cc4223a48bdaa Mon Sep 17 00:00:00 2001 From: AMRUTHA-BYSANI <161291347+AMRUTHA-BYSANI@users.noreply.github.com> Date: Thu, 31 Oct 2024 15:16:19 +0530 Subject: [PATCH] Feature1 (#2819) * art added by Amrutha * deleted additional files * requested changes editted * requested changes editted -2 * Update meta.json --------- Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com> --- .../index.html | 25 +++++++++++++ .../meta.json | 4 ++ .../styles.css | 37 +++++++++++++++++++ 3 files changed, 66 insertions(+) create mode 100644 Art/AMRUTHA-BYSANI-LoadingColoursAnimation/index.html create mode 100644 Art/AMRUTHA-BYSANI-LoadingColoursAnimation/meta.json create mode 100644 Art/AMRUTHA-BYSANI-LoadingColoursAnimation/styles.css diff --git a/Art/AMRUTHA-BYSANI-LoadingColoursAnimation/index.html b/Art/AMRUTHA-BYSANI-LoadingColoursAnimation/index.html new file mode 100644 index 000000000..f8b626233 --- /dev/null +++ b/Art/AMRUTHA-BYSANI-LoadingColoursAnimation/index.html @@ -0,0 +1,25 @@ + + + + + + turning circle + + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/Art/AMRUTHA-BYSANI-LoadingColoursAnimation/meta.json b/Art/AMRUTHA-BYSANI-LoadingColoursAnimation/meta.json new file mode 100644 index 000000000..491e59cfc --- /dev/null +++ b/Art/AMRUTHA-BYSANI-LoadingColoursAnimation/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "Loading Colours", + "githubHandle": "AMRUTHA-BYSANI" +} diff --git a/Art/AMRUTHA-BYSANI-LoadingColoursAnimation/styles.css b/Art/AMRUTHA-BYSANI-LoadingColoursAnimation/styles.css new file mode 100644 index 000000000..164d6a339 --- /dev/null +++ b/Art/AMRUTHA-BYSANI-LoadingColoursAnimation/styles.css @@ -0,0 +1,37 @@ +body { + background-color: #000000; +} +.box{ + perspective: 120px; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.container{ + display: flex; + flex-direction: row; + gap: 10px; + justify-content: center; + align-items: center; + height: 100hv; +} + +.coin { + width: 100px; + height: 100px; + border-radius: 50%; + background: linear-gradient(135deg, #FF5F6D, #FFC371, #36D1DC, #5B86E5, #A1FFCE); +; + animation: twist 2s ease-in-out alternate infinite; +} + +@keyframes twist { + + to{ + transform: rotateX(360deg) scale(0.5); + } + +} +