buymymojo.net/node_modules/cssgram/site/test/index.html
2021-07-02 19:29:34 +10:00

2116 lines
51 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="description" content="Testing CSSgram filters"/>
<meta name="author" content="Miles Croxford"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../css/cssgram.min.css">
<title>CSSgram test sheet</title>
<link rel="stylesheet" href="../css/demo-site.min.css">
<link rel="stylesheet" href="css/test-site.css">
</head>
<body class="test-page">
<header>
<img class="logo" src="../img/cssgram-logo.svg" alt="CSSgram logo"> <h1 class="blurb"> Test sheet </h1>
</header>
<section id="aden">
<h2 class="filter-header"><a href="#aden">Aden</a> <span class="done done--yep"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-aden.jpg" alt="Instagram version of aden">
</figure>
</div>
<div>
<figure class="aden">
<img src="../img/atx.jpg" alt="CSSgram version of aden"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-aden.jpg" alt="Instagram version of aden">
</figure>
</div>
<div>
<figure class="aden">
<img src="../img/bike.jpg" alt="CSSgram version of aden"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-aden.jpg" alt="Instagram version of aden">
</figure>
</div>
<div>
<figure class="aden">
<img src="../img/cacti.jpg" alt="CSSgram version of aden"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-aden.jpg" alt="Instagram version of aden">
</figure>
</div>
<div>
<figure class="aden">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of aden"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-aden.jpg" alt="Instagram version of aden">
</figure>
</div>
<div>
<figure class="aden">
<img src="../img/tahoe.jpg" alt="CSSgram version of aden"></div>
</figure>
</div>
</section>
</section>
<section id="amaro">
<h2 class="filter-header"><a href="#amaro">Amaro</a> <span class="done done--nope"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-amaro.jpg" alt="Instagram version of amaro">
</figure>
</div>
<div>
<figure class="amaro">
<img src="../img/atx.jpg" alt="CSSgram version of amaro"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-amaro.jpg" alt="Instagram version of amaro">
</figure>
</div>
<div>
<figure class="amaro">
<img src="../img/bike.jpg" alt="CSSgram version of amaro"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-amaro.jpg" alt="Instagram version of amaro">
</figure>
</div>
<div>
<figure class="amaro">
<img src="../img/cacti.jpg" alt="CSSgram version of amaro"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-amaro.jpg" alt="Instagram version of amaro">
</figure>
</div>
<div>
<figure class="amaro">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of amaro"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-amaro.jpg" alt="Instagram version of amaro">
</figure>
</div>
<div>
<figure class="amaro">
<img src="../img/tahoe.jpg" alt="CSSgram version of amaro"></div>
</figure>
</div>
</section>
</section>
<section id="brannan">
<h2 class="filter-header"><a href="#brannan">Brannan</a> <span class="done done--nope"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-brannan.jpg" alt="Instagram version of brannan">
</figure>
</div>
<div>
<figure class="brannan">
<img src="../img/atx.jpg" alt="CSSgram version of brannan"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-brannan.jpg" alt="Instagram version of brannan">
</figure>
</div>
<div>
<figure class="brannan">
<img src="../img/bike.jpg" alt="CSSgram version of brannan"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-brannan.jpg" alt="Instagram version of brannan">
</figure>
</div>
<div>
<figure class="brannan">
<img src="../img/cacti.jpg" alt="CSSgram version of brannan"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-brannan.jpg" alt="Instagram version of brannan">
</figure>
</div>
<div>
<figure class="brannan">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of brannan"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-brannan.jpg" alt="Instagram version of brannan">
</figure>
</div>
<div>
<figure class="brannan">
<img src="../img/tahoe.jpg" alt="CSSgram version of brannan"></div>
</figure>
</div>
</section>
</section>
<section id="crema">
<h2 class="filter-header"><a href="#crema">Crema</a> <span class="done done--nope"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-crema.jpg" alt="Instagram version of crema">
</figure>
</div>
<div>
<figure class="crema">
<img src="../img/atx.jpg" alt="CSSgram version of crema"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-crema.jpg" alt="Instagram version of crema">
</figure>
</div>
<div>
<figure class="crema">
<img src="../img/bike.jpg" alt="CSSgram version of crema"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-crema.jpg" alt="Instagram version of crema">
</figure>
</div>
<div>
<figure class="crema">
<img src="../img/cacti.jpg" alt="CSSgram version of crema"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-crema.jpg" alt="Instagram version of crema">
</figure>
</div>
<div>
<figure class="crema">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of crema"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-crema.jpg" alt="Instagram version of crema">
</figure>
</div>
<div>
<figure class="crema">
<img src="../img/tahoe.jpg" alt="CSSgram version of crema"></div>
</figure>
</div>
</section>
</section>
<section id="earlybird">
<h2 class="filter-header"><a href="#earlybird">Earlybird</a> <span class="done done--yep"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-earlybird.jpg" alt="Instagram version of earlybird">
</figure>
</div>
<div>
<figure class="earlybird">
<img src="../img/atx.jpg" alt="CSSgram version of earlybird"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-earlybird.jpg" alt="Instagram version of earlybird">
</figure>
</div>
<div>
<figure class="earlybird">
<img src="../img/bike.jpg" alt="CSSgram version of earlybird"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-earlybird.jpg" alt="Instagram version of earlybird">
</figure>
</div>
<div>
<figure class="earlybird">
<img src="../img/cacti.jpg" alt="CSSgram version of earlybird"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-earlybird.jpg" alt="Instagram version of earlybird">
</figure>
</div>
<div>
<figure class="earlybird">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of earlybird"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-earlybird.jpg" alt="Instagram version of earlybird">
</figure>
</div>
<div>
<figure class="earlybird">
<img src="../img/tahoe.jpg" alt="CSSgram version of earlybird"></div>
</figure>
</div>
</section>
</section>
<section id="hefe">
<h2 class="filter-header"><a href="#hefe">Hefe</a> <span class="done done--nope"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-hefe.jpg" alt="Instagram version of hefe">
</figure>
</div>
<div>
<figure class="hefe">
<img src="../img/atx.jpg" alt="CSSgram version of hefe"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-hefe.jpg" alt="Instagram version of hefe">
</figure>
</div>
<div>
<figure class="hefe">
<img src="../img/bike.jpg" alt="CSSgram version of hefe"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-hefe.jpg" alt="Instagram version of hefe">
</figure>
</div>
<div>
<figure class="hefe">
<img src="../img/cacti.jpg" alt="CSSgram version of hefe"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-hefe.jpg" alt="Instagram version of hefe">
</figure>
</div>
<div>
<figure class="hefe">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of hefe"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-hefe.jpg" alt="Instagram version of hefe">
</figure>
</div>
<div>
<figure class="hefe">
<img src="../img/tahoe.jpg" alt="CSSgram version of hefe"></div>
</figure>
</div>
</section>
</section>
<section id="hudson">
<h2 class="filter-header"><a href="#hudson">Hudson</a> <span class="done done--yep"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-hudson.jpg" alt="Instagram version of hudson">
</figure>
</div>
<div>
<figure class="hudson">
<img src="../img/atx.jpg" alt="CSSgram version of hudson"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-hudson.jpg" alt="Instagram version of hudson">
</figure>
</div>
<div>
<figure class="hudson">
<img src="../img/bike.jpg" alt="CSSgram version of hudson"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-hudson.jpg" alt="Instagram version of hudson">
</figure>
</div>
<div>
<figure class="hudson">
<img src="../img/cacti.jpg" alt="CSSgram version of hudson"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-hudson.jpg" alt="Instagram version of hudson">
</figure>
</div>
<div>
<figure class="hudson">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of hudson"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-hudson.jpg" alt="Instagram version of hudson">
</figure>
</div>
<div>
<figure class="hudson">
<img src="../img/tahoe.jpg" alt="CSSgram version of hudson"></div>
</figure>
</div>
</section>
</section>
<section id="inkwell">
<h2 class="filter-header"><a href="#inkwell">Inkwell</a> <span class="done done--yep"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-inkwell.jpg" alt="Instagram version of inkwell">
</figure>
</div>
<div>
<figure class="inkwell">
<img src="../img/atx.jpg" alt="CSSgram version of inkwell"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-inkwell.jpg" alt="Instagram version of inkwell">
</figure>
</div>
<div>
<figure class="inkwell">
<img src="../img/bike.jpg" alt="CSSgram version of inkwell"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-inkwell.jpg" alt="Instagram version of inkwell">
</figure>
</div>
<div>
<figure class="inkwell">
<img src="../img/cacti.jpg" alt="CSSgram version of inkwell"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-inkwell.jpg" alt="Instagram version of inkwell">
</figure>
</div>
<div>
<figure class="inkwell">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of inkwell"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-inkwell.jpg" alt="Instagram version of inkwell">
</figure>
</div>
<div>
<figure class="inkwell">
<img src="../img/tahoe.jpg" alt="CSSgram version of inkwell"></div>
</figure>
</div>
</section>
</section>
<section id="juno">
<h2 class="filter-header"><a href="#juno">Juno</a> <span class="done done--nope"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-juno.jpg" alt="Instagram version of juno">
</figure>
</div>
<div>
<figure class="juno">
<img src="../img/atx.jpg" alt="CSSgram version of juno"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-juno.jpg" alt="Instagram version of juno">
</figure>
</div>
<div>
<figure class="juno">
<img src="../img/bike.jpg" alt="CSSgram version of juno"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-juno.jpg" alt="Instagram version of juno">
</figure>
</div>
<div>
<figure class="juno">
<img src="../img/cacti.jpg" alt="CSSgram version of juno"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-juno.jpg" alt="Instagram version of juno">
</figure>
</div>
<div>
<figure class="juno">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of juno"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-juno.jpg" alt="Instagram version of juno">
</figure>
</div>
<div>
<figure class="juno">
<img src="../img/tahoe.jpg" alt="CSSgram version of juno"></div>
</figure>
</div>
</section>
</section>
<section id="lark">
<h2 class="filter-header"><a href="#lark">Lark</a> <span class="done done--nope"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-lark.jpg" alt="Instagram version of lark">
</figure>
</div>
<div>
<figure class="lark">
<img src="../img/atx.jpg" alt="CSSgram version of lark"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-lark.jpg" alt="Instagram version of lark">
</figure>
</div>
<div>
<figure class="lark">
<img src="../img/bike.jpg" alt="CSSgram version of lark"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-lark.jpg" alt="Instagram version of lark">
</figure>
</div>
<div>
<figure class="lark">
<img src="../img/cacti.jpg" alt="CSSgram version of lark"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-lark.jpg" alt="Instagram version of lark">
</figure>
</div>
<div>
<figure class="lark">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of lark"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-lark.jpg" alt="Instagram version of lark">
</figure>
</div>
<div>
<figure class="lark">
<img src="../img/tahoe.jpg" alt="CSSgram version of lark"></div>
</figure>
</div>
</section>
</section>
<section id="lofi">
<h2 class="filter-header"><a href="#lofi">Lofi</a> <span class="done done--yep"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-lofi.jpg" alt="Instagram version of lofi">
</figure>
</div>
<div>
<figure class="lofi">
<img src="../img/atx.jpg" alt="CSSgram version of lofi"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-lofi.jpg" alt="Instagram version of lofi">
</figure>
</div>
<div>
<figure class="lofi">
<img src="../img/bike.jpg" alt="CSSgram version of lofi"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-lofi.jpg" alt="Instagram version of lofi">
</figure>
</div>
<div>
<figure class="lofi">
<img src="../img/cacti.jpg" alt="CSSgram version of lofi"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-lofi.jpg" alt="Instagram version of lofi">
</figure>
</div>
<div>
<figure class="lofi">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of lofi"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-lofi.jpg" alt="Instagram version of lofi">
</figure>
</div>
<div>
<figure class="lofi">
<img src="../img/tahoe.jpg" alt="CSSgram version of lofi"></div>
</figure>
</div>
</section>
</section>
<section id="ludwig">
<h2 class="filter-header"><a href="#ludwig">Ludwig</a> <span class="done done--nope"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-ludwig.jpg" alt="Instagram version of ludwig">
</figure>
</div>
<div>
<figure class="ludwig">
<img src="../img/atx.jpg" alt="CSSgram version of ludwig"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-ludwig.jpg" alt="Instagram version of ludwig">
</figure>
</div>
<div>
<figure class="ludwig">
<img src="../img/bike.jpg" alt="CSSgram version of ludwig"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-ludwig.jpg" alt="Instagram version of ludwig">
</figure>
</div>
<div>
<figure class="ludwig">
<img src="../img/cacti.jpg" alt="CSSgram version of ludwig"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-ludwig.jpg" alt="Instagram version of ludwig">
</figure>
</div>
<div>
<figure class="ludwig">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of ludwig"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-ludwig.jpg" alt="Instagram version of ludwig">
</figure>
</div>
<div>
<figure class="ludwig">
<img src="../img/tahoe.jpg" alt="CSSgram version of ludwig"></div>
</figure>
</div>
</section>
</section>
<section id="mayfair">
<h2 class="filter-header"><a href="#mayfair">Mayfair</a> <span class="done done--yep"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-mayfair.jpg" alt="Instagram version of mayfair">
</figure>
</div>
<div>
<figure class="mayfair">
<img src="../img/atx.jpg" alt="CSSgram version of mayfair"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-mayfair.jpg" alt="Instagram version of mayfair">
</figure>
</div>
<div>
<figure class="mayfair">
<img src="../img/bike.jpg" alt="CSSgram version of mayfair"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-mayfair.jpg" alt="Instagram version of mayfair">
</figure>
</div>
<div>
<figure class="mayfair">
<img src="../img/cacti.jpg" alt="CSSgram version of mayfair"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-mayfair.jpg" alt="Instagram version of mayfair">
</figure>
</div>
<div>
<figure class="mayfair">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of mayfair"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-mayfair.jpg" alt="Instagram version of mayfair">
</figure>
</div>
<div>
<figure class="mayfair">
<img src="../img/tahoe.jpg" alt="CSSgram version of mayfair"></div>
</figure>
</div>
</section>
</section>
<section id="nashville">
<h2 class="filter-header"><a href="#nashville">Nashville</a> <span class="done done--yep"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-nashville.jpg" alt="Instagram version of nashville">
</figure>
</div>
<div>
<figure class="nashville">
<img src="../img/atx.jpg" alt="CSSgram version of nashville"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-nashville.jpg" alt="Instagram version of nashville">
</figure>
</div>
<div>
<figure class="nashville">
<img src="../img/bike.jpg" alt="CSSgram version of nashville"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-nashville.jpg" alt="Instagram version of nashville">
</figure>
</div>
<div>
<figure class="nashville">
<img src="../img/cacti.jpg" alt="CSSgram version of nashville"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-nashville.jpg" alt="Instagram version of nashville">
</figure>
</div>
<div>
<figure class="nashville">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of nashville"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-nashville.jpg" alt="Instagram version of nashville">
</figure>
</div>
<div>
<figure class="nashville">
<img src="../img/tahoe.jpg" alt="CSSgram version of nashville"></div>
</figure>
</div>
</section>
</section>
<section id="perpetua">
<h2 class="filter-header"><a href="#perpetua">Perpetua</a> <span class="done done--yep"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-perpetua.jpg" alt="Instagram version of perpetua">
</figure>
</div>
<div>
<figure class="perpetua">
<img src="../img/atx.jpg" alt="CSSgram version of perpetua"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-perpetua.jpg" alt="Instagram version of perpetua">
</figure>
</div>
<div>
<figure class="perpetua">
<img src="../img/bike.jpg" alt="CSSgram version of perpetua"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-perpetua.jpg" alt="Instagram version of perpetua">
</figure>
</div>
<div>
<figure class="perpetua">
<img src="../img/cacti.jpg" alt="CSSgram version of perpetua"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-perpetua.jpg" alt="Instagram version of perpetua">
</figure>
</div>
<div>
<figure class="perpetua">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of perpetua"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-perpetua.jpg" alt="Instagram version of perpetua">
</figure>
</div>
<div>
<figure class="perpetua">
<img src="../img/tahoe.jpg" alt="CSSgram version of perpetua"></div>
</figure>
</div>
</section>
</section>
<section id="reyes">
<h2 class="filter-header"><a href="#reyes">Reyes</a> <span class="done done--yep"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-reyes.jpg" alt="Instagram version of reyes">
</figure>
</div>
<div>
<figure class="reyes">
<img src="../img/atx.jpg" alt="CSSgram version of reyes"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-reyes.jpg" alt="Instagram version of reyes">
</figure>
</div>
<div>
<figure class="reyes">
<img src="../img/bike.jpg" alt="CSSgram version of reyes"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-reyes.jpg" alt="Instagram version of reyes">
</figure>
</div>
<div>
<figure class="reyes">
<img src="../img/cacti.jpg" alt="CSSgram version of reyes"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-reyes.jpg" alt="Instagram version of reyes">
</figure>
</div>
<div>
<figure class="reyes">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of reyes"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-reyes.jpg" alt="Instagram version of reyes">
</figure>
</div>
<div>
<figure class="reyes">
<img src="../img/tahoe.jpg" alt="CSSgram version of reyes"></div>
</figure>
</div>
</section>
</section>
<section id="rise">
<h2 class="filter-header"><a href="#rise">Rise</a> <span class="done done--nope"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-rise.jpg" alt="Instagram version of rise">
</figure>
</div>
<div>
<figure class="rise">
<img src="../img/atx.jpg" alt="CSSgram version of rise"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-rise.jpg" alt="Instagram version of rise">
</figure>
</div>
<div>
<figure class="rise">
<img src="../img/bike.jpg" alt="CSSgram version of rise"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-rise.jpg" alt="Instagram version of rise">
</figure>
</div>
<div>
<figure class="rise">
<img src="../img/cacti.jpg" alt="CSSgram version of rise"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-rise.jpg" alt="Instagram version of rise">
</figure>
</div>
<div>
<figure class="rise">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of rise"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-rise.jpg" alt="Instagram version of rise">
</figure>
</div>
<div>
<figure class="rise">
<img src="../img/tahoe.jpg" alt="CSSgram version of rise"></div>
</figure>
</div>
</section>
</section>
<section id="sierra">
<h2 class="filter-header"><a href="#sierra">Sierra</a> <span class="done done--nope"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-sierra.jpg" alt="Instagram version of sierra">
</figure>
</div>
<div>
<figure class="sierra">
<img src="../img/atx.jpg" alt="CSSgram version of sierra"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-sierra.jpg" alt="Instagram version of sierra">
</figure>
</div>
<div>
<figure class="sierra">
<img src="../img/bike.jpg" alt="CSSgram version of sierra"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-sierra.jpg" alt="Instagram version of sierra">
</figure>
</div>
<div>
<figure class="sierra">
<img src="../img/cacti.jpg" alt="CSSgram version of sierra"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-sierra.jpg" alt="Instagram version of sierra">
</figure>
</div>
<div>
<figure class="sierra">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of sierra"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-sierra.jpg" alt="Instagram version of sierra">
</figure>
</div>
<div>
<figure class="sierra">
<img src="../img/tahoe.jpg" alt="CSSgram version of sierra"></div>
</figure>
</div>
</section>
</section>
<section id="slumber">
<h2 class="filter-header"><a href="#slumber">Slumber</a> <span class="done done--nope"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-slumber.jpg" alt="Instagram version of slumber">
</figure>
</div>
<div>
<figure class="slumber">
<img src="../img/atx.jpg" alt="CSSgram version of slumber"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-slumber.jpg" alt="Instagram version of slumber">
</figure>
</div>
<div>
<figure class="slumber">
<img src="../img/bike.jpg" alt="CSSgram version of slumber"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-slumber.jpg" alt="Instagram version of slumber">
</figure>
</div>
<div>
<figure class="slumber">
<img src="../img/cacti.jpg" alt="CSSgram version of slumber"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-slumber.jpg" alt="Instagram version of slumber">
</figure>
</div>
<div>
<figure class="slumber">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of slumber"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-slumber.jpg" alt="Instagram version of slumber">
</figure>
</div>
<div>
<figure class="slumber">
<img src="../img/tahoe.jpg" alt="CSSgram version of slumber"></div>
</figure>
</div>
</section>
</section>
<section id="valencia">
<h2 class="filter-header"><a href="#valencia">Valencia</a> <span class="done done--nope"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-valencia.jpg" alt="Instagram version of valencia">
</figure>
</div>
<div>
<figure class="valencia">
<img src="../img/atx.jpg" alt="CSSgram version of valencia"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-valencia.jpg" alt="Instagram version of valencia">
</figure>
</div>
<div>
<figure class="valencia">
<img src="../img/bike.jpg" alt="CSSgram version of valencia"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-valencia.jpg" alt="Instagram version of valencia">
</figure>
</div>
<div>
<figure class="valencia">
<img src="../img/cacti.jpg" alt="CSSgram version of valencia"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-valencia.jpg" alt="Instagram version of valencia">
</figure>
</div>
<div>
<figure class="valencia">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of valencia"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-valencia.jpg" alt="Instagram version of valencia">
</figure>
</div>
<div>
<figure class="valencia">
<img src="../img/tahoe.jpg" alt="CSSgram version of valencia"></div>
</figure>
</div>
</section>
</section>
<section id="willow">
<h2 class="filter-header"><a href="#willow">Willow</a> <span class="done done--nope"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-willow.jpg" alt="Instagram version of willow">
</figure>
</div>
<div>
<figure class="willow">
<img src="../img/atx.jpg" alt="CSSgram version of willow"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-willow.jpg" alt="Instagram version of willow">
</figure>
</div>
<div>
<figure class="willow">
<img src="../img/bike.jpg" alt="CSSgram version of willow"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-willow.jpg" alt="Instagram version of willow">
</figure>
</div>
<div>
<figure class="willow">
<img src="../img/cacti.jpg" alt="CSSgram version of willow"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-willow.jpg" alt="Instagram version of willow">
</figure>
</div>
<div>
<figure class="willow">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of willow"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-willow.jpg" alt="Instagram version of willow">
</figure>
</div>
<div>
<figure class="willow">
<img src="../img/tahoe.jpg" alt="CSSgram version of willow"></div>
</figure>
</div>
</section>
</section>
<section id="xpro2">
<h2 class="filter-header"><a href="#xpro2">Xpro2</a> <span class="done done--yep"></span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
<section class="test-images">
<div>
<figure>
<img src="ref/atx-xpro2.jpg" alt="Instagram version of xpro2">
</figure>
</div>
<div>
<figure class="xpro2">
<img src="../img/atx.jpg" alt="CSSgram version of xpro2"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/bike-xpro2.jpg" alt="Instagram version of xpro2">
</figure>
</div>
<div>
<figure class="xpro2">
<img src="../img/bike.jpg" alt="CSSgram version of xpro2"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/cacti-xpro2.jpg" alt="Instagram version of xpro2">
</figure>
</div>
<div>
<figure class="xpro2">
<img src="../img/cacti.jpg" alt="CSSgram version of xpro2"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/lakegeneva-xpro2.jpg" alt="Instagram version of xpro2">
</figure>
</div>
<div>
<figure class="xpro2">
<img src="../img/lakegeneva.jpg" alt="CSSgram version of xpro2"></div>
</figure>
</div>
</section>
<section class="test-images">
<div>
<figure>
<img src="ref/tahoe-xpro2.jpg" alt="Instagram version of xpro2">
</figure>
</div>
<div>
<figure class="xpro2">
<img src="../img/tahoe.jpg" alt="CSSgram version of xpro2"></div>
</figure>
</div>
</section>
</section>
<footer class="attribution">Made with love by <a href="http://twitter.com/una">Una</a> | <a href="http://github.com/una/CSSgram">View Source and Contribute</a></footer>
</body>
</html>