<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 ---------->
<header>
<div class="container header inner">
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right masthead-nav">
<li><a href="#"> E-commerce Logistics</a></li>
<li><a href="#"> Contract Logistics</a></li>
<li><a href="#"> Courier</a></li>
<li><a href="#"> Transport</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row content">
<div class="col-sm-12">
Asia >> Turkey
</div>
</div>
</div>
<div class="container">
<div class="row content">
<div class="col-sm-3 sidenav hidden-xs">
<h2>Logo</h2>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">Dashboard</a></li>
<li><a href="#section2">Age</a></li>
<li><a href="#section3">Gender</a></li>
<li><a href="#section3">Geo</a></li>
</ul><br>
</div>
<br>
<div class="col-sm-9">
<div class="well">
<h4>Dashboard</h4>
<p>Some text..</p>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<h4>Users</h4>
<p>1 Million</p>
</div>
</div>
<div class="col-sm-3">
<div class="well">
<h4>Pages</h4>
<p>100 Million</p>
</div>
</div>
<div class="col-sm-3">
<div class="well">
<h4>Sessions</h4>
<p>10 Million</p>
</div>
</div>
<div class="col-sm-3">
<div class="well">
<h4>Bounce</h4>
<p>30%</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="well">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="well">
<p>Text</p>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<p>Text</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
header {
background: url(https://s29.postimg.org/501kwpx7r/334c68c298e6eb06bab3bf4876bea89c.jpg) repeat;
width: 100%;
height: 200px;
background-color: #060;
color: #fff;
position: relative;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.header {
width: 100%;
height: 100%;
min-height: 100%;
background: rgba(0, 0, 0, 0.7) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAD0lEQVQIW2NkQABjRmQOAAM+AGkQsDBSAAAAAElFTkSuQmCC) repeat;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.navbar-brand{
font-size: 24px;
font-weight: bold;
color: #fff;
font-style: italic;
}
.inner {
padding: 30px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8 proofing */
color: rgba(255,255,255,.95);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
color: #fff;
border-bottom-color: #fff;
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 768px) {
.navbar-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
@media (max-width: 768px) {
.navbar-toggle{
background: #000 !important;
}
}
/*
.tabStrip{
background: #f3eee9;
border: none;
padding-left: 0;
padding-right: 0;
}
.grey{
background: grey;
}
.blue{
background: #00BFFF;
}
.orange{
background: #FF8C00;
}
.green{
background: #6B8E23;
}
.tabStrip ul li a{
color: #fff;
}
.tabStrip ul li a:hover{
border: none;
background: none;
}
*/
/* side slide menu */
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* tab slider */
#myCarousel .nav a small {
display:block;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
border-radius:0px;
}
.tabSlider{
padding-left: 0;
padding-right: 0;
}
