Example Section
Closed this issue · 0 comments
rcgraff commented
Here's some HTML for an example section. I emailed Heather the thumbnails and logos.
Also, the third row is composed of examples that feature a custom instance of timeline. If we can call that out somehow, that might be interesting. Simply saying "Custom SoundCite Instances" would probably do the trick.
Examples
Have you used SoundCite? Let us know, and we might feature it here.
<!-- Example-->
<div class="span3">
<p><a href="http://classics.esquire.com/bbking/" target="_blank"><img src="/static/img/examples/thumbs/thumb_bbking.jpg" class="thumbnail"></a></p>
<h3><a href="http://classics.esquire.com/bbking/" target="_blank"><img src="/static/img/examples/logos/logo_esquire.png" alt="Esquire"><br/>B.B. King: What I've learned</a></h3>
</div>
<!-- Example-->
<div class="span3">
<p><a href="http://www.nytimes.com/interactive/2014/04/13/magazine/blues.html" target="_blank"><img src="/static/img/examples/thumbs/thumb_record.jpg" class="thumbnail"></a></p>
<h3><a href="http://www.nytimes.com/interactive/2014/04/13/magazine/blues.html" target="_blank"><img src="/static/img/examples/logos/logo_nytmag.png" alt="New York Times Magazine"><br/>The Ballad of Geeshie and Elvie</a></h3>
</div>
<!-- Example-->
<!-- Example-->
<!-- Example-->
<div class="span3">
<p> <a href="http://www.stltoday.com/news/multimedia/special/darren-wilson-s-radio-calls-show-fatal-encounter-was-brief/html_79c17aed-0dbe-514d-ba32-bad908056790.html"><img src="/static/img/examples/thumbs/thumb_ferguson.jpg" class="thumbnail"></a></p>
<h3><a href="http://www.stltoday.com/news/multimedia/special/darren-wilson-s-radio-calls-show-fatal-encounter-was-brief/html_79c17aed-0dbe-514d-ba32-bad908056790.html" target="_blank"><img src="/static/img/examples/logos/logo_stl-post-dispatch.png" alt="St. Louis Dispatch">Darren Wilson's Radio Calls Show Brief Fatal Encounter</a></h3>
</div>
<!-- Example-->
<div class="span3">
<p> <a href="http://www.propublica.org/article/the-red-cross-secret-disaster" target="_blank"><img src="/static/img/examples/thumbs/thumb_redpicture.jpg" class="thumbnail"></a></p>
<h3><a href="http://www.propublica.org/article/the-red-cross-secret-disaster" target="_blank"><img src="/static/img/examples/logos/propublica.png" alt="Maclean's">The Red Cross' Secret Disaster</a></h3>
</div>
<div class="span3">
<p> <a href="http://www.washingtonpost.com/sf/style/2014/07/01/songwriters/" target="_blank"><img src="/static/img/examples/thumbs/thumb_singer.jpg" class="thumbnail"></a></p>
<h3><a href="http://www.washingtonpost.com/sf/style/2014/07/01/songwriters/" target="_blank"><img src="/static/img/examples/logos/logo_washingtonpost.png" alt="Washington Post">Songwriters at The End of the World</a></h3>
</div>
<div class="span3">
<p> <a href="http://www.wbez.org/blogs/jim-derogatis/2013-05/chance-rapper-paints-giddy-yet-profound-picture-south-side-life-107164" target="_blank"><img src="/static/img/examples/thumbs/thumb_chance-the-rapper.jpg" class="thumbnail"></a></p>
<h3><a href="http://www.wbez.org/blogs/jim-derogatis/2013-05/chance-rapper-paints-giddy-yet-profound-picture-south-side-life-107164" target="_blank"><img src="/static/img/examples/logos/logo_wbez.png" alt="WBEZ">Jim DeRogatis: Chance the Rapper</a></h3>
</div>
<!-- Example-->
<div class="span3">
<p> <a href="http://www.edweek.org/ew/projects/2013/native-american-education/running-in-place.html"><img src="/static/img/examples/thumbs/thumb_lakota-schoolbus.jpg" class="thumbnail"></a></p>
<h3><a href="http://www.edweek.org/ew/projects/2013/native-american-education/running-in-place.html" target="_blank"><img src="/static/img/examples/logos/logo_educationweek.png" alt="Education Week">Running in Place</a></h3>
</div>
<!-- Example-->
<div class="span3">
<p> <a href="http://interactive.wbez.org/nerdsjocks/" target="_blank"><img src="/static/img/examples/thumbs/thumb_jock-or-nerd.jpg" class="thumbnail"></a></p>
<h3><a href="http://interactive.wbez.org/nerdsjocks/" target="_blank"><img src="/static/img/examples/logos/logo_wbez.png" alt="WBEZ">Nerd of Jock?</a></h3>
</div>
<div class="span3">
<p> <a href="http://www.mo.be/interview/nick-yarris" target="_blank"><img src="/static/img/examples/thumbs/thumb_mondiaal-nieuws-book.jpg" class="thumbnail"></a></p>
<h3><a href="http://www.mo.be/interview/nick-yarris" target="_blank"><img src="/static/img/examples/logos/logo_mondiaal.png" alt="Mondiaal Nieuws">Wrongly Convicted: 21 Years on Death Row</a></h3>
</div>
<div class="span3">
<p> <a href="http://projects.aljazeera.com/2014/tangier-island/" target="_blank"><img src="/static/img/examples/thumbs/thumb_fisherman.jpg" class="thumbnail"></a></p>
<h3><a href="http://projects.aljazeera.com/2014/tangier-island/" target="_blank"><img src="/static/img/examples/logos/logo_aja.png" alt="Al Jazeera America">Treasured Tangier Island</a></h3>
</div>