<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<!DOCTYPE HTML>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<title>jQuery Tikslus360 Demos</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/tikslus360.js"></script>
<script type="text/javascript" src="js/rainbow.min.js"></script>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/tikslus360.css" />
<link rel="stylesheet" href="css/github.css" />
<style>
.row {
margin-right: -0px;
margin-left: -0px;
}
/* Navigation bar CSS starts */
.navbar
{
margin-bottom: 0px;
}
.navbar {background-color: #0B0B0B !important; border-color: transparent; border-radius: 0%;
box-shadow: 0 0 6px 3px rgba(0,0,0,.35); }
/** Default navbar **/
.navbar-default .navbar-nav>li>a { padding-top: 25px; padding-bottom: 25px; min-height: 69px; color: #A4A4A4;}
.navbar-default .navbar-nav > li > a:hover {color: #DDBE42;}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
color: #DDBE42;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
color: #DDBE42;
}
.navbar-default .navbar-nav .open .dropdown-menu {
background-color: #060606 !important;
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a{
color: #585858 !important;
padding: 12px 12px 12px 12px !important;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #DDBE42 !important;
background-color: transparent !important;
}
.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: #DDBE42 !important;
background-color: transparent !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
border-color: transparent;
background-color: transparent;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: transparent;
}
.navbar-form { padding-top: 10px !important;}
.navbar-text { margin-top: 25px; }
.navbar-default .navbar-text { color: #CBAF3B;}
.navbar-default .navbar-brand {
font-size: 21px;
color: #CBAF3B;
margin-top: 10px;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #DDBE42;
}
/* Navigation bar CSS ends */
/* Title css starts */
h1 {
font-size: 5vw;
}
.linear-wipe {
text-align: center;
background: -webkit-linear-gradient(left, #FFF 20%, #FF0 40%, #FF0 60%, #FFF 80%);
background: linear-gradient(to right, #FFF 20%, #FF0 40%, #FF0 60%, #FFF 80%);
background-size: 200% auto;
color: #000;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: shine 1s linear infinite;
animation: shine 1s linear infinite;
}
@-webkit-keyframes shine {
to {
background-position: 200% center;
}
}
@keyframes shine {
to {
background-position: 200% center;
}
}
/* Title css ends */
/* Offer css starts */
.wrapper {
text-align:center;
font-size:20px;
color:#fff;
position:relative;
}
/*
.line {
width:1px;
height:100px;
color:#000;
background:#000;
margin-left:250px;
animation: line 5s ease-in-out 2s infinite;
} */
.circle-2 {
width: 1px;
height: 200px;
background: red;
position:absolute;
top:0;
left:100px;
}
.circle {
line-height:100px;
width: 100px;
border-radius:50px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s ease-in-out 2s infinite;
position:absolute;
top:100px;
left:50px;
}
/* Chrome, Safari, Opera */
@keyframes line {
0% { height:100px}
50% { height:200px}
100% { height:100px}
}
@keyframes mymove {
0% { top:100px}
50% { top:200px}
100% { top:100px}
}
/* Offer css ends */
/* Box css starts */
.banner-overlay {
background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.7));
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #fff;
padding-top: 44px;
padding-bottom:100px;
}
.banner-heading h2 {
color:#fff ;
font-size: 56px;
font-weight: 600;
text-transform:uppercase;
}
.banner-heading P {
color:#fff;
padding-bottom:20px;
font-size: 19px;
font-weight: 400;
}
.banner-heading span p {
color:#cd0e00;
}
@media only screen and (max-width: 640px) {
.banner-heading h2{
font-size: 33px;
}}
/* Box css ends */
/* Home About-us section starts */
body {
font-family: 'Amaranth';font-size: 14px;
}
.about-section {
padding: 1em 0;
}
.site-title {
padding: 2em 0;
}
.site-title h3 {
font-size: 3.5em;
color: #14B9D5;
font-family: 'Marvel-Regular';
font-weight: 700;
}
.site-title p {
font-size: 1.1em;
color: #333333;
line-height: 1.8em;
margin-top: 0.5em;
}
.about-inner-column h4 {
font-size: 2.5em;
color: #FFD001;
font-family: 'Marvel-Regular';
}
.about-inner-column p {
font-size: 1.1em;
color: #333333;
line-height: 1.8em;
margin: 1em 0 0;
}
.about-inner-column ul li a {
color: #333333;
font-size: 1.1em;
padding-left: 2em;
}
.about-right img {
width: 100%;
}
/* Home About-us section ends */
/* Home Services section starts */
.services-section {
background: rgba(0, 0, 0, 0) url("http://cardea.lu/wp-content/uploads/2016/11/maserati-quattroporte-gt-s-01.jpg") no-repeat scroll left top / cover;
padding: 53px 0 28px;
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;
}
/* Home Services section ends */
/* Car Auto Rotate Services section starts */
.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;
}
/* Car Auto Rotate Services section ends */
/* Testimonial section starts */
.fa {
color: #fdb801;
}
#testimonial4{
overflow: hidden;
min-height: 375px;
position: relative;
background:url("http://www.newedentravel.com/car-rental/images/backround/rentalbg1.jpg");
background-position:center;
}
#testimonial4 .carousel-inner{
width: 75%;
margin: auto;
}
#testimonial4 .carousel-inner:hover{
cursor: -moz-grab;
cursor: -webkit-grab;
}
#testimonial4 .carousel-inner:active{
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
#testimonial4 .carousel-inner .item{
overflow: hidden;
}
.testimonial4_indicators .carousel-indicators{
left: 0;
margin: 0;
width: 100%;
font-size: 0;
height: 20px;
bottom: 15px;
padding: 0 5px;
cursor: e-resize;
overflow-x: auto;
overflow-y: hidden;
position: absolute;
text-align: center;
white-space: nowrap;
}
.testimonial4_indicators .carousel-indicators li{
padding: 0;
width: 10px;
height: 10px;
border: none;
text-indent: 0;
margin: 2px 3px;
cursor: pointer;
display: inline-block;
background: #fdb801;
-webkit-border-radius: 100%;
border-radius: 100%;
}
.testimonial4_indicators .carousel-indicators .active{
padding: 0;
width: 10px;
height: 10px;
border: none;
margin: 2px 3px;
background-color: #fff;
-webkit-border-radius: 100%;
border-radius: 100%;
}
.testimonial4_indicators .carousel-indicators::-webkit-scrollbar{
height: 3px;
}
.testimonial4_indicators .carousel-indicators::-webkit-scrollbar-thumb{
background: #eeeeee;
-webkit-border-radius: 0;
border-radius: 0;
}
.testimonial4_control_button .carousel-control{
top: 175px;
opacity: 1;
width: 40px;
bottom: auto;
height: 40px;
font-size: 10px;
cursor: pointer;
font-weight: 700;
overflow: hidden;
line-height: 38px;
text-shadow: none;
text-align: center;
position: absolute;
background: transparent;
border: 2px solid #fdb801;
text-transform: uppercase;
-webkit-border-radius: 100%;
border-radius: 100%;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.6s cubic-bezier(0.3,1,0,1);
transition: all 0.6s cubic-bezier(0.3,1,0,1);
}
.testimonial4_control_button .carousel-control.left{
left: 7%;
right: auto;
}
.testimonial4_control_button .carousel-control.right{
right: 7%;
left: auto;
}
.testimonial4_control_button .carousel-control.left:hover,
.testimonial4_control_button .carousel-control.right:hover{
color: #000;
background: #fff;
border: 2px solid #fff;
}
.testimonial4_header{
top: 0;
left: 0;
bottom: 0;
width: 550px;
display: block;
margin: 30px auto;
text-align: center;
position: relative;
}
.testimonial4_header h4{
color: #ffffff;
font-size: 30px;
font-weight: 600;
position: relative;
letter-spacing: 1px;
text-transform: uppercase;
}
.testimonial4_slide{
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 70%;
margin: auto;
padding: 20px;
position: relative;
text-align: center;
}
.testimonial4_slide img {
top: 0;
left: 0;
right: 0;
width: 50px;
height: 50px;
margin: auto;
display: block;
color: #f2f2f2;
font-size: 18px;
line-height: 46px;
text-align: center;
position: relative;
}
.testimonial4_slide p {
color: #ffffff;
font-size: 16px;
margin: 40px 0 20px 0;
}
.testimonial4_slide h4 {
color: #ffffff;
font-size: 24px;
font-weight: bold;
}
@media only screen and (max-width: 480px){
.testimonial4_control_button .carousel-control{
display: none;
}
.testimonial4_header{
width: 95%;
}
.testimonial4_header h4{
font-size: 20px;
}
.testimonial4_slide{
width: 98%;
padding: 5px;
}
}
@media (min-width: 481px) and (max-width: 767px){
.testimonial4_control_button .carousel-control.left{
left: 2%;
}
.testimonial4_control_button .carousel-control.right{
right: 2%;
}
.testimonial4_header{
width: 95%;
}
.testimonial4_slide{
width: 98%;
padding: 5px;
}
}
@media (min-width: 768px) and (max-width: 991px){
.testimonial4_control_button .carousel-control.left{
left: 5%;
}
.testimonial4_control_button .carousel-control.right{
right: 5%;
}
}
@-webkit-keyframes psBoxShadowEffect_2{
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255,255,255,0.5);
}
100% {
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 5px 5px #ffffff, 0 0 0 5px rgba(255,255,255,0.5);
-webkit-transform: scale(1.5);
opacity: 0;
}
}
@keyframes psBoxShadowEffect_2{
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255,255,255,0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 5px 5px #ffffff, 0 0 0 5px rgba(255,255,255,0.5);
transform: scale(1.5);
opacity: 0;
}
}
/* Team section Ends */
/* Footer Starts */
/* Footer */
.footer {
position: relative;
background-color: #1e1d22;
color: #7d7975;
padding: 95px 0 50px;
font-size:16px;
}
.footer p {
line-height:26px;
color : #fff;
}
.footer h5 {
font-size: 22px;
font-weight: 700;
color: #aece61 ;
position: relative;
padding-bottom: 16px;
}
.footer h5:after {
content: '';
display: block;
margin: 5px 0 0;
width: 40%;
height: 1px;
background-color: #1e1d22 ;
}
.footer ul {
list-style: none;
line-height:35px;
margin: 0px;
color:#fff;
}
.footer a {
color:# ;
}
.footer a:hover {
color: #aece61 ;
}
/* Footer Logo */
.foot-logo {
margin: 0px 0px 18px 0px;
padding: 0;
}
/*footer bottom */
.footer-bottom {
padding-top: 10px;
padding-bottom: 25px;
border-top: 1px solid #2f2f33 ;
background: black;
}
.copyright-text p {
color: #7d7975;
margin-top: 18px;
margin-bottom: 0;
font-size:15px;
}
.copyright-text a {
color: #7d7975;
margin: 0px 10px 0px 10px;
}
.copyright-text a:hover {
color: #aece61 ;
}
/* Social Icons */
.social-icons{
margin: 0;
padding: 0;
font-size : 10px;
}
.social {
margin:7px 7px 7px 0px;
color:#fff;
}
#social-fb:hover {
color: #3B5998;
transition:all .25s;
}
#social-tw:hover {
color: #4099FF;
transition:all .25s;
}
#social-gp:hover {
color: #d34836;
transition:all .25s;
}
#social-em:hover {
color: #f39c12;
transition:all .25s;
}
.footer-four > img {
width:80%;
}
/* Footer Ends */
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Brand</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="getting-started.php">Example</a></li>
<li><a href="getting-started.php">Example</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Example<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-5" style="padding-left:0px; padding-right:0px;">
<div class= "banner-sektion banner-overlay ">
<h1 class="linear-wipe">Becho Cars!</h1>
<div class="container text-left">
<div class="col-md-6">
<div class="banner-heading">
<h2>International Conference In Paris 2017 </h2>
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</P>
<button type="button" class="btn btn-default site-btn">Primary</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5"><br><br><br><br><br>
<h2 class="text-center" style="font-size:33px;">360 VIEW OF THE CAR</h2>
<div id="view360" class="img-responsive" style="float:right;">
</div>
</div>
<div class="col-md-2">
<div class="wrapper">
<div class="line"></div>
<div class="circle-2">
see
</div>
<div class="circle">
Discount
</div>
</div>
</div>
</div>
<!-- SECTION 2 STARTS--->
<div class="about-section">
<div class="container">
<div class="site-title text-center">
<h3>About Us</h3>
<p>A wonderful designs has takenpossession but also the leap into electronic pesetting industry It was popularised in the 1960s with the release </p>
</div>
<div class="about-inner-section">
<div class="col-md-6 about-inner-column">
<h2 class="aboutus-title">Eco friendly food is good</h2>
<p>Takenpossession of lorem Ipsum is simply dummy text of the printing and typesetting industry In sit amet sapien eros Integer in tincidunt labore et dolore magna aliqua remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containinglabore et dolore magna aliqua remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>
<ul>
<li><a href="#">Donec ut quam lscele volutri.</a></li>
<li><a href="#">Etiam volutpatbh quam bortis</a></li>
<li><a href="#">Varius fusce vit aeblandit.</a></li>
</ul>
</div>
<div class="col-md-6 about-right">
<img src="https://images.pexels.com/photos/7096/people-woman-coffee-meeting.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt=" ">
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- SECTION 2 ENDS --->
<!-- SECTION 3 STARTS --->
<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>
<!-- SECTION 3 ENDS --->
<!-- SECTION 4 STARTS --->
<div class="about-section">
<div class="container">
<div class="site-title text-center">
<h3>About Us</h3>
<p>A wonderful designs has takenpossession but also the leap into electronic pesetting industry It was popularised in the 1960s with the release </p>
</div>
<div class="about-inner-section">
<div class="col-md-6 about-right">
<img src="https://images.pexels.com/photos/7096/people-woman-coffee-meeting.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt=" ">
</div>
<div class="col-md-6 about-inner-column">
<h2 class="aboutus-title">Eco friendly food is good</h2>
<p>Takenpossession of lorem Ipsum is simply dummy text of the printing and typesetting industry In sit amet sapien eros Integer in tincidunt labore et dolore magna aliqua remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>
<ul>
<li><a href="#">Donec ut quam lscele volutri.</a></li>
<li><a href="#">Etiam volutpatbh quam bortis</a></li>
<li><a href="#">Varius fusce vit aeblandit.</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div><br><br>
<!-- SECTION 4 ENDS --->
<!-- SECTION 5 STARTS --->
<div id="testimonial4" class="carousel slide testimonial4_indicators testimonial4_control_button thumb_scroll_x swipe_x" data-ride="carousel" data-pause="hover" data-interval="5000" data-duration="2000">
<div class="testimonial4_header">
<h4>what our clients are saying</h4>
</div>
<ol class="carousel-indicators">
<li data-target="#testimonial4" data-slide-to="0" class="active"></li>
<li data-target="#testimonial4" data-slide-to="1"></li>
<li data-target="#testimonial4" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="testimonial4_slide">
<img src="http://via.placeholder.com/100x100" class="img-circle img-responsive" />
<p>Lorem ipsum dolor sit amet adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur.</p>
<h4>Ben Hanna</h4>
</div>
</div>
<div class="item">
<div class="testimonial4_slide">
<img src="http://via.placeholder.com/100x100" class="img-circle img-responsive" />
<p>Lorem ipsum dolor sit amet adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur.</p>
<h4>Ben Hanna</h4>
</div>
</div>
<div class="item">
<div class="testimonial4_slide">
<img src="http://via.placeholder.com/100x100" class="img-circle img-responsive" />
<p>Lorem ipsum dolor sit amet adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur.</p>
<h4>Ben Hanna</h4>
</div>
</div>
</div>
<a class="left carousel-control" href="#testimonial4" role="button" data-slide="prev">
<span class="fa fa-chevron-left"></span>
</a>
<a class="right carousel-control" href="#testimonial4" role="button" data-slide="next">
<span class="fa fa-chevron-right"></span>
</a>
</div>
<!-- SECTION 5 ENDS --->
<!-- FOOTER STARTS -->
<div class="footer-section">
<div class="footer">
<div class="container">
<div class="col-md-4 footer-one">
<div class="foot-logo">
<img src="http://smarthead.ancorathemes.com/wp-content/uploads/2016/12/footer_logo.png">
</div>
<p>Providing Life Changing Experiences Through Education. Class That Fit Your Busy Life. Closer to Home
</p>
<div class="social-icons">
<a href="https://www.facebook.com/"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
<a href="https://twitter.com/"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>
<a href="https://plus.google.com/"><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a>
<a href="mailto:bootsnipp@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
</div>
</div>
<div class="col-md-2 footer-two">
<h5>Quick Links</h5>
<ul>
<li><a href="#"> About Us</a> </li>
<li><a href="#"> Our News</a> </li>
<li><a href="#"> Our Services</a> </li>
<li><a href="#"> Contact Us</a> </li>
</ul>
</div>
<div class="col-md-2 footer-three">
<h5>Services</h5>
<ul>
<li><a href="#"> About Us</a> </li>
<li><a href="#"> Our News</a> </li>
<li><a href="#"> Our Services</a> </li>
<li><a href="#"> Contact Us</a> </li>
</ul>
</div>
<div class="col-md-4 footer-four">
<h5>Contact Us</h5>
<img src="http://iacademy.mikado-themes.com/wp-content/uploads/2017/05/footer-img-1.png">
</div>
<div class="clearfix"></div>
</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> <a href="#">Home</a> | <a href="#">Privacy</a> |<a href="#">Terms & Conditions</a> | <a href="#">Refund Policy</a> </p>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
<!-- FOOTER ENDS -->
<script language="javascript">
$(window).load(function(){
$("#view360").tikslus360({imageDir:'images',imageCount:36,imageExt:'jpg',canvasID:'mycar',canvasWidth:640,canvasHeight:480,autoRotate:false});
});
</script>
</body>
</html>
