forked from ~ulysseskao/xdashangular
grails-app/assets/templates/xdashangular/index/widgets.html
@@ -1,10 +1,1071 @@ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- Content Header (Page header) --> <section class="content-header"> <h1> Widgets <small>Preview page</small> </h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> <li class="active">Widgets</li> </ol> </section> </body> </html> <!-- Main content --> <section class="content"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box"> <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span> <div class="info-box-content"> <span class="info-box-text">Messages</span> <span class="info-box-number">1,410</span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box"> <span class="info-box-icon bg-green"><i class="fa fa-flag-o"></i></span> <div class="info-box-content"> <span class="info-box-text">Bookmarks</span> <span class="info-box-number">410</span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box"> <span class="info-box-icon bg-yellow"><i class="fa fa-files-o"></i></span> <div class="info-box-content"> <span class="info-box-text">Uploads</span> <span class="info-box-number">13,648</span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box"> <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span> <div class="info-box-content"> <span class="info-box-text">Likes</span> <span class="info-box-number">93,139</span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> </div> <!-- /.row --> <!-- =========================================================== --> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box bg-aqua"> <span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span> <div class="info-box-content"> <span class="info-box-text">Bookmarks</span> <span class="info-box-number">41,410</span> <div class="progress"> <div class="progress-bar" style="width: 70%"></div> </div> <span class="progress-description"> 70% Increase in 30 Days </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box bg-green"> <span class="info-box-icon"><i class="fa fa-thumbs-o-up"></i></span> <div class="info-box-content"> <span class="info-box-text">Likes</span> <span class="info-box-number">41,410</span> <div class="progress"> <div class="progress-bar" style="width: 70%"></div> </div> <span class="progress-description"> 70% Increase in 30 Days </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box bg-yellow"> <span class="info-box-icon"><i class="fa fa-calendar"></i></span> <div class="info-box-content"> <span class="info-box-text">Events</span> <span class="info-box-number">41,410</span> <div class="progress"> <div class="progress-bar" style="width: 70%"></div> </div> <span class="progress-description"> 70% Increase in 30 Days </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box bg-red"> <span class="info-box-icon"><i class="fa fa-comments-o"></i></span> <div class="info-box-content"> <span class="info-box-text">Comments</span> <span class="info-box-number">41,410</span> <div class="progress"> <div class="progress-bar" style="width: 70%"></div> </div> <span class="progress-description"> 70% Increase in 30 Days </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> </div> <!-- /.row --> <!-- =========================================================== --> <!-- Small boxes (Stat box) --> <div class="row"> <div class="col-lg-3 col-xs-6"> <!-- small box --> <div class="small-box bg-aqua"> <div class="inner"> <h3>150</h3> <p>New Orders</p> </div> <div class="icon"> <i class="fa fa-shopping-cart"></i> </div> <a href="#" class="small-box-footer"> More info <i class="fa fa-arrow-circle-right"></i> </a> </div> </div> <!-- ./col --> <div class="col-lg-3 col-xs-6"> <!-- small box --> <div class="small-box bg-green"> <div class="inner"> <h3>53<sup style="font-size: 20px">%</sup></h3> <p>Bounce Rate</p> </div> <div class="icon"> <i class="ion ion-stats-bars"></i> </div> <a href="#" class="small-box-footer"> More info <i class="fa fa-arrow-circle-right"></i> </a> </div> </div> <!-- ./col --> <div class="col-lg-3 col-xs-6"> <!-- small box --> <div class="small-box bg-yellow"> <div class="inner"> <h3>44</h3> <p>User Registrations</p> </div> <div class="icon"> <i class="ion ion-person-add"></i> </div> <a href="#" class="small-box-footer"> More info <i class="fa fa-arrow-circle-right"></i> </a> </div> </div> <!-- ./col --> <div class="col-lg-3 col-xs-6"> <!-- small box --> <div class="small-box bg-red"> <div class="inner"> <h3>65</h3> <p>Unique Visitors</p> </div> <div class="icon"> <i class="ion ion-pie-graph"></i> </div> <a href="#" class="small-box-footer"> More info <i class="fa fa-arrow-circle-right"></i> </a> </div> </div> <!-- ./col --> </div> <!-- /.row --> <!-- =========================================================== --> <div class="row"> <div class="col-md-3"> <div class="box box-default collapsed-box"> <div class="box-header with-border"> <h3 class="box-title">Expandable</h3> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i> </button> </div> <!-- /.box-tools --> </div> <!-- /.box-header --> <div class="box-body"> The body of the box </div> <!-- /.box-body --> </div> <!-- /.box --> </div> <!-- /.col --> <div class="col-md-3"> <div class="box box-success"> <div class="box-header with-border"> <h3 class="box-title">Removable</h3> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> </div> <!-- /.box-tools --> </div> <!-- /.box-header --> <div class="box-body"> The body of the box </div> <!-- /.box-body --> </div> <!-- /.box --> </div> <!-- /.col --> <div class="col-md-3"> <div class="box box-warning"> <div class="box-header with-border"> <h3 class="box-title">Collapsable</h3> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> </div> <!-- /.box-tools --> </div> <!-- /.box-header --> <div class="box-body"> The body of the box </div> <!-- /.box-body --> </div> <!-- /.box --> </div> <!-- /.col --> <div class="col-md-3"> <div class="box box-danger"> <div class="box-header"> <h3 class="box-title">Loading state</h3> </div> <div class="box-body"> The body of the box </div> <!-- /.box-body --> <!-- Loading (remove the following to stop the loading)--> <div class="overlay"> <i class="fa fa-refresh fa-spin"></i> </div> <!-- end loading --> </div> <!-- /.box --> </div> <!-- /.col --> </div> <!-- /.row --> <!-- =========================================================== --> <div class="row"> <div class="col-md-3"> <div class="box box-default collapsed-box box-solid"> <div class="box-header with-border"> <h3 class="box-title">Expandable</h3> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i> </button> </div> <!-- /.box-tools --> </div> <!-- /.box-header --> <div class="box-body"> The body of the box </div> <!-- /.box-body --> </div> <!-- /.box --> </div> <!-- /.col --> <div class="col-md-3"> <div class="box box-success box-solid"> <div class="box-header with-border"> <h3 class="box-title">Removable</h3> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> </div> <!-- /.box-tools --> </div> <!-- /.box-header --> <div class="box-body"> The body of the box </div> <!-- /.box-body --> </div> <!-- /.box --> </div> <!-- /.col --> <div class="col-md-3"> <div class="box box-warning box-solid"> <div class="box-header with-border"> <h3 class="box-title">Collapsable</h3> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> </div> <!-- /.box-tools --> </div> <!-- /.box-header --> <div class="box-body"> The body of the box </div> <!-- /.box-body --> </div> <!-- /.box --> </div> <!-- /.col --> <div class="col-md-3"> <div class="box box-danger box-solid"> <div class="box-header"> <h3 class="box-title">Loading state</h3> </div> <div class="box-body"> The body of the box </div> <!-- /.box-body --> <!-- Loading (remove the following to stop the loading)--> <div class="overlay"> <i class="fa fa-refresh fa-spin"></i> </div> <!-- end loading --> </div> <!-- /.box --> </div> <!-- /.col --> </div> <!-- /.row --> <!-- =========================================================== --> <!-- Direct Chat --> <div class="row"> <div class="col-md-3"> <!-- DIRECT CHAT PRIMARY --> <div class="box box-primary direct-chat direct-chat-primary"> <div class="box-header with-border"> <h3 class="box-title">Direct Chat</h3> <div class="box-tools pull-right"> <span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"> <i class="fa fa-comments"></i></button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> </div> </div> <!-- /.box-header --> <div class="box-body"> <!-- Conversations are loaded here --> <div class="direct-chat-messages"> <!-- Message. Default to the left --> <div class="direct-chat-msg"> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-left">Alexander Pierce</span> <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span> </div> <!-- /.direct-chat-info --> <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img --> <div class="direct-chat-text"> Is this template really for free? That's unbelievable! </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> <!-- Message to the right --> <div class="direct-chat-msg right"> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-right">Sarah Bullock</span> <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span> </div> <!-- /.direct-chat-info --> <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img --> <div class="direct-chat-text"> You better believe it! </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> </div> <!--/.direct-chat-messages--> <!-- Contacts are loaded here --> <div class="direct-chat-contacts"> <ul class="contacts-list"> <li> <a href="#"> <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="User Image"> <div class="contacts-list-info"> <span class="contacts-list-name"> Count Dracula <small class="contacts-list-date pull-right">2/28/2015</small> </span> <span class="contacts-list-msg">How have you been? I was...</span> </div> <!-- /.contacts-list-info --> </a> </li> <!-- End Contact Item --> </ul> <!-- /.contatcts-list --> </div> <!-- /.direct-chat-pane --> </div> <!-- /.box-body --> <div class="box-footer"> <form action="#" method="post"> <div class="input-group"> <input type="text" name="message" placeholder="Type Message ..." class="form-control"> <span class="input-group-btn"> <button type="submit" class="btn btn-primary btn-flat">Send</button> </span> </div> </form> </div> <!-- /.box-footer--> </div> <!--/.direct-chat --> </div> <!-- /.col --> <div class="col-md-3"> <!-- DIRECT CHAT SUCCESS --> <div class="box box-success direct-chat direct-chat-success"> <div class="box-header with-border"> <h3 class="box-title">Direct Chat</h3> <div class="box-tools pull-right"> <span data-toggle="tooltip" title="3 New Messages" class="badge bg-green">3</span> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"> <i class="fa fa-comments"></i></button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> </div> </div> <!-- /.box-header --> <div class="box-body"> <!-- Conversations are loaded here --> <div class="direct-chat-messages"> <!-- Message. Default to the left --> <div class="direct-chat-msg"> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-left">Alexander Pierce</span> <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span> </div> <!-- /.direct-chat-info --> <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img --> <div class="direct-chat-text"> Is this template really for free? That's unbelievable! </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> <!-- Message to the right --> <div class="direct-chat-msg right"> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-right">Sarah Bullock</span> <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span> </div> <!-- /.direct-chat-info --> <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img --> <div class="direct-chat-text"> You better believe it! </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> </div> <!--/.direct-chat-messages--> <!-- Contacts are loaded here --> <div class="direct-chat-contacts"> <ul class="contacts-list"> <li> <a href="#"> <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="User Image"> <div class="contacts-list-info"> <span class="contacts-list-name"> Count Dracula <small class="contacts-list-date pull-right">2/28/2015</small> </span> <span class="contacts-list-msg">How have you been? I was...</span> </div> <!-- /.contacts-list-info --> </a> </li> <!-- End Contact Item --> </ul> <!-- /.contatcts-list --> </div> <!-- /.direct-chat-pane --> </div> <!-- /.box-body --> <div class="box-footer"> <form action="#" method="post"> <div class="input-group"> <input type="text" name="message" placeholder="Type Message ..." class="form-control"> <span class="input-group-btn"> <button type="submit" class="btn btn-success btn-flat">Send</button> </span> </div> </form> </div> <!-- /.box-footer--> </div> <!--/.direct-chat --> </div> <!-- /.col --> <div class="col-md-3"> <!-- DIRECT CHAT WARNING --> <div class="box box-warning direct-chat direct-chat-warning"> <div class="box-header with-border"> <h3 class="box-title">Direct Chat</h3> <div class="box-tools pull-right"> <span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"> <i class="fa fa-comments"></i></button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> </div> </div> <!-- /.box-header --> <div class="box-body"> <!-- Conversations are loaded here --> <div class="direct-chat-messages"> <!-- Message. Default to the left --> <div class="direct-chat-msg"> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-left">Alexander Pierce</span> <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span> </div> <!-- /.direct-chat-info --> <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img --> <div class="direct-chat-text"> Is this template really for free? That's unbelievable! </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> <!-- Message to the right --> <div class="direct-chat-msg right"> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-right">Sarah Bullock</span> <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span> </div> <!-- /.direct-chat-info --> <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img --> <div class="direct-chat-text"> You better believe it! </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> </div> <!--/.direct-chat-messages--> <!-- Contacts are loaded here --> <div class="direct-chat-contacts"> <ul class="contacts-list"> <li> <a href="#"> <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="User Image"> <div class="contacts-list-info"> <span class="contacts-list-name"> Count Dracula <small class="contacts-list-date pull-right">2/28/2015</small> </span> <span class="contacts-list-msg">How have you been? I was...</span> </div> <!-- /.contacts-list-info --> </a> </li> <!-- End Contact Item --> </ul> <!-- /.contatcts-list --> </div> <!-- /.direct-chat-pane --> </div> <!-- /.box-body --> <div class="box-footer"> <form action="#" method="post"> <div class="input-group"> <input type="text" name="message" placeholder="Type Message ..." class="form-control"> <span class="input-group-btn"> <button type="submit" class="btn btn-warning btn-flat">Send</button> </span> </div> </form> </div> <!-- /.box-footer--> </div> <!--/.direct-chat --> </div> <!-- /.col --> <div class="col-md-3"> <!-- DIRECT CHAT DANGER --> <div class="box box-danger direct-chat direct-chat-danger"> <div class="box-header with-border"> <h3 class="box-title">Direct Chat</h3> <div class="box-tools pull-right"> <span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"> <i class="fa fa-comments"></i></button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> </div> </div> <!-- /.box-header --> <div class="box-body"> <!-- Conversations are loaded here --> <div class="direct-chat-messages"> <!-- Message. Default to the left --> <div class="direct-chat-msg"> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-left">Alexander Pierce</span> <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span> </div> <!-- /.direct-chat-info --> <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img --> <div class="direct-chat-text"> Is this template really for free? That's unbelievable! </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> <!-- Message to the right --> <div class="direct-chat-msg right"> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-right">Sarah Bullock</span> <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span> </div> <!-- /.direct-chat-info --> <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img --> <div class="direct-chat-text"> You better believe it! </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> </div> <!--/.direct-chat-messages--> <!-- Contacts are loaded here --> <div class="direct-chat-contacts"> <ul class="contacts-list"> <li> <a href="#"> <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="User Image"> <div class="contacts-list-info"> <span class="contacts-list-name"> Count Dracula <small class="contacts-list-date pull-right">2/28/2015</small> </span> <span class="contacts-list-msg">How have you been? I was...</span> </div> <!-- /.contacts-list-info --> </a> </li> <!-- End Contact Item --> </ul> <!-- /.contatcts-list --> </div> <!-- /.direct-chat-pane --> </div> <!-- /.box-body --> <div class="box-footer"> <form action="#" method="post"> <div class="input-group"> <input type="text" name="message" placeholder="Type Message ..." class="form-control"> <span class="input-group-btn"> <button type="submit" class="btn btn-danger btn-flat">Send</button> </span> </div> </form> </div> <!-- /.box-footer--> </div> <!--/.direct-chat --> </div> <!-- /.col --> </div> <!-- /.row --> <h2 class="page-header">Social Widgets</h2> <div class="row"> <div class="col-md-4"> <!-- Widget: user widget style 1 --> <div class="box box-widget widget-user-2"> <!-- Add the bg color to the header using any of the bg-* classes --> <div class="widget-user-header bg-yellow"> <div class="widget-user-image"> <img class="img-circle" src="../dist/img/user7-128x128.jpg" alt="User Avatar"> </div> <!-- /.widget-user-image --> <h3 class="widget-user-username">Nadia Carmichael</h3> <h5 class="widget-user-desc">Lead Developer</h5> </div> <div class="box-footer no-padding"> <ul class="nav nav-stacked"> <li><a href="#">Projects <span class="pull-right badge bg-blue">31</span></a></li> <li><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li> <li><a href="#">Completed Projects <span class="pull-right badge bg-green">12</span></a></li> <li><a href="#">Followers <span class="pull-right badge bg-red">842</span></a></li> </ul> </div> </div> <!-- /.widget-user --> </div> <!-- /.col --> <div class="col-md-4"> <!-- Widget: user widget style 1 --> <div class="box box-widget widget-user"> <!-- Add the bg color to the header using any of the bg-* classes --> <div class="widget-user-header bg-aqua-active"> <h3 class="widget-user-username">Alexander Pierce</h3> <h5 class="widget-user-desc">Founder & CEO</h5> </div> <div class="widget-user-image"> <img class="img-circle" src="../dist/img/user1-128x128.jpg" alt="User Avatar"> </div> <div class="box-footer"> <div class="row"> <div class="col-sm-4 border-right"> <div class="description-block"> <h5 class="description-header">3,200</h5> <span class="description-text">SALES</span> </div> <!-- /.description-block --> </div> <!-- /.col --> <div class="col-sm-4 border-right"> <div class="description-block"> <h5 class="description-header">13,000</h5> <span class="description-text">FOLLOWERS</span> </div> <!-- /.description-block --> </div> <!-- /.col --> <div class="col-sm-4"> <div class="description-block"> <h5 class="description-header">35</h5> <span class="description-text">PRODUCTS</span> </div> <!-- /.description-block --> </div> <!-- /.col --> </div> <!-- /.row --> </div> </div> <!-- /.widget-user --> </div> <!-- /.col --> <div class="col-md-4"> <!-- Widget: user widget style 1 --> <div class="box box-widget widget-user"> <!-- Add the bg color to the header using any of the bg-* classes --> <div class="widget-user-header bg-black" style="background: url('../dist/img/photo1.png') center center;"> <h3 class="widget-user-username">Elizabeth Pierce</h3> <h5 class="widget-user-desc">Web Designer</h5> </div> <div class="widget-user-image"> <img class="img-circle" src="../dist/img/user3-128x128.jpg" alt="User Avatar"> </div> <div class="box-footer"> <div class="row"> <div class="col-sm-4 border-right"> <div class="description-block"> <h5 class="description-header">3,200</h5> <span class="description-text">SALES</span> </div> <!-- /.description-block --> </div> <!-- /.col --> <div class="col-sm-4 border-right"> <div class="description-block"> <h5 class="description-header">13,000</h5> <span class="description-text">FOLLOWERS</span> </div> <!-- /.description-block --> </div> <!-- /.col --> <div class="col-sm-4"> <div class="description-block"> <h5 class="description-header">35</h5> <span class="description-text">PRODUCTS</span> </div> <!-- /.description-block --> </div> <!-- /.col --> </div> <!-- /.row --> </div> </div> <!-- /.widget-user --> </div> <!-- /.col --> </div> <!-- /.row --> <div class="row"> <div class="col-md-6"> <!-- Box Comment --> <div class="box box-widget"> <div class="box-header with-border"> <div class="user-block"> <img class="img-circle" src="../dist/img/user1-128x128.jpg" alt="User Image"> <span class="username"><a href="#">Jonathan Burke Jr.</a></span> <span class="description">Shared publicly - 7:30 PM Today</span> </div> <!-- /.user-block --> <div class="box-tools"> <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Mark as read"> <i class="fa fa-circle-o"></i></button> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> </div> <!-- /.box-tools --> </div> <!-- /.box-header --> <div class="box-body"> <img class="img-responsive pad" src="../dist/img/photo2.png" alt="Photo"> <p>I took this photo this morning. What do you guys think?</p> <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> Share</button> <button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button> <span class="pull-right text-muted">127 likes - 3 comments</span> </div> <!-- /.box-body --> <div class="box-footer box-comments"> <div class="box-comment"> <!-- User image --> <img class="img-circle img-sm" src="../dist/img/user3-128x128.jpg" alt="User Image"> <div class="comment-text"> <span class="username"> Maria Gonzales <span class="text-muted pull-right">8:03 PM Today</span> </span><!-- /.username --> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div> <!-- /.comment-text --> </div> <!-- /.box-comment --> <div class="box-comment"> <!-- User image --> <img class="img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="User Image"> <div class="comment-text"> <span class="username"> Luna Stark <span class="text-muted pull-right">8:03 PM Today</span> </span><!-- /.username --> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div> <!-- /.comment-text --> </div> <!-- /.box-comment --> </div> <!-- /.box-footer --> <div class="box-footer"> <form action="#" method="post"> <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="Alt Text"> <!-- .img-push is used to add margin to elements next to floating images --> <div class="img-push"> <input type="text" class="form-control input-sm" placeholder="Press enter to post comment"> </div> </form> </div> <!-- /.box-footer --> </div> <!-- /.box --> </div> <!-- /.col --> <div class="col-md-6"> <!-- Box Comment --> <div class="box box-widget"> <div class="box-header with-border"> <div class="user-block"> <img class="img-circle" src="../dist/img/user1-128x128.jpg" alt="User Image"> <span class="username"><a href="#">Jonathan Burke Jr.</a></span> <span class="description">Shared publicly - 7:30 PM Today</span> </div> <!-- /.user-block --> <div class="box-tools"> <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Mark as read"> <i class="fa fa-circle-o"></i></button> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> </div> <!-- /.box-tools --> </div> <!-- /.box-header --> <div class="box-body"> <!-- post text --> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p> <p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p> <!-- Attachment --> <div class="attachment-block clearfix"> <img class="attachment-img" src="../dist/img/photo1.png" alt="Attachment Image"> <div class="attachment-pushed"> <h4 class="attachment-heading"><a href="http://www.lipsum.com/">Lorem ipsum text generator</a></h4> <div class="attachment-text"> Description about the attachment can be placed here. Lorem Ipsum is simply dummy text of the printing and typesetting industry... <a href="#">more</a> </div> <!-- /.attachment-text --> </div> <!-- /.attachment-pushed --> </div> <!-- /.attachment-block --> <!-- Social sharing buttons --> <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> Share</button> <button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button> <span class="pull-right text-muted">45 likes - 2 comments</span> </div> <!-- /.box-body --> <div class="box-footer box-comments"> <div class="box-comment"> <!-- User image --> <img class="img-circle img-sm" src="../dist/img/user3-128x128.jpg" alt="User Image"> <div class="comment-text"> <span class="username"> Maria Gonzales <span class="text-muted pull-right">8:03 PM Today</span> </span><!-- /.username --> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div> <!-- /.comment-text --> </div> <!-- /.box-comment --> <div class="box-comment"> <!-- User image --> <img class="img-circle img-sm" src="../dist/img/user5-128x128.jpg" alt="User Image"> <div class="comment-text"> <span class="username"> Nora Havisham <span class="text-muted pull-right">8:03 PM Today</span> </span><!-- /.username --> The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </div> <!-- /.comment-text --> </div> <!-- /.box-comment --> </div> <!-- /.box-footer --> <div class="box-footer"> <form action="#" method="post"> <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="Alt Text"> <!-- .img-push is used to add margin to elements next to floating images --> <div class="img-push"> <input type="text" class="form-control input-sm" placeholder="Press enter to post comment"> </div> </form> </div> <!-- /.box-footer --> </div> <!-- /.box --> </div> <!-- /.col --> </div> <!-- /.row --> </section> <!-- /.content -->
