From faba36de20e7cae4ee1c225933ef0b7ae61a2da8 Mon Sep 17 00:00:00 2001
From: TheMrQ <tuanquynhlol@gmail.com>
Date: Sun, 10 Nov 2024 15:05:59 +0700
Subject: [PATCH] feat(website): added 3D tilting cards required for the
 website

---
 Code/index.html | 28 ++++++++++++++++++++++++++--
 Code/style.css  | 20 ++++++++++++++++++++
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/Code/index.html b/Code/index.html
index 5f5473c..b34e0a6 100644
--- a/Code/index.html
+++ b/Code/index.html
@@ -82,8 +82,32 @@
 <div class="t3">"Winners dont do <br> different things, <br> they do things <br> differently"</div>
 
 
-
-
+<div class="card-container">
+    <div class="card" data-tilt>
+        <h2>Card 1</h2>
+        <p>Information about Card 1.</p>
+    </div>
+    <div class="card" data-tilt>
+        <h2>Card 2</h2>
+        <p>Information about Card 2.</p>
+    </div>
+    <div class="card" data-tilt>
+        <h2>Card 3</h2>
+        <p>Information about Card 3.</p>
+    </div>
+</div>
+
+
+
+<script src="Code/vanilla-tilt.min.js"></script>
+<script>
+    VanillaTilt.init(document.querySelectorAll(".card"), {
+        max: 30,
+        speed: 400,
+    });
+
+
+</script>
 
 
 
diff --git a/Code/style.css b/Code/style.css
index 8e70a62..bcc5502 100644
--- a/Code/style.css
+++ b/Code/style.css
@@ -21,6 +21,26 @@ body
     background-attachment: fixed;
 }
 
+.card-container {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.card {
+    width: 200px;
+    height: 150px;
+    background-color: #f5f5f5;
+    border-radius: 10px;
+    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    transition: transform 0.3s ease;
+}
+
 header
 {
     position: relative;