Merge pull request #1711 from zero-to-mastery/add-snow-fall-back-in

adding snow-fall repo back in
zero-to-mastery · Sep 4, 2023 · e230d21 · e230d21
2 parents 770b310 + 23971ff
commit e230d21
Show file tree

Hide file tree

Showing 5 changed files with 226 additions and 0 deletions.
diff --git a/Art/snow-fall/favicon-16x16.png b/Art/snow-fall/favicon-16x16.png
diff --git a/Art/snow-fall/favicon.ico b/Art/snow-fall/favicon.ico
diff --git a/Art/snow-fall/index.html b/Art/snow-fall/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Snow Fall - CSS Animation</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"
+    />
+    <link rel="icon" type="image/png" href="favicon.ico" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="overlay-container">
+      <div class="snowflakes">
+        <div class="snowflake">❄</div>
+        <div class="snowflake">❄</div>
+        <div class="snowflake">❄</div>
+        <div class="snowflake">❄</div>
+        <div class="snowflake">❄</div>
+        <div class="snowflake">❄</div>
+        <div class="snowflake">❄</div>
+        <div class="snowflake">❄</div>
+        <div class="snowflake">❄</div>
+        <div class="snowflake">❄</div>
+      </div>
+    </div>
+    <div class="title-container">
+      <h1 class="title">Snow Fall - CSS Animation</h1>
+    </div>
+  </body>
+</html>
diff --git a/Art/snow-fall/snow-fall.gif b/Art/snow-fall/snow-fall.gif
diff --git a/Art/snow-fall/style.css b/Art/snow-fall/style.css
@@ -0,0 +1,192 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap');
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  background: radial-gradient(ellipse at bottom, #3b5a7f 0%, #090a0f 100%);
+  overflow: hidden;
+  font-family: 'Lato', sans-serif;
+}
+
+.title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  top: 35%;
+}
+
+.title {
+  color: #a9dffc;
+  font-family: 'Lato', sans-serif;
+  letter-spacing: 2px;
+  text-shadow: 0 0 3px #292688, 0 0 9px #9494fc;
+}
+
+/* customizable snowflake styling */
+.snowflake {
+  color: #fff;
+  filter: drop-shadow(0 0 6px rgb(200, 194, 246));
+  font-family: Arial;
+  text-shadow: 0 0 1px #000;
+  animation: image_blur 2s;
+}
+
+.snowflake:nth-child(1) {
+  font-size: 0.5rem;
+}
+
+.snowflake:nth-child(2) {
+  font-size: 0.65rem;
+}
+
+.snowflake:nth-child(3) {
+  font-size: 0.75rem;
+}
+
+.snowflake:nth-child(4) {
+  font-size: 0.85rem;
+}
+
+.snowflake:nth-child(5) {
+  font-size: 0.95rem;
+}
+
+.snowflake:nth-child(6) {
+  font-size: 1rem;
+}
+
+.snowflake:nth-child(7) {
+  font-size: 0.95rem;
+}
+
+.snowflake:nth-child(8) {
+  font-size: 0.85rem;
+}
+
+.snowflake:nth-child(9) {
+  font-size: 0.75rem;
+}
+
+.snowflake:nth-child(10) {
+  font-size: 0.65rem;
+}
+
+@-webkit-keyframes snowflakes-fall {
+  0% {
+    top: -10%;
+  }
+  100% {
+    top: 100%;
+  }
+}
+@-webkit-keyframes snowflakes-shake {
+  0% {
+    -webkit-transform: translateX(0px);
+    transform: translateX(0px);
+  }
+  50% {
+    -webkit-transform: translateX(50px);
+    transform: translateX(50px);
+  }
+  100% {
+    -webkit-transform: translateX(0px);
+    transform: translateX(0px);
+  }
+}
+@keyframes snowflakes-fall {
+  0% {
+    top: -10%;
+  }
+  100% {
+    top: 100%;
+  }
+}
+@keyframes snowflakes-shake {
+  0% {
+    transform: translateX(0px);
+  }
+  50% {
+    transform: translateX(80px);
+  }
+  100% {
+    transform: translateX(0px);
+  }
+}
+.snowflake {
+  position: fixed;
+  top: -10%;
+  z-index: 9999;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default;
+  -webkit-animation-name: snowflakes-fall, snowflakes-shake;
+  -webkit-animation-duration: 10s, 3s;
+  -webkit-animation-timing-function: linear, ease-in-out;
+  -webkit-animation-iteration-count: infinite, infinite;
+  -webkit-animation-play-state: running, running;
+  animation-name: snowflakes-fall, snowflakes-shake;
+  animation-duration: 10s, 3s;
+  animation-timing-function: linear, ease-in-out;
+  animation-iteration-count: infinite, infinite;
+  animation-play-state: running, running;
+}
+
+.snowflake:nth-of-type(0) {
+  left: 1%;
+  -webkit-animation-delay: 0s, 0s;
+  animation-delay: 0s, 0s;
+}
+.snowflake:nth-of-type(1) {
+  left: 10%;
+  -webkit-animation-delay: 1s, 1s;
+  animation-delay: 1s, 1s;
+}
+.snowflake:nth-of-type(2) {
+  left: 20%;
+  -webkit-animation-delay: 6s, 0.5s;
+  animation-delay: 6s, 0.5s;
+}
+.snowflake:nth-of-type(3) {
+  left: 30%;
+  -webkit-animation-delay: 4s, 2s;
+  animation-delay: 4s, 2s;
+}
+.snowflake:nth-of-type(4) {
+  left: 40%;
+  -webkit-animation-delay: 2s, 2s;
+  animation-delay: 2s, 2s;
+}
+.snowflake:nth-of-type(5) {
+  left: 50%;
+  -webkit-animation-delay: 8s, 3s;
+  animation-delay: 8s, 3s;
+}
+.snowflake:nth-of-type(6) {
+  left: 60%;
+  -webkit-animation-delay: 6s, 2s;
+  animation-delay: 6s, 2s;
+}
+.snowflake:nth-of-type(7) {
+  left: 70%;
+  -webkit-animation-delay: 2.5s, 1s;
+  animation-delay: 2.5s, 1s;
+}
+.snowflake:nth-of-type(8) {
+  left: 80%;
+  -webkit-animation-delay: 1s, 0s;
+  animation-delay: 1s, 0s;
+}
+.snowflake:nth-of-type(9) {
+  left: 90%;
+  -webkit-animation-delay: 3s, 1.5s;
+  animation-delay: 3s, 1.5s;
+}