/
var
/
www
/
barefootlaw.org
/
bios2
/
manager
/
Upload File
HOME
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!--<link rel="shortcut icon" href="../images/favicon.png" type="image/png">--> <title>Quirk Responsive Admin Templates</title> <link rel="stylesheet" href="../lib/fontawesome/css/font-awesome.css"> <link rel="stylesheet" href="../lib/weather-icons/css/weather-icons.css"> <link rel="stylesheet" href="../lib/jquery-toggles/toggles-full.css"> <link rel="stylesheet" href="../lib/jquery-ui/jquery-ui.css"> <link rel="stylesheet" href="../css/quirk.css"> <script src="../lib/modernizr/modernizr.js"></script> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../lib/html5shiv/html5shiv.js"></script> <script src="../lib/respond/respond.src.js"></script> <![endif]--> </head> <body> <header> <div class="headerpanel"> <div class="logopanel"> <h2><a href="index.php">Quirk</a></h2> </div><!-- logopanel --> <div class="headerbar"> <a id="menuToggle" class="menutoggle"><i class="fa fa-bars"></i></a> <div class="searchpanel"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> </span> </div><!-- input-group --> </div> <div class="header-right"> <ul class="headermenu"> <li> <div id="noticePanel" class="btn-group"> <button class="btn btn-notice alert-notice" data-toggle="dropdown"> <i class="fa fa-globe"></i> </button> <div id="noticeDropdown" class="dropdown-menu dm-notice pull-right"> <div role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs nav-justified" role="tablist"> <li class="active"><a data-target="#notification" data-toggle="tab">Notifications (2)</a></li> <li><a data-target="#reminders" data-toggle="tab">Reminders (4)</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="notification"> <ul class="list-group notice-list"> <li class="list-group-item unread"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-envelope"></i> </div> <div class="col-xs-10"> <h5><a href="">New message from Weno Carasbong</a></h5> <small>June 20, 2015</small> <span>Soluta nobis est eligendi optio cumque...</span> </div> </div> </li> <li class="list-group-item unread"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-user"></i> </div> <div class="col-xs-10"> <h5><a href="">Renov Leonga is now following you!</a></h5> <small>June 18, 2015</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-user"></i> </div> <div class="col-xs-10"> <h5><a href="">Zaham Sindil is now following you!</a></h5> <small>June 17, 2015</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-thumbs-up"></i> </div> <div class="col-xs-10"> <h5><a href="">Rey Reslaba likes your post!</a></h5> <small>June 16, 2015</small> <span>HTML5 For Beginners Chapter 1</span> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-comment"></i> </div> <div class="col-xs-10"> <h5><a href="">Socrates commented on your post!</a></h5> <small>June 16, 2015</small> <span>Temporibus autem et aut officiis debitis...</span> </div> </div> </li> </ul> <a class="btn-more" href="">View More Notifications <i class="fa fa-long-arrow-right"></i></a> </div><!-- tab-pane --> <div role="tabpanel" class="tab-pane" id="reminders"> <h1 id="todayDay" class="today-day">...</h1> <h3 id="todayDate" class="today-date">...</h3> <h5 class="today-weather"><i class="wi wi-hail"></i> Cloudy 77 Degree</h5> <p>Thunderstorm in the area this afternoon through this evening</p> <h4 class="panel-title">Upcoming Events</h4> <ul class="list-group"> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>20</h4> <p>Aug</p> </div> <div class="col-xs-10"> <h5><a href="">HTML5/CSS3 Live! United States</a></h5> <small>San Francisco, CA</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>05</h4> <p>Sep</p> </div> <div class="col-xs-10"> <h5><a href="">Web Technology Summit</a></h5> <small>Sydney, Australia</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>25</h4> <p>Sep</p> </div> <div class="col-xs-10"> <h5><a href="">HTML5 Developer Conference 2015</a></h5> <small>Los Angeles CA United States</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>10</h4> <p>Oct</p> </div> <div class="col-xs-10"> <h5><a href="">AngularJS Conference 2015</a></h5> <small>Silicon Valley CA, United States</small> </div> </div> </li> </ul> <a class="btn-more" href="">View More Events <i class="fa fa-long-arrow-right"></i></a> </div> </div> </div> </div> </div> </li> <li> <div class="btn-group"> <button type="button" class="btn btn-logged" data-toggle="dropdown"> <img src="images/photos/loggeduser.png" alt="" /> Elen Adarna <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="profile.html"><i class="glyphicon glyphicon-user"></i> My Profile</a></li> <li><a href="#"><i class="glyphicon glyphicon-cog"></i> Account Settings</a></li> <li><a href="#"><i class="glyphicon glyphicon-question-sign"></i> Help</a></li> <li><a href="signin.php"><i class="glyphicon glyphicon-log-out"></i> Log Out</a></li> </ul> </div> </li> <li> <button id="chatview" class="btn btn-chat alert-notice"> <span class="badge-alert"></span> <i class="fa fa-comments-o"></i> </button> </li> </ul> </div><!-- header-right --> </div><!-- headerbar --> </div><!-- header--> </header> <section> <div class="leftpanel"> <div class="leftpanelinner"> <!-- ################## LEFT PANEL PROFILE ################## --> <div class="media leftpanel-profile"> <div class="media-left"> <a href="#"> <img src="../images/photos/loggeduser.png" alt="" class="media-object img-circle"> </a> </div> <div class="media-body"> <h4 class="media-heading">Elen Adarna <a data-toggle="collapse" data-target="#loguserinfo" class="pull-right"><i class="fa fa-angle-down"></i></a></h4> <span>Software Engineer</span> </div> </div><!-- leftpanel-profile --> <div class="leftpanel-userinfo collapse" id="loguserinfo"> <h5 class="sidebar-title">Address</h5> <address> 4975 Cambridge Road Miami Gardens, FL 33056 </address> <h5 class="sidebar-title">Contact</h5> <ul class="list-group"> <li class="list-group-item"> <label class="pull-left">Email</label> <span class="pull-right">me@themepixels.com</span> </li> <li class="list-group-item"> <label class="pull-left">Home</label> <span class="pull-right">(032) 1234 567</span> </li> <li class="list-group-item"> <label class="pull-left">Mobile</label> <span class="pull-right">+63012 3456 789</span> </li> <li class="list-group-item"> <label class="pull-left">Social</label> <div class="social-icons pull-right"> <a href="#"><i class="fa fa-facebook-official"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-pinterest"></i></a> </div> </li> </ul> </div><!-- leftpanel-userinfo --> <ul class="nav nav-tabs nav-justified nav-sidebar"> <li class="tooltips active" data-toggle="tooltip" title="Main Menu"><a data-toggle="tab" data-target="#mainmenu"><i class="tooltips fa fa-ellipsis-h"></i></a></li> <li class="tooltips unread" data-toggle="tooltip" title="Check Mail"><a data-toggle="tab" data-target="#emailmenu"><i class="tooltips fa fa-envelope"></i></a></li> <li class="tooltips" data-toggle="tooltip" title="Contacts"><a data-toggle="tab" data-target="#contactmenu"><i class="fa fa-user"></i></a></li> <li class="tooltips" data-toggle="tooltip" title="Settings"><a data-toggle="tab" data-target="#settings"><i class="fa fa-cog"></i></a></li> <li class="tooltips" data-toggle="tooltip" title="Log Out"><a href="signin.php"><i class="fa fa-sign-out"></i></a></li> </ul> <div class="tab-content"> <!-- ################# MAIN MENU ################### --> <div class="tab-pane active" id="mainmenu"> <h5 class="sidebar-title">Favorites</h5> <ul class="nav nav-pills nav-stacked nav-quirk"> <li><a href="index.php"><i class="fa fa-home"></i> <span>Dashboard</span></a></li> <li class="active"><a href="widgets.html"><span class="badge pull-right">10+</span><i class="fa fa-cube"></i> <span>Widgets</span></a></li> <li><a href="maps.php"><i class="fa fa-map-marker"></i> <span>Maps</span></a></li> </ul> <h5 class="sidebar-title">Main Menu</h5> <ul class="nav nav-pills nav-stacked nav-quirk"> <li class="nav-parent"> <a href=""><i class="fa fa-check-square"></i> <span>Forms</span></a> <ul class="children"> <li><a href="general-forms.php">Form Elements</a></li> <li><a href="form-validation.html">Form Validation</a></li> <li><a href="form-wizards.html">Form Wizards</a></li> <li><a href="wysiwyg.html">Text Editor</a></li> </ul> </li> <li class="nav-parent"><a href=""><i class="fa fa-suitcase"></i> <span>UI Elements</span></a> <ul class="children"> <li><a href="buttons.html">Buttons</a></li> <li><a href="icons.html">Icons</a></li> <li><a href="typography.html">Typography</a></li> <li><a href="alerts.html">Alerts & Notifications</a></li> <li><a href="tabs-accordions.html">Tabs & Accordions</a></li> <li><a href="sliders.html">Sliders</a></li> <li><a href="graphs.html">Graphs & Charts</a></li> <li><a href="panels.html">Panels</a></li> <li><a href="extras.html">Extras</a></li> </ul> </li> <li class="nav-parent"><a href=""><i class="fa fa-th-list"></i> <span>Tables</span></a> <ul class="children"> <li><a href="basic-tables.html">Basic Tables</a></li> <li><a href="data-tables.html">Data Tables</a></li> </ul> </li> <li class="nav-parent"><a href=""><i class="fa fa-file-text"></i> <span>Pages</span></a> <ul class="children"> <li><a href="asset-manager.html">Asset Manager</a></li> <li><a href="people-directory.html">People Directory</a></li> <li><a href="timeline.html">Timeline</a></li> <li><a href="profile.html">Profile</a></li> <li><a href="blank.html">Blank Page</a></li> <li><a href="notfound.html">404 Page</a></li> <li><a href="signin.php">Sign In</a></li> <li><a href="signup.html">Sign Up</a></li> </ul> </li> </ul> </div><!-- tab-pane --> <!-- ######################## EMAIL MENU ##################### --> <div class="tab-pane" id="emailmenu"> <div class="sidebar-btn-wrapper"> <a href="compose.html" class="btn btn-danger btn-block">Compose</a> </div> <h5 class="sidebar-title">Mailboxes</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-mail"> <li><a href="email.html"><i class="fa fa-inbox"></i> <span>Inbox (3)</span></a></li> <li><a href="email.html"><i class="fa fa-pencil"></i> <span>Draft (2)</span></a></li> <li><a href="email.html"><i class="fa fa-paper-plane"></i> <span>Sent</span></a></li> </ul> <h5 class="sidebar-title">Tags</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-label"> <li><a href="#"><i class="fa fa-tags primary"></i> <span>Communication</span></a></li> <li><a href="#"><i class="fa fa-tags success"></i> <span>Updates</span></a></li> <li><a href="#"><i class="fa fa-tags warning"></i> <span>Promotions</span></a></li> <li><a href="#"><i class="fa fa-tags danger"></i> <span>Social</span></a></li> </ul> </div><!-- tab-pane --> <!-- ################### CONTACT LIST ################### --> <div class="tab-pane" id="contactmenu"> <div class="input-group input-search-contact"> <input type="text" class="form-control" placeholder="Search contact"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> </span> </div> <h5 class="sidebar-title">My Contacts</h5> <ul class="media-list media-list-contacts"> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user1.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Christina R. Hill</h4> <span><i class="fa fa-phone"></i> 386-752-1860</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user2.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Floyd M. Romero</h4> <span><i class="fa fa-mobile"></i> +1614-650-8281</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user3.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Jennie S. Gray</h4> <span><i class="fa fa-phone"></i> 310-757-8444</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user4.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Alia J. Locher</h4> <span><i class="fa fa-mobile"></i> +1517-386-0059</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user5.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Nicholas T. Hinkle</h4> <span><i class="fa fa-skype"></i> nicholas.hinkle</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user6.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Jamie W. Bradford</h4> <span><i class="fa fa-phone"></i> 225-270-2425</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user7.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Pamela J. Stump</h4> <span><i class="fa fa-mobile"></i> +1773-879-2491</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user8.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Refugio C. Burgess</h4> <span><i class="fa fa-mobile"></i> +1660-627-7184</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user9.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Ashley T. Brewington</h4> <span><i class="fa fa-skype"></i> ashley.brewington</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user10.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Roberta F. Horn</h4> <span><i class="fa fa-phone"></i> 716-630-0132</span> </div> </a> </li> </ul> </div><!-- tab-pane --> <!-- #################### SETTINGS ################### --> <div class="tab-pane" id="settings"> <h5 class="sidebar-title">General Settings</h5> <ul class="list-group list-group-settings"> <li class="list-group-item"> <h5>Daily Newsletter</h5> <small>Get notified when someone else is trying to access your account.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle toggle-light success"></div> </div> </li> <li class="list-group-item"> <h5>Call Phones</h5> <small>Make calls to friends and family right from your account.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle-off toggle-light success"></div> </div> </li> </ul> <h5 class="sidebar-title">Security Settings</h5> <ul class="list-group list-group-settings"> <li class="list-group-item"> <h5>Login Notifications</h5> <small>Get notified when someone else is trying to access your account.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle toggle-light success"></div> </div> </li> <li class="list-group-item"> <h5>Phone Approvals</h5> <small>Use your phone when login as an extra layer of security.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle toggle-light success"></div> </div> </li> </ul> </div><!-- tab-pane --> </div><!-- tab-content --> </div><!-- leftpanelinner --> </div><!-- leftpanel --> <div class="mainpanel"> <div class="contentpanel"> <ol class="breadcrumb breadcrumb-quirk"> <li><a href="index.php"><i class="fa fa-home mr5"></i> Home</a></li> <li class="active">Widgets</li> </ol> <nav class="navbar navbar-inverse"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <i class="fa fa-bars"></i> </button> <a class="navbar-brand" href="#"><h3>Quirk</h3></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> <nav class="navbar"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <i class="fa fa-bars"></i> </button> <a class="navbar-brand" href="#"><h3>Quirk</h3></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> <div class="row demo-navwrapper"> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="nav-wrapper white"> <h5 class="sidebar-title">Navigation</h5> <ul class="nav nav-pills nav-stacked nav-quirk"> <li><a href="#"><i class="fa fa-home"></i> <span>Home</span></a></li> <li class="nav-parent active"> <a href=""><i class="fa fa-star"></i> <span>Features</span></a> <ul class="children"> <li><a href="">PSD</a></li> <li><a href="">HTML+CSS</a></li> <li><a href="">Mobile Apps</a></li> </ul> </li> <li class="nav-parent"> <a href=""><i class="fa fa-file"></i> <span>Blog</span></a> <ul class="children"> <li><a href="">Recent</a></li> <li><a href="">Popular</a></li> </ul> </li> <li><a href="#"><i class="fa fa-envelope"></i> <span>Contact Us</span></a></li> </ul> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="nav-wrapper white"> <h5 class="sidebar-title">Navigation</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-quirk-primary"> <li><a href="#"><i class="fa fa-home"></i> <span>Home</span></a></li> <li class="nav-parent active"> <a href=""><i class="fa fa-star"></i> <span>Features</span></a> <ul class="children"> <li><a href="">PSD</a></li> <li><a href="">HTML+CSS</a></li> <li><a href="">Mobile Apps</a></li> </ul> </li> <li class="nav-parent"> <a href=""><i class="fa fa-file"></i> <span>Blog</span></a> <ul class="children"> <li><a href="">Recent</a></li> <li><a href="">Popular</a></li> </ul> </li> <li><a href="#"><i class="fa fa-envelope"></i> <span>Contact Us</span></a></li> </ul> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="nav-wrapper white"> <h5 class="sidebar-title">Navigation</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-quirk-danger"> <li><a href="#"><i class="fa fa-home"></i> <span>Home</span></a></li> <li class="nav-parent active"> <a href=""><i class="fa fa-star"></i> <span>Features</span></a> <ul class="children"> <li><a href="">PSD</a></li> <li><a href="">HTML+CSS</a></li> <li><a href="">Mobile Apps</a></li> </ul> </li> <li class="nav-parent"> <a href=""><i class="fa fa-file"></i> <span>Blog</span></a> <ul class="children"> <li><a href="">Recent</a></li> <li><a href="">Popular</a></li> </ul> </li> <li><a href="#"><i class="fa fa-envelope"></i> <span>Contact Us</span></a></li> </ul> </div> </div><!-- col-sm-4 --> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="nav-wrapper white"> <h5 class="sidebar-title">Navigation</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-quirk-info"> <li><a href="#"><i class="fa fa-home"></i> <span>Home</span></a></li> <li class="nav-parent active"> <a href=""><i class="fa fa-star"></i> <span>Features</span></a> <ul class="children"> <li><a href="">PSD</a></li> <li><a href="">HTML+CSS</a></li> <li><a href="">Mobile Apps</a></li> </ul> </li> <li class="nav-parent"> <a href=""><i class="fa fa-file"></i> <span>Blog</span></a> <ul class="children"> <li><a href="">Recent</a></li> <li><a href="">Popular</a></li> </ul> </li> <li><a href="#"><i class="fa fa-envelope"></i> <span>Contact Us</span></a></li> </ul> </div> </div><!-- col-sm-4 --> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="nav-wrapper quirk"> <h5 class="sidebar-title">Navigation</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-dark-quirk"> <li><a href="#"><i class="fa fa-home"></i> <span>Home</span></a></li> <li class="nav-parent active"> <a href=""><i class="fa fa-star"></i> <span>Features</span></a> <ul class="children"> <li><a href="">PSD</a></li> <li><a href="">HTML+CSS</a></li> <li><a href="">Mobile Apps</a></li> </ul> </li> <li class="nav-parent"> <a href=""><i class="fa fa-file"></i> <span>Blog</span></a> <ul class="children"> <li><a href="">Recent</a></li> <li><a href="">Popular</a></li> </ul> </li> <li><a href="#"><i class="fa fa-envelope"></i> <span>Contact Us</span></a></li> </ul> </div> </div><!-- col-sm-4 --> <div class="col-sm-4 col-md-3 col-lg-2"> <div class="nav-wrapper quirk"> <h5 class="sidebar-title">Navigation</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-dark-primary"> <li><a href="#"><i class="fa fa-home"></i> <span>Home</span></a></li> <li class="nav-parent active"> <a href=""><i class="fa fa-star"></i> <span>Features</span></a> <ul class="children"> <li><a href="">PSD</a></li> <li><a href="">HTML+CSS</a></li> <li><a href="">Mobile Apps</a></li> </ul> </li> <li class="nav-parent"> <a href=""><i class="fa fa-file"></i> <span>Blog</span></a> <ul class="children"> <li><a href="">Recent</a></li> <li><a href="">Popular</a></li> </ul> </li> <li><a href="#"><i class="fa fa-envelope"></i> <span>Contact Us</span></a></li> </ul> </div> </div><!-- col-sm-4 --> <div class="col-sm-4 col-md-3 col-lg-2"> <div class="nav-wrapper quirk"> <h5 class="sidebar-title">Navigation</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-dark-danger"> <li><a href="#"><i class="fa fa-home"></i> <span>Home</span></a></li> <li class="nav-parent active"> <a href=""><i class="fa fa-star"></i> <span>Features</span></a> <ul class="children"> <li><a href="">PSD</a></li> <li><a href="">HTML+CSS</a></li> <li><a href="">Mobile Apps</a></li> </ul> </li> <li class="nav-parent"> <a href=""><i class="fa fa-file"></i> <span>Blog</span></a> <ul class="children"> <li><a href="">Recent</a></li> <li><a href="">Popular</a></li> </ul> </li> <li><a href="#"><i class="fa fa-envelope"></i> <span>Contact Us</span></a></li> </ul> </div> </div><!-- col-sm-4 --> <div class="col-sm-4 col-md-3 col-lg-2"> <div class="nav-wrapper quirk"> <h5 class="sidebar-title">Navigation</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-dark-info"> <li><a href="#"><i class="fa fa-home"></i> <span>Home</span></a></li> <li class="nav-parent active"> <a href=""><i class="fa fa-star"></i> <span>Features</span></a> <ul class="children"> <li><a href="">PSD</a></li> <li><a href="">HTML+CSS</a></li> <li><a href="">Mobile Apps</a></li> </ul> </li> <li class="nav-parent"> <a href=""><i class="fa fa-file"></i> <span>Blog</span></a> <ul class="children"> <li><a href="">Recent</a></li> <li><a href="">Popular</a></li> </ul> </li> <li><a href="#"><i class="fa fa-envelope"></i> <span>Contact Us</span></a></li> </ul> </div> </div><!-- col-sm-4 --> </div><!-- row --> <div class="row"> <div class="col-sm-4 col-md-3 col-lg-2"> <div class="profile-left mb20"> <div class="profile-left-heading"> <ul class="panel-options"> <li><a><i class="glyphicon glyphicon-option-vertical"></i></a></li> </ul> <a class="profile-photo" href=""><img alt="" src="../images/photos/profilepic.png" class="img-circle img-responsive"></a> <h2 class="profile-name">Barbara Balashova</h2> <h4 class="profile-designation">Software Engineer</h4> <ul class="list-group"> <li class="list-group-item">Posts <a href="timeline.html">1,333</a></li> <li class="list-group-item">Following <a href="people-directory.html">541</a></li> <li class="list-group-item">Followers <a href="people-directory-grid.html">32,434</a></li> </ul> <button class="btn btn-danger btn-quirk btn-block profile-btn-follow">Follow</button> </div> <div class="profile-left-body"> <h4 class="panel-title">About Me</h4> <p>Social media ninja. Pop culture enthusiast. Zombie fanatic. General tv evangelist.</p> <p>Alcohol fanatic. Explorer. Passionate reader. Entrepreneur. Lifelong coffee advocate. Avid bacon aficionado. Travel evangelist.</p> <hr class="fadeout"> <h4 class="panel-title">Location</h4> <p><i class="glyphicon glyphicon-map-marker mr5"></i> San Francisco, CA, USA</p> <hr class="fadeout"> <h4 class="panel-title">Company</h4> <p><i class="glyphicon glyphicon-briefcase mr5"></i> Awesome Company, Inc.</p> <hr class="fadeout"> <h4 class="panel-title">Contacts</h4> <p><i class="glyphicon glyphicon-phone mr5"></i> +1 010 123 5678</p> <hr class="fadeout"> <h4 class="panel-title">Social</h4> <ul class="list-inline profile-social"> <li><a href=""><i class="fa fa-facebook-official"></i></a></li> <li><a href=""><i class="fa fa-twitter"></i></a></li> <li><a href=""><i class="fa fa-dribbble"></i></a></li> <li><a href=""><i class="fa fa-linkedin"></i></a></li> </ul> </div> </div><!-- profile-left --> </div><!-- col-sm-4 --> <div class="col-sm-4 col-md-3 col-lg-2"> <div class="panel panel-inverse"> <div class="panel-heading"> <h4 class="panel-title">People You May Know</h4> </div> <div class="panel-body"> <ul class="media-list user-list"> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="../images/photos/user9.png" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading"><a href="">Ashley T. Brewington</a></h4> <span>5,323</span> Followers </div> </li> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="../images/photos/user10.png" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading"><a href="">Roberta F. Horn</a></h4> <span>4,100</span> Followers </div> </li> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="../images/photos/user3.png" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading"><a href="">Jennie S. Gray</a></h4> <span>3,508</span> Followers </div> </li> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="../images/photos/user4.png" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading"><a href="">Alia J. Locher</a></h4> <span>3,508</span> Followers </div> </li> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="../images/photos/user6.png" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading"><a href="">Jamie W. Bradford</a></h4> <span>2,001</span> Followers </div> </li> </ul> </div> </div><!-- panel --> <div class="panel panel-inverse"> <div class="panel-heading"> <h4 class="panel-title">Your Followers Activity</h4> </div> <div class="panel-body"> <ul class="media-list user-list"> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="../images/photos/user2.png" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading nomargin"><a href="">Floyd M. Romero</a></h4> is now following <a href="">Christina R. Hill</a> <small class="date"><i class="glyphicon glyphicon-time"></i> Just now</small> </div> </li> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="../images/photos/user10.png" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading nomargin"><a href="">Roberta F. Horn</a></h4> commented on <a href="">HTML5 Tutorial</a> <small class="date"><i class="glyphicon glyphicon-time"></i> Yesterday</small> </div> </li> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="../images/photos/user3.png" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading nomargin"><a href="">Jennie S. Gray</a></h4> posted a video on <a href="">The Discovery</a> <small class="date"><i class="glyphicon glyphicon-time"></i> June 25, 2015</small> </div> </li> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="../images/photos/user5.png" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading nomargin"><a href="">Nicholas T. Hinkle</a></h4> liked your video on <a href="">The Discovery</a> <small class="date"><i class="glyphicon glyphicon-time"></i> June 24, 2015</small> </div> </li> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="../images/photos/user2.png" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading nomargin"><a href="">Floyd M. Romero</a></h4> liked your photo on <a href="">My Life Adventure</a> <small class="date"><i class="glyphicon glyphicon-time"></i> June 24, 2015</small> </div> </li> </ul> </div> </div><!-- panel --> </div><!-- col-sm-4 --> <div class="col-sm-4 col-md-6 col-lg-4"> <div class="row"> <div class="col-md-6"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Get Connected!</h4> <p>Just select any of your available social account to get started.</p> </div> <div class="panel-body"> <button class="btn btn-primary btn-stroke btn-icon tooltips mr5" data-toggle="toggle" title="Facebook"><i class="fa fa-facebook"></i></button> <button class="btn btn-info btn-stroke btn-icon tooltips mr5" data-toggle="toggle" title="Twitter"><i class="fa fa-twitter"></i></button> <button class="btn btn-danger btn-stroke btn-icon tooltips mr5" data-toggle="toggle" title="Google Plus"><i class="fa fa-google-plus"></i></button> <button class="btn btn-primary btn-stroke btn-icon tooltips" data-toggle="toggle" title="Linkedin"><i class="fa fa-linkedin"></i></button> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-inverse-full"> <div class="panel-heading"> <h4 class="panel-title">Get Connected!</h4> <p>Just select any of your available social account to get started.</p> </div> <div class="panel-body"> <button class="btn btn-primary btn-stroke btn-icon mr5"><i class="fa fa-facebook"></i></button> <button class="btn btn-info btn-stroke btn-icon mr5"><i class="fa fa-twitter"></i></button> <button class="btn btn-danger btn-stroke btn-icon mr5"><i class="fa fa-google-plus"></i></button> <button class="btn btn-primary btn-stroke btn-icon"><i class="fa fa-linkedin"></i></button> </div> </div> </div> </div> <div class="panel panel-primary-full"> <div class="panel-heading"> <h4 class="panel-title">Join Our Newsletter</h4> <p>Sign up to get an updates to our awesome community using our personalized newsletter!</p> </div> <div class="panel-body"> <div class="input-group"> <input type="text" class="form-control" placeholder="Please enter your email address"> <span class="input-group-btn"> <button class="btn btn-default btn-quirk btn-warning" type="button">Subscribe</button> </span> </div> </div> </div> <div class="panel panel-success-full"> <div class="panel-heading"> <h4 class="panel-title">Our Top Story</h4> </div> <div class="panel-body"> <h4 class="mt0">Two Good Reasons to Love Quirk</h4> <p>When it comes to websites or apps, one of the first impression you consider is the design. It needs to be high quality enough otherwise you will lose potential users due to bad design.</p> <div class="mb20"></div> <ul class="list-inline nomargin"> <li><a href="">2 Likes</a></li> <li><a href="">1 Comment</a></li> <li><a href="">2 Shares</a></li> <li><a href="">1,202 Views</a></li> </ul> </div> </div> <div class="row"> <div class="col-md-6"> <div class="panel panel-primary-full"> <div class="panel-heading"> <h4 class="panel-title">Attractive</h4> </div> <div class="panel-body"> <p>When your website or app is attractive to use, your users will not simply be using it, they’ll look forward to using it.</p> <p>This means that you should fashion the look and feel of your interface for your users.</p> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-danger-full"> <div class="panel-heading"> <h4 class="panel-title">Responsive</h4> </div> <div class="panel-body"> <p>Responsive Web design is the approach that suggests that design and development should...</p> <p>This would eliminate the need for a different design and development phase for each...</p> </div> </div> </div> </div><!-- row --> <!-- Nav tabs --> <ul class="nav nav-tabs nav-inverse nav-justified"> <li class="active"><a href="#popular" data-toggle="tab">Popular</a></li> <li><a href="#recent" data-toggle="tab">Recent</a></li> <li><a href="#comments" data-toggle="tab">Comments</a></li> </ul> <!-- Tab panes --> <div class="tab-content mb20"> <div class="tab-pane active" id="popular"> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p> </div> <div class="tab-pane" id="recent"> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p> </div> <div class="tab-pane" id="comments"> <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> </div> </div> </div> </div><!-- row --> <div class="row"> <div class="col-sm-4 col-lg-3"> <div id="datepicker-inline" class="calendar-widget"></div> </div> <div class="col-sm-4 col-lg-3"> <div class="panel panel-danger panel-weather"> <div class="panel-heading"> <h4 class="panel-title">Weather Forecast</h4> </div> <div class="panel-body inverse"> <div class="row mb10"> <div class="col-xs-6"> <h2 class="today-day">Monday</h2> <h3 class="today-date">July 13, 2015</h3> </div> <div class="col-xs-6"> <i class="wi wi-hail today-cloud"></i> </div> </div> <p class="nomargin">Thunderstorm in the area of responsibility this afternoon through this evening.</p> <div class="row mt10"> <div class="col-xs-7"> <strong>Temperature:</strong> (Celcius) 19 </div> <div class="col-xs-5"> <strong>Wind:</strong> 30+ mph </div> </div> </div> </div> </div> <div class="col-sm-4 col-lg-3 gritter-demo"> <div role="alert" class="gritter-item-wrapper with-icon send-o success mb10"> <div class="gritter-item"> <div class="gritter-without-image"> <span class="gritter-title">Your reply has been sent!</span> <p>A new rating has been received for Quirk...</p> </div> <div style="clear:both"></div> </div> </div><!-- gritter-item-wrapper --> <div role="alert" style="" class="gritter-item-wrapper with-icon exclamation-circle send-o warning mb10"> <div class="gritter-item"> <div class="gritter-without-image"> <span class="gritter-title">This is a warning message!</span> <p>Having a class name warning applied to it.</p> </div> <div style="clear:both"></div> </div> </div><!-- gritter-item-wrapper --> <div role="alert" style="" class="gritter-item-wrapper with-icon times-circle danger"> <div class="gritter-item"> <div class="gritter-without-image"> <span class="gritter-title">This is an error message!</span> <p>Having a class name danger applied to it.</p> </div> <div style="clear:both"></div> </div> </div><!-- gritter-item-wrapper --> </div><!-- col-sm-4 --> </div> <div class="row"> <div class="col-sm-4 col-lg-3"> <div class="panel-group panel-product" id="accordion3"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion3" href="#collapseOne3"> Item Details </a> </h4> </div> <div id="collapseOne3" class="panel-collapse collapse in"> <div class="panel-body"> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object width80" src="../images/image.png" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading"><a href="">PSD Premium UI Kit</a></h4> <p>20 PSD Files, 10 AI Files, 10 Sketch Files, Documentation and much more... </p> </div> </div> </div> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion3" href="#collapseTwo3"> Specifications </a> </h4> </div> <div id="collapseTwo3" class="panel-collapse collapse"> <div class="panel-body"> <table class="table nomargin"> <tbody> <tr> <th>License:</th> <td>Regular License</td> </tr> <tr> <th>File Types:</th> <td>.PSD, .AI, .SKETCH</td> </tr> <tr> <th>Support:</th> <td>24/7</td> </tr> </tbody> </table> </div> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion3" href="#collapseThree3"> Accessories </a> </h4> </div> <div id="collapseThree3" class="panel-collapse collapse"> <div class="panel-body"> <table class="table nomargin"> <tbody> <tr> <th>Photoshop Plugins:</th> <td>2</td> </tr> <tr> <th>Photoshop Actions</th> <td>4</td> </tr> <tr> <th>Wireframes:</th> <td>1</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <div class="col-sm-4 col-lg-3"> <div class="panel-group panel-product" id="accordion2"> <div class="panel panel-inverse"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2"> About The Company </a> </h4> </div> <div id="collapseOne2" class="panel-collapse collapse in"> <div class="panel-body"> <img src="../images/logo.png" alt="" class="mb10"> <p>When it comes to websites or apps, one of the first impression you consider is the design...<a href="">Read more</a></p> </div> </div> </div> <div class="panel panel-inverse"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion2" href="#collapseTwo2"> Featured Services </a> </h4> </div> <div id="collapseTwo2" class="panel-collapse collapse"> <div class="panel-body"> <ul class="list-group nomargin"> <li class="list-group-item"> <h5>PSD to HTML5/CSS3</h5> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit...<a href="">Learn more</a></p> </li> </ul> </div> </div> </div> <div class="panel panel-inverse"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion2" href="#collapseThree2"> Contact Us </a> </h4> </div> <div id="collapseThree2" class="panel-collapse collapse"> <div class="panel-body"> <div class="form-group mb10"> <input type="email" class="form-control" placeholder="Your Email"> </div> <div class="form-group mb10"> <textarea class="form-control" rows="1" placeholder="Your Message"></textarea> </div> <button class="btn btn-success btn-block">Send Message</button> </div> </div> </div> </div> </div> <div class="col-sm-4 col-lg-3"> <div class="panel-group panel-product" id="accordion1"> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1"> Top Story </a> </h4> </div> <div id="collapseOne1" class="panel-collapse collapse in"> <div class="panel-body"> <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus.</p> <p>Saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p> </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion1" href="#collapseTwo1"> Trending Story </a> </h4> </div> <div id="collapseTwo1" class="panel-collapse collapse"> <div class="panel-body"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion1" href="#collapseThree1"> Recent Story </a> </h4> </div> <div id="collapseThree1" class="panel-collapse collapse"> <div class="panel-body"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> </div> </div> </div> </div> </div><!-- row --> <div class="row"> <div class="col-md-4 col-lg-3"> <div class="panel panel-map-location"> <div id="mapApple" class="map-wrapper"></div> <div class="panel-body"> <div class="media"> <div class="media-left"> <img src="/images/image.png" class="width80" alt="Company Logo"> </div> <div class="media-body"> <address> <strong>ThemePixels, Inc.</strong> 4975 Cambridge Road Miami Gardens, FL 33056<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> </div><!-- media-body --> </div><!-- media --> <div class="btn-group pull-left"> <button class="btn btn-primary" type="button"><i class="fa fa-phone mr5"></i> Call</button> <button class="btn btn-primary" type="button"><i class="fa fa-envelope mr5"></i> Email</button> </div> <div class="btn-group pull-right"> <button class="btn btn-success" type="button"><i class="fa fa-star mr5"></i> 4.2 Rating</button> </div> </div><!-- panel-body --> </div><!-- panel --> </div><!-- col-md-4 --> <div class="col-md-8 col-lg-6"> <div class="panel panel-map-sidebar"> <div class="row"> <div class="col-md-7 col-lg-8 main"> <div id="mapMapBox" class="map-wrapper"></div> </div> <div class="col-md-5 col-lg-4 map-sidebar"> <div class="panel-body"> <h4 class="panel-title mb20">Driving Directions</h4> <p>Type or click the map to enter your starting point and end point of your trip.</p> <form class="form" action="#"> <div class="form-group"> <label class="control-label">Start:</label> <input type="text" class="form-control" placeholder="San Francisco, CA, USA"> </div> <div class="form-group"> <label class="control-label">End:</label> <input type="text" class="form-control" placeholder="New York, NY, USA"> </div> <div class="form-group"> <label class="control-label">Transportation:</label> <div class="btn-group"> <button class="btn btn-default" type="button"><i class="fa fa-bicycle"></i></button> <button class="btn btn-default active" type="button"><i class="fa fa-train"></i></button> <button class="btn btn-default" type="button"><i class="fa fa-bus"></i></button> <button class="btn btn-default" type="button"><i class="fa fa-ship"></i></button> <button class="btn btn-default" type="button"><i class="fa fa-plane"></i></button> </div> </div> <hr> <button class="btn btn-success btn-block">Get Directions</button> </form> </div> </div> </div> </div><!-- panel --> </div><!-- col-md-4 --> </div><!-- row --> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-3"> <div class="panel signin signin-demo"> <div class="panel-heading"> <img class="center-block" src="../images/logo-big.png" alt=""> <h4 class="panel-title">Welcome! Please signin.</h4> </div> <div class="panel-body"> <button class="btn btn-primary btn-quirk btn-fb btn-block">Connect with Facebook</button> <div class="or">or</div> <form action="index.php"> <div class="form-group mb10"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input type="text" class="form-control" placeholder="Enter Username"> </div> </div> <div class="form-group nomargin"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input type="text" class="form-control" placeholder="Enter Password"> </div> </div> <div><a href="" class="forgot">Forgot password?</a></div> <div class="form-group"> <button class="btn btn-success btn-quirk btn-block">Sign In</button> </div> </form> <hr class="invisible"> <div class="form-group"> <a href="signup.html" class="btn btn-default btn-quirk btn-stroke btn-stroke-thin btn-block btn-sign">Not a member? Sign up now!</a> </div> </div> </div><!-- panel --> </div> <div class="col-sm-6 col-md-8 col-lg-6"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Primary Colored Table</h4> <p>Add <code>.table-primary</code> for a primary colored table.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-primary nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> <div class="well primary mb10"> <h3>Announcements</h3> <p>A brand new wallpaper design contest is now live! See what theme you'll be challenged with this month!</p> </div> <div class="well warning"> <h3>Mobile Friendly Comments Dashboard</h3> <p>A responsive, mobile friendly version of the comments dashboard is now available to.</p> </div> </div> </div><!-- row --> <div class="row"> <div class="col-md-8 col-lg-6"> <div class="row blog-entry mb20"> <div class="col-sm-5"> <h6 class="blog-category">Design & Illustration</h6> <h3 class="blog-title"><a href="">30 Awesome Photo Effect Tutorials</a></h3> <p class="blog-meta mb20">By: <a href="">Grant Friedman</a> Aug 27, 2013 </p> <p class="blog-summary mb20">Photoshop is clearly our favorite photo editing software. In this article, we have listed 30 photo effect tutorials that will show you how to perform a wide range... <a href="http://goo.gl/NThVZj" target="_blank">Read more</a></p> <p><a href="">9 Comments</a> <a href="">10 Shares</a></p> </div> <div class="col-sm-7"> <img class="img-responsive" src="../images/photos/photo1.jpg" alt=""> </div> </div> <div class="panel panel-announcement"> <ul class="panel-options"> <li><a><i class="fa fa-refresh"></i></a></li> <li><a><i class="fa fa-remove"></i></a></li> </ul> <div class="panel-heading"> <h4 class="panel-title">Latest Announcement</h4> </div> <div class="panel-body"> <h2>A new admin template has been released by <span class="text-primary">ThemePixels</span> with a name <span class="text-success">Quirk</span> is now live and available for purchase!</h2> <h4>Explore this new template and see the beauty of Quirk! <a href="">Take a Tour!</a></h4> </div> </div><!-- panel --> </div><!-- col-md-8 --> <div class="col-md-4 col-lg-3"> <div class="blog-entry2"> <div class="blog-img"> <img class="img-responsive" src="../images/photos/photo2.jpg" alt=""> </div> <div class="blog-body"> <h6 class="blog-category">Design & Illustration</h6> <h3 class="blog-title"><a href="">30 Awesome Photo Effect Tutorials</a></h3> <p class="blog-meta mb20">By: <a href="">Grant Friedman</a> Aug 27, 2013 </p> <p class="blog-summary mb20">Photoshop is clearly our favorite photo editing software. In this article, we have listed 30 photo effect tutorials that will show you how to... <a href="http://goo.gl/NThVZj" target="_blank">Read more</a></p> <p class="nomargin"><a href="">9 Comments</a> <a href="">10 Shares</a></p> </div> </div> </div> </div> </div><!-- contentpanel --> </div><!-- mainpanel --> </section> <script src="../lib/jquery/jquery.js"></script> <script src="../lib/jquery-ui/jquery-ui.js"></script> <script src="../lib/bootstrap/js/bootstrap.js"></script> <script src="../lib/jquery-toggles/toggles.js"></script> <script src="//maps.google.com/maps/api/js?sensor=true"></script> <script src="../lib/gmaps/gmaps.js"></script> <script src="../js/map.apple.js"></script> <script src="../js/map.mapbox.js"></script> <script src="../js/quirk.js"></script> <script> $(function(){ $('#datepicker-inline').datepicker(); }); </script> </body> </html>