<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 -->
<!-- tabs -->
<div class="card">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<!--<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>
<div role="tabpanel" class="tab-pane" id="profile">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div role="tabpanel" class="tab-pane" id="messages">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div role="tabpanel" class="tab-pane" id="settings">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passage..</div>
</div>
</div>
<!-- tabs -->
</div>
</div>
</div>
/* */
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;
}
}
/****** tab *********/
.nav-tabs { border-bottom: 2px solid #DDD; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.nav-tabs > li > a { border: none; color: #666; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; }
.nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}
.card {background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }
body{ background: #EDECEC; padding:50px}
/****** tab *********/
