<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- nav bar --> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-sm-3"> <a href="mail-compose.html" class="btn btn-danger btn-block btn-compose-email">Compose Email</a> <ul class="nav nav-pills nav-stacked nav-email shadow mb-20"> <li class="active"> <a href="#mail-inbox.html"> <i class="fa fa-inbox"></i> Inbox <span class="label pull-right">7</span> </a> </li> <li> <a href="#mail-compose.html"><i class="fa fa-envelope-o"></i> Send Mail</a> </li> <li> <a href="#"><i class="fa fa-certificate"></i> Important</a> </li> <li> <a href="#"> <i class="fa fa-file-text-o"></i> Drafts <span class="label label-info pull-right inbox-notification">35</span> </a> </li> <li><a href="#"> <i class="fa fa-trash-o"></i> Trash</a></li> </ul><!-- /.nav --> <h5 class="nav-email-subtitle">More</h5> <ul class="nav nav-pills nav-stacked nav-email mb-20 rounded shadow"> <li> <a href="#"> <i class="fa fa-folder-open"></i> Promotions <span class="label label-danger pull-right">3</span> </a> </li> <li> <a href="#"> <i class="fa fa-folder-open"></i> Job list </a> </li> <li> <a href="#"> <i class="fa fa-folder-open"></i> Backup </a> </li> </ul><!-- /.nav --> </div> <div class="col-sm-9"> <!-- statitics --> <div class="row"> <div class="col-lg-3"> <div class="panel panel-info"> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-envelope-o fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading">1</p> <!-- <p class="announcement-text">Users</p> --> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> Messages </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-lg-3"> <div class="panel panel-warning"> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-comment-o fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading">12</p> <!-- <p class="announcement-text"> Items</p> --> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> Interests </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-lg-3"> <div class="panel panel-danger"> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-bell-o fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading">18</p> <p class="announcement-text">Crawl</p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> Requests </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-lg-3"> <div class="panel panel-success"> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-comments fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading">56</p> <p class="announcement-text"> Orders!</p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> Complete </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> </div><!-- /.row --> <!-- statitics --> <div class="panel rounded shadow panel-teal"> <div class="panel-heading"> <div class="pull-left"> <h3 class="panel-title">Inbox (7)</h3> </div> <div class="pull-right"> <form action="#" class="form-horizontal mr-5 mt-3"> <div class="form-group no-margin no-padding has-feedback"> Right area contents </div> </form> </div> <div class="clearfix"></div> </div><!-- /.panel-heading --> <div class="panel-sub-heading inner-all"> <div class="pull-left"> <ul class="list-inline no-margin"> <li> <div class="ckbox ckbox-theme"> <label for="checkbox-group"></label> </div> </li> <li> <div class="btn-group"> <button class="btn btn-default btn-sm tooltips" type="button" data-toggle="tooltip" data-container="body" title="" data-original-title="Archive"><i class="fa fa-list" aria-hidden="true"></i></button> <button class="btn btn-default btn-sm tooltips" type="button" data-toggle="tooltip" data-container="body" title="" data-original-title="Report Spam"><i class="fa fa-th" aria-hidden="true"></i></button> <button class="btn btn-default btn-sm tooltips" type="button" data-toggle="tooltip" data-container="body" title="" data-original-title="Delete"> <i class="fa fa-th-large" aria-hidden="true"></i></button> </div> </li> <li class="hidden-xs"> <div class="btn-group"> <button type="button" class="btn btn-default btn-sm">Sort by</button> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#"><i class="fa fa-edit"></i> Last login</a></li> <li><a href="#"><i class="fa fa-ban"></i> Age</a></li> <!-- <li class="divider"></li> --> <li><a href="#"><i class="fa fa-trash-o"></i> Height</a></li> <li><a href="#"><i class="fa fa-trash-o"></i> Photo</a></li> <li><a href="#"><i class="fa fa-trash-o"></i> Created date</a></li> <li><a href="#"><i class="fa fa-trash-o"></i> Horoscope</a></li> </ul> </div> </li> <li class="hidden-xs"> <div class="btn-group"> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-cog"></i> <span class="caret"></span> </button> <ul class="dropdown-menu pull-right" role="menu"> <li class="dropdown-header">Display settings :</li> <li class="active"><a href="#"><i class="fa fa-list" aria-hidden="true"></i> Single column view</a></li> <li><a href="#"><i class="fa fa-th" aria-hidden="true"></i> Photo view</a></li> <li><a href="#"><i class="fa fa-th-large" aria-hidden="true"></i> Two columns view</a></li> <!-- <li class="dropdown-header">Configure inbox</li> --> <li><a href="#">Details view</a></li> </ul> </div> </li> </ul> </div> <div class="pull-right"> <ul class="list-inline no-margin"> <li class="hidden-xs"><span class="text-muted">Showing 1-50 of 2,051 messages</span></li> <li> <div class="btn-group"> <a href="#" class="btn btn-sm btn-default"><i class="fa fa-angle-left"></i></a> <a href="#" class="btn btn-sm btn-default"><i class="fa fa-angle-right"></i></a> </div> </li> </ul> </div> <div class="clearfix"></div> </div><!-- /.panel-sub-heading --> <div class="panel-body no-padding"> <h2 class="text-primary title"><span class="glyphicon glyphicon-align-justify"></span>Search Results</h2> <div class="items col-xs-12 col-sm-6 col-md-6 col-lg-6 clearfix"> <div class="info-block block-info clearfix"> <div class="square-box pull-left"> <span class="fa fa-user"></span> </div> <h5 class="text-success">Company Name</h5> <h4>Name: <b>Full name</b></h4> <p>Title: Manager</p> <span>Email: sample@company.com</span> </div> </div> <div class="items col-xs-12 col-sm-12 col-md-6 col-lg-6 clearfix"> <div class="info-block block-info clearfix"> <div class="square-box pull-left"> <span class="fa fa-user"></span> </div> <h5 class="text-success">Company Name</h5> <h4>Name: <b>Full name</b></h4> <p>Title: Manager</p> <span>Email: sample@company.com</span> </div> </div> <div class="items col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="info-block block-info clearfix"> <div class="square-box pull-left"> <span class="fa fa-user"></span> </div> <h5 class="text-success">Company Name</h5> <h4>Name: <b>Full name</b></h4> <p>Title: Manager</p> <span>Email: sample@company.com</span> </div> </div> <div class="items col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="info-block block-info clearfix"> <div class="square-box pull-left"> <span class="fa fa-user"></span> </div> <h5 class="text-success">Company Name</h5> <h4>Name: <b>Full name</b></h4> <p>Title: Manager</p> <span>Email: sample@company.com</span> </div> </div> <h2 class="page-header">Search Results</h2> <section class="comment-list"> <!-- First Comment --> <article class="row"> <div class="col-md-2 col-sm-2 hidden-xs"> <figure class="thumbnail"> <img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" /> <figcaption class="text-center">username</figcaption> </figure> </div> <div class="col-md-10 col-sm-10"> <div class="panel panel-default arrow left"> <div class="panel-body"> <header class="text-left"> <div class="comment-user"><i class="fa fa-user"></i> That Guy</div> <time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> Dec 16, 2014</time> </header> <div class="comment-post"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <p class="text-right"><a href="#" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> reply</a></p> </div> </div> </div> </article> </section> <div class="table-responsive"> <table class="table table-hover table-email"> <tbody> <tr class="unread selected"> <td> <div class="ckbox ckbox-theme"> <input id="checkbox1" type="checkbox" checked="checked" class="mail-checkbox"> <label for="checkbox1"></label> </div> </td> <td> <a href="#" class="star star-checked"><i class="fa fa-star"></i></a> </td> <td> <div class="media"> <a href="#" class="pull-left"> <img alt="..." src="http://bootdey.com/img/Content/avatar/avatar1.png" class="media-object"> </a> <div class="media-body"> <h4 class="text-primary">John Kribo</h4> <p class="email-summary"><strong>Commits pushed</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit... <span class="label label-success">New</span> </p> <span class="media-meta">Today at 6:16am</span> </div> </div> </td> </tr> </tbody> </table> </div><!-- /.table-responsive --> </div><!-- /.panel-body --> </div><!-- /.panel --> </div> </div> </div>

