Added effects to card

PriyaGhosal · Oct 8, 2024 · 431dc19 · 431dc19
1 parent aeefcc1
commit 431dc19
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/assets/css/darkmode.css b/assets/css/darkmode.css
@@ -177,6 +177,7 @@ body.nav-active { overflow: hidden; }
 
 .btn {
   background-color: var(--charcoal-black);
+
 }
 
 
@@ -231,6 +232,13 @@ body.nav-active { overflow: hidden; }
   padding: 24px;
   border-radius: var(--radius-8);
   transition: var(--transition);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 20px;
+    border:1px solid rgba(255, 255, 255, 0.18);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    transition: all 0.5s;
 }
 
 .card:is(:hover, :focus-within) { box-shadow: var(--shadow-1); }

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -262,6 +262,13 @@ body.nav-active {
   padding: 24px;
   border-radius: var(--radius-8);
   transition: var(--transition);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 20px;
+    border:1px solid rgba(255, 255, 255, 0.18);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    transition: all 0.5s;
 }
 
 .card:is(:hover, :focus-within) {