index.html

---
title: Home
categories: [pages]
id: main
layout: default
---
    <div class="main-container">
      <div class="main clearfix">
        <article>
          <header class="main-blurb">
            <div class="wrapper">
              <h1>Blacklight</h1>
              <p>A multi-institutional open-source collaboration building a better discovery platform framework</p>
              <p class="buttons">
                <a class="button-primary-brand" href="https://github.com/projectblacklight/blacklight/wiki/Quickstart">Learn how to get started</a>
                <a class="button-primary-brand" href="#examples">Examples</a>
              </p>
            </div>
          </header>

          <section class="main-highlight-blurbs">
            <div class="wrapper">
              <h1>Featured Plugins</h1>
              <div class="highlight community-driven">
                <h2><a href="https://github.com/projectblacklight/blacklight-marc">Blacklight MARC</a></h2>
                <p>Library catalog enhancements for Blacklight.</p>
              </div>
              <div class="highlight spotlight">
                <h2><a href="https://github.com/projectblacklight/spotlight">Spotlight</a></h2>
                <p>Enable librarians, curators, and others who are responsible for digital collections to create attractive, feature-rich websites that highlight these collections.</p>
              </div>
              <div class="highlight geoblacklight">
                <h2><a href="http://geoblacklight.org">GeoBlacklight</a></h2>
                <p>A multi-institutional open-source collaboration building a better way to find and share geospatial data.</p>
              </div>
            </div>
          </section>

          <section id="examples" class="showcase wrapper">
            <h1>Project Showcase</h1>
            <div class="isotope-container">               
              {% for item in site.data.showcase %}
              <div class="isotope-item"  ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    <img src="{{ item.img_url }}">
                    <p>{{ item.name }}</p>
                  </div>
                  <div class="back">
                    <p><strong><a href="{{item.url}}">{{ item.name }}</a></strong></p>
                    <p class="desc">{{ item.desc }}</p>
                    <p>
                      {% if item.github_url %} <a href="{{ item.github_url }}" target="_blank" class="button-primary-brand">GitHub</a> {% endif %}
                      {% if item.url %} <a href="{{ item.url }}" class="button-primary-brand">Learn more</a> {% endif %}
                    </p>
                  </div>
                </div>
              </div>
              {% endfor %}
            </div>
          </section>
        </article>
      </div> <!-- #main -->
    </div> <!-- #main-container -->