people.html

---
layout: default
---

<h1 class="text-3xl font-bold px-4 py-4 text-center">People</h1>

<p class="text-xl font-medium py-4 px-4 text-center">
  The Nexus podcasts discuss a variety of topics including consumer technology
  news, developer news, gaming news and occasionally scientific news. We love
  talking, learning and exploring the future.
</p>

<p class="text-md py-4 text-center">
  <img
    class="inline bg-white h-4 w-auto"
    src="http://thenexus.tv/wp-content/themes/coprime/resources/images/nx-logo-color.png"
    alt="The Nexus logo"
  />
  indicates that the person is a host.
</p>

<ul class="list-none px-2 sm:px-4 flex flex-wrap">
  {% for person in site.data.people %}

  <li class="w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5 p-4">
    <a href="#" class="relative">
      <div
        class="mb-2 shadow rounded transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      >
        <img
          class="w-auto h-auto block"
          src="https://via.placeholder.com/400?text={{ person.name }}"
          alt="{{ person.name }} cover art"
        />
        {% if forloop.index < 10 %}
        <img
          class="absolute bg-white opacity-75 rounded top-0 right-0 m-1 p-1 h-6 w-auto"
          src="http://thenexus.tv/wp-content/themes/coprime/resources/images/nx-logo-color.png"
          title="{{ person.name }} is a host"
          alt="{{ person.name }} is a host"
        />
        {% endif %}
      </div>
      <p
        class="text-center text-sm sm:text-base text-gray-700 hover:text-gray-800"
      >
        {{ person.name }}
      </p>
    </a>
  </li>

  {% endfor %}
</ul>