diff --git a/Art/stormworm9/CubeAnimation/CubeAnimation.gif b/Art/stormworm9/CubeAnimation/CubeAnimation.gif
new file mode 100644
index 000000000..b7a875709
Binary files /dev/null and b/Art/stormworm9/CubeAnimation/CubeAnimation.gif differ
diff --git a/Art/stormworm9/CubeAnimation/CubeAnimation.html b/Art/stormworm9/CubeAnimation/CubeAnimation.html
new file mode 100644
index 000000000..137f3f08d
--- /dev/null
+++ b/Art/stormworm9/CubeAnimation/CubeAnimation.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ Cube CSS Animation with Bootstrap
+
+
+
+
+
+
+
+
+
+
Front
+
Back
+
Left
+
Right
+
Top
+
Bottom
+
+
+
+
+
+
+
diff --git a/Art/stormworm9/CubeAnimation/style.css b/Art/stormworm9/CubeAnimation/style.css
new file mode 100644
index 000000000..1194eab2b
--- /dev/null
+++ b/Art/stormworm9/CubeAnimation/style.css
@@ -0,0 +1,63 @@
+body {
+ background: #333;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ overflow: hidden;
+}
+
+.scene {
+ perspective: 1200px;
+ width: 200px;
+ height: 200px;
+ animation: spin 10s linear infinite;
+}
+
+.cube {
+ width: 200px;
+ height: 200px;
+ position: relative;
+ transform-style: preserve-3d;
+ animation: rotate 10s linear infinite, change-color 5s infinite alternate;
+ margin: 0 auto;
+}
+
+.face {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 24px;
+ color: #fff;
+ background: var(--face-color);
+}
+
+.front { transform: rotateY(0deg) translateZ(100px); }
+.back { transform: rotateY(180deg) translateZ(100px); }
+.left { transform: rotateY(-90deg) translateZ(100px); }
+.right { transform: rotateY(90deg) translateZ(100px); }
+.top { transform: rotateX(90deg) translateZ(100px); }
+.bottom { transform: rotateX(-90deg) translateZ(100px); }
+
+@keyframes rotate {
+ 0% { transform: rotateY(0deg) translateZ(0); }
+ 100% { transform: rotateY(360deg) translateZ(0); }
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg) translateZ(0); }
+ 100% { transform: rotate(360deg) translateZ(200px); }
+}
+
+@keyframes change-color {
+ 0%, 100% { --face-color: #007bff; }
+ 20% { --face-color: #ff6f61; }
+ 40% { --face-color: #ffd166; }
+ 60% { --face-color: #6b4226; }
+ 80% { --face-color: #50b5e9; }
+}
\ No newline at end of file
diff --git a/include.js b/include.js
index 2b7796788..922aa4e22 100644
--- a/include.js
+++ b/include.js
@@ -1,5 +1,12 @@
let cards = [
- {
+ {
+ artName: 'CubeAnimation',
+ pageLink: './Art/stormworm9/CubeAnimation/CubeAnimation.html',
+ imageLink: './Art/stormworm9/CubeAnimation/CubeAnimation.gif',
+ author: 'stormworm9',
+ githubLink: 'https://github.com/stormworm9
+ },
+ {
artName: 'RingAnimation',
pageLink: './Art/stormworm9/RingAnimation/ring.html',
imageLink: './Art/stormworm9/RingAnimation/ring.gif',