<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=Lato' rel='stylesheet'>
<nav class="navbar navbar-default navbar-fixed-top navcarbox TBpadding10" 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= "banner-sektion banner-padding ">
<div class="container text-center">
<div class="col-md-12">
<div class="banner-heading ">
<h2>make your day easier with Creativity </h2>
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</P>
<button type="button" class="btn btn-primary site-btn">Primary</button>
</div>
</div>
</div>
</div>
<div class="Features-section paddingTB60 bg-grey ">
<div class="container">
<div class="row ">
<div class="col-sm-6 col-md-3">
<div class="feature-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h4>Great Support</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est.</p>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-3">
<div class="feature-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h4>Pixal Perfect</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est. </p>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-3">
<div class="feature-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h4>Fully Responsive</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est. </p>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-3">
<div class="feature-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h4>Fully Responsive</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est. </p>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
<section id="Scta" class="section_padding30" style="background-image: url(https://images.pexels.com/photos/189092/pexels-photo-189092.jpeg?w=940&h=650&auto=compress&cs=tinysrgb); background-size: cover; background-position: 0% -12.7282px;">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-9 Scta-box">
<div class="Scta-title">Try Handcrafted design</div>
</div> <!-- End Col -->
<div class="col-sm-12 col-md-3 Scta-box ">
<button type="button" class="btn btn-primary site-btn">Primary</button>
</div>
</div>
</div>
</section>
<div class="about-us-section paddingTB60 ">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="about-us-content">
<h4 class="border">We Provide the best services </h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Sed, asperiores, expedita. Qui, explicabo temporibus! Atque ab
commodi corporis labore iure doloribus amet ducimus, laudantium
in placeat asperiores animi. Perferendis laudantium error
cupiditate pariatur ratione tempore, facere, assumenda maiores
labore obcaecati
</p>
</div>
</div> <!-- End Col -->
<div class="col-md-6">
<div class="about-us-content">
<h4 class="border">We Provide the best services </h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Sed, asperiores, expedita. Qui, explicabo temporibus! Atque ab
commodi corporis labore iure doloribus amet ducimus, laudantium
in placeat asperiores animi. Perferendis laudantium error
cupiditate pariatur ratione tempore, facere, assumenda maiores
labore obcaecati
</p>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
<div class="blog-section paddingTB60 bg-grey ">
<div class="container">
<div class="row">
<div class="col-md-12">
<h4 class="border">Recent Updates</h4>
</div>
</div>
<div class="row ">
<div class="col-sm-6 col-md-4">
<div class="blog-box">
<div class="blog-box-image">
<img src="https://images.pexels.com/photos/6384/woman-hand-desk-office.jpg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive" alt="">
</div>
<div class="blog-box-content paddingTLR35">
<h4>quis porta tellus dictum</h4>
<p>Phasellus lorem enim, luctus ut velit eget, convallis egestas eros.
Sed ornare ligula eget tortor tempor, quis porta tellus dictum.</p>
<a href="" class="btn btn-default about_btn">Read More</a>
</div>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-4">
<div class="blog-box">
<div class="blog-box-image">
<img src="https://images.pexels.com/photos/374897/pexels-photo-374897.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive" alt="">
</div>
<div class="blog-box-content paddingTLR35">
<h4>quis porta tellus dictum</h4>
<p>Phasellus lorem enim, luctus ut velit eget, convallis egestas eros.
Sed ornare ligula eget tortor tempor, quis porta tellus dictum.</p>
<a href="" class="btn btn-default about_btn">Read More</a>
</div>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-4">
<div class="blog-box">
<div class="blog-box-image">
<img src="https://images.pexels.com/photos/541522/pexels-photo-541522.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive" alt="">
</div>
<div class="blog-box-content paddingTLR35">
<h4>quis porta tellus dictum</h4>
<p>Phasellus lorem enim, luctus ut velit eget, convallis egestas eros.
Sed ornare ligula eget tortor tempor, quis porta tellus dictum.</p>
<a href="" class="btn btn-default about_btn">Read More</a>
</div>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
<section id="cta" class="section_padding" style="background-image: url(https://images.pexels.com/photos/189092/pexels-photo-189092.jpeg?w=940&h=650&auto=compress&cs=tinysrgb); background-size: cover; background-position: 0% -12.7282px;">
<div class="container">
<div class="row text-center">
<div class="col-sm-12 col-md-12">
<div class="cta-box">
<span class="glyphicon glyphicon-cog icon-s"></span>
<div class="cta-title">Try Handcrafted design</div>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</h4>
<button type="button" class="btn btn-primary site-btn">Primary</button>
</div>
</div> <!-- End Col -->
</div>
</div>
</section>
<div class="Features-section paddingTB60 ">
<div class="container">
<div class="row">
<div class="col-md-12">
<h4 class="border">Recent Updates</h4>
</div>
</div>
<div class="row ">
<div class="col-sm-6 col-md-4">
<div class="feature-box">
<h4><span class="glyphicon glyphicon-cog icon2"></span>Great Support</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est.</p>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-4">
<div class="feature-box">
<h4><span class="glyphicon glyphicon-cog icon2"></span>Great Support</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est. </p>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-4">
<div class="feature-box">
<h4><span class="glyphicon glyphicon-cog icon2"></span>Great Support</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est. </p>
</div>
</div> <!-- End Col -->
</div>
<div class="row ">
<div class="col-sm-6 col-md-4">
<div class="feature-box">
<h4><span class="glyphicon glyphicon-cog icon2"></span>Great Support</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est.</p>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-4">
<div class="feature-box">
<h4><span class="glyphicon glyphicon-cog icon2"></span>Great Support</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est. </p>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-4">
<div class="feature-box">
<h4><span class="glyphicon glyphicon-cog icon2"></span>Great Support</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est. </p>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="col-md-3 footer-one">
<h5>Information </h5>
<ul>
<li><a href="maintenance.html">Maintenance Tips</a></li>
<li><a href="contact.html">Locations</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Careers</a></li>
<li><a href="about.html">Partners</a></li>
</ul>
</div>
<div class="col-md-3 footer-two">
<h5>Information </h5>
<ul>
<li><a href="maintenance.html">Maintenance Tips</a></li>
<li><a href="contact.html">Locations</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Careers</a></li>
<li><a href="about.html">Partners</a></li>
</ul>
</div>
<div class="col-md-3 footer-three">
<h5>Information </h5>
<ul>
<li><a href="maintenance.html">Maintenance Tips</a></li>
<li><a href="contact.html">Locations</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Careers</a></li>
<li><a href="about.html">Partners</a></li>
</ul>
</div>
<div class="col-md-3 footer-four">
<h5>Information </h5>
<ul>
<li><a href="maintenance.html">Maintenance Tips</a></li>
<li><a href="contact.html">Locations</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Careers</a></li>
<li><a href="about.html">Partners</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-sm-6 ">
<div class="copyright-text">
<p>CopyRight © 2017 Digital All Rights Reserved</p>
</div>
</div> <!-- End Col -->
<div class="col-sm-6">
<div class="copyright-text pull-right">
<p>Designed by : </p>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
body {
font-family: 'Lato';font-size: 16px;
}
.bg-grey {
border-top: 1px solid rgba(0, 0, 0, .1);
border-bottom: 1px solid rgba(0, 0, 0, .1);
background-color: #f5f5f5;
}
.TBpadding10 {
padding-top:10px;
padding-bottom:10px;
}
.paddingTB60{
padding-top:60px;
padding-bottom:60px;
}
.paddingTLR35 {
padding: 35px 35px 35px;
}
.feature-box {
padding:15px;
margin-bottom: 30px;
}
.icon {
color : #ff8500;
font-size:35px;
padding-bottom:15px;
}
.icon2 {
color : #ff8500;
font-size:35px;
padding-right:10px;
}
.feature-box h4 {
font-size: 20px;
color: #333;
font-weight: 500;
}
/*About Css */
.border {
margin-bottom: 15px;
padding-bottom: 7px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
/*blog css */
.blog-box {
display: block;
width: 100%;
height: 460px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
background-color: #fff;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .13);
}
.blog-box-image {
overflow: hidden;
width: 100%;
height: 220px;
margin-bottom: 0px;
border-radius: 1px;
background-position: 50% 50%;
background-size: cover;
}
.blog-box-content h4 {
margin-bottom: 10px;
font-size: 16px;
line-height: 22px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #000;
}
.navbar-default {
background-color: #fff;
}
.navbar-default .navbar-nav>.active>a {
background-color: #fff;
}
.navbar-default .navbar-nav>.active>a:hover {
background-color: #fff;
}
.navbar-default .navbar-nav>.open>a:focus {
background-color: #fff;
}
/* Banner CSS */
.banner-padding {
padding-top:220px;
padding-bottom:100px;
background-color:#e07c0b;
}
.banner-heading h2 {
color:#fff;
font-size: 46px;
font-weight: 600;
text-transform: uppercase
}
.banner-heading P {
color:#fff;
padding-bottom:20px;
font-size: 19px;
font-weight: 400;
}
.site-btn {
border: 2px solid #fff;
padding:15px;
border-radius: 100px;
background-color: transparent;
width: 190px;
letter-spacing: 2px;
}
.site-btn:hover {
border: 2px solid #fff;
padding:15px;
border-radius: 100px;
background-color: #ff8500;
width: 190px;
letter-spacing: 2px;
}
/* Small CTA CSS */
#Scta {
position: relative;
}
.section_padding30 {
padding-top:30px;
padding-bottom:5px;
}
.Scta-box {
color: #fff;
}
.Scta-title {
font-size: 42px;
font-weight: bold;
display: block;
margin-bottom: 30px;
}
.Scta-box h4 {
font-weight: 400;
font-size: 18px;
color: #ffffff;
font-family: 'Lato', sans-serif;
}
.icon-s {
color : #ff8500;
padding:32px;
font-size:50px;
}
/* CTA CSS */
#cta {
position: relative;
}
.section_padding {
padding: 60px 0;
}
.cta-box {
color: #fff;
}
.cta-title {
font-size: 42px;
font-weight: bold;
display: block;
margin-bottom: 30px;
}
.cta-box h4 {
font-weight: 400;
font-size: 18px;
color: #ffffff;
font-family: 'Lato', sans-serif;
}
.icon-s {
color : #ff8500;
padding:32px;
font-size:50px;
}
/* Footer */
.footer {
position: relative;
background-color: #3d3d3d;
color: #c5c5c5;
z-index: 10001;
padding: 55px 0 40px;
}
.footer h5 {
font-size: 18px;
font-weight: 700;
font-family: 'Open Sans', sans-serif;
color: #fff;
position: relative;
padding-bottom: 16px;
}
.footer h5:after {
content: '';
display: block;
margin: 15px 0 0;
width: 40px;
height: 1px;
background-color: #ff8500;
}
.footer ul {
list-style: none;
line-height: 1.8em;
padding-left:0px;
}
.footer ul a {
color:#c5c5c5;
}
.footer ul a:hover {
color:#ff8500;
}
/*footer bottom */
.footer-bottom {
padding-top: 15px;
padding-bottom: 15px;
border-top: 1px none #f5f5f5;
background: #1b1d1f;
}
.copyright-text p {
color: #777;
margin-top: 9px;
margin-bottom: 0;
font-size:12px;
}
padding: 40px 20px 35px 15px;
