diff --git a/Art/Debajyati-Omnitrix/index.html b/Art/Debajyati-Omnitrix/index.html
new file mode 100644
index 000000000..b547c49f8
--- /dev/null
+++ b/Art/Debajyati-Omnitrix/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+ Omnitrix
+
+
+
+
+
+
+
+
diff --git a/Art/Debajyati-Omnitrix/styles.css b/Art/Debajyati-Omnitrix/styles.css
new file mode 100644
index 000000000..c05644af1
--- /dev/null
+++ b/Art/Debajyati-Omnitrix/styles.css
@@ -0,0 +1,131 @@
+body {
+ background-color: #000;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ animation: flash 5.5s ease-in-out;
+}
+
+.container {
+ width: 300px;
+ height: 300px;
+ background: #010101;
+ /* Created with https://www.css-gradient.com */
+ background: radial-gradient(at left top, #010101, #ffffff);
+ /* Gradient link: https://www.css-gradient.com/?c1=010101&c2=ffffff>=r&gd=dtl */
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.inner-container {
+ width: 250px;
+ height: 250px;
+ background-color: #000;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ clip-path: circle(50% at 50% 50%);
+ animation: greenFlash 4s ease-in-out;
+}
+
+.hourglass {
+ width: 100%;
+ height: 100%;
+}
+
+#triangles {
+ background-color: #009933;
+ height: 100%;
+ width: 100%;
+ clip-path: polygon(0% 0%, 30% 50%, 0% 100%, 100% 100%, 70% 50%, 100% 0%);
+ transition: clip-path 1s ease-in-out;
+ animation: changeShape 1s ease forwards, redFlicker 5s ease, redEnd 0.5s ease 5s;
+}
+
+@media (max-width: 400px) {
+ .container {
+ width: 150px;
+ height: 225px;
+ }
+
+ .inner-container {
+ width: 100px;
+ height: 175px;
+ }
+}
+
+@keyframes changeShape {
+ 0% {
+ clip-path: polygon(0% 0%, 30% 50%, 0% 100%, 100% 100%, 70% 50%, 100% 0%); /* The OG Omnitrix Shape */
+ transform: rotate(0deg);
+ }
+ 33% {
+ transform: rotate(90deg);
+ }
+ 66% {
+ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* Barfi Shape */
+ transform: rotate(0deg);
+ }
+ 100% {
+ clip-path: polygon(0% 0%, 30% 50%, 0% 100%, 100% 100%, 70% 50%, 100% 0%);
+ }
+}
+
+/* all flashes after omnitrix starts (hero time) */
+@keyframes greenFlash {
+ 0% {
+ background-color: #000;
+ }
+ 70% {
+ background-color: #009933;
+ }
+ 80% {
+ background-color: #33ff33;
+ }
+ 90% {
+ background-color: #000;
+ }
+}
+
+@keyframes flash {
+ 0% {
+ background-color: #000;
+ }
+ 65% {
+ background-color: #009933;
+ }
+ 75% {
+ background-color: #33ff33;
+ }
+ 85% {
+ background-color: #000;
+ }
+ 100% {
+ background-color: #ff0000;
+ }
+}
+
+@keyframes redFlicker {
+ 0%, 90%, 92%, 94%, 96% {
+ background-color: #009933;
+ }
+ 91%, 93%, 95%, 97% {
+ background-color: #e4181e;
+ }
+ 100% {
+ background-color: #ff0000;
+ }
+}
+
+@keyframes redEnd {
+ 0% {
+ background-color: #e4181e;
+ }
+ 100% {
+ background-color: #ff0000;
+ }
+}
diff --git a/Art/Debajyati-sunmoon/index.html b/Art/Debajyati-sunmoon/index.html
new file mode 100644
index 000000000..b84ada5b7
--- /dev/null
+++ b/Art/Debajyati-sunmoon/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+ sunmoon
+
+
+
+
+
+
+
diff --git a/Art/Debajyati-sunmoon/styles.css b/Art/Debajyati-sunmoon/styles.css
new file mode 100644
index 000000000..e458400f9
--- /dev/null
+++ b/Art/Debajyati-sunmoon/styles.css
@@ -0,0 +1,150 @@
+body {
+ margin: 0;
+ overflow: hidden;
+ font-family: Arial, sans-serif;
+}
+
+.container {
+ width: 100vw;
+ height: 100vh;
+ position: relative;
+ animation: changeBackground 20s linear infinite;
+}
+
+.sun,
+.moon {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ animation-timing-function: linear;
+}
+
+.sun {
+ background-color: #f1c40f;
+ animation: sunMovement 20s linear infinite;
+}
+
+.moon {
+ background-color: #d3d3d3;
+ opacity: 0;
+ animation: moonMovement 20s linear infinite;
+}
+
+@keyframes changeBackground {
+ 0%, 50% {
+ background-color: #87ceeb; /* Day - Sky blue color */
+ }
+ 51%, 100% {
+ background-color: #2b2b63; /* Night - Dark indigo color */
+ }
+}
+
+@keyframes sunMovement {
+ 0% {
+ transform: translate(-50%, 0) translateY(50vh);
+ }
+ 25% {
+ transform: translate(-50%, -50%) translateY(-50vh);
+ }
+ 50% {
+ transform: translate(-50%, -50%) translateY(50vh);
+ opacity: 0;
+ }
+ 51% {
+ opacity: 0;
+ }
+ 100% {
+ transform: translate(-50%, 0) translateY(50vh);
+ opacity: 1;
+ }
+}
+
+@keyframes moonMovement {
+ 0%, 50% {
+ transform: translate(-50%, -50%) translateY(50vh);
+ opacity: 0;
+ }
+ 51% {
+ transform: translate(-50%, 0) translateY(50vh);
+ opacity: 1;
+ }
+ 75% {
+ transform: translate(-50%, -50%) translateY(-50vh);
+ }
+ 100% {
+ transform: translate(-50%, -50%) translateY(50vh);
+ opacity: 0;
+ }
+}
+
+.clouds {
+ width: 400px;
+ height: 100px;
+ position: absolute;
+ top: 20%;
+ left: -400px;
+ background: transparent;
+ animation: cloudMovement 40s linear infinite;
+}
+
+.clouds::before,
+.clouds::after {
+ content: '';
+ width: 150px;
+ height: 80px;
+ background-color: #fff;
+ position: absolute;
+ top: 10px;
+ border-radius: 50%;
+}
+
+.clouds::before {
+ left: 20px;
+}
+
+.clouds::after {
+ left: 200px;
+}
+
+.one {
+ top: 20%;
+ animation-delay: 0s;
+}
+
+.two {
+ top: 30%;
+ animation-delay: 5s;
+}
+
+.three {
+ top: 40%;
+ animation-delay: 10s;
+}
+
+.four {
+ top: 50%;
+ animation-delay: 15s;
+}
+
+.five {
+ top: 60%;
+ animation-delay: 20s;
+}
+
+.six {
+ top: 70%;
+ animation-delay: 25s;
+}
+
+@keyframes cloudMovement {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(200vw);
+ }
+}