Sanjalika

Table of Contents
ACKNOWLEDGEMENT...............................................................................................................5
SYNOPSIS........................................................................................................................................6
PROJECT TITLE..............................................................................................................................6
INTRODUCTION.............................................................................................................................6
OBJECTIVES...................................................................................................................................6
PROBLEM STATEMENT................................................................................................................7
ANALYSIS.......................................................................................................................................8
SCREENSHOTS...............................................................................................................................9
SIDE NAV....................................................................................................................................9
HOMEPAGE...............................................................................................................................10
BOOKING PAGE.......................................................................................................................10
RIDES AND SLIDES.................................................................................................................10
GALLERY AND FOOD ZONE..................................................................................................11
MEET OUR TEAM.....................................................................................................................11
MAP............................................................................................................................................11
SOURCE CODE WITH COMMENTS.......................................................................................12
HTML CODES............................................................................................................................12
ACKNOWLEDGEMENT
First and foremost, praises and thanks to the God, the Almighty, for His
showers of blessings throughout my research work to complete the research
successfully.
I would like to express my deep and sincere gratitude Mr. Nyanjui for
giving me the opportunity to do research and do my absolute best in this project.
Thanks to Mr. Kenneth for tutoring me through the whole course. His vision,
sincerity and motivation have deeply inspired me. It was a great privilege and
honor to work and study under his guidance. I am extremely grateful for what he
has offered.
JASON NZAU
6
SYNOPSIS
PROJECT TITLE
My project title is Sanjalika Water Park eProject. This project is a school project intended to
improve my skills, not only as an IT student in coding but also as a researcher. This project
contains the following;
INTRODUCTION
The thirst for learning, upgrading technical skills and applying the concepts in real life environment
at a fast pace is what the industry demands from IT professionals today. However busy work
schedules, far-flung locations, unavailability of convenient time-slots pose as major barriers when it
comes to applying the concepts into realism. And hence the need to look out for alternative means
of implementation in the form of laddered approach.
The above truly pose as constraints especially for our students too! With their busy schedules, it is
indeed difficult for our students to keep up with the genuine and constant need for integrated
application which can be seen live especially so in the field of IT education where technology can
change on the spur of a moment. Well, technology does come to our rescue at such times!!
OBJECTIVES
1. The Objective of this program is to give a sample project to work on real life projects.
These applications help you build a larger more robust application.
2. The objective is not to teach you JavaScript/Dreamweaver but to provide you with a real
life scenario and help you create basic applications using the tools.
7
PROBLEM STATEMENT
Sanjalika Water Park is definitely an ultimate and out of the world source of entertainment.
Decorated by mermaids, other statues, the Sanjalika Waterpark has largest cave and swimming
pool area of modern technology a kind of place for thrills and fun. At Sanjalika Waterpark there is
lot of water rides which are very exciting and thrilling. You need to develop a website of
‘SANJALIKA WATER PARK’.

8
ANALYSIS
The development of E-commerce, accompanied by the wide usage of Internet technology in
economic activities, has launched a global business revolution and economic revolution. As a part
of E-commerce activity, I believe having simple websites that give information about organizations
is very critical. I tend to believe going to a new place with little information about it is way better
than going without any information.
This website is smooth, easy to navigate, straightforward and convenient to users. It runs perfectly
and it is runnable through any browser.
Having a platform to view an organization’s information that easily accessible by the public is very
beneficial to the organization and at the same time the public. The development is amazing in such
the public can leave their reviews according to their individual experiences that the organization
may use to maintain or enhance their services. Think of it as the better the services offered, the
better the reviews and the higher the exposure. In conclusion, online marketing and online exposure
is crucial to the success and failure of a company/business.

9
SCREENSHOTS
SIDE NAV
10
HOMEPAGE
BOOKING PAGE
RIDES AND SLIDES

11
GALLERY AND FOOD ZONE
MEET OUR TEAM
MAP
12
SOURCE CODE WITH COMMENTS

HTML CODES
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>SANJALIKA WATER PARK</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/fontAwesome.css">
<link rel="stylesheet" href="css/light-box.css">
<link rel="stylesheet" href="css/owl-carousel.css">
<link rel="stylesheet" href="css/sanjalika.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800"
rel="stylesheet">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
13
</head>
<body>
<header class="nav-down responsive-nav hidden-lg hidden-md">
<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-
target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>

