|
|
| |
| <div class="banner-video-area mx-auto"> |
| <video id="videoPlayer1" class="videoPlayer what-fits-banner-img d-block" poster="assets/video/dubai-video-thumbnail.webp" |
| preload="auto" autoplay muted playsinline webkit-playsinline x5-playsinline data-src="video/dubai-video.mp4" |
| loop="false"> |
| <source src="" type="video/mp4"> |
| Your browser does not support the video tag. |
| </video> |
|
|
| <div class="logo-overlay"> |
| <img src="assets/images/rl-residences-logo.svg" alt=""> |
| </div> |
|
|
| <a href="#main-section" class="scrolldown-icon-area"> |
| <img src="assets/images/more-content-indicator.svg" alt=""> |
| </a> |
| </div> |
|
|
|
|
|
|
|
|
|
|
| <section class="main-section" id="main-section"> |
| <div class="section-heading"> |
| <h2>Gallery</h2> |
| <p>Step into a world of contemporary design, curated amenities, and unmatched hospitality.</p> |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| <div class="GalleryThumbnail"> |
| <div class="gallery-container"> |
| <div class="gallery"> |
| <figure class="gallery__item gallery__item--0"><img |
| src="assets/images/homepage/homepage-gallery-left-top.webp" |
| alt="Gallery image 1" title="Gallery image 1" class="gallery__img"></figure> |
| <figure class="gallery__item gallery__item--1"><img |
| src="assets/images/homepage/homepage-gallery-left-bottom.webp" |
| alt="Gallery image 2" title="Gallery image 2" class="gallery__img"></figure> |
| <figure class="gallery__item gallery__item--2"><img |
| src="assets/images/homepage/homepage-gallery-center.webp" |
| alt="Gallery image 3" title="Gallery image 3" class="gallery__img"></figure> |
| <figure class="gallery__item gallery__item--3"><img |
| src="assets/images/homepage/homepage-gallery-right-top.webp" |
| alt="Gallery image 4" title="Gallery image 4" class="gallery__img"></figure> |
| <figure class="gallery__item gallery__item--4"><img |
| src="assets/images/homepage/homepage-gallery-right-bottom.webp" |
| alt="Gallery image 5" title="Gallery image 5" class="gallery__img"></figure> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="section-heading">` |
| <h2>Accommodation</h2> |
| <p>More Than a Stay – It will be a Journey of you with Us</p> |
| </div> |
|
|
| <div class="hero-template"> |
| <div class="ad-banner"> |
| <div class="text-content"> |
| <h2>Plan your next unforgettable stay</h2> |
| <p>Looking for the perfect destination? Start exploring top <br class="d-none d-md-block"> hotels, |
| villas, and unique stays around the world.</p> |
| |
| <button>DISCOVER MORE STAYS</button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="section-heading"> |
| <h2>Your Trip, Perfectly Crafted</h2> |
| <p>Curated experiences, flawless itineraries, and unmatched comfort. Because your travels deserve nothing |
| less than perfection.</p> |
| </div> |
|
|
| <section class="image-text-content-3 w-100"> |
| |
| |
| <div class="left-image"> |
| <img src="assets/images/homepage/homepage-your-trip-perfectly-crafted.webp" |
| alt="Curated itineraries that blend luxury, comfort, and unforgettable experiences." |
| title="Curated itineraries that blend luxury, comfort, and unforgettable experiences."> |
| </div> |
| <div class="right-content"> |
| <h3>Curated itineraries that blend luxury, comfort, and unforgettable experiences.</h3> |
| <p>Diesel’s Clean Clash collection challenges the idea of what “fits” together by integrating |
| elements of contrasting worlds. The result is a polished two-tone jewelry lineup featuring |
| chunky, herringbone and roped chains that maintain Diesel’s penchant for brazen |
| individualism.</p> |
| <button class="banner-action-btn">Explore</button> |
| </div> |
| </section> |
|
|
| <div class="section-heading"> |
| <h2>Redefining service with seamless access to the extraordinary</h2> |
| <p>Elevating your journey with unmatched attention and exclusive privileges. Because extraordinary should |
| always feel effortless.</p> |
| </div> |
|
|
| <section class="image-text-content-3 reverse w-100"> |
| <div class="right-content"> |
| <h3>Your dedicated gateway to effortless luxury, tailored to every desire.</h3> |
| <p>Our concierge service is more than assistance—it’s your personal gateway to effortless luxury. <br> |
| <br> From |
| securing exclusive reservations and curated experiences to arranging seamless travel, every detail |
| is handled with precision and care. |
| </p> |
| <button class="banner-action-btn">Explore</button> |
| </div> |
| <div class="left-image"> |
| <img src="assets/images/homepage/homepage-homepage-redefining-service-with-seamless-access-to-the-extraordinary.webp" |
| alt="Your dedicated gateway to effortless luxury, tailored to every desire." |
| title="Your dedicated gateway to effortless luxury, tailored to every desire."> |
| </div> |
|
|
| </section> |
|
|
| <div class="section-heading"> |
| <h2>Experience stays you’ll always remember</h2> |
| <p>Indulge in elegance, unmatched hospitality, and premium comfort. Your perfect getaway begins the moment |
| you arrive.</p> |
| </div> |
|
|
| <section class="image-text-content-3 w-100"> |
| |
| |
| <div class="left-image"> |
| <img src="assets/images/homepage/homepage-experience-stays-you’ll-always-remember.webp" |
| alt="Experience the perfect blend of comfort, style, and sophistication in every stay." |
| title="Experience the perfect blend of comfort, style, and sophistication in every stay."> |
| </div> |
| <div class="right-content"> |
| <h3>Experience the perfect blend of comfort, style, and sophistication in every stay.</h3> |
| <p>We redefine luxury living with unmatched hospitality, contemporary design, and world-class amenities. |
| Whether for a short stay or a long escape, our property is your sanctuary of elegance and comfort. |
| Here, every stay becomes a cherished memory.</p> |
| <button class="banner-action-btn">Explore</button> |
| </div> |
| </section> |
|
|
| <div class="section-heading"> |
| <h2>Dine in style, where luxury meets gastronomy.</h2> |
| <p>Immerse yourself in a world of exquisite flavors and refined ambiance. Every meal is crafted to be a |
| memorable culinary journey.</p> |
| </div> |
|
|
| <section class="image-text-content-3 reverse w-100"> |
| <div class="right-content"> |
| <h3>An unforgettable culinary journey, tailored to perfection.</h3> |
| <p>Step into a world where culinary artistry meets refined elegance. Every dish is crafted with the |
| finest ingredients, presenting flavors that delight and inspire. <br> <br> From intimate dinners to |
| grand |
| celebrations, our dining experience is designed to create unforgettable moments. |
| </p> |
| <button class="banner-action-btn">Explore</button> |
| </div> |
| <div class="left-image"> |
| <img src="assets/images/homepage/homepage-dine-in-style-where-luxury-meets-gastronomy.webp" |
| alt="An unforgettable culinary journey, tailored to perfection." |
| title="An unforgettable culinary journey, tailored to perfection."> |
| </div> |
|
|
| </section> |
|
|
| <div class="section-heading"> |
| <h2>Elevate Your Experience, Earn the Extraordinary</h2> |
| <p>Enjoy exclusive privileges and curated rewards designed just for you. Every moment of your stay becomes |
| an opportunity to indulge in luxury.</p> |
| </div> |
|
|
| <section class="image-text-content-3 w-100"> |
| |
| |
| <div class="left-image"> |
| <img src="assets/images/homepage/homepage-elevate-your-experience-earn-the-extraordinary.webp" |
| alt="Because Exceptional Guests Deserve Exceptional Rewards" |
| title="Because Exceptional Guests Deserve Exceptional Rewards"> |
| </div> |
| <div class="right-content"> |
| <h3>Because Exceptional Guests Deserve Exceptional Rewards</h3> |
| <p>Our loyalty program is designed for those who appreciate the finer things in life. Earn exclusive |
| rewards, enjoy personalized privileges, and gain access to curated experiences. Every visit adds |
| value, turning your stays into unforgettable moments of indulgence.</p> |
| <button class="banner-action-btn">Explore</button> |
| </div> |
| </section> |
|
|
| <div class="mobile-app-download-area" id="mobile-app-download"> |
| <button><img src="assets/images/homepage/play-store.svg" alt=""></button> |
| <button><img src="assets/images/homepage/app-store.svg" alt=""></button> |
| </div> |
|
|
| </section> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| <script> |
| document.querySelector('.scrolldown-icon-area').addEventListener('click', function (e) { |
| e.preventDefault(); // prevent default jump |
|
|
| const section = document.getElementById('main-section'); |
| const offset = 100; // gap from top |
|
|
| const topPos = section.getBoundingClientRect().top + window.scrollY - offset; |
|
|
| window.scrollTo({ |
| top: topPos, |
| behavior: 'smooth' |
| }); |
| }); |
| </script> |
|
|
| <script> |
| (function () { |
| // ✅ Home matcher: / or /home (with optional trailing slash or query) |
| var isHome = /^\/($|home([\/?]|$))/i.test(location.pathname); |
|
|
| // ensure jQuery exists |
| if (!window.jQuery) { console.warn('jQuery not found for sticky header'); return; } |
| var $w = $(window); |
|
|
| // namespace the scroll to avoid duplicates |
| $w.off('scroll.headerSticky'); |
|
|
| if (!isHome) { |
| // Non-home: show the “plain†header and never toggle on scroll |
| $('.headerFixedElements').removeClass('top-header-area'); |
| $('.headerContainer').removeClass('bottom-header-area'); |
| return; // â¬…ï¸ no scroll handler |
| } |
|
|
| // Home: start with top/bottom classes |
| $('.headerFixedElements').addClass('top-header-area'); |
| $('.headerContainer').addClass('bottom-header-area'); |
|
|
| // Attach one scroll handler (namespaced) |
| $w.on('scroll.headerSticky', fncStickyHeader); |
| fncStickyHeader(); // run once on load |
|
|
| function fncStickyHeader() { |
| if (!isHome) return; // hard guard |
| var width = $w.width() || 0; |
| if (width <= 100) return; // your original width check |
|
|
| var y = $w.scrollTop() || 0; |
|
|
| if (y > 100) { |
| $('.headerFixedElements').removeClass('top-header-area'); |
| $('.headerContainer').removeClass('bottom-header-area'); |
| } else { |
| $('.headerFixedElements').addClass('top-header-area'); |
| $('.headerContainer').addClass('bottom-header-area'); |
| } |
| } |
| })(); |
| </script> |
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
|
|
| // Video 1 |
| setTimeout(() => { |
| const videos1 = document.querySelectorAll('.videoPlayer'); |
| if (videos1.length) { |
| const observer1 = new IntersectionObserver(entries => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| if (entry.target.paused) entry.target.play(); |
| } else { |
| entry.target.pause(); |
| } |
| }); |
| }, { threshold: 0.5 }); |
|
|
| videos1.forEach(video => { |
| video.querySelector('source').src = video.getAttribute('data-src'); |
| video.load(); |
| observer1.observe(video); |
| video.muted = true; |
| video.loop = false; |
| }); |
| } |
| }, 1000); |
| }); |
|
|
| </script> |
|
|
| <script> |
| const mobileAppDownload = document.getElementById("mobile-app-download"); |
|
|
| function toggleMobileAppDownload() { |
| if (window.scrollY > 0 && window.innerWidth < 768) { |
| mobileAppDownload.style.display = "flex"; |
| } else { |
| mobileAppDownload.style.display = "none"; |
| } |
| } |
|
|
| window.addEventListener("scroll", toggleMobileAppDownload); |
| window.addEventListener("resize", toggleMobileAppDownload); |
| </script> |
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| |