diff --git a/Art/Dzivmv/index.html b/Art/Dzivmv/index.html new file mode 100644 index 000000000..15653bbe9 --- /dev/null +++ b/Art/Dzivmv/index.html @@ -0,0 +1,28 @@ + + + + + + Cloud & Rainbow Rain Animation + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/Art/Dzivmv/rainbow_rain.gif b/Art/Dzivmv/rainbow_rain.gif new file mode 100644 index 000000000..6ba5d9576 Binary files /dev/null and b/Art/Dzivmv/rainbow_rain.gif differ diff --git a/Art/Dzivmv/style.css b/Art/Dzivmv/style.css new file mode 100644 index 000000000..c663013e2 --- /dev/null +++ b/Art/Dzivmv/style.css @@ -0,0 +1,303 @@ +{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body +{ + display:flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #e8f9fc; +} +.container +{ + position: relative; + height: 600px; +} +.cloud +{ + position: relative; + top: 50px; + width: 320px; + height: 100px; + background: #4c7fe6; + border-radius: 100px; +} +.cloud::before +{ + content: ''; + position: absolute; + top: -50px; + left: 40px; + width: 110px; + height: 110px; + background: #4c7fe6; + border-radius: 50%; + box-shadow: 90px 0 0 30px #4c7fe6; +} +.raindots +{ + position: relative; + top: 50px; + left: 100px; + width: 20px; + height: 20px; + background: blueviolet; + border-radius: 100%; + animation: animate 5s linear infinite; +} +.raindots::before +{ + content: ''; + position: relative; + top: -40px; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 30px solid blueviolet; + margin: 10px auto 0; +} +.raindots2 +{ + position: relative; + left: 50px; + top: 50px; + width: 20px; + height: 20px; + background: orangered; + border-radius: 100%; + animation: animate 3s linear infinite; +} +.raindots2::before +{ + content: ''; + position: relative; + top: -40px; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 30px solid orangered; + margin: 10px auto 0; +} +.raindots3 +{ + position: relative; + left: 80px; + top: 30px; + width: 20px; + height: 20px; + background: yellow; + border-radius: 100%; + animation: animate 2s linear infinite; +} +.raindots3::before +{ + content: ''; + position: relative; + top: -40px; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 30px solid yellow; + margin: 10px auto 0; +} +.raindots4 +{ + position: relative; + left: 120px; + top: 30px; + width: 20px; + height: 20px; + background: forestgreen; + border-radius: 100%; + animation: animate 2s linear infinite; +} +.raindots4::before +{ + content: ''; + position: relative; + top: -40px; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 30px solid forestgreen; + margin: 10px auto 0; +} +.raindots5 +{ + position: relative; + left: 250px; + top: 2px; + width: 20px; + height: 20px; + background: royalblue; + border-radius: 100%; + animation: animate 2s linear infinite; +} +.raindots5::before +{ + content: ''; + position: relative; + top: -40px; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 30px solid royalblue; + margin: 10px auto 0; +} +.raindots6 +{ + position: relative; + left: 150px; + top: -15px; + width: 20px; + height: 20px; + background: red; + border-radius: 100%; + animation: animate 3s linear infinite; +} +.raindots6::before +{ + content: ''; + position: relative; + top: -40px; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 30px solid red; + margin: 10px auto 0; +} +.raindots7 +{ + position: relative; + left: 180px; + top: -50px; + width: 20px; + height: 20px; + background: orangered; + border-radius: 100%; + animation: animate 4s linear infinite; +} +.raindots7::before +{ + content: ''; + position: relative; + top: -40px; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 30px solid orangered; + margin: 10px auto 0; +} +.raindots8 +{ + position: relative; + left: 220px; + top: -50px; + width: 20px; + height: 20px; + background: lightblue; + border-radius: 100%; + animation: animate 3s linear infinite; + animation-duration: 10s; +} +.raindots8::before +{ + content: ''; + position: relative; + top: -40px; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 30px solid lightblue; + margin: 10px auto 0; +} +@keyframes animate +{ + 0% + { + transform: translateY(0) scale(1); + } + 70% + { + transform: translateY(300px) scale(1); + } + 100% + { + transform: translateY(300px) scale(0); + } +} +.teacup +{ + position: relative; + background-color: #ffc994; + top: 220px; + left: 45px; + height: 150px; + width: 230px; + border-radius: 10px 10px 70px 70px; + bottom: 6.25px; +} +.teacup::before +{ + position:relative; + content: ""; + height: 100px; + width: 100; + border: 50px solid #ffc994; + left: 200px; + bottom: -50px; + border-radius: 50%; + padding-inline: 10px; +} +.eye +{ + position: relative; + content: ''; + height: 20px; + width: 30px; + background-color: transparent; + border: 5px solid black; + border-radius: 50px 50px 0px 0px; + border-bottom: none; + top: 20px; +} +.eye-l +{ + left: 50px; +} +.eye-r +{ + left: 120px; + top: -5px; +} +.mouth +{ + position: relative; + background-color: coral; + height: 40px; + width: 75px; + border-radius: 20px 20px 80px 80px; + bottom: -5px; + left: 65px; +} +.mouth::before +{ + content: ""; + position: relative; + background-color: orangered; + height: 20px; + width: 50px; + border-radius: 60px 60px 60px 60px; + bottom: 50px; +} diff --git a/include.js b/include.js index f2bdc7050..9581b7e36 100644 --- a/include.js +++ b/include.js @@ -2269,6 +2269,13 @@ let cards = [ imageLink: './Art/Vishalpatilr20/index.png', author: 'Vishal', githubLink: 'https://github.com/vishalpatil20' + }, + { + artName: 'Cup of Rainbow Rain', + pageLink: './Art/Dzivmv/index.html', + imageLink: './Art/Dzivmv/rainbow_rain.gif', + author: 'Dzivmv', + githubLink: 'https://github.com/Dzivmv' } ];