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) ]; /* -------------------------------------------------------------------------- */