<div id="main-nav" class="collapse navbar-collapse">
<nav>
<ul class="nav navbar-nav">
<li><a href="#top">Home</a></li>
<li><a href="#rides">Rides and Slides</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#video">Presentation</a></li>
<li><a href="#blog">Blog Entries</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
14
</div>
</header>
<div class="sidebar-navigation hidde-sm hidden-xs">
<div class="logo">
<a href="#">Sanjalika<em>Water Park</em></a>
</div>
<nav>
<ul>
<li>
<a href="#top">
<span class="rect"></span>
<span class="circle"></span>
Home
</a>
</li>
<li>
<a href="#rides">
Rides and Slides
</a>
</li>
<li>
15
<a href="#gallery">
Gallery
</a>
</li>
<li>
<a href="#video">
Presentation
</a>
</li>
<li>
<a href="#blog">
Blog Entires
</a>
</li>
<li>
<a href="#contact">
Contact Us
</a>
16
</li>
</ul>
</nav>
<ul class="social-icons">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-rss"></i></a></li>
<li><a href="#"><i class="fa fa-behance"></i></a></li>
</ul>
</div>
<div class="slider">
<div class="Modern-Slider content-section" id="top">

<div class="item item-1">
<div class="img-fill">
<div class="image"></div>
<div class="info">
<div>
<h1>WELCOME TO<br>SANJALIKA</h1>
<p>Be part of this fantastic safari in our Aqua Park and be privileged to meet the
17
big five. It is a journey of a lifetime which you cannot afford to miss.<br>
It is one of its own in the Kenyan Coast
region.<br>
</p>
<div class="white-button button">
<a href="#featured">Discover More</a>
</div>
</div>
</div>
</div>
</div>


<div class="info">
<div>
<div class="box">
OPEN 10-5pm</div>

<a href="#featured">BOOKING 0798948825</a>

18
</div>
</div>
</div>
</div>
</div>


<div class="info">
<div>
<h1>Park<br>Information</h1>
<p>Sanjalika Water park has 6 waterslides fun for all ages, We are located right
opposite Mnarani shopping Centre <br>Life guards are always on duty.</p>
<a href="#featured">Learn More</a>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
19
<div class="page-content">
<section id="featured" class="content-section">
<div class="section-heading">
<h1>Rides &<br><em>Slides</em></h1>
<p>We believe that we have the best slides in East Africa
<br>This is because we regularly clean the slides immediately the park is closed</p>
</div>
<div class="section-content">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="image">
<img src="img/dropslide.jpg" alt="">
<div class="featured-button button">
<a href="#projects">Continue Reading</a>
</div>
</div>
<div class="text-content">
<h4>Drop Slide Water Slide</h4>
<span>Dropslide</span>
<p>Our Dropslide has been rated one of the best in East Africa<br> It has a
height of about 200 metres and offers the fastest drop</p>
</div>
</div>
<div class="item">
20
<div class="image">
<img src="img/swimming3.jpg" alt="">
</div>
</div>
<h4>Bowl Water Slide</h4>
<span>Splash Bowl</span>
<p>Our SplashBowl is a quintessential water attraction for thrill-seekers of all
ages. Riders start in a fast body slide before they launch into the Bowl Water Slides and are pressed
to the wall by powerful centrifugal forces as they orbit toward the center.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="img/inlinetube.jpg" alt="">
</div>
</div>
<h4>Inline Tube Slide</h4>
<span>Tubing</span>
<p>Enjoy tubing under the scotching sun of Mombasa with friends and
family.</p>
21
</div>
</div>
<div class="item">
<div class="image">
<img src="img/aqualoop.jpg" alt="">
</div>
</div>
<h4>AquaLoop</h4>
<span>Looping</span>
<p>Once in a while it is good to let your inner child. Lets loop together</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="img/swimming6.jpg" alt="">
</div>
</div>
<h4>Family Rafting</h4>
<span>Rafting</span>
<p>Rafting experience like no other come today</p>

