Enhanced the footer UI (#1395)

Author: biswajit-sarkar-007

assets/html_files/about.html

@@ -132,7 +132,7 @@ <h3 align="center" style="color: #ffecd1;">Thank You for Visiting Beautiify!</h3
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading">Beautiify</h1>
+                <h1 class="company-name heading"><img src="../images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>

assets/html_files/contact.html

@@ -154,7 +154,7 @@ <h2 class="form-title">Send us a message :)</h2>
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading">Beautiify</h1>
+                <h1 class="company-name heading"><img src="../images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>

assets/html_files/contributor.html

@@ -101,7 +101,7 @@ <h1 class="heading">Our Valuable Contributors</h1>
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading">Beautiify</h1>
+                <h1 class="company-name heading"><img src="../images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>

assets/html_files/faq.html

@@ -102,7 +102,7 @@
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading">Beautiify</h1>
+                <h1 class="company-name heading"><img src="../images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>

index.html

@@ -341,7 +341,7 @@ <h2>Transfer Lists</h2>
     <footer>
         <div class="footer-container">
             <div class="company-info">
-                <h1 class="company-name heading">Beautiify</h1>
+                <h1 class="company-name heading"><img src="./assets/images/logo.png">Beautiify</h1>
                 <p>
                     Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
                 </p>

style.css

@@ -649,6 +649,34 @@ footer {
     padding: 0 20px;
 }
 
+.footer-ul li a {
+    text-decoration: none;
+    padding: 5px 0;
+    transition: color 0.3s ease-in-out;
+    position: relative;
+}
+
+.footer-ul li a::after {
+    content: "";
+    display: block;
+    width: 0;
+    height: 3px;
+    background: #d31313; /* Color of the underline */
+    transition: width 0.3s ease-in-out;
+    position: absolute;
+    bottom: -2px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.footer-ul li a:hover {
+    color: #ec685c; /* Color of the text on hover */
+}
+
+.footer-ul li a:hover::after {
+    width: 100%; /* Fully expand the underline */
+}
+
 .company-info {
     font-weight: 600;
     flex: 1 1 30%;
@@ -665,6 +693,14 @@ footer {
 .company-name {
     font-size: 24px;
     margin-bottom: 10px;
+    align-items: center;
+}
+
+.company-name img {
+    width: 36px;
+    width: 36px;
+    vertical-align: middle;
+    margin-top: -5px;
 }
 
 .company-info p {
@@ -1201,4 +1237,4 @@ footer {
         width: 280px !important;
         margin: 15px !important;
     }
-}
+}