<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" 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="#">Travel</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="#">Auction Portal</a></li>
<li><a href="#">Insurance Portal</a></li>
<li><a href="#">HR Portal</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Free Stuff<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><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Deals</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-collapse -->
</nav>
<div class="image-aboutus-sm-banner"style="margin-top:70px">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="lg-text">About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
<div class="content-area">
<div class="container">
<div class="row">
<div class="content-title">
<div class="col-md-12">
<h2>Lorem ipsum dolor in India</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<hr>
</div>
</div>
</div>
<div class="row">
<div class="left-area">
<div class="col-md-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<h3>Effortlessly stay on top of bills</h3>
<p>At last, your bills and money are together in one place and easier than ever to manage. Just add your bills to see how helpful we can be.</p>
<ul>
<li>See bills and money in one place. </li>
<li>Get alerts and schedule payments on the spot.</li>
<li>Say goodbye to late fees.</li>
<li>Stop logging into multiple sites.</li>
<li>Deliver payments fast.</li>
</ul>
</div>
</div>
<div class="right-area">
<div class="col-md-3">
<div class="sidebar-img">
<img src="https://moatsearch-data.s3.amazonaws.com/creative_screens/aa/17/f8/aa17f8c645e6463dfcedaf3924c3cb15.jpg">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
body {font-family: 'Roboto';}
.margin-b-40 {margin-bottom:40px;}
h1 {font-size:31px;font-weight:600;}
h2{font-size:28px;font-weight:600;}
h3{font-size:22px;font-weight:600;}
h4{font-size:19px;font-weight:600;}
/********************** Generic Ends here *****/
/********** Content ARea **************/
.content-area {background:#fff;border-top:1px solid #e2e2e2;border-bottom:0px solid #e2e2e2;}
.area-padding{padding:50px 0px 0px 0px;}
.content-title {margin-top:15px;}
.content-title h2 {font-weight:600; font-size:28px;}
.content-title h3 {font-size:16px;color:#dd0000;line-height:20px;}
.sidebar-img{margin:0px 0px 15px 0px;border:1px solid #e2e2e2;padding:10px;}
.sidebar-img img{width:100%;}
/********** Icons ARea **************/
.icons-area {background:#fff;border-top:1px solid #e2e2e2;border-bottom:0px solid #e2e2e2;}
.area-padding{padding:50px 0px 0px 0px;}
.icons-area-box h3 {font-weight:600; font-size:22px;}
.icons-area-box p {line-height:20px;}
.icons-area-box i {font-size:45px;color:#dd0000;padding:0px 10px 0px 0px;font-weight:900;}
/********************** Footer Area *****/
.footer-area {background:#000;color:#fff;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;}
.area-padding{padding:50px 0px 0px 0px;}
.footer-box h2 {font-weight:600; font-size:28px;}
.footer-box p {line-height:26px;}
.footer-box span {font-size:11px;}
.footer-logo img {width:10%;margin:30px 0px 30px 0px;}
/********** Signup ARea **************/
.signup-area {background:#fff;border-top:1px solid #e2e2e2;border-bottom:0px solid #e2e2e2;}
.area-padding{padding:50px 0px 0px 0px;}
.signup-box h2 {font-weight:600; font-size:28px;}
.signup-box p {line-height:26px;}
/********** Services ARea **************/
.service-area {background:#;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;}
.area-padding{padding:50px 0px 0px 0px;}
.services-box h4 {font-weight:600; font-size:19px;}
.services-box p { }
/********** powerful ARea **************/
.powerful-area {background:#;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;}
.area-padding{padding:50px 0px 0px 0px;}
.powerful-box h3 {font-weight:600; font-size:22px;}
.powerful-box p {line-height:26px;}
/********** Budget ARea **************/
.budget-area {background:#;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;}
.area-padding2{padding:50px 0px 0px 0px;}
.budget-box img {display: block;max-width: 70%;height: auto;}
.budget-box h3 {font-weight:600; font-size:22px;}
.budget-box p {line-height:26px;}
.budget-box ul li {line-height:36px;list-style-type:none;}
.budget-box i {color:#dd0000;padding:0px 10px 0px 0px;font-weight:900;}
/********** Personalize ARea **************/
.personalize-area {background:#f2f2f2;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;}
.area-padding2{padding:50px 0px 0px 0px;}
.personalize-box img {display: block;max-width: 70%;height: auto;}
.personalize-box h3 {font-weight:600; font-size:22px;}
.personalize-box p {line-height:26px;}
.personalize-box ul li {line-height:36px;}
/********** Stat ARea **************/
.stat-area {background:#fff;}
.area-padding{padding:50px 0px 30px 0px;}
.stat-box i {font-size:50px;color:#000;}
.stat-box h3 {font-weight:600; font-size:22px;}
.stat-box p {}
.stat-box span {color:#dd0000;}
/************ Image Banner **************/
.image-aboutus-banner {
background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), url("https://static.pexels.com/photos/87256/pexels-photo-87256.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #fff;
padding-top: 110px;
padding-bottom:125px;
}
.lg-text h1 {font-size:52px; font-weight: 600;text-transform: none;color:#fff;}
.lg-text p {font-size:19px;}
.site-btn {margin:15px 0px 15px 0px;padding:12px 40px 12px 45px;background:#dd0000;border:none;border-radius:0px;font-weight:600;}
.site-btn:hover {background:#fff;color:#dd0000;}
/************ Image SMALL Banner **************/
.image-aboutus-sm-banner {
background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("https://images.pexels.com/photos/631008/pexels-photo-631008.jpeg?w=940&h=650&auto=compress&cs=tinysrgb");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #fff;
padding-top: 20px;
padding-bottom:20px;
}
.lg-text {
font-size:52px;
font-weight: 600;
text-transform: none;
color:#fff;
}
.image-aboutus-sm-banner p {
color:#fff;
}
/**************Navigation *****************/
.caret-up {
width: 0;
height: 0;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid;
display: inline-block;
margin-left: 5px;
vertical-align: middle;
}
.dropdown-menu {padding:0px;}
.dropdown-menu > li > a {
color: #514f4f;
text-decoration: none;
background-color: #fff ;
}
.dropdown-menu > li > a:hover {
color: #fff;
text-decoration: none;
background-color: #dd0000 ;
}
.dropdown-menu > li > a {padding:8px; border-bottom:1px solid #e2e2e2;}
.navbar-default {
background-color: #fff;
padding:20px 0px 12px 0px;
font-weight:600;
letter-spacing:0px;
font-size:17px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-brand {
color: #676767;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #dd0000;
}
.navbar-default .navbar-text {
color: #676767;
}
.navbar-default .navbar-nav > li > a {
color: #676767;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #dd0000;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #dd0000;
background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #dd0000;
background-color: #ffffff;
}
.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #676767;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #676767;
}
.navbar-default .navbar-link {
color: #676767;
}
.navbar-default .navbar-link:hover {
color: #dd0000;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #676767;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #dd0000;
}
.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: #dd0000;
background-color: #ffffff;
}
}
h1 31
h2 28
h3 22
h4 19
