footer.html

<!DOCTYPE html>
<html lang="en">

<head>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="/assets/images/favicon2.webp" type="image/png" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="stylesheet" href="./assets/css/index.css">

  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }

    /* Footer Wrapper */
    /* added css to row*/
    .row {
      margin-top: 60px;
      /*added margin*/
    }

    .footer-wrapper {
      background-color: #0f2027;
      /* Footer background */
      color: white;
      /* Text color */
      /* padding: 20px 0; Overall padding */
      margin: 0;
      padding: 0;
      text-align: left;
    }

    /* Footer Divider */
    .footer-divider {
      border: none;
      border-top: 2px solid #ccc;
      /* Ruler line color */
      /* margin: 20px 0; Margin around the divider */
    }

    /* Footer Widget */
    /* .footer-widget {
    padding-bottom: 50px; Bottom padding for footer widget 
} */

    /* Footer Titles */
    .footer-title {
      font-size: 20px;
      /* Font size for titles */
      font-weight: bold;
      /* Bold font for titles */
      margin-bottom: 15px;
      /* Space below titles */
      margin-left: 0px;
      /*added margin left*/
    }

    /* Footer Links */
    .footer-links {
      list-style: none;
      /* No list styling */
      padding: 0;
      /* No padding */
    }

    .footer-links li {
      margin: 5px 0;
      /* Space between list items */
    }

    .footer-links a {
      color: white;
      /* Link color */
      text-decoration: none;
      /* No underline */
      transition: color 0.3s;
      /* Smooth color transition */
    }

    .footer-links a:hover {
      color: #ff8c00;
      /* Highlight color on hover */
    }

    /* Contact Section */
    .contact {
      list-style: none;
      /* No list styling */
      padding: 0;
      /* No padding */
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
      .footer-widget {
        padding-bottom: 5px;
        /* Adjusted padding for mobile */
      }

      .footer-title {
        font-size: 14px;
        /* Smaller font size for mobile */

      }

      .footer-links li,
      .contact li {
        margin: 3px 0;
        /* Less margin for mobile */
      }
    }
  </style>
</head>

<body>
  <div class="footer-wrapper">
    <hr class="footer-divider"> <!-- Horizontal line above the footer 
  <div class="footer-widget pb-50"> <!-- Adjusted padding -->
    <div class="row">
      <div class="col-lg-4 col-md-6 col-sm-8">
        <div class="footer-about mt-20 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
          <!-- Adjusted margin -->
          <img src="./assets/images/FinvedaLogo.png" alt="FinVeda Logo"
            style="height: 80px; width: auto; margin-bottom: 15px;" />
          <p class="text">
            We at FinVeda aim to make you a stock market Guru easily with our AI-powered teaching and financial blogs.
          </p>
        </div>
      </div>

      <div class="col-lg-5 col-md-7 col-sm-7">
        <div class="footer-link d-flex mt-20 justify-content-between"> <!-- Adjusted margin -->
          <div class="link-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s">
            <h4 class="footer-title">Quick Links</h4> <!--changed h3 to h4-->
            <ul class="footer-links">
              <li><a href="./blogs/privacy-policy.html">Privacy Policy</a></li>
              <li><a href="./blogs/refund-policy.html">Refund Policy</a></li>
              <li><a href="Licensing.html">Licensing</a></li>
              <li><a href="./blogs/terms-of-service.html">Terms of Service</a></li>
              <li><a href="./contributors.html">Our Contributors</a></li>
              <li><a href="./termsOfUse.html">Terms of use</a></li>

            </ul>
          </div>

          <div class="link-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.6s">
            <h4 class="footer-title">Resources</h4>
            <ul class="footer-links">
              <li><a href="./index.html">Home</a></li>
              <li><a href="./about.html">About Us</a></li>
              <li><a href="./trends.html">Trends</a></li>
              <li><a href="./tools/sip.html">Tools</a></li>
              <li><a href="./blog.html">Blog</a></li>
              <li><a href="./quiz.html">Quiz</a></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-5 col-sm-5">
        <div class="footer-contact mt-20 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.8s">
          <!-- Adjusted margin -->
          <h4 class="footer-title">Contact Us</h4>
          <ul class="contact">
            <li><i class="fa fa-envelope"></i><a href="mailto:ayush1337@hotmail.com">ayush1337@hotmail.com</a></li>
            <li><i class="fa fa-globe"></i><a href="https://fin-veda.vercel.app">fin-veda.vercel.app</a></li>
            <li><i class="fa fa-location-dot"></i><a href="#">Delhi, India</a></li>
            <li id="social_icons" class="d-flex justify-content-between mt-2"> <!-- Adjusted margin -->
              <a href="https://instagram.com"><i class="fa-brands fa-instagram"></i></a>
              <a href="https://facebook.com"><i class="fa-brands fa-facebook"></i></a>
              <a href="https://twitter.com"><i class="fa-brands fa-x-twitter"></i></a>
              <a href="https://discord.com"><i class="fa-brands fa-discord"></i></a>
              <a href="https://github.com"><i class="fa-brands fa-github"></i></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <hr class="footer-divider"> <!-- Ruler line after the footer -->

  <!-- Copyright Section -->
  <div class="footer-copyright text-center mt-20 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.8s">
    <!-- Adjusted margin -->
    <p>© <span id="copyright-year">2024</span> FinVeda. All rights reserved. Made with ♥ in India</p>
  </div>
  </div>

</body>

</html>