<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="main-head">
<nav class=" navbar navbar-bootsnipp " role="navigation">
<div class="top-head">
<div class="container">
<div class="row">
<div class="col-md-offset-6 col-md-6 pull-right social">
<div class="login-box">
<a href="" class="login reg btn-blue hidden-lg hidden-md hidden-sm">Register</a>
<a href="" class="login btn-blue">Login</a>
</div>
<div class="scl-links">
<ul class="">
<li class=""><a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li class=""><a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li class=""><a href=""><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li class=""><a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="bot-head">
<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>
<div class="brand ">
<a class=" navbar-brand" href="#"><img src="images/logo.png" class="img-responsive"></a>
</div>
</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="index.html">Home</a></li>
<li class=""><a href="calender.html">Find Activities</a></li>
<li class=""><a href="about.html">About</a></li>
<li class=""><a href="blog.html">Blog</a></li>
<li class="show-on-hover">
<a href="provider.html" class="dropdown-toggle">Activity Providers<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="login.html">Login</a></li>
<li><a href="register.html">Register</a></li>
</ul>
</li>
<li class=""><a href="">Support</a></li>
<li class="dropdown"><a href="contact.html">Contact us</a></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<section id="home-banner">
<div class="container-fluid">
<div class="slider-wrap">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="slide-1">
<img src="http://via.placeholder.com/1500x700" 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 class="button-list">
<a href="" class="banner-button btn-blue hidden-xs">Register Now</a>
<a href="" class="banner-button btn-white">Read More</a>
</div>
</div>
</div>
<div class="item">
<div class="slide-1">
<img src="http://via.placeholder.com/1500x700" 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 class="button-list">
<a href="" class="banner-button btn-blue hidden-xs">Register Now</a>
<a href="" class="banner-button btn-white">Read More</a>
</div>
</div>
</div>
<div class="item">
<div class="slide-1">
<img src="http://via.placeholder.com/1500x700" 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 class="button-list">
<a href="" class="banner-button btn-blue hidden-xs">Register Now</a>
<a href="" class="banner-button btn-white">Read More</a>
</div>
</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="works">
<div class="container">
<div class="section-heading text-center">
<h1>How it works</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam a libero non porttitor. Maecenas sit amet libero id est dignissim ornare. Integer sagittis, elit ut rhoncus lacinia, enim diam semper dolor</p>
</div>
<div class="row main-content">
<div class="col-md-4 col-sm-4 ">
<div class="main-wrap text-center">
<div class="img-wrap">
<img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/06-facebook-512.png" class="img-responsive">
</div>
<div class="text-wrap">
<h3>Create your account</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum rhoncus nibh, a ultricies ipsum iaculis eu. Nam congue augue...</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="main-wrap text-center">
<div class="img-wrap">
<img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/06-facebook-512.png" class="img-responsive">
</div>
<div class="text-wrap">
<h3>choose your Favorite activity</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum rhoncus nibh, a ultricies ipsum iaculis eu. Nam congue augue...</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="main-wrap text-center">
<div class="img-wrap">
<img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/06-facebook-512.png" class="img-responsive">
</div>
<div class="text-wrap">
<h3>Add activity to calendAr</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum rhoncus nibh, a ultricies ipsum iaculis eu. Nam congue augue...</p>
</div>
</div>
</div>
</div>
<div class="button-wrap anim d06">
<a href="" class="banner-button btn-blue">Register Now</a>
</div>
</div>
</section>
/*****Reset 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; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; font-family: open sans; }
p,label{ font: 400 15px/23px open sans;; color: #101010; }
a{ text-decoration:none; font-family:open sans; }
h1,h2,h3,h4,h5,h6,h7{ font-family:open sans; }
input,select,textarea,span{ font-family:open sans; }
/********Animation Ends********/
#main-head {
display: block;
z-index: 9;
width: 100%;
background: #333;
}
#main-head nav.navbar {
margin: 0;
border: none;
}
#main-head nav.navbar .top-head {
display: block;
padding: 10px 0;
background: #dedede;
}
#main-head .bot-head {
padding: 10px 0;
}
#main-head nav.navbar .top-head .scl-links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#main-head nav.navbar .top-head .login-box {
margin: 0 0 0 20px;
display: inline-block;
float: right;
}
#main-head nav.navbar .top-head .scl-links {
float: right;
}
#main-head nav.navbar .top-head .scl-links ul li {
float: left;
margin: 0 0 0 5px;
}
#main-head nav.navbar .top-head .scl-links ul li a, #single-main .single-wrap .sharing .social li a {
padding: 9px 0;
display: inline-block;
background: #fff;
border-radius: 25px;
width: 32px;
text-align: center;
text-decoration: none;
color: #2cc2f7;
font-size: 14px;
border: 1px solid #fff;
height: 32px;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
#main-head nav.navbar .top-head .scl-links ul li:hover a,#single-main .single-wrap .sharing .social li:hover a {
border: 1px solid #2cc2f7;
background: #2cc2f7;
color: #fff;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
#main-head nav.navbar .top-head .scl-links ul li a i,#single-main .single-wrap .sharing .social li a i {
color: inherit;
}
#main-head nav.navbar .top-head .login {
float: right;
background: #2cc2f7;
color: #fff;
padding: 6px 16px;
text-decoration: none;
font: 500 15px/21px open sans;
text-transform: uppercase;
}
#main-head nav.navbar .top-head .login::before {
content: "\f007";
font-family: fontawesome;
margin: 0 8px 0 0;
color: inherit;
}
#main-head nav.navbar .top-head .login-box .reg {
margin: 0 0 0 5px;
}
#main-head nav.navbar .bot-head .navbar-nav {
margin: 35px 0 15px 0;
}
#main-head nav.navbar .bot-head #bs-example-navbar-collapse-1 {
padding: 0;
}
#main-head nav.navbar .bot-head .navbar-nav > li > a {
color: #fff;
padding: 6px 12px !IMPORTANT;
text-decoration: none;
font: 500 15px/21px open sans;
text-transform: uppercase;
background: transparent;
}
#main-head nav.navbar .bot-head .navbar-nav > li:last-of-type > a {
padding: 6px 0px 6px 12px !IMPORTANT;
}
#main-head nav.navbar .bot-head .navbar-brand {
padding: 0 5px;
display: inline-block;
height: auto;
}
/********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: 4%;
display: flex;
align-items: center;
text-align: center;
opacity: 1;
}
#home-banner .slider-wrap .carousel-control span {
font-size: 50px;
color: #fff;
opacity: 1;
position: absolute;
left: 0;
right: 0;
}
#home-banner .slider-wrap .text-wrap {
position: absolute;
left: 0;
bottom: 33%;
display: block;
z-index: 9999999999 !important;
margin: 0 auto;
text-align: center;
width: 64%;
right: 0;
}
#home-banner .slider-wrap .text-wrap h2 {
font: 700 40px/51px open sans;
color: #fff;
text-transform: uppercase;
}
#home-banner .slider-wrap .text-wrap h1 {
font: 900 60px/73px open sans;
color: #2cc2f7;
text-transform: uppercase;
}
#home-banner .slider-wrap .text-wrap p {
font: 400 20px/28px open sans;
color: #ffffff;
display: block;
margin: 0 0 1.5rem 0;
}
#home-banner .slider-wrap .button-list .btn-white, #home-banner .slider-wrap .button-list .btn-blue {
padding: 10px 23px;
text-decoration: none;
font: 600 17px/21px open sans;
text-transform: uppercase;
margin: 0 5px;
display: inline-block;
}
#home-banner .slider-wrap .button-list .btn-white {
background: #fff;
color: #101010;
}
#home-banner .slider-wrap .button-list .btn-blue {
background: #2cc2f7;
color: #fff;
}
#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;
}
.section-heading {
margin-bottom: 2rem;
}
.section-heading h1 {
font: 700 30px/45px open sans;
text-transform: uppercase;
margin: 0 0 10px 0;
position: relative;
}
.section-heading h1::after {
content: '';
width: 200px;
height: 1px;
background: #101010;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
margin: 0 auto;
}
.section-heading p {
font: 600 16px/24px open sans;
display: block;
margin: 0 0 1.5rem 0;
}
/******Works Section Start******/
#works,#provider {
padding: 4% 0;
}
#works .main-wrap,#provider .main-wrap {
margin: 0 0 2rem 0;
}
#works .main-wrap .img-wrap {
display: inline-block;
padding: 25px;
border: 2px solid #2cc2f7;
border-radius: 50%;
width: 120px;
height: 120px;
margin: 0 0 1rem 0;
}
#works .main-wrap .img-wrap img {
display: block;
margin: 0 auto;
width: 90%;
transition: all 500ms;
}
#works .main-wrap:hover .img-wrap img {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transition: all 500ms;
}
#works .main-wrap .text-wrap h3,#provider .main-wrap .text-wrap h3 {
font: 700 18px/24px open sans;
text-transform: uppercase;
margin: 0 0 10px 0;
}
#works .main-wrap .text-wrap p,#provider .main-wrap .text-wrap p {
font: 600 14px/24px open sans;
display: block;
margin: 0 0 1.5rem 0;
}
#works .button-wrap,#provider .button-wrap {
display: block;
text-align: center;
}
#works .button-wrap .btn-blue,#provider .button-wrap .btn-blue {
padding: 10px 23px;
text-decoration: none;
font: 600 17px/21px open sans;
text-transform: uppercase;
margin: 0 auto;
background: #2cc2f7;
color: #fff;
display: inline-block;
}
