diff --git a/Art/berenvrl/animatedtree.gif b/Art/berenvrl/animatedtree.gif
new file mode 100644
index 000000000..8a9f6b75b
Binary files /dev/null and b/Art/berenvrl/animatedtree.gif differ
diff --git a/Art/berenvrl/index.html b/Art/berenvrl/index.html
new file mode 100644
index 000000000..871997cc7
--- /dev/null
+++ b/Art/berenvrl/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+ Animated Tree
+
+
+
+
+
+
diff --git a/Art/berenvrl/style.css b/Art/berenvrl/style.css
new file mode 100644
index 000000000..b1a0859ee
--- /dev/null
+++ 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
index 91c90d86e..de42f7235 100644
--- 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)
}
];