<?php require('partials/head.php') ?>
<?php require('partials/nav.php') ?>
<?php require('partials/banner.php') ?>
<main>
  <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
    <div class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4 gap-5">
      <!--Card 1-->
      <div class="rounded overflow-hidden shadow-lg">
        <img class="w-full" src="images/michal-matlon-4ApmfdVo32Q-unsplash.jpg" alt="Addieren">
        <div class="px-6 py-4">
          <div class="font-bold text-xl mb-2">Addition</div>
          <p class="text-gray-700 text-base">
            Übe das Addieren.
          </p>
          <a href="/addition">
            <button type="button" class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Los geht's</button>
          </a>
        </div>
        <div class="px-6 pt-4 pb-2">
        </div>
      </div>
      <!--Card 2-->
      <div class="rounded overflow-hidden shadow-lg">
        <img class="w-full" src="/images/annie-spratt-Y-JCyxFMXbc-unsplash.jpg" alt="Subtrahieren">
        <div class="px-6 py-4">
          <div class="font-bold text-xl mb-2">Subtraktion</div>
          <p class="text-gray-700 text-base">
            Übe das Subtrahieren.
          </p>
          <button type="button" class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Los geht's</button>
        </div>
        <div class="px-6 pt-4 pb-2">
        </div>
      </div>

      <!--Card 3-->
      <div class="rounded overflow-hidden shadow-lg">
        <img class="w-full" src="/images/gayatri-malhotra-4wF66_KWJxA-unsplash.jpg" alt="Multiplikation">
        <div class="px-6 py-4">
          <div class="font-bold text-xl mb-2">Multiplikation</div>
          <p class="text-gray-700 text-base">
            Übe das Multiplizieren.
          </p>
          <button type="button" class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Los geht's</button>
        </div>
        <div class="px-6 pt-4 pb-2">
        </div>
      </div>

      <div class="rounded overflow-hidden shadow-lg">
        <img class="w-full" src="/images/annie-spratt-ORDz1m1-q0I-unsplash.jpg" alt="Division">
        <div class="px-6 py-4">
          <div class="font-bold text-xl mb-2">Division</div>
          <p class="text-gray-700 text-base">
            Übe das Dividieren.
          </p>
          <button type="button" class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Los geht's</button>
        </div>
        <div class="px-6 pt-4 pb-2">
        </div>
      </div>

    </div>
  </div>

  </div>
</main>
<?php require('partials/footer.php') ?>