manyi/static/angular-mod/tpl/page_profile.html

<div class="hbox hbox-auto-xs hbox-auto-sm">
  <div class="col">
    <div style="background:url(img/c4.jpg) center center; background-size:cover">
      <div class="wrapper-lg bg-white-opacity">
        <div class="row m-t">
          <div class="col-sm-7">
            <a href class="thumb-lg pull-left m-r">
              <img src="img/a0.jpg" class="img-circle">
            </a>
            <div class="clear m-b">
              <div class="m-b m-t-sm">
                <span class="h3 text-black">John.Smith</span>
                <small class="m-l">London, UK</small>
              </div>
              <p class="m-b">
                <a href class="btn btn-sm btn-bg btn-rounded btn-default btn-icon"><i class="fa fa-twitter"></i></a>
                <a href class="btn btn-sm btn-bg btn-rounded btn-default btn-icon"><i class="fa fa-facebook"></i></a>
                <a href class="btn btn-sm btn-bg btn-rounded btn-default btn-icon"><i class="fa fa-google-plus"></i></a>
              </p>
              <a href class="btn btn-sm btn-success btn-rounded">Follow</a>
            </div>
          </div>
          <div class="col-sm-5">
            <div class="pull-right pull-none-xs text-center">
              <a href class="m-b-md inline m">
                <span class="h3 block font-bold">2k</span>
                <small>Followers</small>
              </a>
              <a href class="m-b-md inline m">
                <span class="h3 block font-bold">250</span>
                <small>Following</small>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper bg-white b-b">
      <ul class="nav nav-pills nav-sm">
        <li class="active"><a href>Stream</a></li>
        <li><a href>Profile</a></li>
        <li><a href>Messages</a></li>
      </ul>
    </div>
    <div class="padder">      
      <div class="streamline b-l b-info m-l-lg m-b padder-v">
        <div>
          <a class="pull-left thumb-sm avatar m-l-n-md">
            <img src="img/a9.jpg" class="img-circle" alt="...">
          </a>
          <div class="m-l-lg">
            <div class="m-b-xs">
              <a href class="h4">John smith</a>
              <span class="text-muted m-l-sm pull-right">
                Just now
              </span>
            </div>
            <div class="m-b">
              <div>Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. ullamcorper sodales nisi nec adipiscing elit. Morbi id neque quam. Aliquam sollicitudin </div>
              <div class="m-t-sm">
                <a href class="text-muted m-xs"><i class="icon-action-redo"></i></a>
                <a href class="text-muted m-xs"><i class="icon-star"></i></a>
                <a href class="text-muted m-xs"><i class="icon-refresh"></i> 13</a>
              </div>
            </div>
          </div>
        </div>
        <!-- .comment-reply -->
        <div class="m-l-lg">
          <a class="pull-left thumb-sm avatar">
            <img src="img/a5.jpg" alt="...">
          </a>          
          <div class="m-l-xxl panel b-a">
            <div class="panel-heading pos-rlt">
              <span class="arrow left pull-up"></span>
              <span class="text-muted m-l-sm pull-right">
                10m ago
              </span>
              <a href>Mika Sam</a>
              Report this comment is helpful                           
            </div>
          </div>
        </div>
        <!-- / .comment-reply -->
        <div>
          <a class="pull-left thumb-sm avatar m-l-n-md">
            <img src="img/a3.jpg" alt="...">
          </a>          
          <div class="m-l-lg m-b-lg panel b-a bg-light lt">
            <div class="panel-heading pos-rlt b-light">
              <span class="arrow arrow-light left"></span>                    
              <a href>By me</a>
              <span class="text-muted m-l-sm pull-right">
                1h ago
              </span>
            </div>
            <div class="panel-body">
              <div>This comment was posted by you.</div>
            </div>
          </div>
        </div>
        <div>
          <a class="pull-left thumb-sm avatar m-l-n-md">
            <img src="img/a6.jpg" class="img-circle" alt="...">
          </a>
          <div class="m-l-lg m-b-lg">
            <div class="m-b-xs">
              <a href class="h4">Jessica</a>
              <span class="text-muted m-l-sm pull-right">
                3h ago
              </span>
            </div>
            <div class="m-b">
              <div class="m-b">Cecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. ullamcorper sodales nisi nec adipiscing elit. Morbi id neque quam. Aliquam sollicitudin </div>
              <img src="img/c5.jpg" class="b b-a wrapper-xs bg-white img-responsive">
              <div class="m-t-sm">
                <a href class="text-muted m-xs"><i class="icon-action-redo"></i></a>
                <a href class="text-muted m-xs"><i class="icon-star"></i></a>
                <a href class="text-muted m-xs"><i class="icon-refresh"></i> 13</a>
              </div>
            </div>
          </div>
        </div>
        <div>
          <a class="pull-left thumb-sm avatar m-l-n-md">
            <img src="img/a4.jpg" class="img-circle" alt="...">
          </a>
          <div class="m-l-lg m-b-lg">
            <div class="m-b-xs">
              <a href class="h4">Fisio</a>
              <span class="text-muted m-l-sm pull-right">
                4h ago
              </span>
            </div>
            <div>
              <div class="m-b">Diam nonummy nibh euismod tincidunt ut laoreet. ullamcorper sodales nisi nec adipiscing elit. Morbi id neque quam. Aliquam sollicitudin </div>
              <div class="panel panel-default m-t-md m-b-n-sm pos-rlt">
                <form>
                  <textarea class="form-control no-border" rows="3" placeholder="Your comment..."></textarea>
                </form>
                <div class="panel-footer bg-light lter">
                  <button class="btn btn-info pull-right btn-sm">Comment</button>
                  <ul class="nav nav-pills nav-sm">
                    <li><a href><i class="fa fa-camera text-muted"></i></a></li>
                    <li><a href><i class="fa fa-video-camera text-muted"></i></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <a class="pull-left thumb-sm avatar m-l-n-md">
            <img src="img/a2.jpg" alt="...">
          </a>          
          <div class="m-l-lg panel b-a">
            <div class="panel-heading pos-rlt b-b b-light">
              <span class="arrow left"></span>
              <a href>Peter</a>
              <label class="label bg-light m-l-xs">VIP</label> 
              <span class="text-muted m-l-sm pull-right">
                9h ago
              </span>
            </div>
            <div class="panel-body">
              <blockquote>
                <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>Lorem ipsum dolor sit amet, consecteter adipiscing elit...</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col w-lg bg-light lter b-l bg-auto">
    <div class="wrapper">
      <div class="">
        <h4 class="m-t-xs m-b-xs">Who to follow</h4>
        <ul class="list-group no-bg no-borders pull-in">
          <li class="list-group-item">
            <a herf class="pull-left thumb-sm avatar m-r">
              <img src="img/a4.jpg" alt="..." class="img-circle">
              <i class="on b-white bottom"></i>
            </a>
            <div class="clear">
              <div><a href>Chris Fox</a></div>
              <small class="text-muted">Designer, Blogger</small>
            </div>
          </li>
          <li class="list-group-item">
            <a herf class="pull-left thumb-sm avatar m-r">
              <img src="img/a5.jpg" alt="..." class="img-circle">
              <i class="on b-white bottom"></i>
            </a>
            <div class="clear">
              <div><a href>Mogen Polish</a></div>
              <small class="text-muted">Writter, Mag Editor</small>
            </div>
          </li>
          <li class="list-group-item">
            <a herf class="pull-left thumb-sm avatar m-r">
              <img src="img/a6.jpg" alt="..." class="img-circle">
              <i class="busy b-white bottom"></i>
            </a>
            <div class="clear">
              <div><a href>Joge Lucky</a></div>
              <small class="text-muted">Art director, Movie Cut</small>
            </div>
          </li>
          <li class="list-group-item">
            <a herf class="pull-left thumb-sm avatar m-r">
              <img src="img/a7.jpg" alt="..." class="img-circle">
              <i class="away b-white bottom"></i>
            </a>
            <div class="clear">
              <div><a href>Folisise Chosielie</a></div>
              <small class="text-muted">Musician, Player</small>
            </div>
          </li>
        </ul>
      </div>
      <div class="panel b-a">
        <h4 class="font-thin padder">Latest Tweets</h4>
        <ul class="list-group">
          <li class="list-group-item">
              <p>Wellcome <a href class="text-info">@Drew Wllon</a> and play this web application template, have fun1 </p>
              <small class="block text-muted"><i class="fa fa-fw fa-clock-o"></i> 2 minuts ago</small>
          </li>
          <li class="list-group-item">
              <p>Morbi nec <a href class="text-info">@Jonathan George</a> nunc condimentum ipsum dolor sit amet, consectetur</p>
              <small class="block text-muted"><i class="fa fa-fw fa-clock-o"></i> 1 hour ago</small>
          </li>
          <li class="list-group-item">                     
              <p><a href class="text-info">@Josh Long</a> Vestibulum ullamcorper sodales nisi nec adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis</p>
              <small class="block text-muted"><i class="fa fa-fw fa-clock-o"></i> 2 hours ago</small>
          </li>
        </ul>
      </div>
      <div class="panel b-light clearfix">
        <div class="panel-body">
          <a href class="thumb pull-left m-r">
            <img src="img/a0.jpg" class="img-circle">
          </a>
          <div class="clear">
            <a href class="text-info">@Mike Mcalidek <i class="fa fa-twitter"></i></a>
            <small class="block text-muted">2,415 followers / 225 tweets</small>
            <a href class="btn btn-xs btn-success m-t-xs">Follow</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>