adjust card box-shadow background color

Author: SyedArslanHaider

MultiPage-Clone/css/contact.css

@@ -18,6 +18,7 @@
   --clr-Royal-blue: #0150fd;
   --clr-Black: #000;
   --clr-White: #fff;
+  --clr-lite-black: rgba(0, 0, 0, 0.2);
 }
 
 nav {
@@ -248,7 +249,7 @@ main {
   height: 644px;
   background-color: var(--clr-White);
   border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 8px var(--clr-lite-black);
   padding: 30px;
   margin-bottom: 3rem;
 }

MultiPage-Clone/css/project.css

@@ -18,6 +18,7 @@
   --clr-Royal-blue: #0150fd;
   --clr-Black: #000;
   --clr-White: #fff;
+  --clr-lite-black: rgba(0, 0, 0, 0.2);
 }
 
 nav {
@@ -268,7 +269,7 @@ ul {
   .container{
     background-color: var(--clr-White);
     border-radius: 3px;
-    box-shadow: 0 1px 1px var(--clr-Black);
+    box-shadow: 0 4px 8px var(--clr-lite-black);
     display: grid;
     grid-template-columns: 1fr 1fr;
     width: 750px;
@@ -401,7 +402,7 @@ ul {
   .container {
     background-color: var(--clr-White);
     border-radius: 3px;
-    box-shadow: 0 1px 1px var(--clr-Black);
+    box-shadow: 0 4px 8px var(--clr-lite-black);
     width: 300px;
     height: 490px;
     display: flex;

MultiPage-Clone/css/resume.css

@@ -18,6 +18,7 @@
   --clr-Royal-blue: #0150fd;
   --clr-Black: #000;
   --clr-White: #fff;
+  --clr-lite-black: rgba(0, 0, 0, 0.2);
 }
 
 nav {
@@ -261,8 +262,8 @@ ul {
   .container {
     background-color: var(--clr-White);
     padding: 20px;
-    border-radius: 3px;
-    box-shadow: 0 1px 1px var(--clr-Black);
+    border-radius: 10px;
+    box-shadow: 0 4px 8px var(--clr-lite-black);
     max-width: 340px;
     height: 390px;
     display: flex;
@@ -554,8 +555,8 @@ footer {
   .container {
     background-color: var(--clr-White);
     padding: 30px;
-    border-radius: 5px;
-    box-shadow: 0 2px 3px var(--clr-Black);
+  border-radius: 10px;
+    box-shadow: 0 4px 8px var(--clr-lite-black);
     max-width: 800px;
     height: 350px;
     display: grid;

MultiPage-Clone/main.js

@@ -1,10 +1,11 @@
-const burgerr = document.querySelector(".navimage");
+const burger = document.querySelector(".navimage");
 const nav = document.querySelector(".nav-links");
 const body = document.querySelector("body");
+const navLinks = document.querySelectorAll('.nav-links a');
 
-burgerr.addEventListener("click", () => {
+burger.addEventListener("click", () => {
   nav.classList.toggle("nav-active");
-  burgerr.classList.toggle("toggle");
+  burger.classList.toggle("toggle");
 
   if (nav.classList.contains("nav-active")) {
     body.style.overflow = "hidden";
@@ -19,4 +20,4 @@ function openPage(buttonId){
   }else if(buttonId === 'btn-project'){
     window.location.href ='project.html'
   }
-}
+}