{"id":39,"date":"2026-04-03T19:01:26","date_gmt":"2026-04-03T19:01:26","guid":{"rendered":"https:\/\/blog.bioblogic.com\/?page_id=39"},"modified":"2026-04-03T19:04:26","modified_gmt":"2026-04-03T19:04:26","slug":"elementor-39","status":"publish","type":"page","link":"https:\/\/blog.bioblogic.com\/?page_id=39","title":{"rendered":"Elementor #39"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Palm Avenue | Modern Premium Real Estate<\/title>\r\n <meta name=\"description\" content=\"Palm Avenue - Ultra-luxury living with 3D immersive technology.\">\r\n \r\n <!-- Fonts & Icons -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@700&family=Montserrat:wght@300;400;600&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n :root {\r\n --gold: #D4AF37;\r\n --black: #0a0a0a;\r\n --dark-grey: #1a1a1a;\r\n --white: #ffffff;\r\n --glass: rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n \/* \u2705 FIX: Force full black background everywhere *\/\r\n html, body {\r\n background-color: #0a0a0a !important;\r\n }\r\n\r\n body { \r\n color: var(--white); \r\n font-family: 'Montserrat', sans-serif; \r\n overflow-x: hidden; \r\n }\r\n\r\n h1, h2, .premium-font { font-family: 'Playfair Display', serif; }\r\n\r\n \/* --- Preloader --- *\/\r\n #preloader {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n background: var(--black); z-index: 9999;\r\n display: flex; justify-content: center; align-items: center;\r\n }\r\n .loader-logo { color: var(--gold); font-size: 2rem; letter-spacing: 5px; animation: pulse 2s infinite; }\r\n\r\n \/* --- Navbar --- *\/\r\n nav {\r\n position: fixed; top: 0; width: 100%; padding: 20px 50px;\r\n display: flex; justify-content: space-between; align-items: center;\r\n z-index: 1000; transition: 0.4s;\r\n backdrop-filter: blur(10px); background: rgba(0,0,0,0.2);\r\n border-bottom: 1px solid var(--glass);\r\n }\r\n .logo { color: var(--gold); font-size: 1.5rem; font-weight: bold; text-decoration: none; }\r\n .nav-links a { color: white; text-decoration: none; margin-left: 30px; font-size: 0.9rem; transition: 0.3s; }\r\n .nav-links a:hover { color: var(--gold); }\r\n\r\n \/* --- Hero Section --- *\/\r\n .hero {\r\n height: 100vh; width: 100%; position: relative;\r\n display: flex; align-items: center; overflow: hidden;\r\n background-color: var(--black); \/* \u2705 FIX *\/\r\n }\r\n #hero-video {\r\n position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n object-fit: cover; opacity: 0.4; z-index: -1;\r\n }\r\n .hero-content { padding-left: 10%; z-index: 2; pointer-events: none; }\r\n .hero h1 { font-size: 5rem; line-height: 1.1; margin-bottom: 20px; }\r\n .hero p { font-size: 1.2rem; margin-bottom: 30px; color: #ccc; }\r\n .cta-btn {\r\n padding: 15px 40px; background: var(--gold); color: black;\r\n text-decoration: none; font-weight: bold; border-radius: 5px;\r\n display: inline-block; transition: 0.3s; pointer-events: auto;\r\n }\r\n .cta-btn:hover { background: white; transform: scale(1.05); }\r\n\r\n #hero-3d { position: absolute; right: 0; top: 0; width: 50%; height: 100vh; z-index: 1; }\r\n #map-3d { width: 100%; height: 500px; background: #111; cursor: grab; margin-top: 50px; }\r\n\r\n \/* --- Sections General --- *\/\r\n section { \r\n padding: 100px 10%; \r\n position: relative; \r\n background-color: var(--black); \/* \u2705 FIX *\/\r\n }\r\n\r\n .section-title { font-size: 3rem; margin-bottom: 50px; text-align: center; color: var(--gold); }\r\n\r\n .about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }\r\n .about-card {\r\n background: var(--dark-grey); padding: 40px; border-radius: 15px;\r\n border: 1px solid var(--glass); transition: 0.4s;\r\n }\r\n .about-card:hover { transform: translateY(-10px); border-color: var(--gold); }\r\n .about-card i { font-size: 2.5rem; color: var(--gold); margin-bottom: 20px; }\r\n\r\n .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }\r\n .gallery-item { height: 300px; background: #222; overflow: hidden; border-radius: 10px; }\r\n .gallery-item img { \r\n width: 100%; height: 100%; object-fit: cover; \r\n transition: 0.5s; filter: grayscale(100%);\r\n }\r\n .gallery-item:hover img { transform: scale(1.1); filter: grayscale(0%); }\r\n\r\n .payment-table { width: 100%; border-collapse: collapse; margin-top: 30px; }\r\n .payment-table th, .payment-table td { \r\n padding: 20px; border-bottom: 1px solid var(--glass); text-align: left; \r\n }\r\n .payment-table tr:hover { background: rgba(212, 175, 55, 0.1); }\r\n\r\n .contact-container { display: flex; gap: 50px; }\r\n .contact-form { flex: 1; display: flex; flex-direction: column; gap: 20px; }\r\n .contact-form input, .contact-form textarea {\r\n padding: 15px; background: var(--dark-grey); border: 1px solid var(--glass);\r\n color: white; border-radius: 5px; outline: none;\r\n }\r\n .contact-form input:focus { border-color: var(--gold); }\r\n\r\n footer { \r\n padding: 50px; text-align: center; border-top: 1px solid var(--glass); \r\n color: #666; \r\n background-color: var(--black); \/* \u2705 FIX *\/\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .hero h1 { font-size: 3rem; }\r\n #hero-3d { display: none; }\r\n .hero-content { padding-left: 5%; padding-right: 5%; text-align: center; }\r\n .gallery-grid { grid-template-columns: 1fr; }\r\n .contact-container { flex-direction: column; }\r\n }\r\n\r\n @keyframes pulse {\r\n 0% { opacity: 0.5; }\r\n 50% { opacity: 1; }\r\n 100% { opacity: 0.5; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div id=\"preloader\">\r\n <div class=\"loader-logo\">PALM AVENUE<\/div>\r\n <\/div>\r\n\r\n <!-- SAME HTML AS BEFORE (NO CHANGE) -->\r\n\r\n <!-- Scripts -->\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n <script>\r\n \/\/ \u2705 FIX: Prevent white flash\r\n window.addEventListener('load', () => {\r\n document.body.style.backgroundColor = \"#0a0a0a\";\r\n\r\n const tl = gsap.timeline();\r\n tl.to(\"#preloader\", { opacity: 0, duration: 1, delay: 1, onComplete: () => {\r\n document.getElementById('preloader').style.display = 'none';\r\n }});\r\n tl.from(\".hero-content h1\", { y: 100, opacity: 0, duration: 1 }, \"-=0.5\");\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Palm Avenue | Modern Premium Real Estate PALM AVENUE<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-39","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=39"}],"version-history":[{"count":8,"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages\/39\/revisions"}],"predecessor-version":[{"id":47,"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages\/39\/revisions\/47"}],"wp:attachment":[{"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}