{% extends "base.html" %}


{% block content %}
<div class="container mx-auto">
  <div class="flex justify-between flex-col md:flex-row">
    <img class="w-full md:w-2/4"
         src="https://www.thezebra.com/insurance-news/wp-content/uploads/2016/01/Tree-fallen-on-car-1024x682.jpeg"/>
    <div class="w-full md:w-2/4 flex flex-col justify-center p-4 md:p-16">
      <h2 class="text-xl md:text-3xl font-bold">Machen Sie hier eine Selbstevaluation</h2>
      <p class="my-4 text-xl">Hier steht noch etwas mehr Text</p>
    </div>
  </div>
</div>

<div class="container mx-auto bg-blue-100 border-t-2 border-gray-900">
  <div class="p-8 flex flex-col md:flex-row">

    <div class="w-full md:w-1/2 xl:w-1/3 px-4">
      <div class="bg-white rounded-lg overflow-hidden mb-10 shadow-md">
        <img
          src="https://cdn.tailgrids.com/1.0/assets/images/cards/card-01/image-01.jpg"
          alt="image"
          class="w-full"
        />
        <div class="p-8 sm:p-9 md:p-7 xl:p-9 text-center">
          <a
            href="javascript:void(0)"
            class="
                     inline-block
                     py-2
                     px-7
                     border border-[#E5E7EB]
                     rounded-full
                     text-base text-body-color
                     font-medium
                     hover:border-primary hover:bg-primary hover:text-white
                     transition
                     "
          >
            Kurs X
          </a>
        </div>
      </div>
    </div>

    <div class="w-full md:w-1/2 xl:w-1/3 px-4">
      <div class="bg-white rounded-lg overflow-hidden mb-10 shadow-md">
        <img
          src="https://cdn.tailgrids.com/1.0/assets/images/cards/card-01/image-02.jpg"
          alt="image"
          class="w-full"
        />
        <div class="p-8 sm:p-9 md:p-7 xl:p-9 text-center">
          <a
            href="javascript:void(0)"
            class="
                     inline-block
                     py-2
                     px-7
                     border border-[#E5E7EB]
                     rounded-full
                     text-base text-body-color
                     font-medium
                     hover:border-primary hover:bg-primary hover:text-white
                     transition
                     "
          >
            Kurs Y
          </a>
        </div>
      </div>
    </div>

    <div class="w-full md:w-1/2 xl:w-1/3 px-4">
      <div class="bg-white rounded-lg overflow-hidden mb-10 shadow-md">
        <img
          src="https://cdn.tailgrids.com/1.0/assets/images/cards/card-01/image-03.jpg"
          alt="image"
          class="w-full"
        />
        <div class="p-8 sm:p-9 md:p-7 xl:p-9 text-center">
          <a
            href="javascript:void(0)"
            class="
                     inline-block
                     py-2
                     px-7
                     border border-[#E5E7EB]
                     rounded-full
                     text-base text-body-color
                     font-medium
                     hover:border-primary hover:bg-primary hover:text-white
                     transition
                     "
          >
            Kurs Z
          </a>
        </div>
      </div>
    </div>
  </div>
  <p class="p-8 text-right">weitere Kurse entdecken und buchen</p>

  <div class="border-t-2 border-blue-400 m-8 p-8"></div>
</div>

{% endblock %}