diff --git a/Art/archana423/cloud.gif b/Art/archana423/cloud.gif
new file mode 100644
index 000000000..459fc81ee
Binary files /dev/null and b/Art/archana423/cloud.gif differ
diff --git a/Art/archana423/index.html b/Art/archana423/index.html
new file mode 100644
index 000000000..89c2c7a64
--- /dev/null
+++ b/Art/archana423/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+ Sleepy Cloud Animation
+
+
+
+
+
+
diff --git a/Art/archana423/style.css b/Art/archana423/style.css
new file mode 100644
index 000000000..56e60cb31
--- /dev/null
+++ b/Art/archana423/style.css
@@ -0,0 +1,173 @@
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+.container {
+ background-color: #394276;
+ height: 31.25em;
+ width: 31.25em;
+ border-radius: 50%;
+ position: absolute;
+ transform: translate(-50%, -50%);
+ top: 50%;
+ left: 50%;
+}
+.cloud {
+ background-color: #f5f5f5;
+ height: 6.25em;
+ width: 20.62em;
+ position: absolute;
+ margin: auto;
+ left: 0;
+ right: 0;
+ top: 18.75em;
+ border-radius: 6.25em;
+}
+.cloud:before {
+ position: absolute;
+ content: "";
+ height: 10.62em;
+ width: 10.62em;
+ background-color: #f5f5f5;
+ border-radius: 50%;
+ bottom: 1.87em;
+ left: 2.5em;
+}
+.cloud:after {
+ position: absolute;
+ content: "";
+ height: 6.25em;
+ width: 6.25em;
+ background-color: #f5f5f5;
+ border-radius: 50%;
+ bottom: 3.75em;
+ right: 3.12em;
+ z-index: -1;
+}
+.moon {
+ background-color: #787470;
+ height: 9.37em;
+ width: 9.37em;
+ border-radius: 50%;
+ position: absolute;
+ right: 5em;
+ top: 11.25em;
+ overflow: hidden;
+ z-index: -2;
+ animation: spin-moon 5s infinite linear;
+}
+@keyframes spin-moon {
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+.moon:before {
+ position: absolute;
+ content: "";
+ height: 1.87em;
+ width: 1.87em;
+ background-color: #565350;
+ border-radius: 50%;
+ top: 1.87em;
+ box-shadow: 5.62em 3.12em 0 0.75em #565350, 2.18em 4.68em 0 -0.3em #565350,
+ 6.25em -1.87em 0 -0.18em #565350, 3.43em 0.3em 0 -0.5em #565350;
+}
+.blush {
+ height: 2.62em;
+ width: 2.62em;
+ background-color: #c9c9c9;
+ border-radius: 50%;
+ position: absolute;
+ left: 5em;
+ box-shadow: 6.87em 0 #c9c9c9;
+}
+.eye-l,
+.eye-r {
+ position: absolute;
+ height: 1.25em;
+ width: 2.12em;
+ background-color: #363636;
+ border-radius: 0 0 0.93em 0.93em;
+}
+.eye-l {
+ left: 6.87em;
+}
+.eye-l:before,
+.eye-r:before {
+ position: absolute;
+ content: "";
+ background-color: #f5f5f5;
+ height: 0.81em;
+ width: 1.25em;
+ border-radius: 0 0 0.93em 0.93em;
+ left: 0.43em;
+}
+.eye-r {
+ left: 11.25em;
+}
+.mouth {
+ height: 1.25em;
+ width: 1.25em;
+ background-color: #363636;
+ border-radius: 50%;
+ position: absolute;
+ left: 9.68em;
+ top: 1.56em;
+ animation: snoore 3s infinite;
+}
+@keyframes snoore {
+ 50% {
+ transform: scale(1.3);
+ }
+}
+.star {
+ position: absolute;
+ height: 0.31em;
+ width: 0.31em;
+ background-color: #f0d815;
+ border-radius: 50%;
+}
+.star:before {
+ position: absolute;
+ content: "";
+ background-color: rgba(240, 216, 21, 0.4);
+ height: 0.31em;
+ width: 0.31em;
+ border-radius: 50%;
+ animation: twinkle 2s infinite;
+}
+@keyframes twinkle {
+ 50% {
+ transform: scale(2);
+ }
+}
+.star-1 {
+ left: 4.37em;
+ top: 6.25em;
+}
+.star-2 {
+ left: 13.12em;
+ top: 28.12em;
+}
+.star-3 {
+ left: 8.75em;
+ top: 10em;
+}
+.star-4 {
+ left: 16.25em;
+ top: 1.87em;
+}
+.star-5 {
+ left: 26.25em;
+ top: 21.87em;
+}
+.star-6 {
+ left: 28.75em;
+ top: 11.87em;
+}
+@media screen and (max-width: 500px) {
+ .container {
+ font-size: 12px;
+ }
+}
diff --git a/include.js b/include.js
index 2151bb9db..e72720399 100644
--- a/include.js
+++ b/include.js
@@ -2648,6 +2648,13 @@ let cards = [
author: 'Fiona Dash',
githubLink: 'https://github.com/fi1na'
},
+ {
+ artName: 'Cloud',
+ pageLink: './Art/archana423/index.html',
+ imageLink: './Art/archana423/cloud.gif',
+ author: 'Archana',
+ githubLink: 'https://github.com/archana423'
+ },
];
/* -------------------------------------------------------------------------- */