diff --git a/Art/archana423/cloud.gif b/Art/archana423/Cloud/cloud.gif similarity index 100% rename from Art/archana423/cloud.gif rename to Art/archana423/Cloud/cloud.gif diff --git a/Art/archana423/index.html b/Art/archana423/Cloud/index.html similarity index 100% rename from Art/archana423/index.html rename to Art/archana423/Cloud/index.html diff --git a/Art/archana423/style.css b/Art/archana423/Cloud/style.css similarity index 100% rename from Art/archana423/style.css rename to Art/archana423/Cloud/style.css diff --git a/Art/archana423/Moon night/MoonNight.gif b/Art/archana423/Moon night/MoonNight.gif new file mode 100644 index 000000000..fb82bfedc Binary files /dev/null and b/Art/archana423/Moon night/MoonNight.gif differ diff --git a/Art/archana423/Moon night/index.html b/Art/archana423/Moon night/index.html new file mode 100644 index 000000000..de745ffef --- /dev/null +++ b/Art/archana423/Moon night/index.html @@ -0,0 +1,26 @@ + + + + + Night Sky Animation + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/Art/archana423/Moon night/style.css b/Art/archana423/Moon night/style.css new file mode 100644 index 000000000..981ed37bd --- /dev/null +++ b/Art/archana423/Moon night/style.css @@ -0,0 +1,266 @@ +body { + padding: 0; + margin: 0; +} +.container { + background-color: #113755; + height: 21.87em; + width: 21.87em; + position: absolute; + transform: translate(-50%, -50%); + left: 50%; + top: 50%; + border-radius: 50%; + overflow: hidden; +} +.mountains { + height: 12.5em; + width: 7.5em; + background-color: #144569; + position: absolute; + left: 1.9em; + bottom: -0.62em; + transform: rotate(-50deg); +} +.mountains:before { + content: ""; + position: absolute; + height: 5em; + width: 8.75em; + background-color: #144569; + left: 3.12em; + bottom: 1.25em; + transform: rotate(-90deg); +} +.mountains:after { + content: ""; + position: absolute; + height: 6.25em; + width: 11em; + background-color: #144569; + left: 4.4em; + bottom: -6.7em; + transform: rotate(20deg); +} +.land { + height: 5em; + width: 28.12em; + background-color: #041524; + position: absolute; + bottom: -0.31em; + transform: rotate(5deg); +} +.moon { + height: 2.2em; + width: 2.2em; + background-color: #ffffff; + position: absolute; + left: 5.62em; + top: 4.4em; + border-radius: 50%; + box-shadow: 0 0 0 0.62em rgba(32, 105, 149, 0.6), + 0 0 0 1.25em rgba(32, 105, 149, 0.5), 0 0 0 1.9em rgba(32, 105, 149, 0.4); +} +.moon:before { + content: ""; + position: absolute; + background-color: #ebefe7; + height: 0.62em; + width: 0.62em; + border-radius: 50%; + top: 0.5em; + left: 0.37em; +} +.moon:after { + content: ""; + position: absolute; + background-color: #ebefe7; + height: 0.43em; + width: 0.43em; + border-radius: 50%; + top: 1.25em; + left: 0.75em; +} +.windmill { + height: 0; + width: 1.25em; + border-bottom: 2.37em solid #041524; + border-left: 0.15em solid transparent; + border-right: 0.15em solid transparent; + position: absolute; + right: 12.5em; + bottom: 4.87em; +} +.windmill:after { + position: absolute; + content: ""; + background-color: #041524; + height: 0.62em; + width: 1.25em; + bottom: -0.06em; + border-radius: 1.25em 1.25em 0 0; +} +.windmill:before { + content: ""; + position: absolute; + width: 1.5em; + height: 0; + border-bottom: 0.37em solid #0b2231; + border-left: 0.06em solid transparent; + border-right: 0.06em solid transparent; + position: absolute; + right: -0.2em; + top: 0.06em; +} +.light { + height: 0.25em; + width: 0.25em; + background-color: #8daf76; + position: absolute; + top: 0.75em; + left: 0.5em; + border-radius: 50%; + box-shadow: 0 0 0.06em 0.12em rgba(141, 175, 118, 0.3), + 0 0 0.06em 0.25em rgba(141, 175, 118, 0.2); +} +.light:before { + content: ""; + position: absolute; + background-color: #0f304f; + height: 0.5em; + width: 0.5em; + bottom: -1.25em; + left: -0.12em; + border-radius: 0.25em 0.25em 0 0; +} +.blades { + height: 3.75em; + width: 3.75em; + position: absolute; + bottom: -1.9em; + left: -1.25em; + animation: spin 5s infinite linear; +} +@keyframes spin { + 100% { + transform: rotate(360deg); + } +} +.blades:before { + position: absolute; + content: ""; + height: 100%; + width: 0.5em; + background-color: #041524; + left: 1.62em; +} +.blades:after { + position: absolute; + content: ""; + height: 100%; + width: 0.5em; + background-color: #041524; + left: 1.62em; + transform: rotate(90deg); +} +.star, +.star:before, +.star:after { + height: 0.18em; + width: 0.18em; + background-color: #ffffff; + position: absolute; + border-radius: 50%; + opacity: 0.3; + animation: twinkle 2s infinite; +} +@keyframes twinkle { + 50% { + opacity: 1; + } +} +.star-1 { + top: 5em; + left: 18.75em; +} +.star-1:before { + content: ""; + top: 1.9em; + left: -16.4em; + animation-delay: 0.3s; +} +.star-1:after { + content: ""; + left: -12.8em; + top: 5em; + animation-delay: 0.7s; +} +.star-2 { + left: 11.25em; + top: 3.12em; + animation-delay: 0.2s; +} +.star-2:before { + content: ""; + left: 2.5em; + top: 8.75em; + animation-delay: 0.9s; +} +.star-2:after { + content: ""; + left: 7.5em; + top: 6.25em; + animation-delay: 0.35s; +} +.star-3 { + left: 15em; + top: 1.9em; + animation-delay: 0.1s; +} +.star-3:before { + content: ""; + top: 5em; + left: -0.93em; +} +.shooting-star { + height: 0.18em; + width: 2.5em; + background-color: #ffffff; + transform: rotate(-30deg); + position: absolute; + right: -0.62em; + opacity: 0.2; + animation: shooting-str 5s infinite; +} +@keyframes shooting-str { + 10% { + transform: rotate(-30deg) translate(-34em, 0); + } + 100% { + transform: rotate(-30deg) translate(-34em, 0); + } +} +.tree { + height: 0; + width: 0; + border-bottom: 2em solid #041524; + border-left: 0.37em solid transparent; + border-right: 0.37em solid transparent; + position: absolute; + bottom: 4.87em; + left: 3.12em; +} +.tree:before { + content: ""; + position: absolute; + border-bottom: 1.56em solid #041524; + border-left: 0.37em solid transparent; + border-right: 0.37em solid transparent; + bottom: -2.18em; + left: 0.18em; +} +@media screen and (min-width: 500px) { + .container { + font-size: 22px; + } +} diff --git a/include.js b/include.js index 391d9b14c..2245936b2 100644 --- a/include.js +++ b/include.js @@ -2707,8 +2707,15 @@ let cards = [ }, { artName: 'Cloud', - pageLink: './Art/archana423/index.html', - imageLink: './Art/archana423/cloud.gif', + pageLink: './Art/archana423/Cloud/index.html', + imageLink: './Art/archana423/Cloud/cloud.gif', + author: 'Archana', + githubLink: 'https://github.com/archana423' + }, + { + artName: 'MoonNight', + pageLink: './Art/archana423/Moon night/index.html', + imageLink: './Art/archana423/Moon night/MoonNight.gif', author: 'Archana', githubLink: 'https://github.com/archana423' },