index.html

{{ define "main" }}

<section class="text-gray-700 body-font">
  <div class="container px-5 py-8 mx-auto">
    <!-- {{- partial "custom-message.html" . -}}-->

    <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
      {{ range where .Site.Pages "Kind" "page" }} {{ if ne .Params.Exclude true }}
      <a
        target="_blank"
        rel="noopener"
        href="{{ .Params.Link }}"
        class="card p-4 md:w-1/3 sm:mb-4 mb-6 hover:shadow-xl hover:bg-gray-400 transition duration-200 ease-in rounded-lg {{ lower .Section }}"
      >
        <div class="rounded-lg h-64 overflow-hidden card-item relative">
          {{ if (or .Params.Image .CurrentSection.Params.Image) }}
          <img alt="{{ .Title }}" class="object-cover object-center h-full w-full" src="{{ (or .Params.Image .CurrentSection.Params.Image) }}" />
          {{ end }}
          <div class="card-content">
            <span class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">{{ title .Section }}</span>
            <h2
              class="h2 text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0"
            >
              {{ .Title }}
            </h2>
            <p class="h3 text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0">
              {{ .Params.Subtitle }}
            </p>
          </div>
        </div>
      </a>
      {{ end }} {{ end }}
    </div>
  </div>
</section>

{{ end }}