diff --git a/Art/AayushNair/3d/index.html b/Art/AayushNair/3d/index.html
new file mode 100644
index 000000000..a44f4a3d7
--- /dev/null
+++ b/Art/AayushNair/3d/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+ 3D Card
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Art/AayushNair/3d/style.css b/Art/AayushNair/3d/style.css
new file mode 100644
index 000000000..1039bcbdd
--- /dev/null
+++ b/Art/AayushNair/3d/style.css
@@ -0,0 +1,108 @@
+:root {
+ --card-height: 300px;
+ --card-width: calc(var(--card-height) / 1.0);
+ }
+ * {
+ box-sizing: border-box;
+ }
+ body {
+ width: 100vw;
+ height: 100vh;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #191c29;
+ }
+ .card {
+ width: var(--card-width);
+ height: var(--card-height);
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ padding: 0 36px;
+ perspective: 2500px;
+ margin: 0 50px;
+ }
+
+ .cover-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .wrapper {
+ transition: all 0.5s;
+ position: absolute;
+ width: 100%;
+ z-index: -1;
+ }
+
+ .card:hover .wrapper {
+ transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
+ box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
+ -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
+ -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
+ }
+
+ .wrapper::before,
+ .wrapper::after {
+ content: "";
+ opacity: 0;
+ width: 100%;
+ height: 80px;
+ transition: all 0.5s;
+ position: absolute;
+ left: 0;
+ }
+ .wrapper::before {
+ top: 0;
+ height: 100%;
+ background-image: linear-gradient(
+ to top,
+ transparent 46%,
+ rgba(12, 13, 19, 0.5) 68%,
+ rgba(12, 13, 19) 97%
+ );
+ }
+ .wrapper::after {
+ bottom: 0;
+ opacity: 1;
+ background-image: linear-gradient(
+ to bottom,
+ transparent 46%,
+ rgba(12, 13, 19, 0.5) 68%,
+ rgba(12, 13, 19) 97%
+ );
+ }
+
+ .card:hover .wrapper::before,
+ .wrapper::after {
+ opacity: 1;
+ }
+
+ .card:hover .wrapper::after {
+ height: 120px;
+ }
+ .title {
+ width: 100%;
+ transition: transform 0.5s;
+ }
+ .card:hover .title {
+ transform: translate3d(0%, -50px, 100px);
+ }
+
+ .character {
+ width: 100%;
+ opacity: 0;
+ transition: all 0.5s;
+ position: absolute;
+ z-index: -1;
+ }
+
+ .card:hover .character {
+ opacity: 1;
+ transform: translate3d(0%, -30%, 100px);
+ }
+
\ No newline at end of file
diff --git a/include.js b/include.js
index 104c253c8..c2187bff5 100644
--- a/include.js
+++ b/include.js
@@ -6528,7 +6528,7 @@ let cards = [
},
{
artName: 'Rolling Happy',
- pageLink: './Art/marion/index.html',
+ pageLink: './Art/animatorn/index.html',
imageLink: './Art/marion/smiles.gif',
author: 'Marion',
githubLink: 'https://github.com/marionjudy13'
@@ -6560,6 +6560,13 @@ let cards = [
imageLink: './Art/OrnitCG/myGif.html',
author: 'OrnitCG',
githubLink: 'https://github.com/ornitcg'
+ },
+ {
+ artName: "Aayush's 3D Card",
+ pageLink: './Art/AayushNair/3d/index.html',
+ imageLink: './Art/AayushNair/3d/style.css',
+ author: 'Aayush',
+ githubLink: 'https://github.com/aayushnr'
}
];