diff --git a/Art/AayushNair/3d/index.html b/Art/AayushNair/3d/index.html
new file mode 100644
index 000000000..9a652f746
--- /dev/null
+++ b/Art/AayushNair/3d/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ 3D Card
+
+
+
+
+
+
+
+
diff --git a/Art/AayushNair/3d/style.css b/Art/AayushNair/3d/style.css
new file mode 100644
index 000000000..cafdb413f
--- /dev/null
+++ b/Art/AayushNair/3d/style.css
@@ -0,0 +1,107 @@
+:root {
+ --card-height: 300px;
+ --card-width: calc(var(--card-height) / 1);
+}
+* {
+ 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);
+}
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'
}
];
+ 
+ 
+