<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-banner hidden-xs"style="margin-top:70px">
<div class="container">
<div class="row text-center ">
<div class="col-md-offset-2 col-md-8 col-sm-12 text-center">
<div class="lg-text">
<h1>Lorem ipsum dolor in India</h1>
<p>When you’re on top of your money, life is good. We help you effortlessly manage your finances in one place.</p>
<button type="button" class="btn btn-primary site-btn">CONTACT US</button>
</div>
</div>
</div>
</div>
</div>
<div class="stat-area area-padding">
<div class="container">
<div class="row text-center">
<div class="stat-box">
<div class="col-md-4">
<i class="fa fa-flask"></i>
<h3> <span>Budgets?</span> You betcha </h3>
<p>Easily create budgets, and see our suggestions based on your spending.</p>
</div>
<div class="col-md-4">
<i class="fa fa-lightbulb-o"></i>
<h3> <span>2 Days</span> Free Delivery</h3>
<p>Easily create budgets, and see our suggestions based on your spending.</p>
</div>
<div class="col-md-4">
<i class="fa fa-link"></i>
<h3> <span>Free</span> Support </h3>
<p>Easily create budgets, and see our suggestions based on your spending.</p>
</div>
</div>
</div>
</div>
</div>
<div class="personalize-area area-padding2">
<div class="container">
<div class="row">
<div class="personalize-box">
<div class="col-md-6">
<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 class="col-md-6">
<img src="https://www.mint.com/sites/default/files/bills_module.png?timestamp=1484865810">
</div>
</div>
</div>
</div>
</div>
<div class="budget-area area-padding2">
<div class="container">
<div class="row">
<div class="budget-box">
<div class="col-md-6">
<img src="https://www.mint.com/sites/default/files/bills_module.png?timestamp=1484865810">
</div>
<div class="col-md-6">
<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><i class="fa fa-stop"></i>Create budgets that make sense today and set you up for success tomorrow. </li>
<li><i class="fa fa-stop"></i>Get alerts and schedule payments on the spot.</li>
<li><i class="fa fa-stop"></i>Say goodbye to late fees.</li>
<li><i class="fa fa-stop"></i>Stop logging into multiple sites.</li>
<li><i class="fa fa-stop"></i>Deliver payments fast.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="powerful-area area-padding">
<div class="container">
<div class="row">
<div class="powerful-box">
<div class="col-md-offset-2 col-md-8 col-sm-12 text-center">
<h3> Intuitive features, powerful results </h3>
<p>Mint is versatile enough to help anyone’s money make sense without much effort. There’s no wrong way to use it, and nothing to lose getting started. You’ll be surprised how life-changing something so simple can be.</p>
</div>
</div>
</div>
</div>
</div>
<div class="services-area area-padding">
<div class="container">
<div class="row text-center">
<div class="services-box">
<div class="col-md-4">
<div class="services-img">
<img src="https://www.mint.com/sites/default/files/woman-holding-mobile.jpg?timestamp=1418704612">
</div>
<h4>Website Design</h4>
<p>Create budgets you can actually stick to, and see how you’re spending your money.</p>
</div>
<div class="col-md-4">
<div class="services-img">
<img src="https://www.mint.com/sites/default/files/woman-holding-mobile.jpg?timestamp=1418704612">
</div>
<h4>Website Development</h4>
<p>Create budgets you can actually stick to, and see how you’re spending your money.</p>
</div>
<div class="col-md-4">
<div class="services-img">
<img src="https://www.mint.com/sites/default/files/woman-holding-mobile.jpg?timestamp=1418704612">
</div>
<h4>Search Engine Optimization</h4>
<p>Create budgets you can actually stick to, and see how you’re spending your money.</p>
</div>
</div>
</div>
<div class="margin-b-40"></div>
<div class="row text-center">
<div class="services-box">
<div class="col-md-4">
<div class="services-img">
<img src="https://www.mint.com/sites/default/files/woman-holding-mobile.jpg?timestamp=1418704612">
</div>
<h4>Digital Marketing</h4>
<p>Create budgets you can actually stick to, and see how you’re spending your money.</p>
</div>
<div class="col-md-4">
<div class="services-img">
<img src="https://www.mint.com/sites/default/files/woman-holding-mobile.jpg?timestamp=1418704612">
</div>
<h4>Video Production</h4>
<p>Create budgets you can actually stick to, and see how you’re spending your money.</p>
</div>
<div class="col-md-4">
<div class="services-img">
<img src="https://www.mint.com/sites/default/files/woman-holding-mobile.jpg?timestamp=1418704612">
</div>
<h4>Email Marketing</h4>
<p>Create budgets you can actually stick to, and see how you’re spending your money.</p>
</div>
</div>
</div>
</div>
</div>
<div class="signup-area area-padding">
<div class="container">
<div class="row text-center">
<div class="signup-box">
<div class="col-md-offset-2 col-md-8 col-sm-12 text-center">
<h2> Sign up for Services today </h2>
<p>From budgets and bills to free credit score and more, you’ll discover the effortless way to stay on top of it all.</p>
<button type="button" class="btn btn-primary site-btn">SIGNUP FREE</button>
<button type="button" class="btn btn-primary site-btn">CALL NOW</button>
</div>
</div>
</div>
</div>
</div>
<div class="icons-area area-padding">
<div class="container">
<div class="row text-center">
<div class="icons-area-box">
<div class="col-md-4">
<i class="fa fa-code"></i>
<h3>100% Responsive Design</h3>
<p>Get the best in the market, You can customise your pages according to your needs.</p>
</div>
<div class="col-md-4">
<i class="fa fa-code"></i>
<h3>100% Responsive Design</h3>
<p>Get the best in the market, You can customise your pages according to your needs.</p>
</div>
<div class="col-md-4">
<i class="fa fa-code"></i>
<h3>100% Responsive Design</h3>
<p>Get the best in the market, You can customise your pages according to your needs.</p>
</div>
<div class="col-md-4">
<i class="fa fa-code"></i>
<h3>100% Responsive Design</h3>
<p>Get the best in the market, You can customise your pages according to your needs.</p>
</div>
<div class="col-md-4">
<i class="fa fa-code"></i>
<h3>100% Responsive Design</h3>
<p>Get the best in the market, You can customise your pages according to your needs.</p>
</div>
<div class="col-md-4">
<i class="fa fa-code"></i>
<h3>100% Responsive Design</h3>
<p>Get the best in the market, You can customise your pages according to your needs.</p>
</div>
<div class="col-md-4">
<i class="fa fa-code"></i>
<h3>100% Responsive Design</h3>
<p>Get the best in the market, You can customise your pages according to your needs.</p>
</div>
<div class="col-md-4">
<i class="fa fa-code"></i>
<h3>100% Responsive Design</h3>
<p>Get the best in the market, You can customise your pages according to your needs.</p>
</div>
<div class="col-md-4">
<i class="fa fa-code"></i>
<h3>100% Responsive Design</h3>
<p>Get the best in the market, You can customise your pages according to your needs.</p>
</div>
</div>
</div>
</div>
</div>
<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 area-padding">
<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>
<div class="footer-area area-padding">
<div class="container">
<div class="row">
<div class="footer-box">
<div class="col-md-offset-2 col-md-8 col-sm-12 text-center">
<div class="footer-logo">
<img src="https://image.flaticon.com/icons/png/128/174/174855.png">
</div>
<ul class="list-inline">
<li><a href="#">How it works</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
<p>services provided by Payments Inc. under applicable licenses.</p>
<span>© 2018 Services, Inc. All rights reserved.
Terms, conditions, features, availability, pricing, fees, service and support options subject to change without notice.</span>
</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 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:20px;}
.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;
}
}
https://static.pexels.com/photos/87256/pexels-photo-87256.jpeg
