<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="powerful-area header-margin">
<div class="container">
<div class="row">
<div class="powerful-box">
<div class="col-md-offset-2 col-md-8 col-sm-12 text-center">
<h2> Intuitive features, powerful results </h2>
<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="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;}
.header-margin{margin-top:90px;}
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;
}
}