22
</div>
</div>
<div class="item">
<div class="image">
<img src="img/halfpipe.jpg" alt="">
</div>
</div>
<h4>Half pipe slide</h4>
<span>Half Pipe</span>
<p>Up one side and down the other at break-neck speed.<br> This is pool
riding for experts. The Half Pipe can be designed for use as a body slide or with rafts.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="img/speedslide.jpg" alt="">
</div>
</div>
<h4>Speed Slide</h4>
23
<span>Speed Slide</span>
<p>These high velocity plummets drop body riders and rafts through near-
vertical chutes, over bumps and around tight 360s.<br> The one constant is flat-out speed.</p>
</div>
</div>
</div>
</div>
</section>
<section id="gallery" class="content-section">
<h1>Gallery<br> &<em>Food Zones</em></h1>
<p>“There is one thing the photograph must contain, the humanity of the moment.”
<br>Robert Frank</p>
</div>
<div class="masonry">
<div class="row">
<div class="item">
<div class="col-md-8">
<a href="img/swimming1.jpg" data-lightbox="image"><img
src="img/swimming1.jpg" alt="image 1"></a>
</div>
</div>
24
<div class="item second-item">
<a href="img/fz1.jpg" data-lightbox="image"><img src="img/fz1.jpg"
alt="image 2"></a>
</div>
</div>
<div class="item">
<a href="img/swimming2.jpg" data-lightbox="image"><img
src="img/swimming2.jpg" alt="image 3"></a>
</div>
</div>
<div class="item">
alt="image 4"></a>
</div>
</div>
<div class="item">
alt="image 5"></a>
</div>
</div>
</div>
</div>
25
</div>
</section>

<section id="video" class="content-section">
<div class="row">
<div class="row">
<h1>This is all <em>about</em> Sanjalika.</h1>
<p>CARING AND DEVOTED</p>
</div>
<section id="blog" class="content-section">
<h1>Meet our<br><em>Team</em></h1>
<p>Trained personnel to provide you with the best swimming
<br>experience.</p>
</div>
<div class="tabs-content">
<div class="wrapper">
<ul class="tabs clearfix" data-tabgroup="first-tab-group">
<li><a href="#tab1" class="active">LIFEGUARDS</a></li>
<li><a href="#tab2">GYM INSTRUCTORS</a></li>
<li><a href="#tab3">CLEANERS</a></li>
26
<li><a href="#tab4">GUARDS</a></li>
</ul>
<section id="first-tab-group" class="tabgroup">
<div id="tab1">
<ul>
<li>
<div class="item">
<img src="img/lg1.jpg" alt="">
<h4>TEVIN AIDAN</h4>
<span>I Only Fear Not Trying.</span>
<p>At Sanjalika the fun is just to much not to visit us.Best
swimming experience to families and staff,A home away from home.Looking back on our
swimming days and wondering “what if” can be a life-lasting and agonizing experience. It’s why
you see so many comebacks in the run-up to the Olympics.</p>
<div class="accent-button button">
<a href="#contact">Welcome to Sanjalika</a>
</div>
</div>
</div>
</li>
<li>
<div class="item">
27
<h4>LORNA VAN ATTA</h4>
<span>Do you</span>
<p>The reality is an overwhelming majority of people have no
idea what they are talking about. You will be told numerous times over the course of your
swimming career that you can’t do something. That you aren’t talented enough. That your goal is
ridiculous.</p>
<a href="#contact">Karibu Sanjalika</a>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<h4>James Charles</h4>
<span>The price of excellence is discipline.</span>
<p>Discipline gets a bit of a bad rep.
When you hear the word your first thoughts tend to flutter to the stereotypical 1960’s conservative
dad, sporting black horn-rimmed glasses with the short sleeve white dress shirt, cracking his belt in
his hand. Not pretty.</p>

