<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-collapse -->
</nav>
<div class="container-fluid banner">
<div class="container banner">
<div class="jumbotron text-center">
<h1>Lorem Ipsum</h1>
<p>We specialize in blablabla</p>
<form class="form-inline">
<div class="form-group ">
<select class="select form-control" id="select" name="select">
<option value="First Choice">
Select City
</option>
<option value="Second Choice">
Second Choice
</option>
<option value="Third Choice">
Third Choice
</option>
</select>
</div>
<div class="form-group ">
<select class="select form-control" id="select" name="select">
<option value="First Choice">
Search for your favourite Restaurant in your city
</option>
<option value="Second Choice">
Second Choice
</option>
<option value="Third Choice">
Third Choice
</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Blog Home One
<small>Subheading</small>
</h1>
<ol class="breadcrumb">
<li><a href="index.html">Home</a>
</li>
<li class="active">Blog Home One</li>
</ol>
</div>
</div>
<!-- /.row -->
<div class="spacer20">
<div class="col-md-3 text-left">
<h2>Quick Links</h2>
<div class="btn-group btn-group-vertical btn-block">
<a href="#" class="btn btn-default">Apple</a>
<a href="#" class="btn btn-default">Samsung</a>
<a href="#" class="btn btn-default">Sony</a>
<a href="#" class="btn btn-default">Apple</a>
<a href="#" class="btn btn-default">Samsung</a>
<a href="#" class="btn btn-default">Sony</a>
<a href="#" class="btn btn-default">Apple</a>
<a href="#" class="btn btn-default">Samsung</a>
<a href="#" class="btn btn-default">Sony</a>
<a href="#" class="btn btn-default">Apple</a>
<a href="#" class="btn btn-default">Samsung</a>
<a href="#" class="btn btn-default">Sony</a>
<a href="#" class="btn btn-default">Apple</a>
<a href="#" class="btn btn-default">Samsung</a>
<a href="#" class="btn btn-default">Sony</a>
<a href="#" class="btn btn-default">Apple</a>
<a href="#" class="btn btn-default">Samsung</a>
<a href="#" class="btn btn-default">Sony</a>
</div>
<hr>
<div class="well-sm">
<img src="http://placehold.it/350X350" class="img-responsive" >
</div>
</div>
<div class="col-md-9 text-left">
<h1>About us</h1>
<p>Praesent facilisis, dolor in commodo rutrum, risus elit dignissim mi, eu tempor ligula eros nec nunc. Integer accumsan viverra eleifend. Donec malesuada massa diam, quis finibus elit euismod ac. Cras rhoncus pulvinar dictum. Morbi porta commodo mauris eget eleifend. In non volutpat turpis, malesuada facilisis elit. Nam vitae elementum orci. Cras quis elit metus.</p>
<p>Aenean iaculis, tortor sit amet molestie fringilla, sapien elit interdum mauris, sed cursus dui felis nec nisi. Nam vitae efficitur erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra bibendum malesuada.</p>
<ul>
<li><a href="#"><span> </span>Risus elit dignissim mi, eu tempor ligula eros nec nunc</a></li>
<li><a href="#"><span> </span>Pellentesque finibus tincidunt metus. Proin hendrerit fermentum tortor </a></li>
<li><a href="#"><span> </span>commodo rutrum, risus elit dignissim mi, eu tempor ligula eros nec nunc</a></li>
<li><a href="#"><span> </span>Praesent facilisis, dolor in commodo rutrum, risus elit dignissim mi,</a></li>
</ul>
<!---728x90--->
<p>Praesent facilisis, dolor in commodo rutrum, risus elit dignissim mi, eu tempor ligula eros nec nunc. Integer accumsan viverra eleifend. Donec malesuada massa diam, quis finibus elit euismod ac. Cras rhoncus pulvinar dictum. Morbi porta commodo mauris eget eleifend. In non volutpat turpis, malesuada facilisis elit. Nam vitae elementum orci. Cras quis elit metus.</p>
<ul>
<li><a href="#"><span> </span>commodo rutrum, risus elit dignissim mi, eu tempor ligula eros nec nunc</a></li>
<li><a href="#"><span> </span>Praesent facilisis, dolor in commodo rutrum, risus elit dignissim mi,</a></li>
</ul>
<p>Dolor in commodo rutrum, risus elit dignissim mi, eu tempor ligula eros nec nunc. Integer accumsan viverra eleifend. Donec malesuada massa diam, quis finibus elit euismod ac. Cras rhoncus pulvinar dictum. Morbi porta commodo mauris eget eleifend. In non volutpat turpis, malesuada facilisis elit. Nam vitae elementum orci. Cras quis elit metus.</p>
</div>
</div>
</div>
<!-- /.container -->
<footer class="footer bg-style">
<div class="container">
<div class="footer-pad">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="footer-widget about-box">
<figure class="image-box">
<img src="images/logo/logo2.png" alt="">
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elitsed do eiusmod tempor incididunt ut labore et dolore magna.</p>
<div class="social-links">
<a href="#"><span class="fa fa-facebook-f"></span></a>
<a href="#"><span class="fa fa-twitter"></span></a>
<a href="#"><span class="fa fa-linkedin"></span></a>
<a href="#"><span class="fa fa-instagram"></span></a>
<a href="#"><span class="fa fa-pinterest-p"></span></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-widget footer-links">
<h3 class="title">Our Services</h3>
<ul>
<li><a href="#">Car Wash</a></li>
<li><a href="#"> Engine Replace</a></li>
<li><a href="#">Tire Repair</a></li>
<li><a href="#">Car Paint</a></li>
<li><a href="#">Car Observation</a></li>
<li><a href="#">Home Service</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-widget opening-hour">
<h3 class="title">Working Hours</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<ul class="day-time">
<li><span>Mon-Set :</span> <span>9 AM - 5 PM</span></li>
<li><span>Friday :</span> <span>8 AM - 4 PM</span></li>
<li><span>Sunday :</span> <span>Closed</span></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-widget footer-links">
<h3 class="title">Our Services</h3>
<ul>
<li><a href="#">Car Wash</a></li>
<li><a href="#"> Engine Replace</a></li>
<li><a href="#">Tire Repair</a></li>
<li><a href="#">Car Paint</a></li>
<li><a href="#">Car Observation</a></li>
<li><a href="#">Home Service</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
body {
font-family: 'Roboto';font-size: 16px;
}
/*footer css */
.footer {
position: relative;
border-top: 5px solid #980606;
background-size: cover;
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
color:white;
}
.footer-pad {
padding: 75px 0 65px;
}
.footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(71, 32, 29);
}
.footer.bg-style .footer-upper {
padding: 75px 0 65px;
}
.about-box .social-links a {
display: inline-block;
font-size: 16px;
font-weight: normal;
color: #fff;
line-height: 38px;
margin-right: 1px;
border: 1px solid #fff;
width: 38px;
height: 38px;
}
h3.title {
margin-bottom: 30px;
position: relative;
font-weight: 500;
color: #fff;
}
.footer-widget.footer-links ul li a:hover {
color: #fff;
}
.footer.bg-style .footer-widget.footer-links ul li a {
display: block;
font-size: 14px;
color: #fff;
line-height: 24px;
padding-left: 26px;
position: relative;
font-weight: 400;
}
.footer p {
font-weight: 400;
font-size: 14px;
color: #fff;
line-height: 27px;
}
/*footer css ends here */
.dropdown-menu > li > a:hover {
color: #fff;
text-decoration: none;
background-color: #cd0e00;
}
.banner {
background-image: url("https://images.pexels.com/photos/51325/industry-sunset-port-facility-mood-51325.jpeg?w=940&h=650&auto=compress&cs=tinysrgb");
background-color: #f4511e; /* Orange */
color: #ffffff;
}
.jumbotron {
background-color: rgba(175, 43, 45, 0);
color: #ffffff;
padding:140px;
}
/* NAVIGATION */
/* NAVIGATION */
.navbar-default {
background-color: #e22300;
border-color: #cd0e00;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #cd0e00;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #cd0e00;
}
.navbar-default .navbar-toggle {
border-color: #cd0e00;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #cd0e00;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #cd0e00;
}
/*footer css */
