1200 lines
31 KiB
HTML
1200 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" charset="utf-8">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
<link rel="icon" type="image/x-icon" href="https://www2.jungleparadise.tf/images/favicon.png">
|
|
<meta name="generator" content="Zola v.0.13.0 - getzola.org" />
|
|
|
|
|
|
|
|
<title>Experiences • Jungle Paradise</title>
|
|
<meta property="og:title" content="Experiences • Jungle Paradise" />
|
|
|
|
|
|
|
|
<!-- Required meta categories -->
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- **** BEGINNING, favicons **** -->
|
|
|
|
<!-- generics -->
|
|
|
|
<!-- iOS -->
|
|
|
|
<!-- Android -->
|
|
|
|
<!-- Windows 8, IE 10 -->
|
|
|
|
<!-- Windows 8.1 and up, IE 11 -->
|
|
|
|
<!-- **** CONCLUSION, favicons **** -->
|
|
|
|
<!-- CSS/SCSS -->
|
|
<link rel="stylesheet" href="https://www2.jungleparadise.tf/css/index.css?h=cd4fe413f190b3512cd5" /> <style>@-moz-document url-prefix() {.lazy:-moz-loading {visibility:hidden;}}.ieOnly {display: none;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.ieOnly {display: block;}}</style>
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<!--
|
|
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
|
Read the documentation to get started: https://tailwindui.com/documentation
|
|
--><!-- This example requires Tailwind CSS v1.4.0+ -->
|
|
|
|
<script type="text/javascript">
|
|
|
|
var displayedMenu = "";
|
|
var hamburgerShown = false;
|
|
let width = screen.width;
|
|
var isMobile = width < 1024;
|
|
|
|
function toggleMenu(button) {
|
|
if (displayedMenu === button.id.split("-")[0]) {
|
|
button.className = button.className.replace(" text-green-500 bg-stone-200 sm:bg-transparent", " text-gray-900");
|
|
hideMenu(button.id.split("-")[0]);
|
|
button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
|
|
displayedMenu = "";
|
|
}
|
|
else {
|
|
showMenu(button.id.split("-")[0]);
|
|
button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
|
|
button.className = button.className.replace(" text-gray-900", " text-green-500 bg-stone-200 sm:bg-transparent");
|
|
displayedMenu = button.id.split("-")[0]
|
|
}
|
|
}
|
|
|
|
function handleClick(button) {
|
|
if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() }
|
|
if (button.id.indexOf("menu") !== -1 ) {
|
|
toggleMenu(button)
|
|
}
|
|
}
|
|
|
|
function toggleHamburger() {
|
|
if (hamburgerShown) {
|
|
hideHamburger();
|
|
hamburgerShown = false;
|
|
}
|
|
else {
|
|
showHamburger();
|
|
hamburgerShown = true;
|
|
}
|
|
}
|
|
|
|
function showMenu(menuName) {
|
|
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
|
|
var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
|
|
var menuElement = document.getElementById(menuId)
|
|
menuElement.className = menuElement.className.replace(" hidden" , "");
|
|
setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
|
|
}
|
|
|
|
function hideMenu(menuName) {
|
|
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
|
|
var menuElement = document.getElementById(menuId)
|
|
menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
|
|
setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
|
|
}
|
|
|
|
function showHamburger() {
|
|
document.getElementById('header-container').className = "overflow-hidden";
|
|
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
|
|
document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
|
document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
|
}
|
|
|
|
function hideHamburger() {
|
|
document.getElementById('header-container').className = "";
|
|
document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
|
|
document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
|
document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
|
if (displayedMenu !== "") { hideMenu(displayedMenu); }
|
|
}
|
|
|
|
window.onload = function(){
|
|
let elements = document.getElementsByTagName("button");
|
|
let buttons = [...elements]
|
|
buttons.forEach((button) => {
|
|
button.addEventListener( 'click', function() { handleClick(button) });
|
|
})
|
|
document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<!-- set variables used for header template -->
|
|
|
|
|
|
|
|
|
|
|
|
<header id="header-container">
|
|
|
|
<div class="z-10 header_BG fixed w-screen max-w-full customize">
|
|
<div class="relative z-50 shadow">
|
|
<div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
|
|
<div>
|
|
<a href="/" class="flex">
|
|
<img class="logo" src="https://www2.jungleparadise.tf/images/logo.png" alt="Logo" />
|
|
</a>
|
|
</div>
|
|
<div class="-mr-2 -my-2 lg:hidden">
|
|
<button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
|
|
<!-- Heroicon name: menu -->
|
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
<button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
|
|
<!-- Heroicon name: x -->
|
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
|
|
<nav class="flex space-x-6">
|
|
|
|
|
|
<a href="https://www2.jungleparadise.tf/home/" class="text-md font-normal leading-6 text-white focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
|
Home
|
|
</a>
|
|
<div class="relative">
|
|
</div>
|
|
|
|
|
|
<a href="https://www2.jungleparadise.tf/rooms/" class="text-md font-normal leading-6 text-white focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
|
Rooms
|
|
</a>
|
|
<div class="relative">
|
|
</div>
|
|
|
|
|
|
<a href="https://www2.jungleparadise.tf/restaurant/" class="text-md font-normal leading-6 text-white focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
|
Restaurant
|
|
</a>
|
|
<div class="relative">
|
|
</div>
|
|
|
|
|
|
<a href="https://www2.jungleparadise.tf/health-wellness/" class="text-md font-normal leading-6 text-white focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
|
Health & Wellness
|
|
</a>
|
|
<div class="relative">
|
|
</div>
|
|
|
|
|
|
<a href="https://www2.jungleparadise.tf/experiences/" class="text-md font-normal leading-6 text-white focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
|
Experiences
|
|
</a>
|
|
<div class="relative">
|
|
</div>
|
|
|
|
|
|
<a href="https://www2.jungleparadise.tf/contactus/" class="text-md font-normal leading-6 text-white focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
|
Contact Us
|
|
</a>
|
|
<div class="relative">
|
|
</div>
|
|
|
|
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!--
|
|
Mobile menu, show/hide based on mobile menu state.
|
|
|
|
Entering: "duration-200 ease-out"
|
|
From: "opacity-0 scale-95"
|
|
To: "opacity-100 scale-100"
|
|
Leaving: "duration-100 ease-in"
|
|
From: "opacity-100 scale-100"
|
|
To: "opacity-0 scale-95"
|
|
-->
|
|
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
|
|
<div>
|
|
<div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
|
|
<div class="pt-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
|
|
|
|
<nav class="flex flex-col justify-around pb-12">
|
|
|
|
|
|
|
|
|
|
<a href="https://www2.jungleparadise.tf/rooms/" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
|
Rooms
|
|
</a>
|
|
<hr/>
|
|
|
|
|
|
|
|
<a href="https://www2.jungleparadise.tf/restaurant/" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
|
Restaurant
|
|
</a>
|
|
<hr/>
|
|
|
|
|
|
|
|
<a href="https://www2.jungleparadise.tf/health-wellness/" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
|
Health & Wellness
|
|
</a>
|
|
<hr/>
|
|
|
|
|
|
|
|
<a href="https://www2.jungleparadise.tf/experiences/" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
|
Experiences
|
|
</a>
|
|
<hr/>
|
|
|
|
|
|
|
|
<a href="https://www2.jungleparadise.tf/contactus/" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
|
Contact Us
|
|
</a>
|
|
<hr/>
|
|
|
|
|
|
|
|
</nav>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div id="content" class="mx-auto overflow-hidden">
|
|
|
|
|
|
<main>
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
|
<script>mermaid.initialize({startOnLoad:true});</script>
|
|
<div>
|
|
|
|
<!-- section 1 (header) -->
|
|
<!-- row shortcode
|
|
Shortcode used in markdown for the creation of mobile compatible vertical rows
|
|
Divides markdown into columns by splitting content using column identifier "|||"
|
|
Creates equal width blocks in a flex row.
|
|
|
|
Parameters:
|
|
- style:
|
|
- lean: if style is lean, the row doesn't have outer margins
|
|
- bgPath: if bgPath is passed, the row has a full width background
|
|
-->
|
|
|
|
|
|
<!-- This fixes link & img paths in local, prod, and wth prefix -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- aligns columns depending on col number-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Padding -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Margins -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- reverse col at mobile -->
|
|
|
|
|
|
|
|
|
|
<!-- makes row semi-full screen width, strips margins -->
|
|
|
|
|
|
<!-- makes row full screen width, strips margins -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- makes row full screen width and adds background img -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Cancels page margins so that rows can have separate margins -->
|
|
|
|
|
|
|
|
<div id="" class="relative justify-center flex overflow-hidden " style="background: url('https://www2.jungleparadise.tf/experiences/img/exp_header.jpg'); background-size: cover; background-position: center;height: -webkit-fill-available; height: 100vh;">
|
|
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden items-center py-10 md:py-4 lg:py-24 mx-6 sm:mx-32 md:mx-40 lg:mx-80 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
|
|
|
|
|
|
|
|
<!-- Hides empty columns if displayed vertically in small screen -->
|
|
|
|
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 ">
|
|
<!-- handles mermaid markdown content display -->
|
|
|
|
|
|
<br>
|
|
<br>
|
|
<h1 class="text-white">EXPERIENCES<br>to make it all special</h1>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div><div class="container mx-auto">
|
|
<!-- section 2 -->
|
|
<!-- row shortcode
|
|
Shortcode used in markdown for the creation of mobile compatible vertical rows
|
|
Divides markdown into columns by splitting content using column identifier "|||"
|
|
Creates equal width blocks in a flex row.
|
|
|
|
Parameters:
|
|
- style:
|
|
- lean: if style is lean, the row doesn't have outer margins
|
|
- bgPath: if bgPath is passed, the row has a full width background
|
|
-->
|
|
|
|
|
|
<!-- This fixes link & img paths in local, prod, and wth prefix -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- aligns columns depending on col number-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Padding -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Margins -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- makes row full screen width and adds background img -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Cancels page margins so that rows can have separate margins -->
|
|
|
|
|
|
|
|
<div id="" class="relative justify-center flex overflow-hidden " style="">
|
|
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden items-center py-10 md:py-4 lg:py-24 mx-8 " style="min-width: -webkit-fill-available; min-width: -moz-available">
|
|
|
|
|
|
|
|
<!-- Hides empty columns if displayed vertically in small screen -->
|
|
|
|
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
|
|
<!-- handles mermaid markdown content display -->
|
|
|
|
|
|
<p><img src="https://www2.jungleparadise.tf/experiences/./img/exp_book.jpg#mx-auto" alt="Image" /></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Hides empty columns if displayed vertically in small screen -->
|
|
|
|
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
|
|
<!-- handles mermaid markdown content display -->
|
|
|
|
|
|
|
|
<h2 id="book-an-experience">Book an experience</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p><button onclick="window.location.href='/projects'">CONTACT US</button></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div><!-- section 3 -->
|
|
<!-- row shortcode
|
|
Shortcode used in markdown for the creation of mobile compatible vertical rows
|
|
Divides markdown into columns by splitting content using column identifier "|||"
|
|
Creates equal width blocks in a flex row.
|
|
|
|
Parameters:
|
|
- style:
|
|
- lean: if style is lean, the row doesn't have outer margins
|
|
- bgPath: if bgPath is passed, the row has a full width background
|
|
-->
|
|
|
|
|
|
<!-- This fixes link & img paths in local, prod, and wth prefix -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- aligns columns depending on col number-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Padding -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Margins -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- makes row full screen width and adds background img -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Cancels page margins so that rows can have separate margins -->
|
|
|
|
|
|
|
|
<div id="" class="relative justify-center flex overflow-hidden " style="">
|
|
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden items-center py-10 md:py-4 lg:py-24 mx-8 " style="min-width: -webkit-fill-available; min-width: -moz-available">
|
|
|
|
|
|
|
|
<!-- Hides empty columns if displayed vertically in small screen -->
|
|
|
|
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
|
|
<!-- handles mermaid markdown content display -->
|
|
|
|
|
|
<p><img src="https://www2.jungleparadise.tf/experiences/./img/exp_private_boot.jpg#mx-auto" alt="Image" /></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Hides empty columns if displayed vertically in small screen -->
|
|
|
|
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
|
|
<!-- handles mermaid markdown content display -->
|
|
|
|
|
|
|
|
<h2 id="private-boat-tours">Private Boat Tours</h2>
|
|
<p>Make the most out of Zanzibar's sandbanks and discover the untouched corners of Zanzibar at your own pace. Either for a few hours or an entire day, you are welcome to our selection of private boats to sail away and explore sandbanks.</p>
|
|
<p>Depending on the size of your group and the duration of your trip, the crew will organize a selection of picturesque destinations. Whether it be a romantic trip or an adventurous time with friends, you are invited on board.</p>
|
|
<p><button onclick="window.location.href='/projects'">BOOK NOW</button></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div><!-- section 4 -->
|
|
<!-- row shortcode
|
|
Shortcode used in markdown for the creation of mobile compatible vertical rows
|
|
Divides markdown into columns by splitting content using column identifier "|||"
|
|
Creates equal width blocks in a flex row.
|
|
|
|
Parameters:
|
|
- style:
|
|
- lean: if style is lean, the row doesn't have outer margins
|
|
- bgPath: if bgPath is passed, the row has a full width background
|
|
-->
|
|
|
|
|
|
<!-- This fixes link & img paths in local, prod, and wth prefix -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- aligns columns depending on col number-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Padding -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Margins -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- reverse col at mobile -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- makes row semi-full screen width, strips margins -->
|
|
|
|
|
|
<!-- makes row full screen width, strips margins -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- makes row full screen width and adds background img -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Cancels page margins so that rows can have separate margins -->
|
|
|
|
|
|
|
|
<div id="" class="relative justify-center flex overflow-hidden " style="">
|
|
<div id="" class="flex flex-col-reverse md:flex-row items-center mx-8" style="min-width: -webkit-fill-available; min-width: -moz-available">
|
|
|
|
|
|
|
|
<!-- Hides empty columns if displayed vertically in small screen -->
|
|
|
|
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
|
|
<!-- handles mermaid markdown content display -->
|
|
|
|
|
|
<h2 id="private-dinner">Private Dinner</h2>
|
|
<p>As the day winds down, enjoy a private dinning experience on the beach amidst the serene mangrove forest or the historic Mbweni Ruins. The tranquility that surrounds you will surely turn your romantic getaway into night to remember.</p>
|
|
<p>You can choose to have your candle light dinner by the private beach area or within the Mbweni Ruins. Feel free to let the staff know of your special preferences on music, menu, drinks, decorations in advance, and we will make sure to have it prepared up to your standards.</p>
|
|
<p><button onclick="window.location.href='/projects'">BOOK NOW</button></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Hides empty columns if displayed vertically in small screen -->
|
|
|
|
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
|
|
<!-- handles mermaid markdown content display -->
|
|
|
|
|
|
|
|
<p><img src="https://www2.jungleparadise.tf/experiences/./img/exp_private_dinner.jpg#mx-auto" alt="Image" /></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div><!-- section 5 -->
|
|
<!-- row shortcode
|
|
Shortcode used in markdown for the creation of mobile compatible vertical rows
|
|
Divides markdown into columns by splitting content using column identifier "|||"
|
|
Creates equal width blocks in a flex row.
|
|
|
|
Parameters:
|
|
- style:
|
|
- lean: if style is lean, the row doesn't have outer margins
|
|
- bgPath: if bgPath is passed, the row has a full width background
|
|
-->
|
|
|
|
|
|
<!-- This fixes link & img paths in local, prod, and wth prefix -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- aligns columns depending on col number-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Padding -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Margins -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- makes row full screen width and adds background img -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Cancels page margins so that rows can have separate margins -->
|
|
|
|
|
|
|
|
<div id="" class="relative justify-center flex overflow-hidden " style="">
|
|
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden items-center py-10 md:py-4 lg:py-24 mx-8 " style="min-width: -webkit-fill-available; min-width: -moz-available">
|
|
|
|
|
|
|
|
<!-- Hides empty columns if displayed vertically in small screen -->
|
|
|
|
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
|
|
<!-- handles mermaid markdown content display -->
|
|
|
|
|
|
<p><img src="https://www2.jungleparadise.tf/experiences/./img/exp_party.jpg#mx-auto" alt="Image" /></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Hides empty columns if displayed vertically in small screen -->
|
|
|
|
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
|
|
<!-- handles mermaid markdown content display -->
|
|
|
|
|
|
|
|
<h2 id="events-and-parties">Events and Parties</h2>
|
|
<p>We would love to accommodate you and your party for your special days. Reach out to find out more on what we offer and how we can create the atmosphere you have in your mind.</p>
|
|
<p>You can choose from a variety of locations within our paradise. Our beach, deck, and the majestic Mbweni Ruins are all at your service.</p>
|
|
<p><button onclick="window.location.href='/projects'">BOOK NOW</button></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div><!-- section 6 -->
|
|
<!-- row shortcode
|
|
Shortcode used in markdown for the creation of mobile compatible vertical rows
|
|
Divides markdown into columns by splitting content using column identifier "|||"
|
|
Creates equal width blocks in a flex row.
|
|
|
|
Parameters:
|
|
- style:
|
|
- lean: if style is lean, the row doesn't have outer margins
|
|
- bgPath: if bgPath is passed, the row has a full width background
|
|
-->
|
|
|
|
|
|
<!-- This fixes link & img paths in local, prod, and wth prefix -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- aligns columns depending on col number-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Padding -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Margins -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- reverse col at mobile -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- makes row semi-full screen width, strips margins -->
|
|
|
|
|
|
<!-- makes row full screen width, strips margins -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- makes row full screen width and adds background img -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Cancels page margins so that rows can have separate margins -->
|
|
|
|
|
|
|
|
<div id="" class="relative justify-center flex overflow-hidden " style="">
|
|
<div id="" class="flex flex-col-reverse md:flex-row items-center mx-8" style="min-width: -webkit-fill-available; min-width: -moz-available">
|
|
|
|
|
|
|
|
<!-- Hides empty columns if displayed vertically in small screen -->
|
|
|
|
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
|
|
<!-- handles mermaid markdown content display -->
|
|
|
|
|
|
<h2 id="tours">Tours</h2>
|
|
<p>Zanzibar is known for its adventurous and natural wonders. You can easily book a tour from many tour organizations that we are working with. For your convenience and special offers to Jungle Paradise guests, you will surely have the experiences of a life time.</p>
|
|
<p><button onclick="window.location.href='/projects'">BOOK NOW</button></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Hides empty columns if displayed vertically in small screen -->
|
|
|
|
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
|
|
<!-- handles mermaid markdown content display -->
|
|
|
|
|
|
|
|
<p><img src="https://www2.jungleparadise.tf/experiences/./img/exp_tours.jpg#mx-auto" alt="Image" /></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div></div>
|
|
|
|
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
<!--
|
|
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
|
Read the documentation to get started: https://tailwindui.com/documentation
|
|
-->
|
|
|
|
|
|
|
|
<footer class="bottom-0">
|
|
|
|
|
|
<div class="customize">
|
|
<div class="py-4 px-4 sm:px-6">
|
|
<div class="lg:flex lg:gap-4">
|
|
<div class="space-y-8 lg:max-w-sm lg:mr-8 lg:mb-2 lg:col-span-1">
|
|
<img class="w-1/2 lg:mx-4 mb-4" src="/images/logo_black.png" alt="incubaid Logo" />
|
|
</div>
|
|
<div class="lg:max-w-sm lg:mr-8 lg:mb-2 lg:col-span-1">
|
|
<p class="subheader text-xl">Location</p>
|
|
<p class="mt-0">
|
|
Mbweni Ruins - Unguja Urban West<br>
|
|
Zanzibar - Republik of Tanzania<br>
|
|
Find us here on Google maps
|
|
</p>
|
|
</div>
|
|
<div class="lg:max-w-sm lg:mr-8 lg:mb-2 lg:col-span-1">
|
|
<p class="subheader text-xl">CONTACT</p>
|
|
<p class="mt-0">
|
|
+255 778 242424 (WhatsApp)<br>
|
|
info@hotels-zanzibar.com
|
|
</p>
|
|
</div>
|
|
<div class="lg:max-w-sm lg:mr-8 lg:mb-2 lg:col-span-1">
|
|
<p class="subheader text-xl">HOURS</p>
|
|
<p class="mt-0">
|
|
Reception: 24 Hours<br>
|
|
Check-in: after 3pm <br>
|
|
Check-out: before 11am
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4 border-y-0 w-1/2 border-blue-500/50">
|
|
<div class="mx-4 text-center">
|
|
<p class="text-base pt-4 my-0">© 2022 Jungle Paradise Beach Resort & SPA <a href="https://threefold.io/" target="_blank" class="hard_blue my-0 text-base">Terms & Conditions</a></p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</footer>
|
|
|
|
|
|
<style>
|
|
|
|
.subheader {
|
|
font-family: 'Lato', sans-serif;
|
|
font-weight: 400;
|
|
color: #4173a1;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
|
|
|
|
</body>
|
|
</html> |