{% extends "base.html" %} {% block content %}
<main>
  <div class="container py-4">
    <div class="p-5 mb-4 bg-light rounded-3">
      <div class="container-fluid py-5">
        <h1 class="display-5 fw-bold">智互奥运</h1>
        <p class="col-md-8 fs-4">
          Using a series of utilities, you can create this jumbotron, just like
          the one in previous versions of Bootstrap. Check out the examples
          below for how you can remix and restyle it to your liking.
        </p>
      </div>
    </div>

    <div class="row align-items-md-stretch">
      <div class="col-md-6 mb-4">
        <div class="h-100 p-5 text-white bg-darkblue rounded-3">
          <h2>奥运文化</h2>
          <p>
            Sports Culture即体育文化，
            该公众号主要是为大学生提供一个有关体育文化的有趣的中英文知识学习及互动平台，
            让大家在了解体育知识与文化的同时学习到英语知识。
          </p>
          <h6 class="mb-3">
            <u>
              最新文章:
              <a href="{{ recentArticle['link'] }}"
                >{{ recentArticle['title'] }}</a
              >
            </u>
          </h6>
          <button class="btn btn-outline-light" type="button">
            跳转至文章列表
          </button>
        </div>
      </div>
      <div class="col-md-6 mb-4">
        <div class="h-100 p-5 bg-lightblue border rounded-3">
          <h2>奥运交流</h2>
          <p>
            Or, keep it light and add a border for some added definition to the
            boundaries of your content. Be sure to look under the hood at the
            source HTML here as we've adjusted the alignment and sizing of both
            column's content for equal-height.
          </p>
          <h6 class="mb-3">
            <u>
              最新讨论:
              <a href="{{ recentDiscussion['link'] }}"
                >{{ recentDiscussion['title'] }}</a
              >
            </u>
          </h6>
          <button class="btn btn-outline-secondary" type="button">
            跳转至讨论区
          </button>
        </div>
      </div>
    </div>

    <footer class="pt-3 mt-4 text-muted border-top">© 2022</footer>
  </div>
</main>
{% endblock %}