/****** Searchable container */ .title{ margin-left:20px } .fa-user{ font-size:80px } .searchable-container{ margin-top:40px; } .glyphicon-lg{ font-size:4em } .info-block{ border-right:5px solid #E6E6E6;margin-bottom:25px } .info-block .square-box { width:120px; min-height:120px; margin-right:22px; text-align:center!important; background-color:#676767; padding:20px 0 } .info-block:hover .info-block.block-info { border-color:#20819e } .info-block.block-info .square-box { background-color:#5bc0de; color:#FFF } /* */ body{margin-top:20px; background:#eee; } .btn-compose-email { padding: 10px 0px; margin-bottom: 20px; } .btn-danger { background-color: #E9573F; border-color: #E9573F; color: white; } .panel-teal .panel-heading { background-color: #37BC9B; border: 1px solid #36b898; color: white; } .panel .panel-heading { padding: 5px; border-top-right-radius: 3px; border-top-left-radius: 3px; border-bottom: 1px solid #DDD; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } .panel .panel-heading .panel-title { padding: 10px; font-size: 17px; } form .form-group { position: relative; margin-left: 0px !important; margin-right: 0px !important; } .inner-all { padding: 10px; } /* ======================================================================== * MAIL * ======================================================================== */ .nav-email > li:first-child + li:active { margin-top: 0px; } .nav-email > li + li { margin-top: 1px; } .nav-email li { background-color: white; } .nav-email li.active { background-color: transparent; } .nav-email li.active .label { background-color: white; color: black; } .nav-email li a { color: black; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } .nav-email li a:hover { background-color: #EEEEEE; } .nav-email li a i { margin-right: 5px; } .nav-email li a .label { margin-top: -1px; } .table-email tr:first-child td { border-top: none; } .table-email tr td { vertical-align: top !important; } .table-email tr td:first-child, .table-email tr td:nth-child(2) { text-align: center; width: 35px; } .table-email tr.unread, .table-email tr.selected { background-color: #EEEEEE; } .table-email .media { margin: 0px; padding: 0px; position: relative; } .table-email .media h4 { margin: 0px; font-size: 14px; line-height: normal; } .table-email .media-object { width: 35px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .table-email .media-meta, .table-email .media-attach { font-size: 11px; color: #999; position: absolute; right: 10px; } .table-email .media-meta { top: 0px; } .table-email .media-attach { bottom: 0px; } .table-email .media-attach i { margin-right: 10px; } .table-email .media-attach i:last-child { margin-right: 0px; } .table-email .email-summary { margin: 0px 110px 0px 0px; } .table-email .email-summary strong { color: #333; } .table-email .email-summary span { line-height: 1; } .table-email .email-summary span.label { padding: 1px 5px 2px; } .table-email .ckbox { line-height: 0px; margin-left: 8px; } .table-email .star { margin-left: 6px; } .table-email .star.star-checked i { color: goldenrod; } .nav-email-subtitle { font-size: 15px; text-transform: uppercase; color: #333; margin-bottom: 15px; margin-top: 30px; } .compose-mail { position: relative; padding: 15px; } .compose-mail textarea { width: 100%; padding: 10px; border: 1px solid #DDD; } .view-mail { padding: 10px; font-weight: 300; } .attachment-mail { padding: 10px; width: 100%; display: inline-block; margin: 20px 0px; border-top: 1px solid #EFF2F7; } .attachment-mail p { margin-bottom: 0px; } .attachment-mail a { color: #32323A; } .attachment-mail ul { padding: 0px; } .attachment-mail ul li { float: left; width: 200px; margin-right: 15px; margin-top: 15px; list-style: none; } .attachment-mail ul li a.atch-thumb img { width: 200px; margin-bottom: 10px; } .attachment-mail ul li a.name span { float: right; color: #767676; } @media (max-width: 640px) { .compose-mail-wrapper .compose-mail { padding: 0px; } } @media (max-width: 360px) { .mail-wrapper .panel-sub-heading { text-align: center; } .mail-wrapper .panel-sub-heading .pull-left, .mail-wrapper .panel-sub-heading .pull-right { float: none !important; display: block; } .mail-wrapper .panel-sub-heading .pull-right { margin-top: 10px; } .mail-wrapper .panel-sub-heading img { display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; } .mail-wrapper .panel-footer { text-align: center; } .mail-wrapper .panel-footer .pull-right { float: none !important; margin-left: auto; margin-right: auto; } .mail-wrapper .attachment-mail ul { padding: 0px; } .mail-wrapper .attachment-mail ul li { width: 100%; } .mail-wrapper .attachment-mail ul li a.atch-thumb img { width: 100% !important; } .mail-wrapper .attachment-mail ul li .links { margin-bottom: 20px; } .compose-mail-wrapper .search-mail input { width: 130px; } .compose-mail-wrapper .panel-sub-heading { padding: 10px 7px; } } /*font Awesome http://fontawesome.io*/ @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css); /*Comment List styles*/ .comment-list .row { margin-bottom: 0px; } .comment-list .panel .panel-heading { padding: 4px 15px; position: absolute; border:none; /*Panel-heading border radius*/ border-top-right-radius:0px; top: 1px; } .comment-list .panel .panel-heading.right { border-right-width: 0px; /*Panel-heading border radius*/ border-top-left-radius:0px; right: 16px; } .comment-list .panel .panel-heading .panel-body { padding-top: 6px; } .comment-list figcaption { /*For wrapping text in thumbnail*/ word-wrap: break-word; } /* Portrait tablets and medium desktops */ @media (min-width: 768px) { .comment-list .arrow:after, .comment-list .arrow:before { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; } .comment-list .panel.arrow.left:after, .comment-list .panel.arrow.left:before { border-left: 0; } /*****Left Arrow*****/ /*Outline effect style*/ .comment-list .panel.arrow.left:before { left: 0px; top: 30px; /*Use boarder color of panel*/ border-right-color: inherit; border-width: 16px; } /*Background color effect*/ .comment-list .panel.arrow.left:after { left: 1px; top: 31px; /*Change for different outline color*/ border-right-color: #FFFFFF; border-width: 15px; } /*****Right Arrow*****/ /*Outline effect style*/ .comment-list .panel.arrow.right:before { right: -16px; top: 30px; /*Use boarder color of panel*/ border-left-color: inherit; border-width: 16px; } /*Background color effect*/ .comment-list .panel.arrow.right:after { right: -14px; top: 31px; /*Change for different outline color*/ border-left-color: #FFFFFF; border-width: 15px; } } .comment-list .comment-post { margin-top: 6px; }