manyi/static/angular-mod/tpl/music.genres.html

<div class="hbox hbox-auto-xs hbox-auto-sm">
  <!-- right col -->
  <div class="col w bg-light dker bg-auto">    
    <div class="list-group no-radius no-border no-bg m-t-n-xxs m-b-none auto">
      <a class="list-group-item">
        All
      </a>
      <a class="list-group-item active">
        acoustic
      </a>
      <a class="list-group-item">
        ambient
      </a>
      <a class="list-group-item">
        blues
      </a>
      <a class="list-group-item">
        classical
      </a>
      <a class="list-group-item">
        country
      </a>
      <a class="list-group-item">
        electronic
      </a>
      <a class="list-group-item">
        emo
      </a>
      <a class="list-group-item">
        folk
      </a>
      <a class="list-group-item">
        hardcore
      </a>
      <a class="list-group-item">
        hip hop
      </a>
      <a class="list-group-item">
        indie
      </a>
      <a class="list-group-item">
        jazz
      </a>
      <a class="list-group-item">
        latin
      </a>
      <a class="list-group-item">
        metal
      </a>
      <a class="list-group-item">
        pop
      </a>
      <a class="list-group-item">
        pop punk
      </a>
      <a class="list-group-item">
        punk
      </a>
      <a class="list-group-item">
        reggae
      </a>
      <a class="list-group-item">
        rnb
      </a>
      <a class="list-group-item">
        rock
      </a>
      <a class="list-group-item">
        soul
      </a>
      <a class="list-group-item">
        world
      </a>
    </div>
  </div>
  <!-- / right col -->
  <!-- main -->
  <div class="col wrapper-lg">
    <h3 class="font-thin m-t-n-xs m-b">Acoustic</h3>
    <div class="row row-sm">
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="top">
              <span class="badge bg-info m-l-sm m-t-sm">04:10</span>
            </div>
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b16.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Tempered Song</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Miaow</a>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b17.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Vivamus vel tincidunt libero</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Lauren Taylor</a>
          </div>
        </div>
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b18.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Morbi id neque quam liquam sollicitudin</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Allen JH</a>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <div class="top w-full">
              <span class="pull-right m-t-n-xs m-r-sm text-white">
                <i class="fa fa-bookmark i-lg"></i>
              </span>
            </div>
            <a ui-sref="music.detail"><img src="img/b19.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Tincidunt libero</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Amanda Conlan</a>
          </div>
        </div>
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b20.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Fermentum diam</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Nisa Colen</a>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="top w-full">
              <span class="pull-right m-t-sm m-r-sm badge bg-info">6</span>
            </div>
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>                         
            <a ui-sref="music.detail"><img src="img/b6.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Habitant</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Dan Doorack</a>
          </div>
        </div>
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b7.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Vivamus vel tincidunt libero</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Ligula H</a>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b8.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Aliquam sollicitudin venenati</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">James East</a>
          </div>
        </div>
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <div class="top">
              <span class="badge bg-warning m-l-sm m-t-sm">03:10</span>
            </div>
            <a ui-sref="music.detail"><img src="img/b9.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Lementum ligula vitae</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Lauren Taylor</a>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b10.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Egestas dui nec fermentum </a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Chris Fox</a>
          </div>
        </div>
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b11.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Aliquam sollicitudin venenatis ipsum</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Jack Jason</a>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b12.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Vestibulum ullamcorper</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">MM &amp; DD</a>
          </div>
        </div>
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="bottom">
              <span class="badge m-l-sm m-b-sm">MTV</span>
            </div>
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b13.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Aliquam sollicitudin venenatis ipsum</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Jack Jason</a>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b14.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Vestibulum ullamcorper</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">MM &amp; DD</a>
          </div>
        </div>
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="top">
              <span class="badge bg-info m-l-sm m-t-sm">04:10</span>
            </div>
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b1.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Tempered Song</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Miaow</a>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b2.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Vivamus vel tincidunt libero</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Lauren Taylor</a>
          </div>
        </div>
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b3.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Morbi id neque quam liquam sollicitudin</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Allen JH</a>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <div class="top w-full">
              <span class="pull-right m-t-n-xs m-r-sm text-white">
                <i class="fa fa-bookmark i-lg"></i>
              </span>
            </div>
            <a ui-sref="music.detail"><img src="img/b4.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Tincidunt libero</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Amanda Conlan</a>
          </div>
        </div>
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>
            <a ui-sref="music.detail"><img src="img/b5.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Fermentum diam</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Nisa Colen</a>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
        <div class="item">
          <div class="pos-rlt">
            <div class="top w-full">
              <span class="pull-right m-t-sm m-r-sm badge bg-info">6</span>
            </div>
            <div class="item-overlay bg-black-opacity">
              <div class="center text-center m-t-n w-full">
                <a><i class="fa fa-2x fa-play-circle-o text-white"></i></a>
              </div>
            </div>                         
            <a ui-sref="music.detail"><img src="img/b6.jpg" alt="" class="img-full"></a>
          </div>
          <div class="wrapper bg-white m-b">
            <a ui-sref="music.detail" class="text-ellipsis">Habitant</a>
            <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Dan Doorack</a>
          </div>
        </div>
      </div>
    </div>
    <ul class="pagination pagination">
      <li><a ui-sref="music.detail"><i class="fa fa-chevron-left"></i></a></li>
      <li class="active"><a ui-sref="music.detail">1</a></li>
      <li><a ui-sref="music.detail">2</a></li>
      <li><a ui-sref="music.detail">3</a></li>
      <li><a ui-sref="music.detail">4</a></li>
      <li><a ui-sref="music.detail">5</a></li>
      <li><a ui-sref="music.detail"><i class="fa fa-chevron-right"></i></a></li>
    </ul>
  </div>
  <!-- / main -->
</div>