ourworld_web/www_jungle_paradise
20
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity
f3461d0ca9
www_jungle_paradise/public/index.html
ehab-hassan f3461d0ca9 update links
2023-04-04 16:01:24 +02:00

1505 lines
37 KiB
HTML
Raw Blame History

<!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>Jungle Paradise</title>
<meta property="og:title" content="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:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;images&#x2F;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:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;home&#x2F;" 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:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;rooms&#x2F;" 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:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;restaurant&#x2F;" 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:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;health-wellness&#x2F;" 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 &amp; Wellness
</a>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;experiences&#x2F;" 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:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;contactus&#x2F;" 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:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;rooms&#x2F;" 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:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;restaurant&#x2F;" 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:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;health-wellness&#x2F;" 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 &amp; Wellness
</a>
<hr/>
<a href="https:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;experiences&#x2F;" 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:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;contactus&#x2F;" 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">
<!-- home page template, has a banner and rows of page summaries -->
<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(&#x27;https:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;home&#x2F;img&#x2F;header1_1.jpg&#x27;); 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 -->
<h1 class="text-white">Jungle Paradies</h1>
</div>
</div>
</div><!-- 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 -->
<!-- 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="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden items-center py-2 md:py-4 lg:pt-24 mx-6 sm:mx-20 md:mx-28 lg:mx-40 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 -->
<h2 id="jungle-paradise-beach-resort-spa-zanzibar">Jungle Paradise Beach Resort &amp; SPA Zanzibar</h2>
</div>
</div>
</div><div class="container mx-auto">
<!-- 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-2 md:py-4 lg:pb-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 -->
<h4 id="if-you-are-looking-for-a-one-of-a-kind-experience-in-zanzibar-look-no-further-at-jungle-paradise-beach-resort-spa-you-will-fall-in-love-with-the-stunning-views-and-unique-history">If you are looking for a one of a kind experience in Zanzibar, look no further...<br><br>At Jungle Paradise Beach Resort &amp; SPA, you will fall in love with the stunning views and unique history.</h4>
<p>Jungle Paradise Beach Resort &amp; Spa @ Mbweni Ruins Zanzibar is your ideal choice, if you want to see and enjoy a unique place in Zanzibar Urban West. It's well-known for their historical Mbweni ruins, which took part in the ending of slavery in Zanzibar in the 1870s. Jungle Paradise is surrounded by a beautiful botanic garden which supports over 280 different kinds of tree species. </p>
<p>Jungle paradise Beach Resort and SPA Zanzibar features 13 exclusive and cozy, air-conditioned beachfront Suites with a very high service standard. Each room provides a beautiful ocean-view, a private bathroom, Wi-Fi, a mini bar fridge and a balcony faced to the ocean, beach and pool area.</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/home/./img/section2.jpg#mx-auto" alt="Image" /></p>
</div>
</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="background: url(&#x27;https:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;home&#x2F;img&#x2F;header4.jpg&#x27;); 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-2 md:py-4 lg:pt-24 mx-6 sm:mx-32 md:mx-40 lg:mx-80 " 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 -->
<h1 class="text-white">Suites / Rooms -<br> Accommodation</h1>
<p><button onclick="window.location.href='/rooms'">VIEW MORE</button></p>
</div>
</div>
</div><!-- 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="background: url(&#x27;https:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;home&#x2F;img&#x2F;header2.jpg&#x27;); 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-0 mx-6 sm:mx-32 md:mx-40 lg:mx-80 " 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 -->
<h1 class="text-white">Ocean Breeze Restaurant<br> & JP's Beach Bar</h1>
<p><button onclick="window.location.href='/restaurant'">FIND OUT MORE </button></p>
</div>
</div>
</div><!-- 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="background: url(&#x27;https:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;home&#x2F;img&#x2F;header3.jpg&#x27;); 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-2 md:py-4 lg:pb-24 mx-6 sm:mx-32 md:mx-40 lg:mx-80 " 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 -->
<h1 class="text-white">Health & Wellness <br> - SPA</h1>
<p><button onclick="window.location.href='/health_wellness'">LEARN MORE </button></p>
</div>
</div>
</div><div class="container mx-auto">
<!-- 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="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden items-center py-2 md:py-4 lg:pt-24 mx-6 sm:mx-20 md:mx-28 lg:mx-40 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 -->
<h2 id="guest-reviews">Guest Reviews</h2>
</div>
</div>
</div><!-- 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="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-start py-2 md:py-4 lg:pb-24 mx-8 sm:mx-16 md:mx-20 lg:mx-28 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 -->
<p><em>&quot;Wonderful place for spending your holiday, beautiful and peaceful place with nice view to the sea.&quot;</em></p>
<p><strong>Pavel Reich</strong></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 flex-1 ">
<!-- handles mermaid markdown content display -->
<p><em>&quot;Great place to enjoy the day at the beach and watch the sunset while you have a delicious dinner. The cocktail Bar is really amazing and the view absolutely unique on this side of the island. The rooms are clean, cozy, new renovated and bigger than usual and the prices are reasonable. Our room was with an ocean beach view. But the sunsets are better to enjoy with a cold drink on the sun downer platform, where we had a nice and calm chill out vibe.&quot;</em></p>
<p><strong>Neo Life Hacker</strong></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 flex-1 ">
<!-- handles mermaid markdown content display -->
<p><em>A very beautiful area. Menu prices are cheap and delicious! Great pool, not hot! (Original) Очень красивая территория. Цены в меню недорогие и вкусно!&quot;</em> Отличный бассейн, не жарко!&quot;</p>
<p><strong>Olga Myronova</strong></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 flex-1 ">
<!-- handles mermaid markdown content display -->
<p><em>&quot;Lovely chillout! After a few days on a catamaran, this place wonderfully calmed the senses and gave strength to travel home by plane. I heartily recommend it to everyone for a short and longer visit. (Original) Codowny chillout! Po kilku dniach na katamaranie to miejsce wspaniale uspokoiło zmysły i dało siłę na podróż samolotem do domu. Serdecznie polecam wszystkim na krótką i dłuższą wizytę.&quot;</em></p>
<p><strong>Waldemar Truchel</strong></p>
</div>
</div>
</div></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(&#x27;https:&#x2F;&#x2F;www2.jungleparadise.tf&#x2F;home&#x2F;img&#x2F;header1dark.jpg&#x27;); 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 -->
<h1 class="text-white">Why to choose Jungle Paradise Beach Resort & SPA</h1>
<h3 class="text-white">BOOK YOUR NEXT PERFECT VACATION NOW</h3>
<h5 id="comfortable-suites-accommodation">COMFORTABLE SUITES - ACCOMMODATION'</h5>
<h5 id="best-sunset-views">BEST SUNSET VIEWS</h5>
<h5 id="close-to-airport">CLOSE TO AIRPORT</h5>
<h5 id="affordable-pricing">AFFORDABLE PRICING</h5>
<h5 id="best-location">BEST LOCATION</h5>
</div>
</div>
</div>
</div>
</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">&#169; 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>
Reference in New Issue View Git Blame Copy Permalink