<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 Slab' 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-overlay ">
<div class="container text-center">
<div class="col-md-12">
<div class="banner-heading ">
<span><p> From the bottom of your heart</p></span>
<h2>Just take care of your work </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 text-center ">
<div class="col-sm-6 col-md-4">
<div class="feature-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h4>Pixal Perfect</h4>
<p>We have over 15 years of experience </p>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-4">
<div class="feature-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h4>Pixal Perfect</h4>
<p>We have over 15 years of experience </p>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-4">
<div class="feature-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h4>Pixal Perfect</h4>
<p>We have over 15 years of experience </p>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
<div class="about-us-section paddingTB60 ">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://images.pexels.com/photos/40064/theme-candid-portraits-smile-woman-girl-40064.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive" alt="">
</div><!-- End Col -->
<div class="col-md-6">
<div class="about-us-content">
<div class="border"></div>
<h2>We Provide the best services </h2>
<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>
<a href="#" class="btn btn-default site-btn2">Contact Us</a>
</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">
<div class="site-heading">
<div class="border "></div>
<h3>Products Features</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</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/128817/pexels-photo-128817.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. </p>
</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/160846/french-bulldog-summer-smile-joy-160846.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. </p>
</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/128817/pexels-photo-128817.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. </p>
</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/350428/pexels-photo-350428.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. </p>
</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/319975/pexels-photo-319975.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. </p>
</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/298062/pexels-photo-298062.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. </p>
</div>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
<section id="counter" class="section_padding" style="background-image: url(#">
<div class="container">
<div class="row text-center">
<div class="col-sm-6 col-md-3">
<div class="counter-box">
<span class="glyphicon glyphicon-cog icon-s"></span>
<div class="counter-digit">210</div>
<h4>Happy Customers</h4>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-3">
<div class="counter-box">
<span class="glyphicon glyphicon-cog icon-s"></span>
<div class="counter-digit">100%</div>
<h4>Satisfied Customers</h4>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-3">
<div class="counter-box">
<span class="glyphicon glyphicon-cog icon-s"></span>
<div class="counter-digit">069</div>
<h4>Problems Fixed</h4>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-3">
<div class="counter-box">
<span class="glyphicon glyphicon-cog icon-s"></span>
<div class="counter-digit">69</div>
<h4>COFFEE</h4>
</div>
</div> <!-- End Col -->
</div>
</div>
</section>
<div class="special-section paddingTB60">
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="site-heading">
<div class="site-heading">
<div class="border "></div>
<h3>Products Features</h3>
<p>he doctors and staff at Pet Care Veterinary Hospital have years of experience treating a variety of reptiles including Bearded Dragons, Geckos, Snakes and Tortoises. Our hospital offers physical exams, vaccinations, nutrition, behavioral and environmental enrichment information for your pet ferret.</p>
</div>
</div>
<div class="row text-center">
<div class="col-xs-6">
<div class="inside-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h6><a href="#">Home Delivery</a></h6>
</div>
</div>
<div class="col-xs-6">
<div class="inside-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h6><a href="#">QUALITY Pet</a></h6>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="site-heading">
<div class="site-heading">
<div class="border "></div>
<h3>Products Features</h3>
<p>he doctors and staff at Pet Care Veterinary Hospital have years of experience treating a variety of reptiles including Bearded Dragons, Geckos, Snakes and Tortoises. Our hospital offers physical exams, vaccinations, nutrition, behavioral and environmental enrichment information for your pet ferret.</p>
</div>
</div>
<div class="row text-center">
<div class="col-xs-6">
<div class="inside-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h6><a href="#">Home Delivery</a></h6>
</div>
</div>
<div class="col-xs-6">
<div class="inside-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h6><a href="#">QUALITY Pet</a></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="col-md-3 footer-one">
<h5>About Us </h5>
<p><span class="p-color">Lorem Ipsum</span> was established in 2017 by Pet business veterans, Rod Davies and Matthew Levington, the journey began when founders Matthew Levington and Rod Davies, met up in 2017 over a beer</p>
</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>
/* Generic CSS */
body {
font-family: 'Roboto Slab';font-size: 16px;
line-height: 35px;
}
.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: 15px 15px 15px;
}
.icon {
color : #cd0e00;
font-size:55px;
padding-bottom:25px;
}
.icon2 {
color : #ff8500;
font-size:35px;
padding-right:10px;
}
.border {
margin-bottom: 15px;
padding-bottom: 7px;
border-bottom: 2px solid #cd0e00;
width:30%;
}
.site-btn {
border: 2px solid #fff;
padding:15px;
border-radius: 100px;
background-color: transparent;
width: 190px;
letter-spacing: 2px;
}
.site-btn2 {
border: 2px solid #fff;
padding:15px;
border-radius: 100px;
background-color: #e5e5e5;
width: 190px;
letter-spacing: 2px;
}
.site-btn:hover {
border: 2px solid #fff;
padding:15px;
border-radius: 100px;
background-color: #cd0e00;
width: 190px;
letter-spacing: 2px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
/* Span Text Class */
.p-color {
color: #e53031;
}
/*Navigation Css */
.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;
}
.dropdown-menu > li > a:hover {
color: #fff;
text-decoration: none;
background-color: #cd0e00;
}
/* Banner CSS */
.banner-overlay {
background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("https://images.pexels.com/photos/8081/nature-animal-dog-pet.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #fff;
padding-top: 200px;
padding-bottom:100px;
}
.banner-heading h2 {
color:#cd0e00;
font-size: 46px;
font-weight: 600;
text-transform: uppercase;
font-style: italic;
}
.banner-heading P {
color:#fff;
padding-bottom:20px;
font-size: 19px;
font-weight: 400;
}
.banner-heading span p {
color:#cd0e00;
}
/* Feature CSS */
.feature-box h4 {
font-weight: 600;
font-size: 22px;
text-transform: none;
color: #121212;
}
.feature-box p {
color: #797979;
margin-top: 5px;
}
/* About CSS */
.about-us-content {
padding-top: 10%;
line-height: 35px;
}
.about-us-content h2 {
text-transform: uppercase;
font-size: 25px;
margin-bottom: 17px;
font-weight: 600;
}
/* Site-Heading */
.site-heading h3 {
text-transform: uppercase;
font-size: 25px;
margin-bottom: 17px;
font-weight: 600;
}
/*blog css */
.blog-box {
display: block;
width: 100%;
height: 360px;
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:hover {
display: block;
width: 100%;
height: 360px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
background-color: #cd0e00;
color:#fff;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .13);
transition: .75s;
}
.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;
}
#counter {
position: relative;
}
.section_padding {
padding: 30px 0;
background-color:#cd0e00;
}
.counter-box {
color: #fff;
}
.counter-digit {
font-size: 52px;
font-weight: bold;
display: block;
margin-bottom: 25px;
}
.counter-box h4 {
font-weight: 600;
font-size: 20px;
color: #ffffff;
text-transform: uppercase;
}
.icon-s {
color : #fff;
padding:25px;
font-size:40px;
}
/* Special CSS */
.inside-box {
border: 1px solid #cd0e00 ;
padding:25px;
}
.inside-box:hover {
background-color: #e2e2e2;
color:white;
transition:.75s;
}
.inside-box h6 a {
font-size : 18px;
color : #000;
text-transform: uppercase;
}
/* Footer */
.footer {
position: relative;
background-color: #5b0000;
color: #c5c5c5;
z-index: 10001;
padding: 55px 0 40px;
line-height: 30px;
font-size:auto;
}
.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: 80px;
height: 3px;
background-color: #cd0e00;
}
.footer ul {
list-style: none;
line-height: 2.8em;
padding-left:0px;
}
.footer ul a {
color:#c5c5c5;
}
.footer ul a:hover {
color:#cd0e00;
}
/*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;
}
.dropdown-menu > li > a:hover {
color: #fff;
text-decoration: none;
background-color: #cd0e00;
}
