diff --git a/Art/NehalSurti/RotatingSqrs.gif b/Art/NehalSurti/RotatingSqrs.gif
new file mode 100644
index 000000000..f7b267fdc
Binary files /dev/null and b/Art/NehalSurti/RotatingSqrs.gif differ
diff --git a/Art/NehalSurti/index.html b/Art/NehalSurti/index.html
new file mode 100644
index 000000000..7bff78e6b
--- /dev/null
+++ b/Art/NehalSurti/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+ 3D Rotating Squares Animation
+
+
+
+
+
+
diff --git a/Art/NehalSurti/style.css b/Art/NehalSurti/style.css
new file mode 100644
index 000000000..eebbc1351
--- /dev/null
+++ b/Art/NehalSurti/style.css
@@ -0,0 +1,77 @@
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ background-color: #f0f0f0;
+}
+
+.container {
+ position: relative;
+ width: 200px;
+ height: 200px;
+ perspective: 800px;
+ transform-style: preserve-3d; /* Ensures children elements respect the 3D transformations */
+ transform: rotateX(80deg) rotateY(50deg) rotateZ(5deg);
+}
+
+.square {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 5px solid transparent;
+ animation: rotate 5s linear infinite alternate, changeColor 6s infinite;
+ transform-origin: center;
+}
+
+.square:nth-child(1) {
+ border-color: black;
+ transform: rotateY(0deg) rotateZ(0deg) scale(1);
+ background-color: #ff6347; /* Initial color */
+}
+
+.square:nth-child(2) {
+ border-color: blue;
+ transform: rotateY(0deg) rotateZ(0deg) scale(1);
+ animation-delay: 1s;
+ background-color: #9370db; /* Initial color */
+}
+
+.square:nth-child(3) {
+ border-color: green;
+ transform: rotateX(0deg) rotateZ(0deg) scale(1);
+ animation-delay: 2s;
+ background-color: #32cd32; /* Initial color */
+}
+
+@keyframes rotate {
+ 0% {
+ transform: rotateY(0deg) rotateZ(0deg) scale(1);
+ }
+ 100% {
+ transform: rotateY(360deg) rotateZ(360deg) scale(1.2);
+ }
+}
+
+@keyframes changeColor {
+ 0%,
+ 15% {
+ background-color: #ff6347; /* Tomato */
+ }
+ 30%,
+ 45% {
+ background-color: #9370db; /* MediumPurple */
+ }
+ 60%,
+ 75% {
+ background-color: #32cd32; /* LimeGreen */
+ }
+ 90%,
+ 100% {
+ background-color: #ffd700; /* Gold */
+ }
+}
diff --git a/include.js b/include.js
index 5fec8e863..ebdd1f995 100644
--- a/include.js
+++ b/include.js
@@ -2903,6 +2903,13 @@ let cards = [
author: 'Kalliran',
githubLink: 'https://github.com/Kalliran'
},
+ {
+ artName: 'Rotating Squares',
+ pageLink: './Art/NehalSurti/index.html',
+ imageLink: './Art/NehalSurti/RotatingSqrs.gif',
+ author: 'Nehal',
+ githubLink: 'https://github.com/NehalSurti'
+ }
];
/* -------------------------------------------------------------------------- */