safing-web/_includes/footer.html

<footer class="bg-black p-8 bg-local bg-no-repeat bg-cover bg-bottom" style="background-image: url(https://safing.io/assets/img/f-bg.png)">
  <div class="p-12 mx-auto self-center max-w-3xl text-center lg:text-left">
    <span class="text-white text-xl font-bold">Stay Connected</span>
    <div class="block lg:flex items-center py-5">
      <input style="background-color: #302e37;" class="appearance-none rounded-full w-full max-w-md px-6 py-2 text-white" placeholder="Mailing list">
      <div class="pt-5 lg:pt-0 lg:pl-5 ">
        <button type="button" style="background-color: #6188ff;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
          Join us
        </button>
      </div>
    </div>
  </div>
  <div class="text-center lg:text-left container mx-auto px-8">
    <div class="w-full flex flex-col md:flex-row py-6 ">
      <div class="flex-1">
        <p class="text-white text-xl md:mb-6">Company</p>
        <ul class="list-reset mb-6">
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="aboutus.html" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">About Us</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="team.html" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Team</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="finances.html" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Ownership</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="support.html" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Support</a>
          </li>
        </ul>
      </div>
      <div class="flex-1">
        <p class="text-white text-xl md:mb-6">Podcast</p>
        <ul class="list-reset mb-6">
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Overview</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Itunes</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">RSS</a>
          </li>
        </ul>
      </div>
      <div class="flex-1">
        <p class="text-white text-xl md:mb-6">Resources</p>
        <ul class="list-reset mb-6">
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Technology</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Whitepaper</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Blog</a>
          </li>
        </ul>
      </div>
      <div class="flex-1">
        <p class="text-white text-xl md:mb-6">Social</p>
        <ul class="list-reset mb-6">
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Github</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Twitter</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Reddit</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Newsletter</a>
          </li>
        </ul>
      </div>
      <div class="flex-1">
        <p class="text-white text-xl md:mb-6">Legal</p>
        <ul class="list-reset mb-6">
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Terms</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Privacy</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Contact & Legal</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="text-xs">
    <p class="text-center leading-6 text-white opacity-50">
      &copy; 2020 Safing, LLC. All rights reserved.
    </p>
  </div>
</footer>