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

<div class="hbox hbox-auto-xs hbox-auto-sm">
  <!-- main -->
  <div class="col">
    <div class="wrapper-md">
      <h3 class="m-t-none text-black">Tincidunt ut laoreet</h3>
      <p class="text-muted m-b-md">Retur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper Neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat.</p>
      <div class="hbox hbox-auto-xs">
        <div class="col w-sm">
          <img src="img/b1.jpg" class="img-full m-b">
        </div>
        <div class="col">
          <div class="m-l-md">
            <div class="clearfix m-b-md">
              <a class="thumb-sm pull-left m-r">
                <img src="img/a0.jpg" class="img-circle">
              </a>
              <div class="clear">
                <a class="text-info">Mike Mcalidek</a>
                <small class="block text-muted">Published: 3 days ago</small>
              </div>
            </div>
            <div class="m-b-md">
              <a class="btn btn-icon btn-rounded btn-info"><i class="fa fa-play m-r-n-xxs"></i></a> 
              <a class="btn btn-default btn-sm btn-rounded " tooltip="Comments">3</a>
              <a class="btn btn-default btn-sm btn-rounded " tooltip="likes">9</a>
            </div>
            <div>
              Tags: <a class="badge bg-light">Musik</a> <a class="badge bg-light">Pashion</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white-only">
      <h4 class="m-n wrapper">Tracklist</h4>
      <ul class="list-group no-radius no-border list-group-lg">
        <li class="list-group-item">
          <div class="pull-right m-l">
            <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
            <a class="m-r-sm"><i class="icon-plus"></i></a>
            <a><i class="icon-close"></i></a>
          </div>
          <a class="jp-play-me m-r-sm pull-left">
            <i class="icon-control-play text"></i>
            <i class="icon-control-pause text-active"></i>
          </a>
          <div class="clear text-ellipsis">
            <span>E.T.M</span>
            <span class="text-muted"> -- 04:35</span>
          </div>
        </li>
        <li class="list-group-item">
          <div class="pull-right m-l">
            <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
            <a><i class="icon-plus"></i></a>
          </div>
          <a class="jp-play-me m-r-sm pull-left">
            <i class="icon-control-play text"></i>
            <i class="icon-control-pause text-active"></i>
          </a>
          <div class="clear text-ellipsis">
            <span>Vestibulum id ligula porta</span>
            <span class="text-muted"> -- 04:15</span>
          </div>
        </li>
        <li class="list-group-item">
          <div class="pull-right m-l">
            <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
            <a><i class="icon-plus"></i></a>
          </div>
          <a class="jp-play-me m-r-sm pull-left">
            <i class="icon-control-play text"></i>
            <i class="icon-control-pause text-active"></i>
          </a>
          <div class="clear text-ellipsis">
            <span>Praesent commodo cursus magna</span>
            <span class="text-muted"> -- 02:25</span>
          </div>
        </li>
        <li class="list-group-item">
          <div class="pull-right m-l">
            <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
            <a><i class="icon-plus"></i></a>
          </div>
          <a class="jp-play-me m-r-sm pull-left">
            <i class="icon-control-play text"></i>
            <i class="icon-control-pause text-active"></i>
          </a>
          <div class="clear text-ellipsis">
            <span>Curabitur blandit tempus</span>
            <span class="text-muted"> -- 05:00</span>
          </div>
        </li>
        <li class="list-group-item">
          <div class="pull-right m-l">
            <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
            <a><i class="icon-plus"></i></a>
          </div>
          <a class="jp-play-me m-r-sm pull-left">
            <i class="icon-control-play text"></i>
            <i class="icon-control-pause text-active"></i>
          </a>
          <div class="clear text-ellipsis">
            <span>Faucibus dolor auctor</span>
            <span class="text-muted"> -- 03:50</span>
          </div>
        </li>
        <li class="list-group-item">
          <div class="pull-right m-l">
            <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
            <a><i class="icon-plus"></i></a>
          </div>
          <a class="jp-play-me m-r-sm pull-left">
            <i class="icon-control-play text"></i>
            <i class="icon-control-pause text-active"></i>
          </a>
          <div class="clear text-ellipsis">
            <span>Get lacinia odio sem nec elit cibus dolor auctor sed odio dui mollis ornare</span>
            <span class="text-muted"> -- 04:05</span>
          </div>
        </li>
        <li class="list-group-item">
          <div class="pull-right m-l">
            <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
            <a><i class="icon-plus"></i></a>
          </div>
          <a class="jp-play-me m-r-sm pull-left">
            <i class="icon-control-play text"></i>
            <i class="icon-control-pause text-active"></i>
          </a>
          <div class="clear text-ellipsis">
            <span>Faucibus dolor auctor</span>
            <span class="text-muted"> -- 02:55</span>
          </div>
        </li>
        <li class="list-group-item">
          <div class="pull-right m-l">
            <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
            <a><i class="icon-plus"></i></a>
          </div>
          <a class="jp-play-me m-r-sm pull-left">
            <i class="icon-control-play text"></i>
            <i class="icon-control-pause text-active"></i>
          </a>
          <div class="clear text-ellipsis">
            <span>Donec sed odio dui</span>
            <span class="text-muted"> -- 04:35</span>
          </div>
        </li>
        <li class="list-group-item">
          <div class="pull-right m-l">
            <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
            <a><i class="icon-plus"></i></a>
          </div>
          <a class="jp-play-me m-r-sm pull-left">
            <i class="icon-control-play text"></i>
            <i class="icon-control-pause text-active"></i>
          </a>
          <div class="clear text-ellipsis">
            <span>Urna mollis ornare vel eu leo</span>
            <span class="text-muted"> -- 05:10</span>
          </div>
        </li>
        <li class="list-group-item">
          <div class="pull-right m-l">
            <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
            <a><i class="icon-plus"></i></a>
          </div>
          <a class="jp-play-me m-r-sm pull-left">
            <i class="icon-control-play text"></i>
            <i class="icon-control-pause text-active"></i>
          </a>
          <div class="clear text-ellipsis">
            <span>Vivamus sagittis lacus vel augue</span>
            <span class="text-muted"> -- 02:35</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="padder-md m-b-lg">
      <h4 class="m-t-lg m-b">3 Comments</h4>
      <div>
        <div>
          <a class="pull-left thumb-sm">
            <img src="img/a0.jpg" class="img-circle">
          </a>
          <div class="m-l-xxl m-b">
            <div>
              <a href><strong>John smith</strong></a>
              <label class="label bg-info m-l-xs">Editor</label> 
              <span class="text-muted text-xs block m-t-xs">
                24 minutes ago
              </span>
            </div>
            <div class="m-t-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum.</div>
          </div>
        </div>

        <div class="m-l-xxl">
          <a class="pull-left thumb-sm">
            <img src="img/a1.jpg" class="img-circle">
          </a>
          <div class="m-l-xxl m-b">
            <div>
              <a href><strong>John smith</strong></a>
              <label class="label bg-dark m-l-xs">Admin</label> 
              <span class="text-muted text-xs block m-t-xs">
                26 minutes ago
              </span>
            </div>
            <div class="m-t-sm">Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</div>
          </div>
        </div>

        <div>
          <a class="pull-left thumb-sm">
            <img src="img/a2.jpg" class="img-circle">
          </a>
          <div class="m-l-xxl m-b">
            <div>
              <a href><strong>John smith</strong></a>
              <label class="label bg-dark m-l-xs">Admin</label> 
              <span class="text-muted text-xs block m-t-xs">
                26 minutes ago
              </span>
            </div>
            <blockquote class="m-t">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
            <div class="m-t-sm">Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</div>
          </div>
        </div>

      </div>
      <h4 class="m-t-lg m-b">Leave a comment</h4>
      <form>
        <div class="form-group pull-in clearfix">
          <div class="col-sm-6">
            <label>Your name</label>
            <input type="text" class="form-control" placeholder="Name">
          </div>
          <div class="col-sm-6">
            <label >Email</label>
            <input type="email" class="form-control" placeholder="Enter email">
          </div>
        </div>
        <div class="form-group">
          <label>Comment</label>
          <textarea class="form-control" rows="5" placeholder="Type your comment"></textarea>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-info">Submit comment</button>
        </div>
      </form>
    </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>