G-Loot DS — footer structure

by Augustin Hiebel

HTML

<footer class="bg-ui-800 border-t border-ui-700 py-12">
  <div>
    <div class="container mx-auto md:gap-12 md:px-4 2xl:px-0 md:flex justify-between">
      <div class="mb-12 lg:mb-0">
        <img width="148" height="40" src="https://res.cloudinary.com/gloot/image/upload/v1636647109/glootcom/v2-202111/gloot_logo.svg" alt="Gloot logo" />
        <p class="my-8 text-sm leading-relaxed">
          © G-Loot Global Esports AB. <br />
          <span class="flex items-center">
            <span class="text-ui-300">All rights reserved. Made in Stockholm, Sweden</span><img loading="lazy" class="ml-2 rounded-sm" alt="Swedish flag" src="https://gloot.com/icons/sweden.svg" width="16" height="12" />
          </span>
        </p>
        <p class="mb-2 text-xs text-ui-300">Secure payment methods with</p>
        <img width="288" height="40" src="https://gloot.com/payment-providers@2x.png" alt="Payment providers" />
      </div>
      <ul class="grid auto-cols-max gap-16 md:grid-flow-col">
        <li>
          <strong class="flex mb-4 font-headings italic text-xl items-center"><span class="block flex-shrink-0 mr-2 w-1 h-6 bg-main"></span><span>Company</span></strong>
          <ul class="text-sm">
            <li><a class="text-ui-300 hover:text-interaction-500 transition duration-200 p-2 inline-block" target="_blank" rel="noreferrer" href="https://gloot.com/company">About</a></li>
            <li><a class="text-ui-300 hover:text-interaction-500 transition duration-200 p-2 inline-block" target="_blank" rel="noreferrer" href="https://investor.gloot.com/">Investor</a></li>
            <li><a class="text-ui-300 hover:text-interaction-500 transition duration-200 p-2 inline-block" target="_blank" rel="noreferrer" href="https://career.gloot.com/">Jobs</a></li>
          </ul>
        </li>
        <li>
          <strong class="flex mb-4 font-headings italic text-xl items-center"><span class="block flex-shrink-0 mr-2 w-1 h-6 bg-main"></span><span>Further...