Merge pull request #430 from devxMani/footer-update

Footer update
sakeel-103 · Oct 28, 2024 · e111d54 · e111d54
2 parents b6a6cb6 + 0d33338
commit e111d54
Showing 1 changed file with 18 additions and 13 deletions.
diff --git a/src/index.html b/src/index.html
@@ -234,6 +234,8 @@
       color: #333;
     }
   </style>
+  <!-- Add Font Awesome CDN in the <head> section -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 </head>
 
 <body>
@@ -253,15 +255,11 @@
   text-align: center;
   font-family: 'Arial', sans-serif;
   box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
+  transition: background 0.3s ease; /* Added transition for background */
 }
 
-.footer {
-  background: linear-gradient(145deg, #1c1c1c, #2a2a2a);
-  color: white;
-  padding: 60px 20px 40px;
-  text-align: center;
-  font-family: 'Arial', sans-serif;
-  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
+.footer:hover {
+  background: linear-gradient(145deg, #2a2a2a, #1c1c1c); /* Darker on hover */
 }
 
 .footer-content {
@@ -298,7 +296,7 @@
   font-size: 16px;
   padding: 5px 10px;
   border-radius: 4px;
-  transition: all 0.3s ease;
+  transition: all 0.3s ease, transform 0.3s ease; /* Added transform transition */
   position: relative;
 }
 
@@ -316,7 +314,8 @@
 
 .footer-links a:hover {
   color: #ffffff;
-  transform: translateY(-2px);
+  transform: translateY(-2px); /* Added lift effect on hover */
+  background-color: rgba(76, 175, 80, 0.2); /* Light background on hover */
 }
 
 .footer-links a:hover::after {
@@ -328,6 +327,7 @@
   .newsletter-container {
     flex: 2;
     text-align: center;
+    margin-top: 20px; /* Added margin for spacing */
   }
 
   .newsletter-title {
@@ -366,12 +366,12 @@
     border-radius: 4px;
     cursor: pointer;
     font-size: 16px;
-    transition: box-shadow 0.3s, transform 0.3s;
+    transition: box-shadow 0.3s, transform 0.3s; /* Added transform transition */
   }
 
   .newsletter-container button:hover {
     box-shadow: 0 0 10px #4caf50, 0 0 20px #81c784;
-    transform: scale(1.05);
+    transform: scale(1.05); /* Added scale effect on hover */
   }
 
   /* Social Icons */
@@ -385,19 +385,24 @@
   .social-icons a {
     color: #b0b0b0;
     font-size: 24px;
-    transition: color 0.3s ease, transform 0.3s ease;
+    transition: color 0.3s ease, transform 0.3s ease; /* Added transform transition */
   }
 
   .social-icons a:hover {
     color: #4caf50;
-    transform: scale(1.2);
+    transform: scale(1.2); /* Added scale effect on hover */
   }
 
   /* Copyright Section */
   .copyright {
     margin-top: 30px;
     font-size: 14px;
     color: #b0b0b0;
+    transition: color 0.3s ease; /* Added transition for color */
+  }
+
+  .copyright:hover {
+    color: #ffffff; /* Change color on hover */
   }
   </style>
   </head>