Merge pull request #166 from diwakarchaurasiya/working

Solid Colored Cards on Timeline Page Affecting UI #100
vansh-codes · Oct 27, 2024 · 49e6e54 · 49e6e54
2 parents 31b3526 + 2ea0c68
commit 49e6e54
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git 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
@@ -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);