index.html

---
layout: default
title: Projects
order: 0
---

<div class="mdl-grid page-max-width">

  <div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp">
    <div class="mdl-card__supporting-text course-overview">
      {% include about-the-course.html %}
      {% include course-overview.html %}
    </div>
  </div>

  {% assign projects = site.categories.projects | sort: 'title' %}
  {% for project in projects %}

  <div class="mdl-cell mdl-card mdl-shadow--4dp projects-card">

    <div class="mdl-card__media">
      <img class="card-image" src="{{project.image}}" border="0" alt="{{project.title}} homepage">
    </div>

    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">{{ project.title }}</h2>
    </div>

    <div class="mdl-card__supporting-text">
      {{ project.content }}
    </div>

    <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent" href="{{project.project_url}}" target="_blank" rel="noopener">Learn more</a>
    </div>

    {% if project.showcase == 'yes' %}
    <div class="mdl-card__menu">
      <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
        <i class="material-icons">event_available</i>
      </button>
    </div>
    {% endif %}

  </div>

  {% endfor %}

</div>