Added Hover Style and tilt on footer

Avdhesh-Varshney · Jul 27, 2024 · 2b4f692 · 2b4f692
1 parent c3a5cf4
commit 2b4f692
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/src/components/shared/Footer.jsx b/src/components/shared/Footer.jsx
@@ -3,6 +3,8 @@ import { NavLink } from "react-router-dom";
 import { Context } from "../../context/Context";
 import Visitors from "./Visitors";
 import { FaGithub, FaHome, FaInfoCircle, FaUser, FaSignInAlt, FaMusic, FaVideo, FaBook, FaNewspaper, FaQuestionCircle, FaRobot } from "react-icons/fa";
+import Tilt from 'react-parallax-tilt';
+import "../../css/Footer.css";
 
 const Footer = () => {
   const { isDarkMode } = useContext(Context);
@@ -13,10 +15,12 @@ const Footer = () => {
         <div className="row">
           <div className="col-md-6 d-flex">
             <figure className="figure">
-              <img src="logo.webp" height="200" alt="Chanakya Image" />
+              <Tilt>
+                <img src="logo.webp" height="200" alt="Chanakya Image" />
+              </Tilt>
               <figcaption className="figure-caption text-center">चाणक्य नीति</figcaption>
             </figure>
-            <div className="my-auto">
+            <div className="my-auto star-btn">
               <a href="https://github.com/Avdhesh-Varshney/chanakya-niti" target="_blank" rel="noopener noreferrer" className="text-white bg-dark p-2 rounded text-decoration-none d-inline-block">
                 <FaGithub className="me-2" /> Star Us ⭐
               </a>
@@ -27,10 +31,10 @@ const Footer = () => {
           <div className="col-md-3 m-auto">
             <h3 className="text-uppercase fw-bold">चाणक्य नीति</h3>
             <ul className="list-unstyled">
-              <li><NavLink to="/" className="text-decoration-none text-dark"><FaHome className="me-2" /> Home</NavLink></li>
-              <li><NavLink to="/about" className="text-decoration-none text-dark"><FaInfoCircle className="me-2" /> About</NavLink></li>
-              <li><NavLink to="/contributor" className="text-decoration-none text-dark"><FaUser className="me-2" /> Contributors</NavLink></li>
-              <li><NavLink to="/auth/login" className="text-decoration-none text-dark"><FaSignInAlt className="me-2" /> Login</NavLink></li>
+              <li className="list"><NavLink to="/" className="text-decoration-none text-dark"><FaHome className="me-2" /> Home</NavLink></li>
+              <li className="list"><NavLink to="/about" className="text-decoration-none text-dark"><FaInfoCircle className="me-2" /> About</NavLink></li>
+              <li className="list"><NavLink to="/contributor" className="text-decoration-none text-dark"><FaUser className="me-2" /> Contributors</NavLink></li>
+              <li className="list"><NavLink to="/auth/login" className="text-decoration-none text-dark"><FaSignInAlt className="me-2" /> Login</NavLink></li>
             </ul>
           </div>
 

diff --git a/src/css/Footer.css b/src/css/Footer.css
@@ -0,0 +1,21 @@
+  .star-btn a {
+    transition: transform 0.3s, background-color 0.3s, color 0.3s; 
+  }
+
+  .star-btn a:hover {
+    transform: scale(1.1); 
+  }
+
+  .list-unstyled li {
+    margin-bottom: 0.5rem; 
+  }
+
+  .list-unstyled li a {
+    transition: transform 0.3s ease-in-out; 
+    display: inline-block; 
+  }
+
+  .list-unstyled li a:hover {
+    transform: scale(1.1); 
+  }
+