From 2ea0c68a2ee7c52b3edc314abb8907eae3fbaf3a Mon Sep 17 00:00:00 2001
From: diwakar chaurasiya <diwakarbmj1212@gmail.com>
Date: Tue, 22 Oct 2024 22:43:08 +0530
Subject: [PATCH] completed card ui

---
 Timeline.html  | 20 +++++++++++---------
 css/styles.css |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/Timeline.html b/Timeline.html
index abafaec..ccc52a0 100644
--- a/Timeline.html
+++ b/Timeline.html
@@ -33,9 +33,9 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background-image: linear-gradient(135deg, #000000, #2d2430, #ff6600);
-            background-size: 400% 400%;
-            opacity: 0.2;
+            background-image: url("https://images.pexels.com/photos/7577763/pexels-photo-7577763.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
+            background-size: 100% 100%;
+            opacity: 0.5;
             z-index: -1;
             animation: gradientPulse 10s ease infinite;
         }
@@ -60,13 +60,16 @@
             max-width: 1200px;
             margin-top: 10%;
             position: relative;
+            
         }
         .event {
-            background-color: var(--event-bg-color);
-            border: 2px solid #ffffff;
+            color: #fff;
+            background: rgba( 255, 254, 254, 0.1 );
+            box-shadow: 0 8px 8px 0 rgba( 31, 38, 135, 0.37 );
+            backdrop-filter: blur( 4px );
+            -webkit-backdrop-filter: blur( 4px );
             padding: 30px;
             border-radius: 12px;
-            box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4);
             text-align: center;
             cursor: pointer;
             transition: transform 0.4s ease, box-shadow 0.3s ease, background-color 0.2s;
@@ -81,10 +84,9 @@
             transition: transform 0.3s ease-in-out; 
         }
         .event:hover {
-            background-color: var(--highlight-color);
-            color: #ffffff;
+            background: rgba(0, 0, 0, 0.1);
+            box-shadow: 0 8px 8px 0 rgba( 31, 38, 135, 0.37 );
             transform: scale(1.05);
-            box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
         }
         .event:hover img {
             transform: scale(1.1) rotate(5deg);
diff --git a/css/styles.css b/css/styles.css
index 39fd74a..402922d 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -4,7 +4,7 @@ body {
     align-items: center;
     height: 100vh;
     margin: 0; /* Remove default margin */
-    overflow: hidden; /* Prevent scrollbars */
+    overflow: hidden ; /* Prevent scrollbars */
    
         background-color: #FFEB3B; /* Bright Yellow */
         background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);