Browser

browser-front.html

<section class="browser main">

  <h1>ContraClassics is the best way to find and listen to classical music. Start browsing, discover and enjoy.</h1>

  <section>

    <p class="side-summary">Drill down into the main categories and browse, or look at more specialised content</p>
    <div class="lens select">
      <a href="browse-select-composers.html">
        <h2 class="icon big icon-composers">Composers</h2>
        <p>Beethoven, Mozart, Grieg, 345 more</p>
      </a>
    </div>
    <div class="lens select">
      <a href="browse-select-artists.html">
        <h2 class="icon big icon-artists">Artists</h2>
        <p>Kraggerud, Menuhin, Stravinsky, 461 more</p>
      </a>
    </div>
    <div class="lens select">
      <a href="browse-select-work-cat.html">
        <h2 class="icon big icon-instruments">Work categories</h2>
        <p>Piano, Concertos, Chambermusic, and more</p>
      </a>
    </div>

    <div class="lens select">
      <a href="browse-select-artists.html">
        <h2 class="icon big icon-debut">Debut</h2>
        <p>The talented in their early years</p>
      </a>
    </div>
    <div class="lens select">
      <a href="browse-select-artists.html">
        <h2 class="icon big icon-academy">Academy</h2>
        <p>Institutes for classical music</p>
      </a>
    </div>
    <div class="lens select">
      <a href="browse-select-artists.html">
        <h2 class="icon big icon-concept">Concept</h2>
        <p>Exploring music in new ways</p>
      </a>
    </div>

    <div class="lens select feature feature-picks">
      <a href="#">
        <h2>Hand-picked</h2>
      </a>
    </div>
    <div class="lens select feature feature-popular">
      <a href="#">
        <h2>Popular</h2>
      </a>
    </div>
    <div class="lens select feature feature-biddulph">
      <a href="#">
        <h2>Biddulph Recordings</h2>
      </a>
    </div>

    <p class="side-summary">The magazine features stories, in-depth articles and news updates</p>
    <div class="magazine-summary">
      <h2><a href="#">Henri Temianka, in his own words</a></h2>
      <p class="byline"><span class="magazine-category">Articles</span> &middot; Henri Temianka, &Oslash;ystein Birkeland</p>
      <h2><a href="#">Wilhelm Furtw&auml;ngler, the paradox</a></h2>
      <p class="byline"><span class="magazine-category">Profiles</span> &middot; Bill Newman</p>
      <h2><a href="#">Thoughts on the duos by Ravel, Kodaly and Halvorsen</a></h2>
      <p class="byline"><span class="magazine-category">Articles</span> &middot; August Albertsen</p>
    </div>

  </section>

</section>