<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-fluid tabStrip"> <ul class="nav nav-tabs text-center"> <li class="col-sm-3 grey"><a href="#"><i class="fa fa-truck fa-2x col-sm-12"></i><span class="col-sm-12">Packers and Movers</span></a></li> <li class="col-sm-3 orange"><a href="#"><i class="fa fa-ship fa-2x col-sm-12"></i><span class="col-sm-12">Cargo</span></a></li> <li class="col-sm-3 blue"><a href="#"><i class="fa fa-building fa-2x col-sm-12"></i><span class="col-sm-12">Warehouse</span></a></li> <li class="col-sm-3 green"><a href="#"><i class="fa fa-building fa-2x col-sm-12"></i><span class="col-sm-12">Transport</span></a></li> </ul> </div>

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); header { background: url(https://s29.postimg.org/501kwpx7r/334c68c298e6eb06bab3bf4876bea89c.jpg) repeat; width: 100%; height: 500px; background-color: #060; color: #fff; 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; }