added my animation (#2350)

zero-to-mastery · Oct 29, 2023 · dde5b06 · dde5b06
1 parent fc3d50e
commit dde5b06
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 36 deletions.
diff --git a/Art/supriya/galaxy.css b/Art/supriya/galaxy.css
@@ -0,0 +1,80 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background: #000;
+  overflow: hidden;
+}
+
+.galaxy {
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, #1a237e 10%, transparent 40%);
+  position: relative;
+  border-radius: 50%;
+  animation: rotate 20s linear infinite;
+}
+
+.stars {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background: transparent;
+}
+
+.stars::before {
+  content: ' ';
+  display: block;
+  width: 5px;
+  height: 5px;
+  background: #fff;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%; /* Move closer vertically */
+  left: 50%; /* Move closer horizontally */
+  transform: translate(-50%, -50%); /* Center the stars */
+  animation: twinkle 2s infinite;
+  -webkit-animation: twinkle 2s infinite;
+}
+
+.planet {
+  width: 60px;
+  height: 60px;
+  background: #ef5350;
+  border-radius: 50%;
+  position: absolute;
+  top: 120px;
+  left: 120px;
+}
+
+.ring {
+  width: 80px;
+  height: 10px;
+  background: #ffca28;
+  position: absolute;
+  top: 25px;
+  left: -10px;
+  transform: rotate(45deg);
+  border-radius: 50%;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes twinkle {
+  0%,
+  100% {
+    opacity: 0.8;
+  }
+  50% {
+    opacity: 1;
+  }
+}
diff --git a/Art/supriya/galaxy.gif b/Art/supriya/galaxy.gif
diff --git a/Art/supriya/galaxy.html b/Art/supriya/galaxy.html
@@ -0,0 +1,17 @@
+<!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="galaxy.css" />
+    <title>Galaxy Animation</title>
+  </head>
+  <body>
+    <div class="galaxy">
+      <div class="stars"></div>
+      <div class="planet">
+        <div class="ring"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/include.js b/include.js
@@ -2482,13 +2482,6 @@ 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',
@@ -2604,24 +2597,10 @@ let cards = [
   {
     artName: 'Slide In Animation',
     pageLink: './Art/kalkeshwar/index.html',
-    imageLink: 'Art/kalkeshwar/sliderightanimation.gif',
+    imageLink: './Art/kalkeshwar/sliderightanimation.gif',
     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', 
@@ -2630,12 +2609,12 @@ let cards = [
     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'
-  },
+    artName: 'Moving and rotating galaxy ',
+    pageLink: './Art/supriya/galaxy.html',
+    imageLink: './Art/supriya/galaxy.gif',
+    author: 'Supriya',
+    githubLink: 'https://github.com/BoonDocks-sl'
+  }
 ];
 
 /* -------------------------------------------------------------------------- */
@@ -2660,14 +2639,14 @@ function shuffle(o) {
 const getCardContents = (cardList) => {
   return shuffle(cardList).map((c) => [
     `<li class="card">` +
-      `<a href='${c.pageLink}'>` +
-      `<img class="art-image" src='${c.imageLink}' alt='${c.artName}' />` +
-      `</a>` +
-      `<div class="flex-content">` +
-      `<a href='${c.pageLink}'><h3 class="art-title">${c.artName}</h3></a>` +
-      `<p class='author'><a href="${c.githubLink}" target="_blank"><i class="fab fa-github"></i> ${c.author}</a> </p>` +
-      `</div>` +
-      `</li>`
+    `<a href='${c.pageLink}'>` +
+    `<img class="art-image" src='${c.imageLink}' alt='${c.artName}' />` +
+    `</a>` +
+    `<div class="flex-content">` +
+    `<a href='${c.pageLink}'><h3 class="art-title">${c.artName}</h3></a>` +
+    `<p class='author'><a href="${c.githubLink}" target="_blank"><i class="fab fa-github"></i> ${c.author}</a> </p>` +
+    `</div>` +
+    `</li>`
   ]);
 };