Angular Material Footer Example

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<div class="content">
  <h1>Angular Material Footer Example</h1>
</div>

<footer>
  <div class="footer-container">
    <div class="footer-content">
      <div class="footer-section">
        <h3>About Us</h3>
        <p>Building modern web applications with Angular Material design principles. Creating elegant, responsive, and user-friendly interfaces.</p>
        <div class="social-links">
          <a href="#" aria-label="Facebook"><ion-icon name="logo-facebook"></ion-icon></a>
          <a href="#" aria-label="Twitter"><ion-icon name="logo-twitter"></ion-icon></a>
          <a href="#" aria-label="LinkedIn"><ion-icon name="logo-linkedin"></ion-icon></a>
          <a href="#" aria-label="GitHub"><ion-icon name="logo-github"></ion-icon></a>
        </div>
      </div>

      <div class="footer-section">
        <h3>Quick Links</h3>
        <ul>
          <li><a href="#"><ion-icon name="chevron-forward-outline"></ion-icon> Home</a></li>
          <li><a href="#"><ion-icon name="chevron-forward-outline"></ion-icon> Documentation</a></li>
          <li><a href="#"><ion-icon name="chevron-forward-outline"></ion-icon> Components</a></li>
          <li><a href="#"><ion-icon name="chevron-forward-outline"></ion-icon> Examples</a></li>
        </ul>
      </div>

      <div class="footer-section">
        <h3>Resources</h3>
        <ul>
          <li><a href="#"><ion-icon name="chevron-forward-outline"></ion-icon> Getting Started</a></li>
          <li><a href="#"><ion-icon name="chevron-forward-outline"></ion-icon> API Reference</a></li>
          <li><a href="#"><ion-icon name="chevron-forward-outline"></ion-icon> Community</a></li>
          <li><a href="#"><ion-icon name="chevron-forward-outline"></ion-icon> Support</a></li>
        </ul>
      </div>

      <div class="footer-section">
        <h3>Newsletter</h3>
        <p>Subscribe to get updates and news about Angular Material.</p>
        <form class="newsletter-form" onsubmit="handleSubmit(event)">
          <input type="email" placeholder="Enter your email" required>
          <button type="submit">Subscribe</button>
        </form>
      </div>
    </div>

    <div class="footer-bottom">
      <p>&copy; 2025 Angular Material. All rights reserved.</p>
      <div class="footer-links">
        <a href="#">Privacy Policy</a>
        <a href="#">Terms of Service</a>
        <a href="#">Contact</a>
      </div>
    </div>
  </div>
</footer> 

  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f5f5f5;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
        }

        .content h1 {
            color: #757575;
            font-weight: 300;
            font-size: 2rem;
        }

        footer {
            background: linear-gradient(135deg, #bdbdbd 0%, #9e9e9e 100%);
            color: #ffffff;
            padding: 50px 0 20px;
            margin-top: auto;
        }

        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-section h3 {
            font-size: 1.1rem;
            font-weight: 500;
            margin-bottom: 20px;
            color: #ffffff;
            letter-spacing: 0.5px;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section ul li {
            margin-bottom: 12px;
        }

        .footer-section ul li a {
            color: #f5f5f5;
            text-decoration: none;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            display: inline-block;
        }

        .footer-section ul li a:hover {
            color: #ffffff;
            transform: translateX(5px);
        }

        .footer-section p {
            color: #f5f5f5;
            line-height: 1.6;
            font-size: 0.95rem;
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .social-links a:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-3px);
        }

        .newsletter-form {
            display: flex;
            margin-top: 15px;
            gap: 10px;
        }

        .newsletter-form input {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border-radius: 4px;
            font-size: 0.95rem;
            outline: none;
            transition: all 0.3s ease;
        }

        .newsletter-form input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .newsletter-form input:focus {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .newsletter-form button {
            padding: 12px 25px;
            background: #757575;
            color: #ffffff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .newsletter-form button:hover {
            background: #616161;
            transform: translateY(-2px);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            padding-top: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .footer-bottom p {
            color: #f5f5f5;
            font-size: 0.9rem;
        }

        .footer-links {
            display: flex;
            gap: 25px;
        }

        .footer-links a {
            color: #f5f5f5;
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: #ffffff;
        }

        @media (max-width: 768px) {
            .footer-content {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }

            .newsletter-form {
                flex-direction: column;
            }

            .newsletter-form button {
                width: 100%;
            }
        }

   function handleSubmit(e) {
            e.preventDefault();
            const email = e.target.querySelector('input').value;
            alert(`Thank you for subscribing with: ${email}`);
            e.target.reset();
        }