added my animation (#2339)

zero-to-mastery · Oct 26, 2023 · 6cfe008 · 6cfe008
1 parent 99a2fd5
commit 6cfe008
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 0 deletions.
diff --git a/Art/claire-ca/glowing-moon.gif b/Art/claire-ca/glowing-moon.gif
diff --git a/Art/claire-ca/index.html b/Art/claire-ca/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Glowing Moon</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="grid">
+      <div class="moon"></div>
+      <div class="mountain mountain-1"></div>
+      <div class="mountain mountain-2"></div>
+      <div class="mountain mountain-3"></div>
+    </div>
+  </body>
+</html>
diff --git a/Art/claire-ca/style.css b/Art/claire-ca/style.css
@@ -0,0 +1,79 @@
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+  background: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    from(hsl(208, 34%, 24%)),
+    to(hsl(213, 74%, 15%))
+  );
+  background: -o-linear-gradient(
+    bottom,
+    hsl(208, 34%, 24%),
+    hsl(213, 74%, 15%)
+  );
+  background: linear-gradient(to top, hsl(208, 34%, 24%), hsl(213, 74%, 15%));
+}
+.grid {
+  display: -ms-grid;
+  display: grid;
+  place-items: center;
+  width: 100vw;
+  height: 100vh;
+}
+.moon {
+  background-color: hsl(60, 45%, 94%);
+  width: 8rem;
+  height: 8rem;
+  border: 3px solid hsl(60, 73%, 91%);
+  border-radius: 50%;
+  -webkit-animation: glow 2s infinite alternate;
+  animation: glow 2s infinite alternate;
+}
+.mountain {
+  position: absolute;
+  bottom: 0;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  border-left: 9.375rem solid transparent;
+  border-right: 9.375rem solid transparent;
+}
+.mountain-1 {
+  left: 50%;
+  border-bottom: 17.5rem solid hsl(0, 0%, 0%);
+  z-index: 1;
+}
+.mountain-2 {
+  left: 60%;
+  border-bottom: 16.25rem solid hsl(0, 2%, 12%);
+}
+.mountain-3 {
+  left: 40%;
+  border-bottom: 13.75rem solid hsl(0, 0%, 9%);
+}
+@-webkit-keyframes glow {
+  from {
+    -webkit-box-shadow: 0 0 5px -5px hsl(60, 80%, 90%);
+    box-shadow: 0 0 5px -5px hsl(60, 80%, 90%);
+  }
+  to {
+    -webkit-box-shadow: 0 0 5px 5px hsl(60, 80%, 90%);
+    box-shadow: 0 0 5px 5px hsl(60, 80%, 90%);
+  }
+}
+@keyframes glow {
+  from {
+    -webkit-box-shadow: 0 0 5px -5px hsl(60, 80%, 90%);
+    box-shadow: 0 0 5px -5px hsl(60, 80%, 90%);
+  }
+  to {
+    -webkit-box-shadow: 0 0 5px 5px hsl(60, 80%, 90%);
+    box-shadow: 0 0 5px 5px hsl(60, 80%, 90%);
+  }
+}
diff --git a/include.js b/include.js
@@ -2235,6 +2235,13 @@ let cards = [
     author: 'Aryan741x',
     githubLink: 'https://github.com/Aryan741x'
   },
+  {
+    artName: 'Glowing Moon',
+    pageLink: './Art/claire-ca/index.html',
+    imageLink: './Art/claire-ca/glowing-moon.gif',
+    author: 'Claire Calder',
+    githubLink: 'https://github.com/claire-ca'
+  },
   {
     artName: 'Rotating Box',
     pageLink: './Art/Dhairya-Mehra/animation.html',