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.artName}

    ` + - `

    ${c.author}

    ` + - `
    ` + - `
  • ` + `` + + `${c.artName}` + + `` + + `
    ` + + `

    ${c.artName}

    ` + + `

    ${c.author}

    ` + + `
    ` + + `` ]); };