<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">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage"><img src="http://themeinnovation.com/demo2/html/build-up/img/home1/logo1.png" class="img-responsive"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#myPage">HOME</a></li>
<li><a href="#band">ABOUT</a></li>
<li><a href="#tour">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#team">TEAM</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://img6a.flixcart.com/www/promos/new/20160406-120420-978x450-1.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://www.shopickr.com/wp-content/uploads/2015/12/flipkart-car-media-player-displays-double-din-sony-pioneer-speakers-2015.png" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://img5a.flixcart.com/www/promos/new/20150507-145518-top-banner.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://img5a.flixcart.com/www/promos/new/20150507-145518-top-banner.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="aboutus-section">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="aboutus">
<h2 class="aboutus-title">About Us</h2>
<p class="aboutus-text">Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in.</p>
<p class="aboutus-text">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem</p>
<a class="aboutus-more" href="#">read more</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="aboutus-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/about1.jpg" alt="">
</div>
</div>
<div class="col-md-5 col-sm-6 col-xs-12">
<div class="feature">
<div class="feature-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="feature-content">
<h4>Work with heart</h4>
<p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in.</p>
</div>
</div>
</div>
<div class="feature-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="feature-content">
<h4>Reliable services</h4>
<p>Donec vitae sapien ut libero venenatis faucibu. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt</p>
</div>
</div>
</div>
<div class="feature-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="feature-content">
<h4>Great support</h4>
<p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="services-section black-trans-bg">
<div class="services-section-banner"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-4 col-sm-12 col-xs-12">
<div class="services-head">
<h2 class="services-title">Our Services</h2>
<span class="services-title-border"></span>
<p class="services-text">Dramatically maintain clicks and mortar solutions without functional</p>
</div>
<div class="services-content">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="service-2">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="servicesB-content">
<h4>Fuel and Gas Carrier</h4>
<p>Interactively procrastinate high-payoff content without backward compatible data. Quickly cultivate optimal</p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="servicesB-content">
<h4>Consumer Goods Packaging</h4>
<p>Interactively procrastinate high-payoff content without backward compatible data. Quickly cultivate optimal</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="service-2">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="servicesB-content">
<h4>Goods Tracking Support</h4>
<p>Interactively procrastinate high-payoff content without backward compatible data. Quickly cultivate optimal</p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="servicesB-content">
<h4>Reaching Large Destinations</h4>
<p>Interactively procrastinate high-payoff content without backward compatible data. Quickly cultivate optimal</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cta-section black-trans-bg">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
<div class="cta-title">
<h2>Do you want to be a need a great project?</h2>
<a href="#">Subscribe Now</a>
</div>
</div>
</div>
</div>
</div>
<div class="y-us-section">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
<div class="y-us-head">
<div class="y-us-title">
<h2>Why choose us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim </p>
<span class="y-us-title-border"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-content">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>safety first</h4>
<p>Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior del</p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>CLEAN SURFACE</h4>
<p>Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior del</p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>PROFESSIONAL</h4>
<p>Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior del</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>sustainability</h4>
<p>Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior del</p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>MODERN PAINTING</h4>
<p>Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior del</p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>home decor</h4>
<p>Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior del</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="subscribe-section bg-with-black">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="subscribe-head">
<h2>DO you need more tips?</h2>
<p>Sign up free and get the latest tips.</p>
<div class="form-section">
<input placeholder="Your Email..." name="EMAIL" id="mce-EMAIL" type="email">
<input value="Yes. I want!" name="subscribe" id="mc-embedded-subscribe" type="submit">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer-section bg-with-black">
<div class="footer-top-section">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="footer-head">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/logo2.png" alt="">
<ul class="footer-list">
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Finacial Planning</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Investments Management</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span>Taxes Planning</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="footer-head">
<h3 class="footer-title">Important Link</h3>
<ul class="footer-list">
<li><a href="#"><i class="fa fa-square"></i>Finacial Planning</a></li>
<li><a href="#"><i class="fa fa-square"></i>Investments Management</a></li>
<li><a href="#"><i class="fa fa-square"></i>Taxes Planning</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="footer-head">
<h3 class="footer-title">Important Link</h3>
<ul class="footer-list">
<li><a href="#"><i class="fa fa-square"></i>Finacial Planning</a></li>
<li><a href="#"><i class="fa fa-square"></i>Investments Management</a></li>
<li><a href="#"><i class="fa fa-square"></i>Taxes Planning</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="footer-head">
<h3 class="footer-title">Contact Us</h3>
<ul class="footer-list">
<li>Address: 8th floor, 379 Hudson St, New York, NY 10018</li>
<li>Phone: (+1) 96 716 6879</li>
<li>Email: contact@site.com</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom-area">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="footer-bottom">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="footerB-copyright">
<p>Copyright © 2017 Designed by EXchange. All rights reserved.</p>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="footerB-links">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Term & Conditions</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Sites Map</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
/* Navigation SEction */
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.75);
}
.navbar ul li a {
color: red;
display: inline-block;
font-size: 16px;
font-weight: 480;
letter-spacing: 1px;
line-height: 20px;
padding: 30px 28px 18px;
text-transform: uppercase;
}
/* Subscribe-Section starts here */
.subscribe-section {
background: rgba(0, 0, 0, 0) url("https://images.pexels.com/photos/257740/pexels-photo-257740.jpeg?w=940&h=650&auto=compress&cs=tinysrgb") no-repeat scroll left top / cover;
padding: 60px 0 65px;
}
.subscribe-head h2 {
color: #fff;
font-size: 30px;
letter-spacing: 0;
line-height: 30px;
margin: 0 0 13px;
text-transform: uppercase;
}
.subscribe-head p {
color: #fff;
font-size: 18px;
line-height: 22px;
margin: 0 0 39px;
}
.subscribe-head {
text-align: center;
}
.form-section input[type="email"] {
border: 0 none;
border-radius: 25px;
color: #9b9b9b;
font-size: 16px;
font-style: normal;
height: 51px;
letter-spacing: 0;
text-align: center;
width: 460px;
}
.form-section input[type="submit"] {
background: #fdb801 none repeat scroll 0 0;
border: 0 none;
border-radius: 25px;
color: #fff;
height: 51px;
letter-spacing: 0;
margin-left: -60px;
padding: 0 58px;
}
/* News-Section Starts here */
.news-head p {
margin-top:5px;
font-size : 15px;
line-height: 22px;
}
.news-head a {
font-size: 18px;
text-transform: uppercase;
color:#000;
}
/* Y-US Section */
.y-us-section {
padding: 82px 0 82px;
}
.y-us-head {
text-align: center;
margin: 0 0 91px;
}
.y-us-title h2 {
color: #000;
font-size: 30px;
letter-spacing: 0;
line-height: 32px;
text-transform: uppercase;
margin-bottom: 6px;
}
.y-us-title > p {
color: #777777;
line-height: 22px;
}
.y-us-title-border {
background: #ffae11 none repeat scroll 0 0;
border-radius: 2px;
display: inline-block;
height: 3px;
position: relative;
width: 50px;
}
.service-3 .service-box {
margin-bottom: 18px;
}
.service-3 .service-box .iconset {
float: left;
text-align: center;
width: 25%;
}
.service-3 .service-box .iconset i {
color: #000;
font-size: 44px;
}
.service-3 .service-box .y-us-content {
float: left;
width: 75%;
}
service-3 .service-box .y-us-content h4 {
color: #3a3a3a;
font-size: 18px;
letter-spacing: 0;
line-height: 22px;
margin: 14px 0 12px;
text-transform: uppercase;
}
.service-3 .service-box .y-us-content p {
color: #777777;
font-size: 13px;
font-weight: 300;
line-height: 24px;
}
.icon {
color : #f4b841;
padding:0px;
font-size:40px;
border: 1px solid #fdb801;
border-radius: 100px;
color: #fdb801;
font-size: 28px;
height: 70px;
line-height: 70px;
text-align: center;
width: 70px;
}
/* CTA Section Starts here */
.cta-section {
background: rgb(255, 207, 79);
padding: 55px 0;
}
.black-trans-bg {
position: relative;
}
.black-trans-bg::before {
background: #000 none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
opacity: 0.3;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
.cta-title h2 {
color: #fff;
display: inline-block;
font-size: 26px;
line-height: 30px;
padding: 16px 0;
text-transform: uppercase;
}
.cta-title a {
margin-top:26px;
border: 1px solid #fff;
color: #fff;
display: inline-block;
float: right;
font-size: 16px;
font-weight: 700;
letter-spacing: 0;
padding: 9px 18px;
text-transform: uppercase;
}
/*CTA Section */
/* Services Section Starts here */
.services-section {
background: rgba(0, 0, 0, 0) url("https://images.pexels.com/photos/326410/pexels-photo-326410.jpeg?w=940&h=650&auto=compress&cs=tinysrgb") no-repeat scroll left top / cover;
padding: 104px 0 113px;
position: relative;
}
.services-section::before {
opacity: 0.8;
}
.black-trans-bg::before {
background: #000 none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
opacity: 0.3;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
.services-section-banner {
background-image: url("http://themeinnovation.com/demo2/html/build-up/img/home1/service-banner.png");
background-position: left bottom;
background-repeat: no-repeat;
background-size: contain;
bottom: 0;
height: 100%;
left: 1%;
position: absolute;
width: 34%;
}
.services-head {
margin: 0 0 76px;
}
.services-head .services-title {
color: #fff;
font-size: 30px;
font-weight: 500;
letter-spacing: 0;
line-height: 32px;
position: relative;
text-transform: uppercase;
margin: 0 0 5px;
}
.services-title-border {
background: #dadada none repeat scroll 0 0;
display: inline-block;
height: 1px;
margin-left: 25px;
position: relative;
width: 120px;
}
.services-title-border::before {
background: #fdb801 none repeat scroll 0 0;
content: "";
height: 1px;
left: -25px;
position: absolute;
top: 0;
width: 20px;
}
.services-head .services-text {
color: #fff;
font-size: 16px;
line-height: 22px;
margin: 7px 0 0;
}
.service-2 .service-box {
margin: 0 0 72px;
}
.service-2 .service-box .iconset {
float: left;
width: 24%;
}
.service-2 .service-box .iconset i {
color: #fff;
font-size: 30px;
height: 70px;
line-height: 70px;
position: relative;
text-align: center;
width: 82px;
}
.service-2 .service-box .servicesB-content {
float: left;
padding-left: 8px;
width: 76%;
}
.service-2 .service-box .servicesB-content h4 {
color: #fff;
font-size: 18px;
letter-spacing: 0;
line-height: 22px;
margin: 0 0 14px;
}
.service-2 .service-box .servicesB-content p {
color: #fff;
line-height: 24px;
}
.icon {
color : #f4b841;
padding:0px;
font-size:40px;
border: 1px solid #fdb801;
border-radius: 100px;
color: #fdb801;
font-size: 28px;
height: 70px;
line-height: 70px;
text-align: center;
width: 70px;
}
/* About Section Starts here */
.aboutus-section {
padding: 90px 0;
}
.aboutus-title {
font-size: 30px;
letter-spacing: 0;
line-height: 32px;
margin: 0 0 39px;
padding: 0 0 11px;
position: relative;
text-transform: uppercase;
color: #000;
}
.aboutus-title::after {
background: #fdb801 none repeat scroll 0 0;
bottom: 0;
content: "";
height: 2px;
left: 0;
position: absolute;
width: 54px;
}
.aboutus-text {
color: #606060;
font-size: 13px;
line-height: 22px;
margin: 0 0 35px;
}
a:hover, a:active {
color: #ffb901;
text-decoration: none;
outline: 0;
}
.aboutus-more {
border: 1px solid #fdb801;
border-radius: 25px;
color: #fdb801;
display: inline-block;
font-size: 14px;
font-weight: 700;
letter-spacing: 0;
padding: 7px 20px;
text-transform: uppercase;
}
.feature .feature-box .iconset {
background: #fff none repeat scroll 0 0;
float: left;
position: relative;
width: 18%;
}
.feature .feature-box .iconset::after {
background: #fdb801 none repeat scroll 0 0;
content: "";
height: 150%;
left: 43%;
position: absolute;
top: 100%;
width: 1px;
}
.feature .feature-box .feature-content h4 {
color: #0f0f0f;
font-size: 18px;
letter-spacing: 0;
line-height: 22px;
margin: 0 0 5px;
}
.feature .feature-box .feature-content {
float: left;
padding-left: 28px;
width: 78%;
}
.feature .feature-box .feature-content h4 {
color: #0f0f0f;
font-size: 18px;
letter-spacing: 0;
line-height: 22px;
margin: 0 0 5px;
}
.feature .feature-box .feature-content p {
color: #606060;
font-size: 13px;
line-height: 22px;
}
.icon {
color : #f4b841;
padding:0px;
font-size:40px;
border: 1px solid #fdb801;
border-radius: 100px;
color: #fdb801;
font-size: 28px;
height: 70px;
line-height: 70px;
text-align: center;
width: 70px;
}
/* Footer Section starts here */
footer.footer-section {
background: rgba(0, 0, 0, 0) url("https://images.pexels.com/photos/316902/pexels-photo-316902.jpeg?w=940&h=650&auto=compress&cs=tinysrgb") no-repeat scroll left top / cover;
padding: 60px 0 50px;
}
.bg-with-black {
position: relative;
}
.footer-top-section {
margin: 0 0 47px;
}
.footer-head > img {
margin: 0 0 7px;
}
.footer-head ul.footer-list {
list-style: outside none none;
padding-left: 0;
}
.footer-head ul.footer-list li, .footer-head ul.footer-list li a {
color: #e5e5e5;
display: block;
font-size: 14px;
letter-spacing: 0;
line-height: 36px;
}
.footer-head ul.footer-list {
list-style: outside none none;
padding-left: 0;
}
.footer-title {
color: #ffffff;
font-weight: 500;
letter-spacing: 0;
margin: 0 0 20px;
}
.footerB-links {
text-align: right;
}
.footerB-links ul li a {
color: #e5e5e5;
display: block;
font-size: 14px;
letter-spacing: 0;
}
.footerB-links ul {
list-style: outside none none;
padding: 0;
}
.footerB-links ul li {
display: inline-block;
margin-left: 28px;
}
.footerB-copyright p {
color: #aaaaaa;
line-height: 30px;
}
body {
font-family: 'Roboto';font-size: 22px;
}