28
<a href="#contact">Welcome to Sanjalika</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div id="tab2">
<ul>
<li>
<div class="item">
<img src="img/g1.jpg" alt="">
<h4>Matt Hardy</h4>
<span>Fitness</span>
<p>“The last three or four reps is what makes the muscle grow.
This area of pain divides a champion from someone who is not a champion. No pain no gain</p>
</div>
</div>
</li>
<li>
<div class="item">
<img src="img/g2.png" alt="">
29
<h4>Bazu Big Man</h4>
<span>Fitness</span>
<p>“Success isn’t always about greatness. It’s about consistency.
Consistent hard work gains success. Greatness will come. My greatest asset is my brain</p>
<a href="#contact">Work Hard</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div id="tab3">
<ul>
<li>
<div class="item">
<img src="img/c1.jpg" alt="">
<h4>Meet our team</h4>
<span>Dedicated to providing clean towels, clean changing rooms
24/7</span>
<p>If you can't clean up after yourself.. There's no need for you to
mess things up.. And expect another person to clean up behind you.You don't get anything clean
without getting something else dirty. </p>

30
<a href="#contact">Come again</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div id="tab4">
<ul>
<li>
<div class="item">
<img src="img/wg1.jpg" alt="">
<h4>All round security</h4>
<span>24/7</span>
<p>The only real security that a man can have in this world is a
reserve of knowledge, experience and ability.Security is always excessive until it's not enough.
</p>
<a href="#contact">Sanjalika Security</a>
</div>
31
</div>
</div>
</li>
</ul>
</div>
</section>
</div>
</div>
</div>
</section>
<section id="contact" class="content-section">
<div id="map">

<iframe src="https://www.google.com/maps/embed?pb=!
1m18!1m12!1m3!1d63679.00358237695!2d39.639051693003616!3d-4.033130897623726!2m3!
1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x184012465d2657bb
%3A0x99dcdb97b14f06bf!2sVoyager%20Beach%20Resort!5e0!3m2!1sen!2ske!
4v1598528544902!5m2!1sen!2ske" width="600" height="450" frameborder="0" style="border:0;"

32
allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

</div>
<div id="contact-content">
<h1>Contact<br><em>Us</em></h1>
<p>Feel free to leave us a message
<br>Take care and come again</p>
</div>
<form id="contact" action="#" method="post">
<div class="row">
<fieldset>
<input name="name" type="text" class="form-control" id="name"
placeholder="Your name..." required="">
</fieldset>
</div>
<fieldset>
<input name="email" type="email" class="form-control" id="email"

