Circuralar Disque Multi-Color (#2218)

* Circuralar Disque Multi-Color * Feature Code review * Feature Code review : correct include.js * Update index.html - translated french to english - fixed indentations * Update index.html * Update style.css - translate french to english comments * Update include.js - re-established erased contributions by this PR * commit second animation - BOOk (#2245) Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com> * Added breaking news animation (#2253) * Circuralar Disque Multi-Color --------- Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com> Co-authored-by: archeana <anaclaudiasousajesus6@gmail.com> Co-authored-by: Parth Chawande <101104958+parthrc@users.noreply.github.com>
zero-to-mastery · Oct 29, 2023 · a451454 · a451454
1 parent 8ab07c9
commit a451454
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 89 deletions.
diff --git a/Art/ReneDev01/Disk-2023-10-18-09-38-09.gif b/Art/ReneDev01/Disk-2023-10-18-09-38-09.gif
diff --git a/Art/ReneDev01/index.html b/Art/ReneDev01/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="style.css">
+        <title>Multicolor Circular Loading</title>
+    </head>
+    <body>
+        <div class="multicolor-loader"></div>
+    </body>
+</html>
diff --git a/Art/ReneDev01/style.css b/Art/ReneDev01/style.css
@@ -0,0 +1,55 @@
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #333;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.multicolor-loader {
+    background: conic-gradient(
+        from 0deg,
+        red,
+        yellow,
+        green,
+        blue,
+        violet,
+        red
+    );
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+    /* Mask after 5 seconds */
+    animation-delay: 5s;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.multicolor-loader:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    /* Background color to mask */
+    background: #333;
+    border-radius: 50%;
+    animation: fadeOut 1s ease-in forwards;
+    /* Mask after 5 seconds */
+    animation-delay: 5s;
+}
+
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+        display: none;
+    }
+}
diff --git a/Art/archeana_/style.css b/Art/archeana_/style.css
@@ -36,72 +36,14 @@ body {
 
 /* book */
 .book1 {
-  width: 50px;
-  height: 85px;
-  background-color: #65f60a;
-  animation-name: book_1;
-  animation-duration: 10s;
-  animation-delay: 2s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
-
-@keyframes book_1 {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-100px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-
-.book2 {
-  width: 50px;
-  height: 85px;
-  background-color: #f5aaea;
-  animation-timing-function: linear;
-  animation-name: book_1;
-  animation-duration: 10s;
-  animation-delay: 3s;
-  animation-iteration-count: infinite;
-}
-
-.book3 {
-  width: 50px;
-  height: 85px;
-  background-color: #e4523e;
-  animation-timing-function: linear;
-  animation-name: book_1;
-  animation-duration: 10s;
-  animation-delay: 4s;
-  animation-iteration-count: infinite;
-}
-
-.book4 {
-  width: 50px;
-  height: 85px;
-  background-color: #55bbf6;
-}
-
-p {
-  font-size: larger;
-  font-family: Georgia, 'Times New Roman', Times, serif;
-  align-items: center;
-  justify-content: center;
-  color: #22148e;
-  text-align: center;
-  font-weight: 900;
-  width: 50px;
-  height: 85px;
-  background-color: #65f60a;
-  animation-name: book_1;
-  animation-duration: 10s;
-  animation-delay: 2s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
+    width: 50px;
+    height: 85px;
+    background-color: #65f60a;
+    animation-name: book_1;
+    animation-duration: 10s;
+    animation-delay: 2s; 
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
 }
 
 
@@ -120,7 +62,7 @@ p {
     animation-timing-function: linear;
     animation-name: book_1;
     animation-duration: 10s;
-    animation-delay: 3s;
+    animation-delay: 3s; 
     animation-iteration-count: infinite;
 }
 
@@ -131,7 +73,7 @@ p {
     animation-timing-function: linear;
     animation-name: book_1;
     animation-duration: 10s;
-    animation-delay: 4s;
+    animation-delay: 4s; 
     animation-iteration-count: infinite;
 }
 

diff --git a/include.js b/include.js
@@ -119,20 +119,6 @@ let cards = [
     author: 'ODANOU Massahoud',
     githubLink: 'https://github.com/massdx'
   },
-  {
-    artName: 'Form field animation',
-    pageLink: './Art/massdx/index.html',
-    imageLink: './Art/massdx/form-animation.gif',
-    author: 'ODANOU Massahoud',
-    githubLink: 'https://github.com/massdx'
-  },
-  {
-    artName: 'Form field animation',
-    pageLink: './Art/massdx/index.html',
-    imageLink: './Art/massdx/form-animation.gif',
-    author: 'ODANOU Massahoud',
-    githubLink: 'https://github.com/massdx'
-  },
   {
     artName: 'Shooting stars in the night sky',
     pageLink: './Art/ahmedalhamad7/stars.html',
@@ -2181,13 +2167,6 @@ let cards = [
     author: 'Vishal Kumar',
     githubLink: 'https://github.com/vkumar786'
   },
-  {
-    artName: 'Kinmatic Animation',
-    pageLink: './Art/VishalKumar786/KinmaticAnimation.html',
-    imageLink: './Art/VishalKumar786/KinmaticAnimation.gif',
-    author: 'Vishal Kumar',
-    githubLink: 'https://github.com/vkumar786'
-  },
   {
     artName: 'Finger-Tap',
     pageLink: './Art/jac0313/index.html',
@@ -2475,6 +2454,13 @@ let cards = [
     author: 'Daniel',
     githubLink: 'https://github.com/daniel1david'
   },
+  {
+    artName: 'circular member section animation',
+    pageLink: './Art/mehul1409/index.html',
+    imageLink: './Art/mehul1409/roundmembersection.gif',
+    author: 'mehul1409',
+    githubLink: 'https://github.com/mehul1409'
+  },
   {
     artName: '👻BOOk',
     pageLink: './Art/archeana_/index.html',
@@ -2594,6 +2580,34 @@ let cards = [
     author: 'Kalkeshwar',
     githubLink: 'https://github.com/kalkeshwar'
   },
+  {
+    artName: 'Circle',
+    pageLink: './Art/rishiiiidha/index.html',
+    imageLink: './Art/rishiiiidha/animation.gif', 
+    author: 'Rishidha', 
+    githubLink: 'https://github.com/rishiiiidha'
+  },
+  {
+    artName: 'circular member section animation',
+    pageLink: './Art/mehul1409/index.html', 
+    imageLink: './Art/mehul1409/roundmembersection.gif', 
+    author: 'mehul1409', 
+    githubLink: 'https://github.com/mehul1409'
+  },
+  {
+    artName: 'Circular multi-color Disk',
+    pageLink: './Art/ReneDev01/index.html', 
+    imageLink: './Art/ReneDev01/Disk-2023-10-18-09-38-09.gif', 
+    author: 'ReneAonbo', 
+    githubLink: 'https://github.com/ReneDev01' 
+  },
+  {
+    artName: 'Breaking news',
+    pageLink: './Art/parthrc/index.html',
+    imageLink: './Art/parthrc/breaking-news.gif',
+    author: 'Parth Chawande',
+    githubLink: 'https://github.com/parthrc'
+  },
 ];
 
 /* -------------------------------------------------------------------------- */