diff --git a/Art/Rohan/Earth.gif b/Art/Rohan/Earth.gif new file mode 100644 index 00000000..5fba9551 Binary files /dev/null and b/Art/Rohan/Earth.gif differ diff --git a/Art/Rohan/index.html b/Art/Rohan/index.html new file mode 100644 index 00000000..621a9110 --- /dev/null +++ b/Art/Rohan/index.html @@ -0,0 +1,10 @@ + + +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/Art/Rohan/styles.css b/Art/Rohan/styles.css new file mode 100644 index 00000000..935ac0be --- /dev/null +++ b/Art/Rohan/styles.css @@ -0,0 +1,79 @@ +body { + align-items: center; + background-color: #000; + display: flex; + height: 100%; + justify-content: center; + margin: 0 0; + overflow: hidden; + position: absolute; + width: 100%; +} +.planet-container { + border-radius: 50%; + box-shadow: 5px -3px 10px 3px #5e90f1; + height: 500px; + overflow: hidden; + position: relative; + width: 500px; + z-index: 1; +} +.night { + animation: rotate-night 80s linear infinite; + background-image: url(https://www.solarsystemscope.com/textures/download/2k_earth_nightmap.jpg); + background-size: 200%; + height: 500px; + position: absolute; + width: 500px; + z-index: 2; +} +.day { + animation: rotate-day 80s linear infinite; + background-image: url(https://www.solarsystemscope.com/textures/download/2k_earth_daymap.jpg); + background-size: 200%; + border-left: solid 1px black; + border-radius: 50%; + box-shadow: 5px 0 20px 10px #040615 inset; + height: 500px; + margin-left: 110px; + position: absolute; + width: 500px; + z-index: 3; +} +.clouds { + animation: rotate-day 50s linear infinite, spin-clouds 100s ease infinite; + background-image: url(https://www.solarsystemscope.com/textures/download/2k_earth_clouds.jpg); + background-size: 200%; + border-radius: 50%; + box-shadow: 5px 0 20px 10px #040615 inset, -9px 0px 20px 10px #5e90f1 inset; + height: 500px; + margin-left: 100px; + opacity: 0.45; + position: absolute; + width: 500px; + z-index: 4; +} +.inner-shadow { + background: transparent; + border-radius: 50%; + box-shadow: -5px 0 10px 1px #152b57 inset, 5px 0 10px 1px #040615 inset; + height: 500px; + margin-left: 0; + position: absolute; + width: 500px; + z-index: 5; +} + +@keyframes rotate-day { + 0% { background-position: 120% 0; } + 100% { background-position: -80% 0; } +} +@keyframes rotate-night { + 0% { background-position: calc(120% + 120px) 0; } + 100% { background-position: calc(-80% + 120px) 0; } +} +@keyframes spin-clouds { + 0% { transform: rotate(0deg); } + 50% { transform: rotate(20deg); } + 100% { transform: rotate(0deg); } +} \ No newline at end of file diff --git a/include.js b/include.js index 8fce6195..c4dab646 100644 --- a/include.js +++ b/include.js @@ -9452,6 +9452,13 @@ let cards = [ imageLink: './Art/poltu/world.gif', author: 'neeshat', githubLink: 'https://github.com/neeshat060708' + }, + { + artName: 'Earth-Rotation', + pageLink: './Art/Rohan/index.html', + imageLink: './Art/Rohan/Earth.gif', + author: 'Rohan', + githubLink: 'https://github.com/Rohan-2' } ];