diff --git a/Art/supriya/galaxy.css b/Art/supriya/galaxy.css
new file mode 100644
index 000000000..25d920f93
--- /dev/null
+++ 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
new file mode 100644
index 000000000..0bdc689da
Binary files /dev/null and b/Art/supriya/galaxy.gif differ
diff --git a/Art/supriya/galaxy.html b/Art/supriya/galaxy.html
new file mode 100644
index 000000000..8608a043d
--- /dev/null
+++ b/Art/supriya/galaxy.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+ Galaxy Animation
+
+
+
+
+
diff --git a/include.js b/include.js
index 4f926b67f..301c4cdc5 100644
--- 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) => [
`` +
- `` +
- `` +
- `` +
- `` +
- `
${c.artName}
` +
- `
${c.author}
` +
- `
` +
- ``
+ `` +
+ `` +
+ `` +
+ `` +
+ `
${c.artName}
` +
+ `
${c.author}
` +
+ `
` +
+ ``
]);
};