<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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Victory Chauffeur</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link href="css/animation.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://use.fontawesome.com/45e03a14ce.js"></script>
</head>
<body>
<section class="slider_ reservation_section">
<header>
<!--header_top-->
<div class="container">
<nav class="navbar navbar-default header_bar">
<div class="navbar-header">
<a class="navbar-brand" href="#"> <img src="https://lh6.googleusercontent.com/-y-MY2satK-E/AAAAAAAAAAI/AAAAAAAAAJU/ER_hFddBheQ/photo.jpg" alt="User Avatar" class="img-circle" width="40px"></a> <span class="navbar-toggle" onclick="openNav()"><i class="fa fa-bars" aria-hidden="true"></i></span>
</div>
<main>
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#" class="menu_btn hidden-xs"> <span onclick="openNav()"><!--<i class="fa fa-bars" aria-hidden="true"></i>--><span class="btn btn-red border-radius">Click Here</span></span></a></li>
</ul> </div></main>
</nav>
</div>
</header>
</section>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="col-sm-6 side_menu">
<a href="#" class="active">Home</a>
<a href="#">About Us </a>
<a href="#">Our Fleet </a>
<a href="#">Services </a>
<a href="#">Tours </a>
<a href="#">Specials </a>
<a href="#">Contact Us</a>
</div><!--side_menu-->
<div class="col-sm-6 login_side">
<h3 class="text-red">Are you a member? Sign Up / Login</h3>
<button href="#" class="btn btn-red border-radius">signup</button> <button href="#" class="btn btn-none border-radius">login</button>
<h3 class="mar-25">Get In Touch!</h3>
<p>Victory Chauffeur Services Cape Town</p>
<ul class="list-unstyled contact_info">
<li><i class="fa fa-phone" aria-hidden="true"></i> + 27 71 200 5304, + 27 21 839 5211</li>
<li><i class="fa fa-fax" aria-hidden="true"></i> + 27 21 839 5211</li>
<li><i class="fa fa-envelope-o" aria-hidden="true"></i> info@chauffeurservicescapetown.co.za</li>
</ul>
<div class="social_ico"><a href="#"> <i class="fa fa-facebook"></i></a><a href="#"> <i class="fa fa-twitter"></i>
</a><a href="#"> <i class="fa fa-google-plus"></i>
</a>
<a href="#"> <i class="fa fa-youtube-play"></i>
</a>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
// To attach Backstrech as the body's background
//$.backstretch("images/banner.jpg");
// You may also attach Backstretch to a block-level element
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
}
/* Close/hide the sidenav */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
body {
color: #818181;
font-family: "Open Sans",sans-serif;
}
.header_bar {
border-radius: 0;
}
.header_bar .navbar-brand {
height: 70px;
}
.header_bar main {
margin-top: 0px;
}
header {
padding-top: 30px;
}
.header_bar .navbar-nav li a.active {
color: #ec3a3e;
}
/**sidbar menu**/
.sidenav {
background-color: #111;
height: 100%;
left: 0;
overflow-x: hidden;
padding-top: 100px;
position: fixed;
text-align: left;
top: 0;
transition: all 0.5s ease 0s;
width: 0;
z-index: 1;
color:#fff;
}
.sidenav a {
color: #fff;
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
transition: all 0.3s ease 0s;
}
.sidenav a:hover{
color: #f1f1f1;
}
.sidenav .side_menu a {
font-size: 24px;
font-weight: 600;
padding-left: 8px;
}
.sidenav .closebtn {
font-size: 30px;
margin-left: 50px;
position: absolute;
right: 25px;
top: 0;
}
.side_menu {
border-right: 1px solid #ffffff;
padding-left: 32px;
}
.login_side {
padding-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
}
/**sidbar menu close**/
.btn-red{
border-color:#ec3a3e;
background:#ec3a3e;
color:#fff;
}
.btn-none{
border-color:#fff;
background:transparent;
color:#fff;
}
.btn.focus, .btn:focus, .btn:hover {
color: #fff;
opacity: 0.8;
}
.border-radius
{
border-radius:0px;
}
.login_side .btn {
font-size: 16px;
padding-left: 30px;
padding-right: 30px;
text-transform: uppercase;
}
.text-red{
color:#ec3a3e !important;
}
h1, h2, h3, h4, h5, h6 {
color: #4d4d4d;
font-weight: 600;
margin-top: 0;
}
.social_ico a {
display: inline-block;
height: 30px;
line-height: 30px;
margin: 0 5px 0 0;
text-align: center;
width: 30px;
background: #c0c4c7 none repeat scroll 0 0;
color: #fff;
padding:0px;
}
.social_ico {
float: left;
margin-top: 15px;
width: 100%;
}
.contact_info {
float: left;
margin-top: 20px;
width: 100%;
}
.mar-25
{
margin-top:25px;
}
.header_bar .navbar-toggle {
height: auto;
margin-top: 19px;
padding: 7px 12px;
cursor:pointer;
}
.social_ico a:hover {
background: #ec3a3e none repeat scroll 0 0;
}
.sidenav .side_menu a:hover, .sidenav .side_menu a.active {
border-left: 4px solid #ec3a3e;
color: #ec3a3e;
}
.top_section {
float: left;
margin-bottom: 25px;
width: 100%;
}
.chu-section {
float: left;
padding: 40px 0;
width: 100%;
}
section {
float: left;
width: 100%;
}
.bg-gray{
background-color:#262627;
color:#fff;
}
.section-cover {
float: left;
padding: 40px;
width: 100%;
}
.bg-gray h1, .bg-gray h4 {
color: #fff;
}
.ico-cover {
background: rgba(255, 255, 255, 0.6) none repeat scroll 0 0;
border-radius: 100px;
clear: both;
height: 100px;
line-height: 100px;
margin: auto auto 20px;
position: relative;
text-align: center;
width: 100px;
}
.view-btn ,.view-btn:hover,.view-btn:focus{
color: #ffffff;
font-weight: 600;
text-decoration:none;
}
.ico-cover::after {
border: 4px solid #050505;
border-radius: 100px;
content: "";
height: 90px;
left: 5px;
line-height: 90px;
position: absolute;
top: 5px;
width: 90px;
}
.login_side h3 {
color: #ffffff;
}
@media screen and (max-width: 767px) {
.side_menu {
border-right: none;
}
}