33
placeholder="Your email..." required="">
</fieldset>
</div>
<fieldset>
<input name="subject" type="text" class="form-control" id="subject"
placeholder="Subject..." required="">
</fieldset>
</div>
<fieldset>
<textarea name="message" rows="6" class="form-control" id="message"
placeholder="Your message..." required=""></textarea>
</fieldset>
</div>
<fieldset>
<button type="submit" id="form-submit" class="btn">Send Message
Now</button>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</section>
34
<section class="footer">
<p>Copyright © 2020 Jason Nzau
. eProject, Student Number: 1202499</p>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script
src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script>
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
35
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
36
lastScrollTop = st;
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
type="text/javascript"></script>
</body>
</html>
CSS CODES
body {
font-family: 'Open Sans', sans-serif;
p{
font-size: 13px;
color: #040404;
line-height: 24px;
.page-content {
width: 77.5%;
float: right;
37
.content-section {
padding-top: 80px;
position: relative;
width: 100%;
display: inline-block;
height: auto;
left: 50%;
text-align: center;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
.section-heading {
text-align: left;
position: relative;
margin-bottom: 60px;
.section-heading h1 {
margin-top: 0px;
font-size: 32px;
38
color: #232323;
margin-right: 50px;
.section-heading em {
font-style: normal;
font-weight: 700;
color: #45489a;
.section-heading p {
font-size: 15px;
line-height: 26px;
color: #343434;
position: absolute;
top: 12.5px;
.white-button a {
font-size: 13px;
font-weight: 600;
color: #45489a;
text-transform: capitalize;
background-color: #fff;
39
height: 44px;
line-height: 44px;
padding: 0px 25px;
letter-spacing: 0.25px;
text-decoration: none;
transition: all 0.3s;
.white-button a:hover {
background-color: #45489a;
color: #fff;
.accent-button a {
font-size: 13px;
font-weight: 600;
color: #fff;
height: 44px;
line-height: 44px;
padding: 0px 25px;
40
.accent-button a:hover {
color: #45489a;
header {
position: fixed;
top: 0;
transition: top 0.3s ease-in-out;
width: 100%;
.nav-up {
top: -75px;
/* Responsive Navigation */
.responsive-nav {
position: fixed;
z-index: 10;
width: 100%;
height: 80px;
41
background-color: rgba(250,250,250,.95);
box-shadow: 0px 5px 15px rgba(0,0,0,0.2);
.navbar-toggle {
position: absolute;
top: 40%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
.navbar-nav {
margin: 0;
border: none;
#main-nav ul {
text-align: center;
background-color: rgba(0,0,0,0.9);
margin-top: 59px;
width: 100%;
42
#main-nav ul li {
margin: 15px 0px;
#main-nav ul li:hover {
background-color: transparent;
#main-nav ul li a {
font-size: 15px;
color: #fff;
box-shadow: none;
border: none;
#main-nav ul li a:hover {
opacity: 0.5;
.navbar-toggle span {
background-color: #232323;
/* Sidebar Style */
43
.sidebar-navigation {
width: 22.5%;
float: left;
height: 100%;
position: fixed;
z-index: 10;
.sidebar-navigation .logo {
position: absolute;
width: 100%;
height: 140px;
line-height: 100px;
padding: 20px;
text-align: center;
.sidebar-navigation .logo a {
color: #fff;
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
44
height: 100px;
width: 100%;
border: 1px solid rgba(250,250,250,0.5);
.sidebar-navigation .logo em {
font-style: normal;
font-weight: 300;
.sidebar-navigation nav {
position: relative;
top: 60%;
left: 60%;
-webkit-transform: translateX(-60%) translateY(-60%);
-moz-transform: translateX(-60%) translateY(-60%);
-ms-transform: translateX(-60%) translateY(-60%);
-o-transform: translateX(-60%) translateY(-60%);
transform: translateX(-60%) translateY(-60%);
.sidebar-navigation ul {
margin-left: 45px;
list-style: none;
45
padding: 0;
.sidebar-navigation li{
padding: 10px 0;
.sidebar-navigation span{
position:relative;
.sidebar-navigation nav a{
color: #fff;
margin-top: 5px;
text-decoration: none!important;
font-size: 15px;
.circle{
margin-right: 5px;
height: 10px;
width: 10px;
left: 0px;
top: -1px;
border-radius: 50%;
46
border: 2px solid #fff;
.rect{
height: 1px;
width: 0px;
left: 0;
bottom: 5.5px;
-webkit-transition: -webkit-transform 0.1s, width 0.6s;
-moz-transition: -webkit-transform 0.1s, width 0.6s;
transition: transform 0.1s, width 0.6s;
.sidebar-navigation nav a:focus {
color: #fff;
.sidebar-navigation nav a:hover, nav .active-section {
color: #fff;
.sidebar-navigation nav a:hover span, nav .active-section span{
background-color: #ddd;
.sidebar-navigation nav .active-section .rect{
width: 30px;
.sidebar-navigation nav .active-section .circle{

47
.sidebar-navigation .social-icons {
position: absolute;
width: 100%;
bottom: 10px;
padding: 0;
margin: 0;
text-align: center;
.sidebar-navigation .social-icons li {
margin-right: 15px;
margin-top: 0px;
margin-bottom: 0px;
.sidebar-navigation .social-icons li:last-child {
margin-right: 0px;
.sidebar-navigation .social-icons li a {
font-size: 18px;
color: #fff;

48
.sidebar-navigation .social-icons li a:hover {
color: #45489a;
/* Slider Style */
.slider .content-section {
padding-top: 0px;
min-width: 100%;
min-height: 100vh;
width: 100%;
height: 100vh;
text-align: center;
.slider p a {
color: #040404;
.slider p a:hover {
color: #040404;
}
49
.Modern-Slider .info {
text-align: right;
position: absolute;
z-index: 10;
top: 50%;
right: 60px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
.Modern-Slider .info h1 {
margin-top: 0px;
font-size: 48px;
color: #fff;
font-weight: 700;
.Modern-Slider .info p {
font-size: 20px;
color: #000000;
font-weight: 700;
50
.Modern-Slider .info .white-button {
margin-top: 30px;
.Modern-Slider .info .white-button a:focus {
outline: none;
.Modern-Slider .slick-dots {
opacity: 0;
.Modern-Slider .NextArrow{
outline: none;
display: none;
position:absolute;
top:60px;
right:60px;
width:50px;
height:50px;
background:rgba(0,0,0,.50);
border:0 none;
margin-top:-22.5px;
text-align:center;
51
font:32px/50px FontAwesome;
color:#FFF;
z-index:5;
.Modern-Slider .NextArrow:before{content:'\f105';}
.Modern-Slider .PrevArrow{
outline: none;
position:absolute;
top:60px;
right: 120px;
width:50px;
height:50px;
border:0 none;
margin-top:-22.5px;
text-align:center;
color:#FFF;
z-index:5;
.Modern-Slider .item .image {
width: 100%;
height: 100vh;
52
background-position: center center;
background-size: cover;
display: block;
.Modern-Slider .item-1 .image {
background-image: url(../img/amuse5.jpg);
background-image: url(../img/amuse2.jpg);
background-image: url(../img/mermaid.jpg);
.Modern-Slider .PrevArrow:before{content:'\f104';}
.Modern-Slider .item .image {
animation: zoomin 12s ease-in-out infinite alternate;
-webkit-animation: zoomin 12s ease-in-out infinite alternate;
/*box*/
body {
53
color: #fff;
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica
Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
.box {
background: #2db34a;
border-radius: 6px;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
transition: background .2s linear, border-radius 1s ease-in 1s;
width: 95px;
.box:hover {
background: #ff7b29;
border-radius: 50%;
@keyframes zoomin {
0% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.2);}
.Modern-Slider {background:transparent;}
54
/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-
user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-
action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-
transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
/* Featured Style */
#featured {
padding-left: 60px;
padding-right: 60px;
padding-bottom: 80px;
border-bottom: 1px solid #eee;

55
#featured .section-heading {
margin-right: 20%;
#featured .content-section {
position: relative;
#featured .owl-dots {
margin-top: 40px;
#featured .owl-dots .owl-dot span {
width: 12px;
height: 12px;
background-color: #cdcdcd!important;
border-radius: 50%;
margin: 0 3px;
#featured .owl-dots .active span {
background-color: #45489a!important;
56
#featured .owl-dots button {
outline: none;
#featured .owl-nav {
position: absolute;
top: -110px;
right: 0;
#featured .owl-nav button:focus {
outline: none;
#featured .owl-nav .owl-prev span {
margin-right: 10px;
#featured .owl-nav .owl-next span, #featured .owl-nav .owl-prev span {
outline: none;
width: 50px;
height: 50px;
57
text-align: center;
line-height: 42px;
background-color: #eee;
color: #232323;
font-size: 42px;
#featured .owl-nav span:hover {
color: #fff;
#featured .item {
text-align: left;
position: relative;
z-index: 10;
#featured .item .image {
position: relative;
#featured .item .image img {
width: 100%;
overflow: hidden;
58
#featured .item .image .featured-button a {
font-size: 13px;
font-weight: 600;
color: #fff;
text-align: center;
background-color: rgba(69,72,154, 0.9);
height: 44px;
line-height: 44px;
width: 100%;
position: absolute;
z-index: 9;
bottom: -44px;
opacity: 0;
#featured .item:hover .featured-button a {
bottom: 0;
opacity: 1;
}
59
#featured .item .text-content {
padding-top: 20px;
position: relative;
z-index: 10;
#featured .item .text-content h4 {
margin-top: 0px;
margin-bottom: 5px;
font-size: 21px;
font-weight: 600;
color: #232323;
#featured .item .text-content span {
font-size: 15px;
font-weight: 600;
color: #7a7a7a;
margin-bottom: 12.5px;
}
60
/* Projects Style */
#projects {
padding-left: 60px;
#projects .masonry {
position: relative;
width: 100%;
#projects .masonry .item img {
transition: all 1s;
width: 100%;
overflow: hidden;
#projects .masonry .item img:hover {
opacity: 0.5;
}
61
/* Video Presentation Style */
#video {
text-align: center;
background-color: #f4f4f4;
padding: 100px 60px;
#video .section-heading {
text-align: center;
#video .section-heading h1 {
display: block;
margin: 0px;
#video .section-heading p {
position: relative;
margin: 0px;
#video .accent-button {
62
margin-top: 30px;
.box-video{
width: 100%;
position: relative;
margin-top: 30px;
cursor: pointer;
overflow: hidden;
.box-video .bg-video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 2;
.box-video .video-container{
position: relative;
margin: 0;
63
z-index: 1;
.box-video .bt-play {
position: absolute;
top:50%;
left:50%;
margin:-30px 0 0 -30px;
width: 60px;
height: 60px;
background:#fff;
border-radius: 50%;
text-indent: -999em;
cursor: pointer;
z-index:2;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
.box-video .bt-play:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
height: 0;
width: 0;
64
margin: -12px 0 0 -6px;
border: solid transparent;
border-left-color: #000;
border-width: 12px 20px;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
.box-video:hover .bt-play {
transform: scale(1.1);
.box-video.open .bg-video{
visibility: hidden;
opacity: 0;
-webkit-transition: all .6s .8s;
transition: all .6s .8s;
.box-video.open .video-container{
opacity: 1;
-webkit-transition: all .6s .8s;
transition: all .6s .8s;
}
65
/* Blog Style */
#blog {
padding-left: 60px;
#blog .tabs {
list-style: none;
margin: 0px;
padding: 0px;
height: 90px;
width: 100%;
background-color: #eee;
border-bottom: 10px solid #45489a;
#blog .tabs li {
text-align: center;
width: 25%;
float: left;
margin: 0;
padding: 0;
}
66
#blog .tabs a {
display: block;
text-align: center;
color: #232323;
font-size: 19px;
line-height: 80px;
font-weight: 600;
transition: 0.5s;
#blog .tabs a:hover {
color: #45489a;
#blog .tabs .active:hover {
color: #fff;
#blog .tabs .active {
color: #fff;
67
.tabgroup {
padding: 20px 30px;
.clearfix:after {
content:"";
display:table;
clear:both;
#blog .tabgroup ul {
padding: 0;
margin: 0;
list-style: none;
#blog .tabgroup ul li {
text-align: left;
border-bottom: 1px solid #ddd;
}
68
#blog .tabgroup ul li:last-child {
border-bottom: none;
margin-bottom: 0px;
#blog .tabgroup ul li img {
float: left;
margin-right: 30px;
max-width: 100%;
overflow: hidden;
#blog .tabgroup ul li .text-content {
display: inline;
#blog .item .text-content h4 {
padding-top: 7.5px;
margin-top: 0px;
margin-bottom: 5px;
font-size: 21px;
font-weight: 600;
color: #232323;
}
69
#blog .item .text-content span {
font-size: 15px;
font-weight: 600;
color: #7a7a7a;
#blog .item .text-content .accent-button {
margin-top: 25px;
/* Contact Style */
#contact {
padding-top: 0px;
#contact-content {
padding: 80px 60px;
}
70
#contact input {
border-radius: 0px;
padding-left: 15px;
font-size: 13px;
color: #aaa;
border: 1px solid #eee;
outline: none;
box-shadow: none;
line-height: 40px;
height: 40px;
width: 100%;
#contact textarea {
border-radius: 0px;
padding-left: 15px;
padding-top: 10px;
font-size: 13px;
color: #aaa;
border: 1px solid #eee;
outline: none;
box-shadow: none;
71
height: 200px;
max-height: 250px;
width: 100%;
max-width: 100%;
#contact button {
font-size: 13px;
border-radius: 0px;
font-weight: 600;
color: #fff;
height: 44px;
line-height: 24px;
outline: none;
box-shadow: none;
width: 100%;
#contact button:hover {
72
color: #232323;
/* Footer Style */
.footer {
height: 80px;
line-height: 80px;
text-align: center;
width: 100%;
.footer p {
margin-bottom: 0px;
font-size: 13px;
line-height: 80px;
color: #fff;
font-weight: 300;
}
73
.footer p a {
color: #fff;
font-weight: 600;
/* Responsive Style */
@media (max-width: 992px) {
.responsive-nav {
display: none;
.sidebar-navigation .logo a {
font-size: 18px;
.sidebar-navigation nav a {
font-size: 13px;
.sidebar-navigation nav ul {
margin-left: 30px;
74
.sidebar-navigation .social-icons li a {
font-size: 15px;
.responsive-nav {
display: block;
height: 60px;
.page-content {
width: 100%;
.Modern-Slider .info {
text-align: center;
right: 0px;
padding: 0px 30px;
}
75
.Modern-Slider .NextArrow{
outline: none;
display: none;
position:absolute;
top:120px;
right: 50%;
transform: translateX(50%);
margin-right: -30px;
width:50px;
height:50px;
border:0 none;
text-align:center;
color:#FFF;
z-index:5;
.Modern-Slider .NextArrow:before{content:'\f105';}
.Modern-Slider .PrevArrow{
outline: none;
position:absolute;
top:120px;
left: 50%;
transform: translateX(-50%);
76
margin-left: -30px;
width:50px;
height:50px;
border:0 none;
text-align:center;
color:#FFF;
z-index:5;
.section-heading p {
position: relative;
#featured {
padding-left: 15px;
}
77
#featured .owl-nav {
position: absolute;
top: -220px;
right: 0;
#projects {
padding-left: 15px;
#video {
padding-left: 15px;
#blog {
padding-left: 15px;
#blog .tabs a {
font-size: 13px;
}
78
#blog .tabgroup ul li img {
float: none;
width: 100%;
#blog .tabgroup ul li .text-content {
display: block;
#contact-content {
padding-left: 15px;

Sanjalika

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Sanjalika

Uploaded by

Copyright:

Available Formats

Table of Contents

showers of blessings throughout my research work to complete the research

giving me the opportunity to do research and do my absolute best in this project.

contains the following;

of implementation in the form of laddered approach.

These applications help you build a larger more robust application.

‘SANJALIKA WATER PARK’.

than going without any information.

and it is runnable through any browser.

is crucial to the success and failure of a company/business.

RIDES AND SLIDES

GALLERY AND FOOD ZONE

MEET OUR TEAM

SOURCE CODE WITH COMMENTS

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>SANJALIKA WATER PARK</title>

<meta name="description" content="">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="apple-touch-icon" href="apple-touch-icon.png">

<link rel="stylesheet" href="css/bootstrap.min.css">

<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<link rel="stylesheet" href="css/fontAwesome.css">

<link rel="stylesheet" href="css/light-box.css">

<link rel="stylesheet" href="css/owl-carousel.css">

<link rel="stylesheet" href="css/sanjalika.css">

<header class="nav-down responsive-nav hidden-lg hidden-md">

<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-

<span class="sr-only">Toggle navigation</span>

<div id="main-nav" class="collapse navbar-collapse">

<ul class="nav navbar-nav">

<li><a href="#rides">Rides and Slides</a></li>

<li><a href="#blog">Blog Entries</a></li>

<li><a href="#contact">Contact Us</a></li>

<div class="sidebar-navigation hidde-sm hidden-xs">

<a href="#">Sanjalika<em>Water Park</em></a>

Rides and Slides

<li><a href="#"><i class="fa fa-facebook"></i></a></li>

<li><a href="#"><i class="fa fa-twitter"></i></a></li>

<li><a href="#"><i class="fa fa-linkedin"></i></a></li>

<li><a href="#"><i class="fa fa-rss"></i></a></li>

<li><a href="#"><i class="fa fa-behance"></i></a></li>

<div class="Modern-Slider content-section" id="top">

<div class="item item-1">

big five. It is a journey of a lifetime which you cannot afford to miss.<br>

It is one of its own in the Kenyan Coast

<div class="white-button button">

<a href="#featured">Discover More</a>

<div class="item item-2">

<!--<h1>Booking & <br>Timing</h1>

<p>Come dive with the dolphins

<br>Thank you for helping us.</p>-->

<div class="white-button button">

<a href="#featured">BOOKING 0798948825</a>

<div class="item item-3">

opposite Mnarani shopping Centre <br>Life guards are always on duty.</p>

<div class="white-button button">

<a href="#featured">Learn More</a>