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

<div class="wrapper-md">
  <h3 class="font-thin m-b m-t-none">Video</h3>
  <div class="row row-sm">
    <div class="col-xs-12 col-sm-4">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="center text-center m-t-n w-full">
            <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
          </div>
          <div class="top">
            <span class="badge bg-dark m-l-sm m-t-sm">03:20</span>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c9.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Tempered Song</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Miaow</a>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="center text-center m-t-n w-full">
            <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
          </div>
          <div class="top">
            <span class="badge bg-dark m-l-sm m-t-sm">02:10</span>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c1.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Morbi id neque quam</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Phasellus</a>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="center text-center m-t-n w-full">
            <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
          </div>
          <div class="top">
            <span class="badge bg-dark m-l-sm m-t-sm">05:40</span>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c2.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Aliquam sollicitudin venenatis ipsum</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Malesuada</a>
        </div>
      </div>
    </div>
  </div>
  <h3 class="font-thin m-b">Video List</h3>
  <div class="row row-sm">
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="item-overlay bg-white-opacity">
            <div class="center text-center m-t-n w-full">
              <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
            </div>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c3.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Tempered Song</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Miaow</a>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="item-overlay bg-white-opacity">
            <div class="center text-center m-t-n w-full">
              <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
            </div>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c4.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Morbi id neque quam</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Phasellus</a>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="item-overlay bg-white-opacity">
            <div class="center text-center m-t-n w-full">
              <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
            </div>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c5.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Aliquam sollicitudin venenatis ipsum</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Malesuada</a>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="item-overlay bg-white-opacity">
            <div class="center text-center m-t-n w-full">
              <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
            </div>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c6.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Citudin venenatis ipsum ac</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Volutpat</a>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="item-overlay bg-white-opacity">
            <div class="center text-center m-t-n w-full">
              <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
            </div>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c7.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Vestibulum ullamcorper sodales nisi</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Mauris Qiaos</a>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="item-overlay bg-white-opacity">
            <div class="center text-center m-t-n w-full">
              <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
            </div>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c8.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Mauris convallis mauris at</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Neque</a>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="item-overlay bg-white-opacity">
            <div class="center text-center m-t-n w-full">
              <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
            </div>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c9.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Sodales nisi nec condimentum</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Augue</a>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="item-overlay bg-white-opacity">
            <div class="center text-center m-t-n w-full">
              <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
            </div>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c0.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Nisi nec condimentum</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Miaow</a>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="item-overlay bg-white-opacity">
            <div class="center text-center m-t-n w-full">
              <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
            </div>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c1.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Phasellus at ultricies nequ</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Volutpat</a>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="item-overlay bg-white-opacity">
            <div class="center text-center m-t-n w-full">
              <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
            </div>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c2.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Quis malesuada augue</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Feugiat</a>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="item-overlay bg-white-opacity">
            <div class="center text-center m-t-n w-full">
              <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
            </div>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c3.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Ipsum ac feugiat</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Quam AC</a>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="item">
        <div class="pos-rlt b-a bg-white wrapper-xs">
          <div class="item-overlay bg-white-opacity">
            <div class="center text-center m-t-n w-full">
              <a ui-sref="music.mtvdetail"><i class="fa fa-play-circle fa-2x text-white"></i></a>
            </div>
          </div>
          <a ui-sref="music.mtvdetail"><img src="img/c4.jpg" alt="" class="img-full"></a>
        </div>
        <div class="padder-v">
          <a ui-sref="music.mtvdetail" class="text-ellipsis">Ullamcorper sodales nisi nec condimentu</a>
          <a ui-sref="music.mtvdetail" class="text-ellipsis text-xs text-muted">Convallis</a>
        </div>
      </div>
    </div>                
  </div>
  <ul class="pagination pagination">
    <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
  </ul>
</div>