{"id":97,"date":"2026-02-11T19:22:19","date_gmt":"2026-02-11T19:22:19","guid":{"rendered":"https:\/\/laylayammine.com\/?page_id=97"},"modified":"2026-02-25T14:24:35","modified_gmt":"2026-02-25T14:24:35","slug":"work","status":"publish","type":"page","link":"https:\/\/laylayammine.com\/ar\/work\/","title":{"rendered":"\u0627\u0644\u0643\u062a\u0627\u0628\u0627\u062a"},"content":{"rendered":"
\n\t\t\t\t
\n\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 Gallery<\/title>\r\n <style>\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n color: white;\r\n min-height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n overflow-x: hidden;\r\n background-color: #111;\r\n \/* Your Elementor margin-top will be applied here *\/\r\n }\r\n\r\n \/* Ensure WordPress admin bar is ALWAYS clickable *\/\r\n #wpadminbar {\r\n position: fixed !important;\r\n top: 0 !important;\r\n left: 0 !important;\r\n width: 100% !important;\r\n z-index: 99999 !important;\r\n pointer-events: auto !important;\r\n }\r\n\r\n \/* Create a clickable zone for the admin bar area *\/\r\n .admin-bar-click-zone {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 40px; \/* Height of admin bar *\/\r\n z-index: 99998;\r\n background: transparent;\r\n pointer-events: none; \/* Let clicks pass through to admin bar *\/\r\n }\r\n\r\n \/* Make sure the admin bar itself gets clicks *\/\r\n #wpadminbar * {\r\n pointer-events: auto !important;\r\n }\r\n\r\n \/* Container adjustments - your Elementor margin-top will push this down *\/\r\n .gallery-container {\r\n position: relative;\r\n width: 100vw;\r\n height: 100vh;\r\n display: flex;\r\n overflow: hidden;\r\n \/* Your margin-top: -40px will be applied from Elementor *\/\r\n }\r\n\r\n \/* Ensure the gallery sections don't block the admin bar *\/\r\n .gallery-section {\r\n flex: 1;\r\n position: relative;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 10;\r\n transition: background-color 0.3s ease;\r\n \/* Don't capture clicks in the admin bar area *\/\r\n }\r\n\r\n \/* Create a \"no-click\" zone at the top of each section *\/\r\n .gallery-section::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 40px; \/* Height of admin bar *\/\r\n background: transparent;\r\n z-index: 100;\r\n pointer-events: none; \/* Let clicks pass through to admin bar *\/\r\n }\r\n\r\n \/* Background layers - keep them behind *\/\r\n .bg-layer {\r\n position: absolute;\r\n inset: 0;\r\n background-size: cover;\r\n background-position: center;\r\n transition: opacity 0.9s ease-in-out;\r\n z-index: 0;\r\n opacity: 0;\r\n }\r\n .bg-layer.active { opacity: 1; }\r\n\r\n .gallery-section::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background-color: rgba(255, 255, 255, 0.05);\r\n opacity: 0;\r\n transition: opacity 0.5s ease;\r\n z-index: 1;\r\n pointer-events: none; \/* Don't block clicks *\/\r\n }\r\n .gallery-section:hover::before { opacity: 1; }\r\n\r\n .gallery-section:first-child::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n right: 0;\r\n width: 1px;\r\n height: 60%;\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: translateY(-50%);\r\n pointer-events: none; \/* Don't block clicks *\/\r\n }\r\n\r\n .section-content {\r\n text-align: center;\r\n padding: 40px;\r\n position: relative;\r\n z-index: 2;\r\n color: #fff;\r\n pointer-events: auto; \/* Keep buttons clickable *\/\r\n }\r\n\r\n .section-title {\r\n font-size: 3rem;\r\n margin-bottom: 25px;\r\n font-weight: 700;\r\n color: #fff;\r\n text-shadow: 2px 2px 10px rgba(0,0,0,0.7);\r\n transition: transform 0.6s ease, text-shadow 0.6s ease;\r\n pointer-events: none; \/* Title doesn't need clicks *\/\r\n }\r\n .gallery-section:hover .section-title {\r\n transform: translateY(-8px);\r\n text-shadow: 2px 2px 15px rgba(0,0,0,0.9);\r\n }\r\n\r\n .section-button {\r\n display: inline-block;\r\n background: rgba(255, 255, 255, 0.95);\r\n color: #2c3e50;\r\n padding: 10px 26px;\r\n text-decoration: none;\r\n border-radius: 25px;\r\n font-weight: 600;\r\n transition: all 0.4s ease;\r\n font-size: 1rem;\r\n border: 2px solid transparent;\r\n min-width: 140px;\r\n text-align: center;\r\n letter-spacing: 0.5px;\r\n pointer-events: auto; \/* Ensure buttons are clickable *\/\r\n position: relative;\r\n z-index: 20;\r\n }\r\n .section-button:hover {\r\n background: transparent;\r\n color: #fff;\r\n border-color: #fff;\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.25);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .gallery-container { flex-direction: column; }\r\n .gallery-section:first-child::after {\r\n width: 60%; height: 1px; top: auto; bottom: 0;\r\n left: 50%; transform: translateX(-50%);\r\n }\r\n .section-title { font-size: 2rem; }\r\n .section-button { padding: 8px 20px; font-size: 0.95rem; }\r\n }\r\n\r\n @media (min-width: 1920px) {\r\n .section-title { font-size: 4rem; }\r\n .section-button { padding: 12px 28px; font-size: 1.05rem; }\r\n .section-content { padding: 60px; }\r\n }\r\n\r\n @media (max-width: 1280px) {\r\n .section-title { font-size: 2.6rem; }\r\n .section-button { padding: 9px 22px; font-size: 0.95rem; }\r\n .section-content { padding: 30px; }\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- Invisible click zone for admin bar (just in case) -->\r\n <div class=\"admin-bar-click-zone\"><\/div>\r\n\r\n <div class=\"gallery-container\" id=\"gallery\">\r\n <!-- Background layers -->\r\n <div class=\"bg-layer active\" style=\"background-image: url('https:\/\/laylayammine.com\/wp-content\/uploads\/2026\/02\/download-5.jpeg');\"><\/div>\r\n <div class=\"bg-layer\" style=\"background-image: url('https:\/\/laylayammine.com\/wp-content\/uploads\/2026\/02\/download-5.jpeg');\"><\/div>\r\n <div class=\"bg-layer\" style=\"background-image: url('https:\/\/laylayammine.com\/wp-content\/uploads\/2026\/02\/2010.557_print.jpg');\"><\/div>\r\n\r\n <div class=\"gallery-section\" data-bg=\"1\">\r\n <div class=\"section-content\">\r\n <h2 class=\"section-title\">English Articles<\/h2>\r\n <a href=\"\/english-articles\/\" class=\"section-button\">Discover<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-section\" data-bg=\"2\">\r\n <div class=\"section-content\">\r\n <h2 class=\"section-title\">Arabic Articles<\/h2>\r\n <a href=\"\/arabic-articles\/\" class=\"section-button\">Discover<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const sections = document.querySelectorAll(\".gallery-section\");\r\n const layers = document.querySelectorAll(\".bg-layer\");\r\n\r\n sections.forEach(section => {\r\n section.addEventListener(\"mouseenter\", () => {\r\n const index = parseInt(section.getAttribute(\"data-bg\"));\r\n layers.forEach((layer, i) => {\r\n layer.classList.toggle(\"active\", i === index);\r\n });\r\n });\r\n section.addEventListener(\"mouseleave\", () => {\r\n \/\/ reset to first background\r\n layers.forEach((layer, i) => {\r\n layer.classList.toggle(\"active\", i === 0);\r\n });\r\n });\r\n });\r\n\r\n \/\/ Additional fix: Ensure clicks in the top 40px go to admin bar\r\n document.addEventListener('click', function(e) {\r\n if (e.clientY < 40) {\r\n \/\/ If click is in admin bar area, let it reach the admin bar\r\n e.stopPropagation();\r\n }\r\n }, true);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Gallery English Articles Discover Arabic Articles Discover<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-97","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/laylayammine.com\/ar\/wp-json\/wp\/v2\/pages\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/laylayammine.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/laylayammine.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/laylayammine.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/laylayammine.com\/ar\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":58,"href":"https:\/\/laylayammine.com\/ar\/wp-json\/wp\/v2\/pages\/97\/revisions"}],"predecessor-version":[{"id":1057,"href":"https:\/\/laylayammine.com\/ar\/wp-json\/wp\/v2\/pages\/97\/revisions\/1057"}],"wp:attachment":[{"href":"https:\/\/laylayammine.com\/ar\/wp-json\/wp\/v2\/media?parent=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}