index.html

---
layout: page
title: Home
---

<section class="body-font border-b border-red-200 text-gray-700">
  <div class="container mx-auto px-5 py-12">
    <div class="mb-20 flex w-full flex-col text-center">
      <h1 class="title-font mb-4 text-2xl font-medium text-gray-900 sm:text-3xl">{{ site.title }}</h1>
      <p class="mx-auto text-base leading-relaxed lg:w-2/3">
        A collection of tools and resources to help you run your D&D games.
      </p>
    </div>
    <div class="flex flex-wrap">
      <div class="border-gray-200 px-8 py-6 md:w-full lg:w-1/2 lg:border-l-2 xl:w-1/4">
        <h2 class="title-font mb-2 text-lg font-medium text-gray-900 sm:text-xl">Spell API</h2>
        <p class="mb-4 text-base leading-relaxed">Create your own tools by consuming our JSON API of SRD spells.</p>
        <a href="{% link api/index.html %}" class="inline-flex items-center text-red-700">
          API Documentation
          <svg
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="ml-2 h-4 w-4"
            viewBox="0 0 24 24"
          >
            <path d="M5 12h14M12 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
      <div class="border-gray-200 px-8 py-6 md:w-full lg:w-1/2 lg:border-l-2 xl:w-1/4">
        <h2 class="title-font mb-2 text-lg font-medium text-gray-900 sm:text-xl">Item API</h2>
        <p class="mb-4 text-base leading-relaxed">Create your own tools by consuming our JSON API of magical items.</p>
        <a href="{% link api/index.html %}" class="inline-flex items-center text-red-700">
          API Documentation
          <svg
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="ml-2 h-4 w-4"
            viewBox="0 0 24 24"
          >
            <path d="M5 12h14M12 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
      <div class="border-gray-200 px-8 py-6 md:w-full lg:w-1/2 lg:border-l-2 xl:w-1/4">
        <h2 class="title-font mb-2 text-lg font-medium text-gray-900 sm:text-xl">Price Calculator</h2>
        <p class="mb-4 text-base leading-relaxed">
          Need to figure out how much that item magic costs? Use this Calculator! Takes local variables into
          consideration to determine the price of a magical item.
        </p>
        <a href="{% link tools/price.html %}" class="inline-flex items-center text-red-700">
          Try out the calculator
          <svg
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="ml-2 h-4 w-4"
            viewBox="0 0 24 24"
          >
            <path d="M5 12h14M12 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
      <div class="border-gray-200 px-8 py-6 md:w-full lg:w-1/2 lg:border-l-2 xl:w-1/4">
        <h2 class="title-font mb-2 text-lg font-medium text-gray-900 sm:text-xl">DM Resources</h2>
        <p class="mb-4 text-base leading-relaxed">Links to other online resources to help you run your game.</p>
        <a href="{% link tools/index.html %}" class="inline-flex items-center text-red-700">
          Game resources
          <svg
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="ml-2 h-4 w-4"
            viewBox="0 0 24 24"
          >
            <path d="M5 12h14M12 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>