{% extends "base.html" %}

{% load static %}

{% block content %}
  <div class="container">
    <div class="row">
      <div class="col my-3 text-center rounded p-5">
        <h1 class="display-5">High quality educational resources</h1>
        <div class="row">
          <div class="col my-5 text-center">
            <h2 class="display-6">Stuff and intro text</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col mb-5">
          <div class="d-flex justify-content-between align-content-center">
            <img class="mx-2" src="{% static "images/placeholder.png" %}" alt="PLACEHOLDER" />
            <img class="mx-2" src="{% static "images/placeholder.png" %}" alt="PLACEHOLDER" />
            <img class="mx-2" src="{% static "images/placeholder.png" %}" alt="PLACEHOLDER" />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-3 py-3 m-4 bg-white border border-1 rounded">
          <h5>Welcome!</h5>
          <p>
            I love to make clear and colourful resources and can't resist using rainbow colours
            which so often help make learning visually clearer. I'd love to know what you think of
            what you download, don't hesitate to let me know if you have any suggestions or requests...
            I am also available to tutor younger learners online via Sherpa!
          </p>
        </div>
        <div class="col py-3 m-4 bg-white border border-1 rounded">
          <h2 class="text-primary">Subscriptions available now!</h2>
          <p>
            I love to make clear and colourful resources and can't resist using rainbow colours
            which so often help make learning visually clearer. I'd love to know what you think of
            what you download, don't hesitate to let me know if you have any suggestions or requests...
            I am also available to tutor younger learners online via Sherpa!
          </p>
          <h4>What is available?</h4>
          <ul class="list-group">
            <li class="list-group-item">Full access to all resources (over 250 resources)</li>
            <li class="list-group-item">Customised resources upon request</li>
            <li class="list-group-item">New resources coming online all the time</li>
          </ul>
          <a href="#" class="btn btn-primary my-3">Subscribe now</a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col my-5 text-center">
        <h1 class="display-2">Featured resources</h1>
      </div>
      <div class="row">
        <div class="col my-5 text-center">
          <h2 class="display-5">These are my latest resources. They are great!</h2>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}