website-v2/templates/resources/resources.html

{% extends "base.html" %}

{% load static %}

{% block content %}
  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">

    <div class="w-full py-16">
      <h1 class="text-4xl text-center">Resources</h1>
      <p class="text-center mt-0">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non vestibulum velit. Aenean fringilla, arcu sit amet.
      </p>
    </div>

    <div class="w-full">
      <h3 class="border-b border-slate py-2">Resource Category</h3>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 my-11">
        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>
      </div>


      <h3 class="border-b border-slate py-2">Resource Category</h3>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 my-11">
        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>
      </div>


      <h3 class="border-b border-slate py-2">Resource Category</h3>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 my-11">
        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="bg-charcoal py-3 px-4">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
        </div>
      </div>


    </div>

  </div>
{% endblock %}