adding my animation art to the project (#2450)

zero-to-mastery · Jul 2, 2024 · 3cfa11d · 3cfa11d
1 parent ce5418a
commit 3cfa11d
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 0 deletions.
diff --git a/Art/berenvrl/animatedtree.gif b/Art/berenvrl/animatedtree.gif
diff --git a/Art/berenvrl/index.html b/Art/berenvrl/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Animated Tree</title>
+    <link href="style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="tree-container">
+      <h3>Happy New Year!</h3>
+      <div class="tree">
+        <div class="star">
+          <div class="star2"></div>
+        </div>
+      </div>
+      <div class="snowflake">
+        <div class="snowitem"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Art/berenvrl/style.css b/Art/berenvrl/style.css
@@ -0,0 +1,141 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.tree-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #333;
+}
+.tree-container h3 {
+  animation: moverightleft 2s infinite alternate;
+  margin-bottom: 10rem;
+  color: red;
+  font-size: 3rem;
+}
+.tree {
+  width: 0;
+  height: 0;
+  border-left: 40px solid transparent;
+  border-right: 40px solid transparent;
+  border-bottom: 80px solid green;
+  position: relative;
+  animation: christmastree 1s infinite;
+}
+.tree::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  bottom: -160px;
+  left: -60px;
+  border-left: 60px solid transparent;
+  border-right: 60px solid transparent;
+  border-bottom: 120px solid green;
+}
+.star {
+  position: relative;
+  top: -50px;
+  left: -25px;
+  width: 0;
+  height: 0;
+  border-left: 25px solid transparent;
+  border-right: 25px solid transparent;
+  border-bottom: 50px solid rgb(255, 255, 0);
+}
+.star2 {
+  position: absolute;
+  left: -25px;
+  width: 0;
+  height: 0;
+  border-left: 25px solid transparent;
+  border-right: 25px solid transparent;
+  border-bottom: 50px solid yellow;
+  transform: translateY(50%) rotate(-180deg);
+}
+
+.snowflake {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 9999;
+  overflow: hidden;
+}
+.snowitem,
+.snowitem:after,
+.snowitem:before {
+  content: '';
+  position: absolute;
+  top: -650px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: radial-gradient(4px 4px at 100px 50px, #fff, transparent),
+    radial-gradient(6px 6px at 100px 50px, #fff, transparent),
+    radial-gradient(3px 3px at 200px 150px, #fff, transparent),
+    radial-gradient(4px 4px at 300px 250px, #fff, transparent),
+    radial-gradient(6px 6px at 400px 350px, #fff, transparent),
+    radial-gradient(3px 3px at 500px 100px, #fff, transparent),
+    radial-gradient(4px 4px at 50px 200px, #fff, transparent),
+    radial-gradient(6px 6px at 100px 650px, #fff, transparent),
+    radial-gradient(4px 4px at 150px 300px, #fff, transparent),
+    radial-gradient(6px 6px at 250px 400px, #fff, transparent),
+    radial-gradient(3px 3px at 350px 500px, #fff, transparent);
+
+  background-size: 650px 650px;
+  animation: snowfall 10s infinite linear;
+}
+.snowitem:after {
+  margin-left: -250px;
+  opacity: 0.5;
+  filter: blur(2px);
+}
+.snowitem:before {
+  margin-left: -350px;
+  opacity: 0.7;
+  filter: blur(1px);
+}
+
+@keyframes moverightleft {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateY(20px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes christmastree {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  50% {
+    transform: rotateZ(1deg);
+  }
+  100% {
+    transform: rotateZ(0deg);
+  }
+}
+@keyframes snowfall {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(100vh);
+  }
+}
diff --git a/include.js b/include.js
@@ -3907,6 +3907,13 @@ let cards = [
     imageLink: './Art/wcgraupmann/giphy.gif',
     author: 'Will Graupmann',
     githubLink: 'https://github.com/wcgraupmann'
+  {
+=======
+    artName: 'Animated Tree',
+    pageLink: './Art/berenvrl/index.html',
+    imageLink: './Art/berenvrl/animatedtree.gif',
+    githubLink: 'https://github.com/berenvrl'
+>>>>>>> c716f852 (adding my animation art to the project)
   }
 ];