From b64a08cae876c97b073564fac95fd0985877fcbc Mon Sep 17 00:00:00 2001 From: Bhanuprakash842 <127642353+Bhanuprakash842@users.noreply.github.com> Date: Fri, 4 Oct 2024 21:26:29 +0530 Subject: [PATCH] footer section icons in home page --- index.html | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 72 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 7f841ca2..51072c18 100644 --- a/index.html +++ b/index.html @@ -956,6 +956,74 @@ border-radius: 10px; } +.footer-icons{ + margin-top: 20px; + display: flex; + font-size: 24px; +} + + +.footer-icons .icon i { + font-size: 24px; + /* Set the default font size for icons */ + transition: all 0.15s ease; + /* Add transition for smooth animation */ +} + +.footer-icons .icon:hover { + transform: scale(1.5); + /* Scale the icon on hover */ +} + + +.footer-icons .icon:hover .fa-linkedin { + color:#3e57bc; + transform: scale(1); + /* Scale the instagram icon on hover */ +} + +.footer-icons .icon:hover .fa-facebook { + color: #0077B5; + /* Change to Facebook color on hover */ +} + +.footer-icons .icon:hover .fa-twitter { + color: black; + /* Change to Twitter color on hover */ +} + +.footer-icons .icon .fa-instagram { + color: grey; + transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease; +} + + +.footer-icons .icon:hover .fa-instagram { + background: radial-gradient( + circle at 30% 107%, + #fdf497 0%, + #fdf497 5%, + #fd5949 45%, + #d6249f 60%, + #285aeb 90% + ); + background-clip: text; + -webkit-background-clip: text; + color: transparent; + border-radius: 20%; + transform: scale(1.1); + transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease; +} + +.footer-icons .icon:hover .fa-youtube { + color: #ff0001; + /* Change to YouTube color on hover */ +} + +.footer-icons .icon:hover .fa-github { + color: rgb(20, 15, 15); + /* Change to Github color on hover */ +}