diff --git a/Art/YumiMachino/index.html b/Art/YumiMachino/index.html
new file mode 100644
index 000000000..345158ef4
--- /dev/null
+++ b/Art/YumiMachino/index.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+ White Christmas
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Art/YumiMachino/styles.css b/Art/YumiMachino/styles.css
new file mode 100644
index 000000000..2b7a335e1
--- /dev/null
+++ b/Art/YumiMachino/styles.css
@@ -0,0 +1,437 @@
+body {
+ background-color: gainsboro;
+ padding: 0;
+ margin: 0;
+}
+
+.wrapper {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: linear-gradient(#123, #063970);
+}
+
+.snow {
+ position: absolute;
+ background-color: #eaeaea;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ animation: snowfall 15s linear 0s infinite;
+}
+
+
+
+.snow:nth-of-type(even) {
+ animation: snowfall 15s linear 1s infinite;
+}
+
+.snow:nth-of-type(odd) {
+ animation: snowfall 10s linear 0s infinite;
+}
+
+.snow:nth-child(n + 10).snow:nth-of-type(even) {
+ animation: snowfall 12s linear 8s infinite;
+ opacity: 0;
+}
+
+.snow:nth-child(n + 10).snow:nth-of-type(odd) {
+ animation: snowfall 10s linear 4s infinite;
+ opacity: 0;
+}
+
+.snow:nth-child(n + 20).snow:nth-of-type(even) {
+ animation: snowfall 8s linear 10s infinite;
+}
+
+.snow:nth-child(n + 20 / 2).snow:nth-of-type(odd) {
+ animation: snowfall 10s linear 3s infinite;
+}
+
+
+.snow:nth-child(1),
+.snow:nth-child(11),
+.snow:nth-child(21) {
+ top: 0%;
+ left: 5%;
+}
+
+.snow:nth-child(2),
+.snow:nth-child(12),
+.snow:nth-child(22) {
+ top: 10%;
+ left: 15%;
+}
+
+.snow:nth-child(3),
+.snow:nth-child(13),
+.snow:nth-child(23) {
+ top: 30%;
+ left: 10%;
+}
+
+.snow:nth-child(4),
+.snow:nth-child(14),
+.snow:nth-child(24) {
+ top: 20%;
+ left: 20%;
+}
+
+.snow:nth-child(5),
+.snow:nth-child(15),
+.snow:nth-child(25) {
+ top: 14%;
+ left: 32%;
+}
+
+.snow:nth-child(6),
+.snow:nth-child(16),
+.snow:nth-child(26) {
+ top: 4%;
+ left: 42%;
+}
+
+.snow:nth-child(7),
+.snow:nth-child(17),
+.snow:nth-child(27) {
+ top: 8%;
+ left: 53%;
+}
+
+.snow:nth-child(8),
+.snow:nth-child(18),
+.snow:nth-child(28) {
+ top: 18%;
+ left: 67%;
+}
+
+.snow:nth-child(9),
+.snow:nth-child(19),
+.snow:nth-child(29) {
+ top: 1%;
+ left: 77%;
+}
+
+.snow:nth-child(10),
+.snow:nth-child(20),
+.snow:nth-child(30) {
+ top: 12%;
+ left: 90%;
+}
+
+.tree_wrapper {
+ width: 70%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 10px 0px;
+ transform: translateY(10px);
+}
+
+.star {
+ position: relative;
+ width: 0px;
+ height: 0px;
+ border-right: 20px solid transparent;
+ border-bottom: 15px solid #ffd700;
+ border-left: 20px solid transparent;
+ transform: rotate(35deg);
+}
+
+.star::before {
+ border-bottom: 16px solid #ffd700;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ position: absolute;
+ height: 0;
+ width: 0;
+ top: -10px;
+ left: -12px;
+ display: block;
+ content: "";
+ transform: rotate(-35deg);
+}
+
+.star:after {
+ position: absolute;
+ display: block;
+ top: 0px;
+ left: -20px;
+ width: 0px;
+ height: 0px;
+ border-right: 20px solid transparent;
+ border-bottom: 15px solid #ffd700;
+ border-left: 20px solid transparent;
+ transform: rotate(-70deg);
+ content: "";
+}
+
+.branch {
+ position: relative;
+}
+
+.branch1 {
+ border-left: 150px solid transparent;
+ border-right: 150px solid transparent;
+ border-bottom: 150px solid #1c5433;
+}
+
+.branch2 {
+ border-left: 170px solid transparent;
+ border-right: 170px solid transparent;
+ border-bottom: 170px solid #1c5433;
+ transform: translateY(-40px);
+}
+
+.branch3 {
+ border-left: 190px solid transparent;
+ border-right: 190px solid transparent;
+ border-bottom: 190px solid #1c5433;
+ transform: translateY(-80px);
+}
+
+.decoration {
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+}
+
+.decoration1_1 {
+ top: 40px;
+ left: -30px;
+}
+
+.decoration1_2 {
+ top: 80px;
+ left: 60px;
+}
+
+.decoration2_1 {
+ top: -10px;
+ left: -50px;
+}
+
+.decoration2_2 {
+ top: 60px;
+ left: 20px;
+}
+
+.decoration2_3 {
+ top: 120px;
+ left: -60px;
+}
+
+.decoration3_1 {
+ top: 130px;
+ left: -100px;
+}
+
+.decoration3_2 {
+ top: 120px;
+ left: 30px;
+}
+
+.decoration3_3 {
+ top: 75px;
+ left: 0px;
+}
+
+.decoration3_4 {
+ top: 160px;
+ left: 90px;
+}
+
+.blue {
+ background-color: #6495ed;
+ animation-name: blueblink;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+}
+
+.blue1 {
+ animation-delay: 0.1s;
+}
+
+.blue2 {
+ animation-delay: 0.8s;
+}
+
+.blue3 {
+ animation-delay: 0.6s;
+}
+
+.pink {
+ background-color: #db7093;
+ animation-name: pinkblink;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+}
+
+.pink1 {
+ animation-delay: 0.3s;
+}
+
+.pink2 {
+ animation-delay: 0.1s;
+}
+
+.yellow {
+ background-color: #FFD700;
+ ;
+ animation-name: yellowblink;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+}
+
+.yellow1 {
+ animation-delay: 0.2s;
+}
+
+.yellow2 {
+ animation-delay: 0.6s;
+}
+
+.yellow3 {
+ animation-delay: 0.4s;
+}
+
+.green {
+ background-color: #008000;
+ animation-name: greenblink;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+}
+
+
+.tree {
+ background-color: #8b4513;
+ width: 10%;
+ height: 100px;
+ transform: translateY(-80px);
+}
+
+.ground {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100vw;
+ height: 26vh;
+ background-color: #eaeaea;
+}
+
+
+/*
+animation
+*/
+
+@keyframes blueblink {
+ 0% {
+ background-color: #6495ed;
+ }
+
+ 25% {
+ background-color: #6495ed;
+ }
+
+ 50% {
+ background-color: #0000ff;
+ }
+
+ 100% {
+ background-color: #0000ff;
+ }
+}
+
+@keyframes pinkblink {
+ 0% {
+ background-color: #DB7093;
+ }
+
+ 25% {
+ background-color: #DB7093;
+ }
+
+ 50% {
+ background-color: #C71585;
+ }
+
+ 100% {
+ background-color: #C71585;
+ }
+}
+
+@keyframes yellowblink {
+ 0% {
+ background-color: #FFD700;
+ }
+
+ 25% {
+ background-color: #FFD700;
+ }
+
+ 50% {
+ background-color: #B8860B;
+ }
+
+ 100% {
+ background-color: #B8860B;
+ }
+}
+
+@keyframes greenblink {
+ 0% {
+ background-color: #008000;
+ }
+
+ 25% {
+ background-color: #008000;
+ }
+
+ 50% {
+ background-color: #00FF00;
+ }
+
+ 100% {
+ background-color: #00FF00;
+ }
+}
+
+@keyframes snowfall {
+ 0% {
+ transform: translate(0);
+ opacity: 1;
+ }
+
+ 20% {
+ transform: translate(4px, 40px);
+ opacity: 0.8;
+ }
+
+ 40% {
+ transform: translate(-7px, 80px);
+ opacity: 0.7;
+ }
+
+ 60% {
+ transform: translate(10px, 120px);
+ opacity: 0.5;
+ }
+
+ 80% {
+ transform: translate(-14px, 180px);
+ opacity: 0.2;
+ }
+
+ 100% {
+ transform: translate(16px, 240px);
+ opacity: 0;
+ }
+}
\ No newline at end of file
diff --git a/Art/YumiMachino/white_christmas.gif b/Art/YumiMachino/white_christmas.gif
new file mode 100644
index 000000000..1e3d5745a
Binary files /dev/null and b/Art/YumiMachino/white_christmas.gif differ
diff --git a/include.js b/include.js
index 698ca7274..f9547deee 100644
--- a/include.js
+++ b/include.js
@@ -2882,6 +2882,7 @@ let cards = [
githubLink: 'https://github.com/moutro'
},
{
+<<<<<<< HEAD
artName: 'Animatron',
pageLink: './Art/shazeen-1990/index.html',
imageLink: './Art/shazeen-1990/animate.jpg',
@@ -2915,6 +2916,14 @@ let cards = [
author: 'Nyame Richmond',
githubLink: 'https://github.com/nyame100'
}
+=======
+ artName: 'White Christmas',
+ pageLink: './Art/YumiMachino/index.html',
+ imageLink: './Art/YumiMachino/white_christmas.gif',
+ author: 'Yumi Machino',
+ githubLink: 'https://github.com/YumiMachino'
+ },
+>>>>>>> da7b7b4b (Add my art to the project)
];
/* -------------------------------------------------------------------------- */