added animation (#2386)

* added animation * Update index.html removed unnecessary line --------- Co-authored-by: rudrakshkushwaha <rudrakshkushwaha907@gmail.com> Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com>
zero-to-mastery · Oct 29, 2023 · a6ac9e4 · a6ac9e4
1 parent df5a1b2
commit a6ac9e4
Show file tree

Hide file tree

Showing 4 changed files with 205 additions and 0 deletions.
diff --git a/Art/archana423/cloud.gif b/Art/archana423/cloud.gif
diff --git a/Art/archana423/index.html b/Art/archana423/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sleepy Cloud Animation</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="moon"></div>
+      <div class="cloud">
+        <div class="blush"></div>
+        <div class="eye-l"></div>
+        <div class="eye-r"></div>
+        <div class="mouth"></div>
+      </div>
+      <div class="star star-1"></div>
+      <div class="star star-2"></div>
+      <div class="star star-3"></div>
+      <div class="star star-4"></div>
+      <div class="star star-5"></div>
+      <div class="star star-6"></div>
+    </div>
+  </body>
+</html>
diff --git a/Art/archana423/style.css b/Art/archana423/style.css
@@ -0,0 +1,173 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+.container {
+  background-color: #394276;
+  height: 31.25em;
+  width: 31.25em;
+  border-radius: 50%;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+}
+.cloud {
+  background-color: #f5f5f5;
+  height: 6.25em;
+  width: 20.62em;
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 18.75em;
+  border-radius: 6.25em;
+}
+.cloud:before {
+  position: absolute;
+  content: "";
+  height: 10.62em;
+  width: 10.62em;
+  background-color: #f5f5f5;
+  border-radius: 50%;
+  bottom: 1.87em;
+  left: 2.5em;
+}
+.cloud:after {
+  position: absolute;
+  content: "";
+  height: 6.25em;
+  width: 6.25em;
+  background-color: #f5f5f5;
+  border-radius: 50%;
+  bottom: 3.75em;
+  right: 3.12em;
+  z-index: -1;
+}
+.moon {
+  background-color: #787470;
+  height: 9.37em;
+  width: 9.37em;
+  border-radius: 50%;
+  position: absolute;
+  right: 5em;
+  top: 11.25em;
+  overflow: hidden;
+  z-index: -2;
+  animation: spin-moon 5s infinite linear;
+}
+@keyframes spin-moon {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.moon:before {
+  position: absolute;
+  content: "";
+  height: 1.87em;
+  width: 1.87em;
+  background-color: #565350;
+  border-radius: 50%;
+  top: 1.87em;
+  box-shadow: 5.62em 3.12em 0 0.75em #565350, 2.18em 4.68em 0 -0.3em #565350,
+    6.25em -1.87em 0 -0.18em #565350, 3.43em 0.3em 0 -0.5em #565350;
+}
+.blush {
+  height: 2.62em;
+  width: 2.62em;
+  background-color: #c9c9c9;
+  border-radius: 50%;
+  position: absolute;
+  left: 5em;
+  box-shadow: 6.87em 0 #c9c9c9;
+}
+.eye-l,
+.eye-r {
+  position: absolute;
+  height: 1.25em;
+  width: 2.12em;
+  background-color: #363636;
+  border-radius: 0 0 0.93em 0.93em;
+}
+.eye-l {
+  left: 6.87em;
+}
+.eye-l:before,
+.eye-r:before {
+  position: absolute;
+  content: "";
+  background-color: #f5f5f5;
+  height: 0.81em;
+  width: 1.25em;
+  border-radius: 0 0 0.93em 0.93em;
+  left: 0.43em;
+}
+.eye-r {
+  left: 11.25em;
+}
+.mouth {
+  height: 1.25em;
+  width: 1.25em;
+  background-color: #363636;
+  border-radius: 50%;
+  position: absolute;
+  left: 9.68em;
+  top: 1.56em;
+  animation: snoore 3s infinite;
+}
+@keyframes snoore {
+  50% {
+    transform: scale(1.3);
+  }
+}
+.star {
+  position: absolute;
+  height: 0.31em;
+  width: 0.31em;
+  background-color: #f0d815;
+  border-radius: 50%;
+}
+.star:before {
+  position: absolute;
+  content: "";
+  background-color: rgba(240, 216, 21, 0.4);
+  height: 0.31em;
+  width: 0.31em;
+  border-radius: 50%;
+  animation: twinkle 2s infinite;
+}
+@keyframes twinkle {
+  50% {
+    transform: scale(2);
+  }
+}
+.star-1 {
+  left: 4.37em;
+  top: 6.25em;
+}
+.star-2 {
+  left: 13.12em;
+  top: 28.12em;
+}
+.star-3 {
+  left: 8.75em;
+  top: 10em;
+}
+.star-4 {
+  left: 16.25em;
+  top: 1.87em;
+}
+.star-5 {
+  left: 26.25em;
+  top: 21.87em;
+}
+.star-6 {
+  left: 28.75em;
+  top: 11.87em;
+}
+@media screen and (max-width: 500px) {
+  .container {
+    font-size: 12px;
+  }
+}
diff --git a/include.js b/include.js
@@ -2648,6 +2648,13 @@ let cards = [
     author: 'Fiona Dash',
     githubLink: 'https://github.com/fi1na'
   },
+  {
+    artName: 'Cloud',
+    pageLink: './Art/archana423/index.html',
+    imageLink: './Art/archana423/cloud.gif',
+    author: 'Archana',
+    githubLink: 'https://github.com/archana423'
+  },
 ];
 
 /* -------------------------------------------------------------------------- */