Vertical Slider with Fade<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lato&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/*body {*\/\r\n \/* font-family: 'Lato', sans-serif;*\/\r\n \/* height: 100vh;*\/\r\n \/*}*\/\r\n\r\n .slider-container {\r\n position: relative;\r\n \/*overflow: hidden;*\/\r\n width: 100vw;\r\n height: 100vh;\r\n }\r\n\r\n .left-slide,\r\n .right-slide {\r\n position: relative;\r\n height: 100%;\r\n }\r\n .left-slide > div {\r\n opacity: 0;\r\n transition: opacity 0.8s ease-in-out;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n height: 27%;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n backdrop-filter: blur(16px);\r\n background-color:rgba(255,255,255,.2);\r\n clip-path: polygon(100% 0%, 100% 48%, 100% 100%, 10% 100%, 0% 50%, 10% 0% );\r\n -webkit-clip-path: polygon(100% 0%, 100% 48%, 100% 100%, 10% 100%, 0% 50%, 10% 0% );\r\n\r\n }\r\n\r\n .right-slide > div {\r\n opacity: 0;\r\n transition: opacity 0.8s ease-in-out;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n height: 100%;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .left-slide > div {\r\n color: #fff;\r\n padding: 0 70px;\r\n }\r\n\r\n .left-slide h1 {\r\n font-size: 40px;\r\n margin-bottom: 10px;\r\n margin-top: -7px;\r\n line-height: 50px;\r\n margin-left: 79px;\r\n color: #000;\r\n}\r\n\r\n .right-slide > div {\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center center;\r\n }\r\n\r\n .left-slide > div.active,\r\n .right-slide > div.active {\r\n opacity: 1;\r\n z-index: 1;\r\n }\r\n\r\n .left-slide {\r\n width: 35%;\r\n position: absolute;\r\n top: 43%;\r\n left: 11%;\r\n z-index: 6;\r\n}\r\n\r\n .right-slide {\r\n width: 72%;\r\n position: absolute;\r\n top: -14%;\r\n left: 25%;\r\n}\r\n .action-buttons button {\r\n background-color: #ffffff00;\r\n border: none;\r\n cursor: pointer;\r\n position: absolute;\r\n left: 16%;\r\n top: 51%;\r\n transform: rotate(-90deg);\r\n padding: 14px;\r\n z-index: 10;\r\n \r\n}\r\n\r\n .down-button {\r\n transform: translateX(-100%);\r\n }\r\n\r\n .up-button {\r\n transform: translateY(-100%)\r\n \r\n }\r\n \r\n \r\n \/*button:hover {*\/\r\n \/* background-color: #000;*\/\r\n \/*}*\/\r\n.down-button{\r\n visibility: hidden;\r\n}\r\n \/*.up-button:hover path,*\/\r\n \/*.down-button:hover path {*\/\r\n \/* fill: #fff;*\/\r\n \/*}*\/\r\n\r\n button:focus {\r\n outline: none;\r\n }\r\n \r\n\/* .Industry-1 {*\/\r\n\/* display: flex;*\/\r\n\/* flex-wrap: nowrap;*\/\r\n\/* justify-content: space-between;*\/\r\n\/*}*\/\r\n\r\n\r\n\r\n.Industry-1 h2 {\r\n font-size: 40px;\r\n line-height: 50px;\r\n color: #000;\r\n \r\n}\r\nimg.logopic {\r\n object-fit: contain;\r\n margin-left: 249px;\r\n background-color: #fff;\r\n padding: 10px;\r\n border-radius: 20px;\r\n}\r\n\r\n\/* explicitly allow the left slide & its children to overflow *\/\r\n.left-slide {\r\n overflow: visible;\r\n position: relative;\r\n}\r\n\r\n.left-slide > div {\r\n \/* if you want the contents themselves to overflow their own bounds: *\/\r\n overflow: visible;\r\n}\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"slider-container\">\r\n <div class=\"left-slide\">\r\n <div style=\"background-color: rgba(255,255,255,.2)\">\r\n <div class=\"Industry-1\">\r\n <h2>01<\/h2>\r\n <h1>Africa<\/h1>\r\n <img decoding=\"async\" class=\"logopic\" src=\"https:\/\/brusselsnations.com\/wp-content\/uploads\/2025\/04\/basic-file.png\" alt=\"Logo\" style=\"width: 200px; height: auto;\">\r\n <\/div>\r\n <\/div>\r\n <div style=\"background-color:rgba(255,255,255,.2);\">\r\n <div class=\"Industry-1\">\r\n <h2>02<\/h2>\r\n <h1>Africa<\/h1>\r\n <img decoding=\"async\" class=\"logopic\" src=\"https:\/\/brusselsnations.com\/wp-content\/uploads\/2025\/04\/basic-file.png\" alt=\"Logo\" style=\"width: 200px; height: auto;\">\r\n <\/div>\r\n <\/div>\r\n <div style=\"background-color:rgba(255,255,255,.2);\">\r\n <div class=\"Industry-1\">\r\n <h2>03<\/h2>\r\n <h1>America<\/h1>\r\n <img decoding=\"async\" class=\"logopic\" src=\"https:\/\/brusselsnations.com\/wp-content\/uploads\/2025\/04\/basic-file.png\" alt=\"Logo\" style=\"width: 200px; height: auto;\">\r\n <\/div>\r\n \r\n <\/div>\r\n <div style=\"background-color:rgba(255,255,255,.2);\">\r\n <div class=\"Industry-1\">\r\n <h2>04<\/h2>\r\n <h1>Africa<\/h1>\r\n <img decoding=\"async\" class=\"logopic\" src=\"https:\/\/brusselsnations.com\/wp-content\/uploads\/2025\/04\/basic-file.png\" alt=\"Logo\" style=\"width: 200px; height: auto;\">\r\n <\/div>\r\n \r\n <\/div>\r\n <div style=\"background-color:rgba(255,255,255,.2);\">\r\n <div class=\"Industry-1\">\r\n <h2>05<\/h2>\r\n <h1>Europe<\/h1>\r\n <img decoding=\"async\" class=\"logopic\" src=\"https:\/\/brusselsnations.com\/wp-content\/uploads\/2025\/04\/basic-file.png\" alt=\"Logo\" style=\"width: 200px; height: auto;\">\r\n <\/div>\r\n \r\n <\/div>\r\n <div style=\"background-color:rgba(255,255,255,.2);\">\r\n \r\n <div class=\"Industry-1\">\r\n <h2>06<\/h2>\r\n <h1>Africa<\/h1>\r\n <img decoding=\"async\" class=\"logopic\" src=\"https:\/\/brusselsnations.com\/wp-content\/uploads\/2025\/04\/basic-file.png\" alt=\"Logo\" style=\"width: 200px; height: auto;\">\r\n <\/div>\r\n \r\n<\/div>\r\n \r\n <\/div>\r\n\r\n <div class=\"right-slide\">\r\n <div style=\"background-image: url(http:\/\/neptunmanagement.com\/wp-content\/uploads\/2025\/04\/3e7b45df238fa4e6f427a24973b5a4e1.png);\"><\/div>\r\n <div style=\"background-image: url(http:\/\/neptunmanagement.com\/wp-content\/uploads\/2025\/04\/3e7b45df238fa4e6f427a24973b5a4e1.png);\"><\/div>\r\n <div style=\"background-image: url(http:\/\/neptunmanagement.com\/wp-content\/uploads\/2025\/04\/3e7b45df238fa4e6f427a24973b5a4e1.png);\"><\/div>\r\n <div style=\"background-image: url(http:\/\/neptunmanagement.com\/wp-content\/uploads\/2025\/04\/3e7b45df238fa4e6f427a24973b5a4e1.png);\"><\/div>\r\n <div style=\"background-image: url(http:\/\/neptunmanagement.com\/wp-content\/uploads\/2025\/04\/3e7b45df238fa4e6f427a24973b5a4e1.png);\"><\/div>\r\n <div style=\"background-image: url(http:\/\/neptunmanagement.com\/wp-content\/uploads\/2025\/04\/3e7b45df238fa4e6f427a24973b5a4e1.png);\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"action-buttons\">\r\n <button class=\"down-button\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"50px\" height=\"50px\" viewbox=\"0 0 32 32\">\r\n <g>\r\n <path d=\"M9 20a1 1 0 0 1 .29-.71 1 1 0 0 1 1.42 0l4.29 4.3V6a1 1 0 0 1 2 0v17.59l4.29-4.3a1 1 0 0 1 1.42 1.42l-6 6a1 1 0 0 1-1.42 0l-6-6A1 1 0 0 1 9 20z\" fill=\"#000000\"\/>\r\n <path d=\"M29 32H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h26a3 3 0 0 1 3 3v26a3 3 0 0 1-3 3zM3 2a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z\" fill=\"#000000\"\/>\r\n <\/g>\r\n <\/svg>\r\n <\/button>\r\n <button class=\"up-button\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"50px\" height=\"50px\" viewbox=\"0 0 512 512\">\r\n <g>\r\n <path d=\"M453.332 512H58.668C26.305 512 0 485.695 0 453.332V58.668C0 26.305 26.305 0 58.668 0h394.664C485.695 0 512 26.305 512 58.668v394.664C512 485.695 485.695 512 453.332 512zM58.668 32C43.968 32 32 43.969 32 58.668v394.664C32 468.032 43.969 480 58.668 480h394.664c14.7 0 26.668-11.969 26.668-26.668V58.668C480 43.968 468.031 32 453.332 32z\" fill=\"#ffffff00\"\/>\r\n <path d=\"M256 405.332c-8.832 0-16-7.168-16-16V122.668c0-8.832 7.168-16 16-16s16 7.168 16 16v266.664c0 8.832-7.168 16-16 16z\" fill=\"#000\"\/>\r\n <path d=\"M341.332 224c-4.094 0-8.191-1.559-11.305-4.691L256 145.3l-74.027 74.027c-6.25 6.25-16.383 6.25-22.633 0s-6.25-16.383 0-22.637l85.332-85.332c6.25-6.25 16.383-6.25 22.637 0l85.332 85.332c6.25 6.254 6.25 16.387 0 22.637A15.952 15.952 0 0 1 341.332 224z\" fill=\"#000\"\/>\r\n <\/g>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const slideRight = document.querySelector('.right-slide').children;\r\n const slideLeft = document.querySelector('.left-slide').children;\r\n const upButton = document.querySelector('.up-button');\r\n const downButton = document.querySelector('.down-button');\r\n let activeSlideIndex = 0;\r\n const slidesLength = slideRight.length;\r\n\r\n function updateSlides() {\r\n for (let i = 0; i < slidesLength; i++) {\r\n slideRight[i].classList.remove('active');\r\n slideLeft[i].classList.remove('active');\r\n }\r\n slideRight[activeSlideIndex].classList.add('active');\r\n slideLeft[activeSlideIndex].classList.add('active');\r\n }\r\n\r\n upButton.addEventListener('click', () => {\r\n activeSlideIndex = (activeSlideIndex + 1) % slidesLength;\r\n updateSlides();\r\n });\r\n\r\n downButton.addEventListener('click', () => {\r\n activeSlideIndex = (activeSlideIndex - 1 + slidesLength) % slidesLength;\r\n updateSlides();\r\n });\r\n\r\n \/\/ Initialize first slide\r\n updateSlides();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>OUR PROJECTS Vertical Slider with Fade 01 Africa 02 Africa 03 America 04 Africa 05 Europe 06 Africa<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-680","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/pages\/680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/comments?post=680"}],"version-history":[{"count":122,"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/pages\/680\/revisions"}],"predecessor-version":[{"id":2932,"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/pages\/680\/revisions\/2932"}],"wp:attachment":[{"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/media?parent=680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}