Merge pull request #1727 from zero-to-mastery/aayushnr-AayushNair

Aayushnr aayush nair
zero-to-mastery · Sep 14, 2023 · c780fb0 · c780fb0
2 parents d52d5ab + f8a58d3
commit c780fb0
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 1 deletion.
diff --git a/Art/AayushNair/3d/index.html b/Art/AayushNair/3d/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>3D Card</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <a href="https://aayushnr.github.io/Front-End_Website/">
+      <div class="card">
+        <div class="wrapper">
+          <img
+            src="C:\Users\LENOVO\Desktop\AayushNair\imgs\bg.jpg"
+            class="cover-image"
+          />
+        </div>
+        <img
+          src="https://ggayane.github.io/css-experiments/cards/dark_rider-title.png"
+          class="title"
+        />
+        <img
+          src="https://ggayane.github.io/css-experiments/cards/dark_rider-character.webp"
+          class="character"
+        />
+      </div>
+    </a>
+  </body>
+</html>
diff --git a/Art/AayushNair/3d/style.css 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
@@ -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'
   }
 ];