<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header id="header">
<div class="top-head">
<div class="container">
<div class="col-md-6 menu-contact">
<ul class="list-inline pull-left">
<li><a><i class="fa fa-clock-o" aria-hidden="true"></i>Call Us on +123456789</a></li>
</ul>
</div>
<div class="col-md-6 menu-social">
<ul class="list-inline">
<li><a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="main-head">
<div class="container">
<div class="row menu-contact">
<div class="col-md-offset-3 col-md-9 pull-right">
<ul class="contact-list">
<li>
<h3>+(012) 345 6789</h3>
<p>www.google.com</p>
</li>
<li>
<h3>7:00am - 5:00pm</h3>
<p>Monday to Friday</p>
</li>
</ul>
</div>
</div>
<nav class="navbar">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-main-menu">
<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="#"><img src="images/logo.png" class="img-responsive"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar-collapse-3" >
<div class="menu-container">
<div class="quote pull-right">
<a href="" class="quote-btn"><i class="fa fa-search" aria-hidden="true"></i></a>
</div>
<ul id="menu-main-menu" class="nav navbar-nav navbar-left collapse navbar-collapse" role="navigation">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Our Services</a></li>
<li><a href="">Our Team</a></li>
<li><a href="">Career</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Get A Quote</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</nav><!-- /.navbar -->
</div>
</div>
</header>
<section id="home-banner">
<div class="container-fluid">
<div class="slider-wrap">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="slide-1">
<img src="http://via.placeholder.com/1500x400" class="img-responsive"/>
</div>
<div class="text-wrap animated d06 t24 slideInLeft">
<h2>Discover The Best</h2>
<h1>Activities & Events</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget. Proin et lobortis orci, at vestibulum nisi. Pellentesque consectetur mollis...</p>
</div>
</div>
<div class="item">
<div class="slide-1">
<img src="http://via.placeholder.com/1500x400" class="img-responsive"/>
</div>
<div class="text-wrap animated d06 t24 fadeInUp">
<h2>Discover The Best</h2>
<h1>Activities & Events</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget. Proin et lobortis orci, at vestibulum nisi. Pellentesque consectetur mollis...</p>
</div>
</div>
<div class="item">
<div class="slide-1">
<img src="http://via.placeholder.com/1500x400" class="img-responsive"/>
</div>
<div class="text-wrap animated d06 t24 fadeInUp">
<h2>Discover The Best</h2>
<h1>Activities & Events</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget. Proin et lobortis orci, at vestibulum nisi. Pellentesque consectetur mollis...</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="fa fa-angle-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="fa fa-angle-right"></span>
</a>
</div>
</div>
</div>
</section>
<section id="booking">
<div class="container">
<div class="main-booking">
<p class="pull-left call-text">Lorem ipsum dolor sit amet, consectetur adipiscing</p>
<a class="pull-right call-button">Book Appointment Now <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</div>
</div>
</section>
<section id="why-choos">
<div class="container">
<div class="section-header text-center">
<h3>Why Choose Us</h3>
</div>
<div class="choose-list row">
<div class="col-sm-3">
<div class="main-wrap">
<div class="image-wrap">
<img src="https://png.icons8.com/metro/1600/calculator.png" class="img-responsive">
</div>
<div class="text-wrap">
<h3>On Change</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
<a href="">Read More</a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="main-wrap">
<div class="image-wrap">
<img src="https://png.icons8.com/metro/1600/calculator.png" class="img-responsive">
</div>
<div class="text-wrap">
<h3>On Change</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
<a href="">Read More</a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="main-wrap">
<div class="image-wrap">
<img src="https://png.icons8.com/metro/1600/calculator.png" class="img-responsive">
</div>
<div class="text-wrap">
<h3>On Change</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
<a href="">Read More</a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="main-wrap">
<div class="image-wrap">
<img src="https://png.icons8.com/metro/1600/calculator.png" class="img-responsive">
</div>
<div class="text-wrap">
<h3>On Change</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
<a href="">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>
/*****Custom css********/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; color:#101010; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body {
line-height: 1;
font-family: open sans;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
p{ font-family: open sans; }
a{ text-decoration:none; font-family:open sans }
h1,h2,h3,h4,h5,h6,h7{ font-family:open sans }
#header {
display: block;
}
#header .top-head {
background: #c8c8c8;
padding: 10px 0;
}
#header .top-head a {
color: #fff;
font-size: 13px;
font-weight: 600;
text-decoration: none;
}
#header .top-head .menu-social .logins a {
margin: 0 5px 0 5px;
}
#header .top-head .menu-social .logins a.sign {
margin: 0 0px 0 5px;
}
#header .top-head .menu-social .logins a i {
margin: 0 3px 0 0;
}
#header .top-head .menu-social ul {
float: right;
margin: 0 25px 0 0;
}
#header .top-head i {
font-weight: normal;
}
#header .main-head .menu-contact .contact-list {
list-style-type: none;
display: inline-block;
width: 100%;
text-align: center;
padding: 3% 0px;
float:right;
text-align:right;
}
#header .main-head .menu-contact .contact-list li {
display: inline-block;
text-align: left;
padding: 0 0 0 35px;
position: relative;
width: 33.33%;
}
#header .main-head .menu-contact .contact-list li::before {
content: "\f095";
font-family: fontawesome;
position: absolute;
left: 0;
top: 0;
font-size: 30px;
color: #3400ff;
}
#header .main-head .menu-contact .contact-list li:last-of-type::before {
content: "\f017";
}
#header .main-head .navbar .navbar-brand {
padding: 0;
height: auto;
display: inline-block;
position: absolute;
top: -79px;
}
#header .main-head .navbar .navbar-brand img {
width: 185px;
}
#header .main-head .navbar {
border: none;
margin: 0;
}
#header .main-head .navbar #navbar-collapse-3 {
position: absolute;
bottom: -20px;
width: 100%;
background: #3400ff;
padding: 0;
z-index: 99;
}
#header .main-head .navbar #navbar-collapse-3 .menu-container {
display: inline-block;
width: 100%;
}
#header .main-head .navbar #navbar-collapse-3 .quote a {
padding: 15px;
display: inline-block;
background: transparent;
color: #fff;
text-decoration: none;
}
#header .main-head .navbar #navbar-collapse-3 #menu-main-menu li a {
background: transparent;
font: 600 14px/21px open sans;
text-transform: uppercase;
letter-spacing: 1px;
padding: 15px;
color: #ffffff;
}
#header .main-head .menu-contact .contact-list li p {
font: 500 14px/21px open sans;
}
#header .main-head .navbar #navbar-collapse-3 .quote a i {
color: #fff;
}
/********Home Banner********/
#home-banner #carousel-example-generic {
height: auto;
overflow: hidden;
}
#home-banner {
display: block;
overflow: hidden;
}
#home-banner .container-fluid {
padding: 0;
}
#home-banner .slider-wrap .item img {
width: 100%;
display: block;
}
#home-banner .slider-wrap .carousel-control {
background: transparent;
border: none;
width: 2%;
display: flex;
align-items: center;
text-align: center;
opacity: 1;
margin: 0 20px;
}
#home-banner .slider-wrap .carousel-control span {
font-size: 20px;
color: #000;
opacity: 1;
position: absolute;
left: 0;
right: 0;
background: #fff;
padding: 4px 0px;
}
#home-banner .slider-wrap .text-wrap {
position: absolute;
left: 0;
bottom: 20%;
display: block;
z-index: 9999999999 !important;
margin: 0 auto;
text-align: center;
width: 64%;
right: 0;
}
#home-banner .slider-wrap .text-wrap h2 {
font: 300 40px/51px open sans;
color: #fff;
}
#home-banner .slider-wrap .text-wrap h1 {
font: 500 60px/73px open sans;
color: #ffffff;
}
#home-banner .slider-wrap .text-wrap p {
font: 400 15px/21px open sans;
color: #ffffff;
display: block;
margin: 0 0 1.5rem 0;
}
#home-banner .slider-wrap .carousel-indicators li {
background: #fff;
border: none;
height: 12px;
width: 12px;
margin: 0;
}
#home-banner .slider-wrap .carousel-indicators li.active {
background: #2cc2f7;
border: none;
}
#booking {
margin-top: -20px;
position: absolute;
left: 0;
r`: 0;
right: 0;
}
#booking .main-booking {
display: inline-block;
padding: 5px 15px;
z-index: 9999999999 !important;
background: #fff;
width: 100%;
box-shadow: 0 0 4px rgba(0,0,0,.34);
}
#booking .main-booking .call-text {
font: 600 15px/40px open sans;
}
#booking .main-booking .call-button {
display: inline-block;
padding: 10px 15px;
margin-top: 5px;
border: 2px solid #FF5722;
color: #ff5722;
font: 600 15px/15px open sans;
}
#booking .main-booking .call-button i {
color: #ff5722;
}
#header .main-head .menu-contact .contact-list li h3 {
font: 600 16px/21px open sans;
color: #3400ff;
}
#why-choos {
padding: 5% 0 3% 0;
}
#why-choos .section-header {
margin: 0 0 2rem 0;
}
#why-choos .section-header h3 {
font: 400 30px/35px open sans;
}
#why-choos .choose-list {}
#why-choos .choose-list .main-wrap {
text-align: center;
padding: 35px 20px 25px 20px;
box-shadow: 0 0 4px rgba(0,0,0,.34);
}
#why-choos .choose-list .main-wrap .image-wrap {
padding: 20px 20px;
border: 3px solid #dedede;
display: inline-block;
margin: 0 0 2rem 0;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#why-choos .choose-list .main-wrap .image-wrap img {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
max-width: 30px;
}
#why-choos .choose-list .text-wrap h3 {
font: 600 15px/21px open sans;
text-transform: uppercase;
color: #ff5722;
margin: 0 0 1rem;
}
#why-choos .choose-list .text-wrap p {
font: 400 15px/21px open sans;
margin: 0 0 1rem;
}
#why-choos .choose-list .text-wrap a {
font: 600 15px/15px open sans;
border: 2px solid #3400ff;
padding: 10px 20px;
display: inline-block;
color: #101010;
text-decoration: none;
}
#header .top-head i {
font-weight: normal;
color: #3400ff;
}
#header .top-head .menu-contact a i {
margin: 0 .5rem 0 0;
}
/******Responsive starts Here******/
@media screen and (width:1280px){
}
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : landscape){
}
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : portrait){
}
@media screen and (width:1024px){
#header .main-head .navbar #navbar-collapse-3 .quote a {
font: 600 12px/21px open sans;
letter-spacing: 0px;
padding: 15px 5px;
}
#header .main-head .navbar #navbar-collapse-3 #menu-main-menu li a {
font: 600 12px/21px open sans;
letter-spacing: 0px;
padding: 15px 8px;
}
#header .main-head .navbar .navbar-brand img {
width: 140px;
}
#header .main-head .menu-contact .contact-list li p {
font: 500 13px/21px open sans;
}
#header .main-head .menu-contact .contact-list li:last-of-type {
display: none;
}
#header .main-head .menu-contact .contact-list li{
width: 50%;
}
#header .main-head .menu-contact .contact-list {
min-width: 410px;
}
#header-2 .main-head .navbar #navbar-collapse-3 #menu-main-menu a {
padding: 10px 8px;
font: 600 12px/21px open sans;
}
}
@media screen and (max-width:992px){
#why-choos .choose-list .main-wrap {
text-align: center;
padding: 35px 20px 25px 20px;
box-shadow: 0 0 4px rgba(0,0,0,.34);
margin: 0 0 1rem 0;
}
#home-banner .slider-wrap .text-wrap p {
font: 400 13px/21px open sans;
margin: 0 0 .5rem 0;
}
#home-banner .slider-wrap .text-wrap h1 {
font: 500 30px/41px open sans;
}
#home-banner .slider-wrap .text-wrap h2 {
font: 500 25px/41px open sans;
}
#home-banner .slider-wrap .text-wrap {
bottom: 20%;
width: 80%;
}
#header .main-head .navbar #navbar-collapse-3 .quote a {
font: 600 12px/21px open sans;
letter-spacing: 0px;
padding: 15px 5px;
}
#header .main-head .navbar #navbar-collapse-3 #menu-main-menu li a {
font: 600 12px/21px open sans;
letter-spacing: 0px;
padding: 15px 8px;
}
#header .main-head .navbar .navbar-brand img {
width: 140px;
}
#header .main-head .menu-contact .contact-list li p {
font: 500 13px/21px open sans;
}
#header .main-head .menu-contact .contact-list li {
width: 40%;
}
#header .main-head .menu-contact .contact-list {
min-width: 410px;
}
#header-2 .main-head .navbar .navbar-toggle {
background: #234600;
color: #fff;
border-radius: 0;
margin-right: 0;
display:block;
}
#header-2 .main-head .navbar-header {
float: left;
width: 100%;
}
#header-2 .main-head .navbar .navbar-toggle .icon-bar {
background: #fff;
}
#header-2 .main-head .navbar .navbar-collapse.collapse {
display: none !important;
}
#header-2 .main-head .navbar .navbar-collapse.collapse.in {
display: block !important;
}
#header-2 .main-head .navbar #navbar-collapse-3 #menu-main-menu {
float: none !important;
display: inline-block;
margin: 0;
}
#header-2 .main-head .navbar #navbar-collapse-3 #menu-main-menu li {
float: none !important;
display: inline-block;
width: 100%;
}
#header-2 .main-head .navbar #navbar-collapse-3 #menu-main-menu a {
padding: 6px 1px;
font: 600 11px/14px open sans;
}
#header .main-head .navbar .navbar-brand {
top: -65px;
}
#header-2 .main-head .navbar #navbar-collapse-3 #menu-main-menu li a::after {
display:none;
}
#home-banner-2 {
background-size: cover;
padding: 4% 0;
}
#home-spcial-2 .special-list .media .media-left {
width: 14%;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
}
@media screen and (width:768px){
}
@media screen and (max-width:767px){
#header .top-head {
background: #c8c8c8;
padding: 10px 0;
}
#booking {
margin:0;
position: unset;
}
#home-banner .slider-wrap .text-wrap {
width: 100%;
}
#home-banner .slider-wrap .text-wrap h2 {
font: 300 20px/26px open sans;
}
#home-banner .slider-wrap .text-wrap h1 {
font: 500 25px/31px open sans;
}
#home-banner .slider-wrap .carousel-control {
width: 20px;
margin: 0 10px;
}
#home-banner .slider-wrap .text-wrap p {
display:none;
}
#why-choos .section-header h3 {
font: 400 20px/35px open sans;
}
#why-choos .choose-list .main-wrap {
margin: 0 0 1rem 0;
}
#header .top-head .list-inline.pull-left {
display: none;
}
#header .main-head .navbar .navbar-toggle {
background: #fd9929;
color: #fff;
border-radius: 0;
margin-right: 0;
margin-top: 20px;
margin-bottom: 0;
}
#header .main-head .navbar .navbar-toggle .icon-bar,#header-2 .main-head .navbar .navbar-toggle .icon-bar {
background: #fff;
}
#header .main-head .navbar .navbar-brand {
position: unset;
}
#header .main-head .navbar .navbar-brand img {
width: 100px;
}
#header .main-head .navbar #navbar-collapse-3 {
position: unset;
background: transparent;
}
#header .main-head .navbar #navbar-collapse-3 .quote a {
display: none;
}
#header .main-head .navbar #navbar-collapse-3 #menu-main-menu li a {
font: 600 12px/17px open sans;
letter-spacing: 0px;
padding: 5px 10px;
color: #3400ff;
}
#home-spcial-2 .special-list .media .media-body p {
font: 400 12px/20px open sans;
}
#header-2 .main-head .navbar .navbar-header .navbar-brand img {
width: 104px;
}
#header-2 .main-head .navbar #navbar-collapse-3 #menu-main-menu a {
padding: 5px 10px;
font: 600 13px/15px open sans;
}
}
@media screen and (max-width:576px){
#header .top-head .list-inline.pull-left {
display: none;
}
#header .top-head .menu-social ul {
margin: 0;
}
#booking {
margin: 0;
position: unset;
padding: 4% 0;
}
#booking .main-booking {
text-align: center;
}
#booking .main-booking .call-text {
float: none !important;
text-align: center;
font-size: 12px;
line-height: 15px;
margin: 0 0 .5rem 0;
}
#booking .main-booking .call-button {
float: none !important;
text-align: center;
margin: 0 auto;
font-size: 12px;
padding: 7px 10px;
margin: 0 0 .5rem 0;
}
#header .main-head .menu-contact {
display: none;
}
#header-2 .top-head .menu-social {
}
#header .main-head .navbar .navbar-brand img {
margin-top: 10px;
}
}
