add new animation (#2404)

Co-authored-by: rudrakshkushwaha <rudrakshkushwaha907@gmail.com>
zero-to-mastery · Oct 31, 2023 · c59020d · c59020d
1 parent 820178f
commit c59020d
Show file tree

Hide file tree

Showing 7 changed files with 301 additions and 2 deletions.
diff --git a/Art/archana423/cloud.gif → Art/archana423/Cloud/cloud.gif b/Art/archana423/cloud.gif → Art/archana423/Cloud/cloud.gif
diff --git a/Art/archana423/index.html → Art/archana423/Cloud/index.html b/Art/archana423/index.html → Art/archana423/Cloud/index.html
diff --git a/Art/archana423/style.css → Art/archana423/Cloud/style.css b/Art/archana423/style.css → Art/archana423/Cloud/style.css
diff --git a/Art/archana423/Moon night/MoonNight.gif b/Art/archana423/Moon night/MoonNight.gif
diff --git a/Art/archana423/Moon night/index.html b/Art/archana423/Moon night/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Night Sky Animation</title>
+    <!-- Stylesheet -->
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="star star-1"></div>
+      <div class="star star-2"></div>
+      <div class="star star-3"></div>
+      <div class="moon"></div>
+      <div class="shooting-star"></div>
+      <div class="mountains"></div>
+      <div class="land">
+        <div class="windmill">
+          <div class="light"></div>
+          <div class="blades"></div>
+        </div>
+        <div class="tree"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Art/archana423/Moon night/style.css 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
@@ -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'
   },