1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <meta name="description" content="Create accommodation booking pages that fit with your branding. Upload images and your logo to build reservation pages for your website."> 8 <meta name="keywords" content="bloom, accommodation, booking, reservation, online, hotel, freetobook,"> 9 <meta name="robots" content="index, follow"> 10 <meta name="language" content="English"> 11 <title>bloom online booking</title> 12 <link rel="stylesheet" href="css/style.css"> 13 <link rel="stylesheet" href="css/animateinview.css"> 14 15 <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> 16<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> 17<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> 18<link rel="manifest" href="site.webmanifest"> 19 20 </head> 21 22 23 <body style="margin:0; padding:0;"> 24 25 26 27 <nav class="navbar navbar-fixed-top" id="navbar"> 28 29 30 <div class="logo"> 31 <a href="#"> <img src="images/bloom stacked logo.svg" alt="bloom logo"></a> 32 </div> 33 34 <ul id="hidemenu"> 35 <li><a href="#">Intro</a></li> 36 <li><a href="#whatisit">What is it?</a></li> 37 <li><a href="#d-features">Features</a></li> 38 <li><a href="#faqs">FAQs</a></li> 39 <li><a href="https://www.freetobook.com/registration/" target="_blank"><button>Get started</button></a></li> 40 41 </ul> 42 43 <span id="menubtn" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span> 44 </nav> 45 46 47 48 <div id="mySidenav" class="sidenav"> 49 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> 50 <a href="#" onclick="closeNav()">Intro</a> 51 <a href="#whatisit" onclick="closeNav()">What is it?</a> 52 <a href="#m-features" onclick="closeNav()">Features</a> 53 <a href="#faqs" onclick="closeNav()">FAQs</a> 54 55 <a href="https://www.freetobook.com/registration/" target="_blank"><button>Get started</button></a> 56 </div> 57 58 59 <div class="container"> 60 61 <div class="section group txtcenter"> 62 <div class="col span_6_of_6"> 63 64 <div style="margin-top: 100px;"> 65 <div class="zoomlogo animation-element zoomitout"><img src="images/bloomIcon.svg" alt="bloom logo"></div> 66 <div class="logosubline animation-element fadeitin"><img src="images/bloom long logo.svg" alt="bloom logo"></div> 67 </div> 68 <div class="animation-element fadeupinview"><h1>Grow your bookings</h1> 69 <p class="leadtxt" style="margin-bottom: 0;"> 70 Design your own stunning booking pages, simplify bookings, and boost direct reservations. 71 </p> 72 73 74 </div> 75 </div> 76 77 </div> 78 </div> 79 80 <div class="container"> 81 82 <div class="section group" style="margin-bottom: 50px"> 83 <div class="col span_6_of_6 txtcenter"> 84 <video id="myVideo" playsinline autoplay muted loop src="https://static.freetobook.com/videos/bloom/bloomPromoVidWeb.mp4"></video> 85 <!-- <img class="img-responsive" src="images/heroImage.jpg"> --> 86 <h4 style="margin-top: 30px;">With bloom, youâll find it easy to build branded booking pages that captivate and convert guests to increase your direct bookings.</h4> 87 </div> 88 89 </div> 90 </div> 91 92 <div id="whatisit" class="container greyBG"> 93 <div class="txtcenter" style="padding-top: 50px;"> 94 <h2>Branded booking pages that increase conversion</h2> 95 <p class="leadtxt"> 96 Customisable booking pages for your accommodation website. Designed to look great and improve your direct bookings. 97 </p> 98 99 <a class="btn" href="https://booking-directly.com/widgets/aoQvdc40X8eAIfOM2woJA4Li2VWkEkVTZLVu6EROLAXr0du8qN1e2ifZdga43/properties/1077" target="_blank"><button>
99See it in action</button></a> 100 </div> 101 102 <div class="section group" style="margin-top: 10px;"> 103 <div class="col span_3_of_6 txtcenter"> 104 <div class="whiteBox"> 105 <div class="animation-element fadeupinview"> 106 <h3>Great images</h3> 107 <p>Upload and arrange images. <span class="txtHighlight">Made easy.</span></p></div> 108 <img class="img-responsive" src="images/ipadImageUpload.png"> 109 </div> 110 </div> 111 112 <div class="col span_3_of_6 txtcenter"> 113 <div class="whiteBox"> 114 <div class="animation-element fadeupinview"> 115 <h3>Slick performance</h3> 116 <p><span class="txtHighlight">Improve bookings.</span> Designed for the mobile world.</p></div> 117 <img class="img-responsive" src="images/iphonesPerformance.png"> 118 </div> 119 </div> 120 121 </div> 122 123 124 125 <div class="section group" style="margin-top: 10px; padding-bottom: 50px;"> 126 127 <div class="col span_2_of_6 txtcenter"> 128 <div class="whiteBox"> 129 <img class="img-responsive" src="images/heroupload.png"> 130 <div class="animation-element fadeupinview"> 131 <h4>Hero image</h4> 132 <p>Show off with a great quality hero image. Impress your guests with a great first impression.</p></div> 133 134 </div> 135 </div> 136 137 138 <div class="col span_2_of_6 txtcenter"> 139 <div class="whiteBox"> 140 <img class="img-responsive" src="images/customLogo.png"> 141 <div class="animation-element fadeupinview"> 142 <h4>Custom logo</h4> 143 <p>Customise your booking pages to fit your brand. Add your logo.</p></div> 144 145 </div> 146 </div> 147 148 <div class="col span_2_of_6 txtcenter"> 149 <div class="whiteBox"> 150 <img class="img-responsive" src="images/brandcolor.png"> 151 <div class="animation-element fadeupinview"> 152 <h4>Your brand colour</h4> 153 <p>Make your booking pages your own with custom accent colour.</p></div> 154 155 </div> 156 </div> 157 158 159 160 </div> 161 162 163 164 165 </div> 166<!-- MOBILE SLIDESHOW --> 167 168 <div id="m-features" class="container mobilefeatures" style="height: 900px;"> 169 <div class="txtcenter" style="padding-top: 50px;"> 170 <h2>Effortless booking experiences & happy guests start with bloom</h2> 171 <p class="leadtxt"> 172 Create branded booking pages that charm guests and drive direct bookings. 173 </p></div> 174 175 <div class="slideshow-container"> 176 <div class="mySlides fade"> 177 178 179 <video height="300" autoplay muted loop> 180 <source src="images/video01.mp4" type="video/mp4"> 181 </video> 182 <div class="text"> 183 <h4>Smart Calendar</h4> 184 <p>Bloomâs smart calendar shows live availability, highlights minimum stays, and guides guests seamlessly to their perfect dates.</p> 185 </div> 186 </div> 187 <div class="mySlides fade"> 188 189 <video height="300" autoplay muted loop> 190 <source src="images/video02.mp4" type="video/mp4"> 191 </video> 192 <div class="text"> 193 <h4>Search Results</h4> 194 <p>
194Bloom makes the difference! Increase bookings with bloomâs flexible options for your special offers, promo codes and meal choices.</p> 195 </div> 196 </div> 197 <div class="mySlides fade"> 198 199 <video height="300" autoplay muted loop> 200 <source src="images/video03.mp4" type="video/mp4"> 201 </video> 202 <div class="text"> 203 <h4>Booking Extras</h4> 204 <p>Unlock untapped revenue and lift your guest experience with optional extras that sit neatly in bloomâs booking process.</p> 205 </div> 206 </div> 207 <div class="mySlides fade"> 208 209 <video height="300" autoplay muted loop> 210 <source src="images/video04.mp4" type="video/mp4"> 211 </video> 212 <div class="text"> 213 <h4>Payments</h4> 214 <p>Payments are automatically integrated into bloom offering guests security and simplicity. Build trust and loyalty with bloom.</p> 215 </div> 216 </div> 217 <a class="prev" onclick="plusSlides(-1)">❮</a> 218 <a class="next" onclick="plusSlides(1)">❯</a> 219 </div> 220 <br> 221 <div style="text-align:center"> 222 <span class="dot" onclick="currentSlide(0)"></span> 223 <span class="dot" onclick="currentSlide(1)"></span> 224 <span class="dot" onclick="currentSlide(2)"></span> 225 <span class="dot" onclick="currentSlide(3)"></span> 226 </div> 227 </div> 228 <!-- MOBILE SLIDESHOW --> 229 230 231 232<!-- DESKTOP SLIDESHOW --> 233 <div id="d-features" class="container desktopfeatures"> 234 <div class="txtcenter" style="padding-top: 50px;"> 235 <h2>Effortless booking experiences & happy guests start with bloom </h2> 236 <p class="leadtxt"> 237 Create branded booking pages that charm guests and drive direct bookings. 238 </p></div> 239 240 <div class="section group" style="margin-top: 10px; margin-bottom: 50px;"> 241 <div class="col span_3_of_6"> 242 <div> 243 <div class="animation-element fadeupinview" style="margin-bottom: 40px;"> 244 <h3>Features Includeâ¦</h3> 245 </div> 246 247 <div> 248 <div onclick="myFuncA(this, 0)" data-imagesrc="video01.mp4" class="imageMenu active"> 249 <h4>Smart Calendar</h4> 250 <p>Bloomâs smart calendar shows live availability, highlights minimum stays, and guides guests seamlessly to their perfect dates.</p> 251 </div> 252 253 <div onclick="myFuncA(this, 1)" data-imagesrc="video02.mp4" class="imageMenu"> 254 <h4>Search Results</h4> 255 <p>Bloom makes the difference! Increase bookings with bloomâs flexible options for your special offers, promo codes and meal choices.</p> 256 </div> 257 258 <div onclick="myFuncA(this, 2)" data-imagesrc="video03.mp4" class="imageMenu"> 259 <h4>Booking Extras</h4> 260 <p>Unlock untapped revenue and lift your guest experience with optional extras that sit neatly in bloomâs booking process.</p> 261 </div> 262 263 <div onclick="myFuncA(this, 3)" data-imagesrc="video04.mp4" class="imageMenu"> 264 <h4>Payments</h4> 265 <p>Payments are automatically integrated into bloom offering guests security and simplicity. Build trust and loyalty with bloom.</p> 266 </div> 267 </div> 268 </div> 269 </div> 270 271 <div class="col span_3_of_6 txtcenter"> 272 <div> 273 <div class="animation-element fadeupinview"> 274 <!-- <img id="imageMenuPicture" class="img-responsive" src="images/image01.gif" style="max-width: 410px;"> --> 275 276 <video id="imageMenuPicture" width="380" autoplay muted loop> 277 <source src="images/video01.mp4" type="video/mp4"> 278 279 </video> 280 </div> 281 282 </div> 283 </div> 284 285 </div> 286 287 288 289 </div> 290 <!-- DESKTOP SLIDESHOW --> 291 292 293 <div class="container"> 294 295 <div class="section group txtcenter"> 296 <div class="col span_6_of_6" style="padding-bottom: 60px;"> 297 298 299 <h4 style="margin-bottom: 20px;">register for your freetobook account</h4> 300 <a class="btn" href="https://www.freetobook.com/registration/" target="_blank"><button>
300Get Started</button></a> 301 302 </div> 303 304 305 </div> 306 </div> 307 308 309 310 311 312 313 <div id="faqs" class="container greyBG"> 314 <div class="section group"> 315 <div class="col span_6_of_6"> 316 <h3>FAQ</h3> 317 <main class="faq-content"> 318 319 320 <div class="faq-articles"> 321 322 <article class="faq-accordion"> 323 324 <input type="checkbox" class="tgg-title" id="tgg-title-1"> 325 326 <div class="faq-accordion-title"> 327 <label for="tgg-title-1"> 328 <h2>How do I add this to my website?</h2> 329 <span class="arrow-icon"> 330 <img src="images/icon-arrow-down.svg"> 331 </span> 332 </label> 333 </div> 334 335 <div class="faq-accordion-content"> 336 <p class="faqtxt">Simply add the booking link code to your website. Thereâs a couple of options to make it easy. The booking link code will become available to you when you register for a freetobook account. - <a href="https://www.freetobook.com/registration/" target="_blank">register</a></p> 337 338 339 </div> 340 341 </article> <!-- faq accordion --> 342 343 <article class="faq-accordion"> 344 345 <input type="checkbox" class="tgg-title" id="tgg-title-2"> 346 347 <div class="faq-accordion-title"> 348 <label for="tgg-title-2"> 349 <h2> 350 Do I need an account with freetobook? 351 </h2> 352 <span class="arrow-icon"> 353 <img src="images/icon-arrow-down.svg"> 354 </span> 355 </label> 356 </div> 357 358 <div class="faq-accordion-content"> 359 <p class="faqtxt">Yes, get one now for free and get started - <a href="https://www.freetobook.com/registration/" target="_blank">register</a></p> 360 </div> 361 362 </article> <!-- faq accordion --> 363 364 <article class="faq-accordion"> 365 366 <input class="tgg-title" type="checkbox" id="tgg-title-3"> 367 368 <div class="faq-accordion-title"> 369 <label for="tgg-title-3"> 370 <h2> 371 What does it cost? 372 </h2> 373 <span class="arrow-icon"> 374 <img src="images/icon-arrow-down.svg"> 375 </span> 376 </label> 377 </div> 378 379 <div class="faq-accordion-content"> 380 <p class="faqtxt">Bloom is just one of the many free features in freetobook, get started for free here - <a href="https://www.freetobook.com/registration/" target="_blank">register</a> </p> 381 </div> 382 383 </article> <!-- faq accordion --> 384 385 <article class="faq-accordion"> 386 387 <input class="tgg-title" type="checkbox" id="tgg-title-4"> 388 389 <div class="faq-accordion-title"> 390 <label for="tgg-title-4"> 391 <h2> 392 Can I use the bloom booking pages if Iâm not an accommodation owner? 393 </h2>
394 <span class="arrow-icon"> 395 <img src="images/icon-arrow-down.svg"> 396 </span> 397 </label> 398 </div> 399 400 <div class="faq-accordion-content"> 401 <p class="faqtxt"> 402 No. Freetobook is only available for accommodation providers. </p> 403 </div> 404 405 </article> <!-- faq accordion --> 406 407 <article class="faq-accordion"> 408 409 <input class="tgg-title" type="checkbox" id="tgg-title-5"> 410 411 <div class="faq-accordion-title"> 412 <label for="tgg-title-5"> 413 <h2> 414 How do I get the bloom booking pages? 415 </h2> 416 <span class="arrow-icon"> 417 <img src="images/icon-arrow-down.svg"> 418 </span> 419 </label> 420 </div> 421 422 <div class="faq-accordion-content"> 423 <p class="faqtxt"> Itâs simple, sign up for free now - <a href="https://www.freetobook.com/registration/" target="_blank">register</a> </p> 424 </div> 425 426 </article> <!-- faq accordion --> 427 428 <article class="faq-accordion"> 429 430 <input class="tgg-title" type="checkbox" id="tgg-title-6"> 431 432 <div class="faq-accordion-title"> 433 <label for="tgg-title-6"> 434 <h2> 435 Do I need to install anything? 436 </h2> 437 <span class="arrow-icon"> 438 <img src="images/icon-arrow-down.svg"> 439 </span> 440 </label> 441 </div> 442 443 <div class="faq-accordion-content"> 444 <p class="faqtxt">Bloom and freetobook are website applications, no need to install anything.</p> 445 </div> 446 447 </article> <!-- faq accordion --> 448 449 </div> <!-- faq articles --> 450 451 </main> <!-- faq --> 452 453 454 455 456 </div> 457 </div> 458 459 460 </div> 461 462 <footer> 463 <div class="container txtcenter" style="padding: 30px 0;"> 464 <div><a href="#"> <img src="images/bloom_logo.svg" alt="bloom logo"></a></div> 465 <div><p>Brought to you by <a href="https://en.freetobook.com/" target="_blank">freetobook</a> - the online booking system for accommodation providers.</p></div> 466 <div><a href="https://en.freetobook.com/" target="_blank"> <img src="images/ftb_Logo.svg" alt="freetobook logo"></a></div> 467 </div> 468 </footer> 469 470 471 472
472<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
472 473
473<script src="scripts/videoPlayPause.js"></script>
473 474
474<script src="scripts/animateinview.js"></script>
474 475
475<script src="scripts/slider.js"></script>
475 476 477
477<script> 478 let activeIndex = 0; 479 480 // when document is ready loop over imageMenu and keep moving active to next element 481 $(document).ready(function() { 482 console.log('ready'); 483 let imageMenus = document.getElementsByClassName('imageMenu'); 484 let imageMenuPicture = document.getElementById("imageMenuPicture"); 485 setInterval(function() { 486 imageMenus.item(activeIndex).classList.remove("active"); 487 if (++activeIndex === imageMenus.length) { 488 activeIndex = 0; 489 } 490 imageMenus.item(activeIndex).classList.add("active"); 491 imageMenuPicture.setAttribute('src', `images/${imageMenus.item(activeIndex).dataset.imagesrc}`) 492 }, 9000); 493 }); 494 495 function myFuncA(element, index) { 496 activeIndex = index; 497 let imageMenus = document.getElementsByClassName('imageMenu'); 498 for (var i = 0; i < imageMenus.length; i++) { 499 imageMenus.item(i).classList.remove("active"); 500 } 501 element.classList.add("active"); 502 let imageMenuPicture = document.getElementById("imageMenuPicture"); 503 imageMenuPicture.setAttribute('src', `images/${element.dataset.imagesrc}`) 504 } 505 506 507 508 509 function openNav() { 510 document.getElementById("mySidenav").style.width = "100%"; 511 } 512 513 function closeNav() { 514 document.getElementById("mySidenav").style.width = "0"; 515 } 516 517 518 $(function () { 519 $(document).scroll(function () { 520 var $nav = $(".navbar-fixed-top"); 521 $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); 522 }); 523 }); 524 </script>
524 525 526 </body> 527</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.