adding snow-fall repo back in

zero-to-mastery · Sep 4, 2023 · 98226b8 · 98226b8
1 parent 770b310
commit 98226b8
Show file tree

Hide file tree

Showing 5 changed files with 172 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,31 @@
+<!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,141 @@
+@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,.5s;animation-delay:6s,.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}
+