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

<div class="hbox hbox-auto-xs hbox-auto-sm">
  <!-- main -->
  <div class="col wrapper-lg">
    <h3 class="font-thin m-t-n-xs m-b">Recommendation</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 r r-2x r r-2x">
              <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 r r-2x"></a>
          </div>
          <div class="padder-v">
            <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 r r-2x">
              <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 r r-2x"></a>
          </div>
          <div class="padder-v">
            <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 r r-2x">
              <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 r r-2x"></a>
          </div>
          <div class="padder-v">
            <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 r r-2x">
              <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 r r-2x"></a>
          </div>
          <div class="padder-v">
            <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 r r-2x">
              <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 r r-2x"></a>
          </div>
          <div class="padder-v">
            <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 r r-2x">
              <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 r r-2x"></a>
          </div>
          <div class="padder-v">
            <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 r r-2x">
              <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 r r-2x"></a>
          </div>
          <div class="padder-v">
            <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 r r-2x">
              <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 r r-2x"></a>
          </div>
          <div class="padder-v">
            <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 r r-2x">
              <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 r r-2x"></a>
          </div>
          <div class="padder-v">
            <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 r r-2x">
              <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 r r-2x"></a>
          </div>
          <div class="padder-v">
            <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 r r-2x">
              <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 r r-2x"></a>
          </div>
          <div class="padder-v">
            <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 r r-2x">
              <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 r r-2x"></a>
          </div>
          <div class="padder-v">
            <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 r r-2x">
              <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 r r-2x"></a>
          </div>
          <div class="padder-v">
            <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 r r-2x">
              <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 r r-2x"></a>
          </div>
          <div class="padder-v">
            <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="item-overlay bg-black-opacity r r-2x">
              <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/b15.jpg" alt="" class="img-full r r-2x"></a>
          </div>
          <div class="padder-v">
            <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>
    <div class="row">
      <div class="col-md-7">
        <h3 class="font-thin">New Songs</h3>
        <div class="row row-sm">
          <div class="col-xs-6 col-sm-3">
            <div class="item">
              <div class="pos-rlt">
                <div class="item-overlay bg-black-opacity r r-2x">
                  <div class="center text-center m-t-n w-full">
                    <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                  </div>
                </div>
                <a ui-sref="music.detail"><img src="img/b15.jpg" alt="" class="img-full r r-2x"></a>
              </div>
              <div class="padder-v">
                <a ui-sref="music.detail" class="text-ellipsis">Spring rain</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-3">
            <div class="item">
              <div class="pos-rlt">
                <div class="item-overlay bg-black-opacity r r-2x">
                  <div class="center text-center m-t-n w-full">
                    <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                  </div>
                </div>
                <a ui-sref="music.detail"><img src="img/b16.jpg" alt="" class="img-full r r-2x"></a>
              </div>
              <div class="padder-v">
                <a ui-sref="music.detail" class="text-ellipsis">Hope</a>
                <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Miya</a>
              </div>
            </div>
          </div>
          <div class="col-xs-6 col-sm-3">
            <div class="item">
              <div class="pos-rlt">
                <div class="item-overlay bg-black-opacity r r-2x">
                  <div class="center text-center m-t-n w-full">
                    <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                  </div>
                </div>
                <a ui-sref="music.detail"><img src="img/b17.jpg" alt="" class="img-full r r-2x"></a>
              </div>
              <div class="padder-v">
                <a ui-sref="music.detail" class="text-ellipsis">Listen wind</a>
                <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Soyia Jess</a>
              </div>
            </div>
          </div>
          <div class="col-xs-6 col-sm-3">
            <div class="item">
              <div class="pos-rlt">
                <div class="item-overlay bg-black-opacity r r-2x">
                  <div class="center text-center m-t-n w-full">
                    <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                  </div>
                </div>
                <a ui-sref="music.detail"><img src="img/b18.jpg" alt="" class="img-full r r-2x"></a>
              </div>
              <div class="padder-v">
                <a ui-sref="music.detail" class="text-ellipsis">Breaking me</a>
                <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Pett JA</a>
              </div>
            </div>
          </div>
          <div class="col-xs-6 col-sm-3">
            <div class="item">
              <div class="pos-rlt">
                <div class="item-overlay bg-black-opacity r r-2x">
                  <div class="center text-center m-t-n w-full">
                    <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                  </div>
                </div>
                <a ui-sref="music.detail"><img src="img/b19.jpg" alt="" class="img-full r r-2x"></a>
              </div>
              <div class="padder-v">
                <a ui-sref="music.detail" class="text-ellipsis">Nothing</a>
                <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Willion</a>
              </div>
            </div>
          </div>
          <div class="col-xs-6 col-sm-3">
            <div class="item">
              <div class="pos-rlt">
                <div class="item-overlay bg-black-opacity r r-2x">
                  <div class="center text-center m-t-n w-full">
                    <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                  </div>
                </div>
                <a ui-sref="music.detail"><img src="img/b20.jpg" alt="" class="img-full r r-2x"></a>
              </div>
              <div class="padder-v">
                <a ui-sref="music.detail" class="text-ellipsis">Panda Style</a>
                <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Lionie</a>
              </div>
            </div>
          </div>
          <div class="col-xs-6 col-sm-3">
            <div class="item">
              <div class="pos-rlt">
                <div class="item-overlay bg-black-opacity r r-2x">
                  <div class="center text-center m-t-n w-full">
                    <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                  </div>
                </div>
                <a ui-sref="music.detail"><img src="img/b0.jpg" alt="" class="img-full r r-2x"></a>
              </div>
              <div class="padder-v">
                <a ui-sref="music.detail" class="text-ellipsis">Hook Me</a>
                <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Gossi</a>
              </div>
            </div>
          </div>
          <div class="col-xs-6 col-sm-3">
            <div class="item">
              <div class="pos-rlt">
                <div class="item-overlay bg-black-opacity r r-2x">
                  <div class="center text-center m-t-n w-full">
                    <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                  </div>
                </div>
                <a ui-sref="music.detail"><img src="img/b6.jpg" alt="" class="img-full r r-2x"></a>
              </div>
              <div class="padder-v">
                <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>
      </div>
      <div class="col-md-5">
        <h3 class="font-thin">Top Songs</h3>
        <div class="list-group bg-white list-group-lg no-bg auto">                          
          <a ui-sref="music.detail" class="list-group-item clearfix">
            <span class="pull-right h2 text-muted m-l">1</span>
            <span class="pull-left thumb-sm avatar m-r">
              <img src="img/a4.jpg" alt="..." class="r">
            </span>
            <span class="clear">
              <span>Little Town</span>
              <small class="text-muted clear text-ellipsis">by Chris Fox</small>
            </span>
          </a>
          <a ui-sref="music.detail" class="list-group-item clearfix">
            <span class="pull-right h2 text-muted m-l">2</span>
            <span class="pull-left thumb-sm avatar m-r">
              <img src="img/a5.jpg" alt="..." class="r">
            </span>
            <span class="clear">
              <span>Lementum ligula vitae</span>
              <small class="text-muted clear text-ellipsis">by Amanda Conlan</small>
            </span>
          </a>
          <a ui-sref="music.detail" class="list-group-item clearfix">
            <span class="pull-right h2 text-muted m-l">3</span>
            <span class="pull-left thumb-sm avatar m-r">
              <img src="img/a6.jpg" alt="..." class="r">
            </span>
            <span class="clear">
              <span>Aliquam sollicitudin venenatis</span>
              <small class="text-muted clear text-ellipsis">by Dan Doorack</small>
            </span>
          </a>
          <a ui-sref="music.detail" class="list-group-item clearfix">
            <span class="pull-right h2 text-muted m-l">4</span>
            <span class="pull-left thumb-sm avatar m-r">
              <img src="img/a7.jpg" alt="..." class="r">
            </span>
            <span class="clear">
              <span>Aliquam sollicitudin venenatis ipsum</span>
              <small class="text-muted clear text-ellipsis">by Lauren Taylor</small>
            </span>
          </a>
          <a ui-sref="music.detail" class="list-group-item clearfix">
            <span class="pull-right h2 text-muted m-l">5</span>
            <span class="pull-left thumb-sm avatar m-r">
              <img src="img/a8.jpg" alt="..." class="r">
            </span>
            <span class="clear">
              <span>Vestibulum ullamcorper</span>
              <small class="text-muted clear text-ellipsis">by Dan Doorack</small>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- / main -->
  <!-- right col -->
  <div class="col w-md bg-light dker b-l bg-auto no-border-xs">    
    <div class="wrapper-md">      
      <div class="m-b-sm text-md">Top Plays</div>
      <ul class="list-group no-bg no-borders pull-in">
        <li class="list-group-item">
          <a herf class="pull-left thumb-sm m-r">
            <img src="img/b1.jpg" alt="..." class="r">
          </a>
          <div class="clear">
            <div><a href>On the road</a></div>
            <small class="text-muted">by Chris Fox</small>
          </div>
        </li>
        <li class="list-group-item">
          <a herf class="pull-left thumb-sm m-r">
            <img src="img/b2.jpg" alt="..." class="r">
          </a>
          <div class="clear">
            <div><a href>Find a way</a></div>
            <small class="text-muted">by Lucy</small>
          </div>
        </li>
        <li class="list-group-item">
          <a herf class="pull-left thumb-sm m-r">
            <img src="img/b3.jpg" alt="..." class="r">
          </a>
          <div class="clear">
            <div><a href>Nothing to lose</a></div>
            <small class="text-muted">Joge Lucky</small>
          </div>
        </li>
        <li class="list-group-item">
          <a herf class="pull-left thumb-sm m-r">
            <img src="img/b4.jpg" alt="..." class="r">
          </a>
          <div class="clear">
            <div><a href>New day</a></div>
            <small class="text-muted">by Folisise Chosielie</small>
          </div>
        </li>
        <li class="list-group-item">
          <a herf class="pull-left thumb-sm m-r">
            <img src="img/b5.jpg" alt="..." class="r">
          </a>
          <div class="clear">
            <div><a href>Running</a></div>
            <small class="text-muted">by Aron Gonzalez</small>
          </div>
        </li>
      </ul>
      <div class="text-center">
        <a href class="btn btn-sm btn-info padder-md m-b">More</a>
      </div>
    </div>
    <!-- streamline -->
    <div class="text-md wrapper-md">Activity</div>
    <div class="list-group no-borders no-bg m-l-xs m-r-xs m-t-n">
      <div class="list-group-item">
        <div class="text-muted">5 minutes ago</div>
        <div><a href class="text-info">Jessi</a> commented your post.</div>
      </div>
      <div class="list-group-item">
        <div class="text-muted">11:30</div>
        <div><a ui-sref="music.detail">Jone</a> published a song</div>
      </div>
      <div class="list-group-item">
        <div class="text-muted">Sun, 11 Feb</div>
        <div><a href class="text-info">Jessi</a> upload a video <a href class="text-info">Cat</a>.</div>
      </div>
      <div class="list-group-item">
        <div class="text-muted">Thu, 17 Jan</div>
        <div>Mike Followed you</div>
      </div>
    </div>
    <!-- / streamline -->
  </div>
  <!-- / right col -->
</div>