CSP-Reporter/src/templates/index.html

{% extends 'base.html' %}

{% block content %}

<!-- SECTION: CTA 2 -->
      <div
        class="flex flex-col justify-center items-center md:p-8 mx-auto text-center w-full bg-gray-900 text-white "
      >
        <h1 class="text-5xl md:text-9xl leading-none text">
          CSP <br />
          <span
            class="bg-gradient-to-r bg-clip-text bg-red-500 text-transparent font-bold"
            >Reporter</span
          >
        </h1>
        <h2 class="md:text-2xl w-full md:w-3/4 py-8 text-justify">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. A quaerat
          delectus optio reprehenderit aperiam!
        </h2>
        <div class="flex flex-col md:flex-row py-4 w-full justify-center">
          <button
            class="px-6 text-white hover:bg-red-600 bg-red-500 focus:ring-red-300 w-full md:w-auto mb-4 md:mb-0 md:mr-2 h-16 ring ring-transparent text-xl shadow-md rounded-md uppercase font-semibold focus:outline-none"
          >
            Subscribe
          </button>
          <button
            class="px-6 ring border-red-500 hover:bg-red-600 text-red-500 focus:ring-red-300 ring-transparent h-16 border text-xl rounded-md uppercase bg-gradient-to-br from-transparent to-transparent hover:text-white font-semibold focus:outline-none"
          >
            Read More
          </button>
        </div>
      </div>
      <!-- !SECTION: CTA 2 -->


      <!-- SECTION: Content Block 1 -->
      <section
        class="w-full py-8 bg-gray-900 text-white "
      >
        <div class="mx-auto w-3/4 flex flex-col items-center">
          <h1
            class="text-3xl text-center lg:text-left lg:text-5xl mb-4 lg:mb-16"
          >
            Lorem, ipsum dolor.
          </h1>
          <!-- SECTION: Cards -->
          <div class="flex flex-col lg:flex-row w-full justify-between">
            <!-- SECTION: Card -->
            <div class="md:p-4 lg:w-1/3">
              <div
                class="shadow-lg p-4 flex flex-col rounded-md bg-gray-800 "
              >
                <!-- SECTION: Badge -->
                <div class="flex w-full">
                  <div
                    class="flex bg-gradient-to-br from-yellow-300 to-yellow-500 text-white justify-center items-center rounded-md w-12 h-12 text-xs px-2 font-semibold"
                  >
                    <svg
                      class="w-8"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
                      />
                    </svg>
                  </div>
                </div>
                <!-- !SECTION: Badge -->
                <h2 class="font-semibold text-2xl py-2">Discount</h2>
                <p class="text-gray-400">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Repudiandae rem qui odit.
                </p>
              </div>
            </div>
            <!-- !SECTION: Card -->
            <!-- SECTION: Card -->
            <div class="md:p-4 lg:w-1/3">
              <div class="p-4 flex flex-col rounded-md">
                <!-- SECTION: Badge -->
                <div class="flex w-full">
                  <div
                    class="flex bg-gradient-to-br from-blue-500 to-purple-600 text-white justify-center items-center rounded-md w-12 h-12 text-xs px-2 font-semibold"
                  >
                    <svg
                      class="w-8"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                      />
                    </svg>
                  </div>
                </div>
                <!-- !SECTION: Badge -->
                <h2 class="font-semibold text-2xl py-2">Premium Service</h2>
                <p class="text-gray-400">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Repudiandae rem qui odit.
                </p>
              </div>
            </div>
            <!-- !SECTION: Card -->
            <!-- SECTION: Card -->
            <div class="md:p-4 lg:w-1/3">
              <div class="p-4 flex flex-col rounded-md">
                <!-- SECTION: Badge -->
                <div class="flex w-full">
                  <div
                    class="flex bg-green-400 text-white justify-center items-center rounded-md w-12 h-12 text-xs px-2 font-semibold"
                  >
                    <svg
                      class="w-8"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
                      />
                    </svg>
                  </div>
                </div>
                <!-- !SECTION: Badge -->
                <h2 class="font-semibold text-2xl py-2">Notifications</h2>
                <p class="text-gray-400">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Repudiandae rem qui odit.
                </p>
              </div>
            </div>
            <!-- !SECTION: Card -->
          </div>
          <!-- !SECTION: Cards -->
        </div>
      </section>
      <!-- !SECTION: Content Block 1 -->



{% endblock %}