From 6b3b0f20093778c0e57a0412c03396e5adac0af3 Mon Sep 17 00:00:00 2001
From: Shreeya Parkhi <shreeyaparkhi@gmail.com>
Date: Sat, 2 Aug 2025 23:12:27 +0530
Subject: [PATCH] Add Explore button inside cards with fade-in animation and
 responsive styles

---
 index.html | 19 ++++++++++++-------
 style.css  | 41 +++++++++++++++++++++++++++++++----------
 2 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 140f4e4..85b622d 100644
--- a/index.html
+++ b/index.html
@@ -70,27 +70,32 @@ <h1><span id="animated-title"></span></h1>
 
     <main>
       <div class="category-container">
-        <a class="category-card fade-in" href="#" style="animation-delay: 0.1s">
+        <div class="category-card fade-in" href="#" style="animation-delay: 0.1s">
           <h2>🌐 Static Websites</h2>
           <p>
             Explore beautiful, responsive websites built with modern web
             technologies and best practices
           </p>
-        </a>
-        <a class="category-card fade-in" href="#" style="animation-delay: 0.2s">
+          <a href="./assets/html_files/website.html" class="project">View Projects</a>
+        </div>
+       
+        <div class="category-card fade-in" href="#" style="animation-delay: 0.2s">
           <h2>🎮 Games</h2>
           <p>
-            Interactive games and entertainment projects showcasing creative
+            Interactive and open source gaming and game development with creative
             programming and user experience
           </p>
-        </a>
-        <a class="category-card fade-in" href="#" style="animation-delay: 0.3s">
+          <a href="./assets/html_files/games.html" class="project">View Projects</a>
+        </div>
+        
+        <div class="category-card fade-in" href="#" style="animation-delay: 0.3s">
           <h2>🤖 ML Projects</h2>
           <p>
             Cutting-edge machine learning applications and AI-powered solutions
             for real-world problems
           </p>
-        </a>
+          <a href="./assets/html_files/ml.html" class="project">View Projects</a>
+        </div>
       </div>
 
       <div class="add-project-section send-message">
diff --git a/style.css b/style.css
index e71b47a..39b31d8 100644
--- a/style.css
+++ b/style.css
@@ -576,14 +576,33 @@ footer {
 }
 
 /* CATEGORY CARDS SECTION */
+.project{
+  display: inline-block;
+  margin-top: 1.5rem;
+  padding: 0.45em 1em;
+  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  text-decoration: none;
+  transition: background 0.2s, transform 0.2s;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+
+}
 .category-container {
   display: flex;
   justify-content: center;
-  align-items: stretch; /* Make cards equal height */
+  align-items: stretch; 
   gap: 2rem;
   margin: 3rem auto 0 auto;
   max-width: 1100px;
-  flex-wrap: wrap;
+  flex-wrap: wrap;transform: translateY(30px);
+  animation: fadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  animation-delay: 0.3s; /* Button fades in after card */
+  align-self: center;
+
 }
 
 .category-card {
@@ -593,19 +612,17 @@ footer {
   padding: 2.2rem 2rem 1.7rem 2rem;
   min-width: 290px;
   max-width: 340px;
-  flex: 1 1 320px; /* All cards grow/shrink equally */
+  flex: 1 1 320px; 
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  height: 100%; /* Ensure equal height */
+  justify-content: center;
+  align-items: center;
+  height: 100%;
   transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s cubic-bezier(.4,2,.6,1);
   text-align: left;
   margin-bottom: 1.5rem;
   position: relative;
-  opacity: 0;
-  transform: translateY(30px);
-  animation: fadeInUp 0.7s forwards;
+  
 }
 
 .category-card.fade-in {
@@ -644,6 +661,10 @@ footer {
 
 /* Responsive for cards */
 @media (max-width: 900px) {
+  .Explore {
+    font-size: 1.1rem;
+    padding: 0.6rem 1.2rem;
+  }
   .category-container {
     flex-direction: column;
     align-items: center;
@@ -655,7 +676,6 @@ footer {
     width: 100%;
     height: auto;
   }
-}
 
 /* Responsive Footer */
 @media (max-width: 900px) {
@@ -674,3 +694,4 @@ footer {
   position: relative;
   z-index: 10;
 }
+}