Footers

This HTML structure represents a footer with various sections containing links and a newsletter subscription form, styled with a black theme:

<footer class="p-4 footer-black">
  <div class="flex">
    <section class="flex-content p-1">
      <h3>Top Products</h3>
      <a href="#">Managed Website</a>
      <a href="#">Manage Reputation</a>
      <a href="#">Power Tools</a>
      <a href="#">Marketing Service</a>
    </section>
    <section class="flex-content p-1">
      <h3>Quick Links</h3>
      <a href="#">Jobs</a>
      <a href="#">Brand Assets</a>
      <a href="#">Investor Relations</a>
      <a href="#">Terms of Service</a>
    </section>
    <section class="flex-content p-1">
      <h3>Features</h3>
      <a href="#">Jobs</a>
      <a href="#">Brand Assets</a>
      <a href="#">Investor Relations</a>
      <a href="#">Terms of Service</a>
    </section>
    <section class="flex-content p-1">
      <h3>Resources</h3>
      <a href="#">Guides</a>
      <a href="#">Research</a>
      <a href="#">Experts</a>
      <a href="#">Agencies</a>
    </section>
    <section class="flex-content p-1">
      <h3>Newsletter</h3>
      <p>You can trust us. we only send promo offers,</p>
      <fieldset class="fixed_flex">
        <input
          type="email"
          name="newsletter"
          placeholder="Your Email Address"
        />
        <button class="btn btn-red">Subscribe</button>
      </fieldset>
    </section>
  </div>
  <div class="flex">
    <section class="flex-content p-1">
      <p>Copyright ©2023 All rights reserved || website name</p>
    </section>
    <section class="flex-content p-1">
      <a href="#"><i class="fa fa-facebook"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
      <a href="#"><i class="fa fa-dribbble"></i></a>
      <a href="#"><i class="fa fa-linkedin"></i></a>
    </section>
  </div>
</footer>

• Footer Container: The <footer class="p-4 footer-black"> element wraps the entire footer, styled with padding (p-4) and a black background (footer-black).

• Sections: Each <section class="flex-content p-1"> within the <div class="flex"> represents a distinct section of the footer, such as "Top Products", "Quick Links", "Features", "Resources", and "Newsletter".

• Links: <a> tags provide navigation within each section, offering links to different pages or resources.

• Newsletter Subscription: Includes an email input field (<input type="email" name="newsletter">) and a subscribe button (<button class="btn btn-red">Subscribe</button>).

• Copyright Notice: Positioned within a <section> at the bottom of the footer.

• Social Links: Icons (<i class="fa fa-[social-media]"></i>) link to respective social media profiles.

Key Features

• Structured Sections: Divides content into sections for clear organization and accessibility.

• Newsletter Subscription: Includes an input field and button for subscribing to updates.

• Social Links: Icons link to various social media profiles, enhancing engagement.

• Copyright Notice: Displays copyright information and website name for legal and branding purposes.