{"id":614,"date":"2024-08-10T07:32:11","date_gmt":"2024-08-10T07:32:11","guid":{"rendered":"https:\/\/startersites.io\/elementor\/consultant\/?page_id=614"},"modified":"2024-12-17T17:57:32","modified_gmt":"2024-12-17T17:57:32","slug":"home","status":"publish","type":"page","link":"https:\/\/ettalaliarchitects.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"614\" class=\"elementor elementor-614\">\n\t\t\t\t<div class=\"elementor-element elementor-element-295fa8f e-con-full elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"295fa8f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef51a4c elementor-widget elementor-widget-shortcode\" data-id=\"ef51a4c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style>\n    html, body {\n        margin: 0;\n        padding: 0;\n        overflow: hidden; \/* Prevent scrollbars *\/\n        height: 100%; \/* Ensure the full height is used *\/\n    }\n    .sliderContainer {\n        width: 100%;\n        height: 100vh; \/* Full height of the viewport *\/\n        position: fixed; \/* Stick to the top of the viewport *\/\n        top: 30px;\n        left: 0;\n        overflow: hidden;\n        z-index: 1; \/* Ensures it covers the background *\/\n    }\n.sliderTopBar {\n    width: 100%; \/* Ensure full width *\/\n    height: 60px; \/* Adjust height for the top bar *\/\n    background-color: rgba(0, 0, 0, 0); \/* Transparent background *\/\n    display: flex;\n    justify-content: space-between; \/* Space between logo and other content *\/\n    align-items: center;\n    position: absolute; \/* Positioned above the slider *\/\n    top: 20px; \/* Adjust this value to move the top bar higher *\/\n    right: 0;\n    z-index: 2; \/* Keep top bar above the slider *\/\n    padding: 0 20px; \/* Add padding for spacing *\/\n}\n    .sliderTopBar .logo {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start; \/* Position the logo to the left *\/\n        flex: 0 1 auto; \/* Don't stretch *\/\n    }\n    .sliderTopBar .logo img {\n        height: 200px; \/* Adjust logo size *\/\n        margin-top: 170px;\n    }\n.sliderTopBar .navLinks {\n    display: flex;\n    justify-content: flex-end; \/* Align the menu to the right *\/\n    gap: 20px;\n    width: auto; \/* Ensure the width adjusts to content *\/\n    margin-top: -15px; \/* Move the menu up slightly *\/\n    flex-grow: 0; \/* Ensure the navLinks don't grow *\/\n}\n.sliderTopBar .navLinks a,\n.sliderTopBar .socialIcons a {\n    color: white;\n    text-decoration: none;\n    font-family: Arial, sans-serif;\n    font-size: 14px;\n    transition: color 0.3s;\n    margin-left: 10px; \/* Add spacing between menu items and social icons *\/\n}\n\t\n\t\n\t\n.sliderTopBar .navLinks a:hover,\n.sliderTopBar .socialIcons a:hover {\n    color: #000000; \/* Gold color on hover *\/\n}\n.sliderTopBar .socialIcons {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    gap: 20px;\n    margin-top: -15px; \/* Align social icons with menu *\/\n}\n    .slider {\n        width: 100%;\n        height: 100%; \/* Full-screen slider *\/\n        position: relative;\n        top: 0; \/* Ensure no gaps *\/\n    }\n    .slider img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover; \/* Cover the screen without distortion *\/\n    }\n    .navigation {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        display: flex;\n    }\n    .prevSlide, .nextSlide {\n        flex: 1;\n        height: 100%;\n        cursor: none;\n    }\n    .prevSlide:hover {\n        cursor: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'\/><\/svg>\") 20 20, auto;\n    }\n    .nextSlide:hover {\n        cursor: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'\/><\/svg>\") 20 20, auto;\n    }\n<\/style>\n\n<!-- Add Font Awesome for social icons -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n\n<div class=\"sliderContainer\" id=\"custom-slider\">\n    <!-- Top Bar -->\n    <div class=\"sliderTopBar\">\n        <!-- Logo Section -->\n        <div class=\"logo\">\n\t\t\t<a href=\"https:\/\/ettalaliarchitects.com\/\">\n            <img decoding=\"async\" src=\"https:\/\/ettalaliarchitects.com\/wp-content\/uploads\/2024\/12\/logo.png\" alt=\"Logo\"> <!-- Update logo path -->\n        <\/div>\n        <!-- Navigation Links -->\n        <div class=\"navLinks\">\n        <a href=\"https:\/\/ettalaliarchitects.com\/\">Home<\/a>\n        <a href=\"https:\/\/ettalaliarchitects.com\/index.php\/services\/\">Services<\/a>\n\t\t<a href=\"https:\/\/ettalaliarchitects.com\/index.php\/about-us\/\">About<\/a>\n        <a href=\"#news\">News<\/a>\n        <a href=\"https:\/\/ettalaliarchitects.com\/index.php\/contact\/\">Contact<\/a>\n        <!-- Social Icons -->\n        <a href=\"https:\/\/www.facebook.com\/fatimazahra.ettalali\/?locale=fr_FR\" target=\"_blank\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n\t\t<a href=\"https:\/\/wa.me\/+212661795900\" target=\"_blank\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\n        <a href=\"https:\/\/www.linkedin.com\/in\/fatim-zohra-ettalali-10408a105\/?trk=public_profile_browsemap&originalSubdomain=ma\" target=\"_blank\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\n        <a href=\"https:\/\/www.instagram.com\/ettalali_architects\/\" target=\"_blank\"><i class=\"fab fa-instagram\"><\/i><\/a>\n        <\/div>\n    <\/div>\n    \n    <!-- Slider -->\n    <div class=\"slider\">\n        <img decoding=\"async\" src=\"https:\/\/ettalaliarchitects.com\/wp-content\/uploads\/2024\/12\/B-1_10-scaled.jpg\" alt=\"Slide 1\" class=\"current-slide\">\n        <div class=\"navigation\">\n            <div class=\"prevSlide\" onclick=\"navigateSlide(-1)\"><\/div>\n            <div class=\"nextSlide\" onclick=\"navigateSlide(1)\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    const images = [\n        'https:\/\/ettalaliarchitects.com\/wp-content\/uploads\/2024\/12\/B-1_10-scaled.jpg',\n        'https:\/\/ettalaliarchitects.com\/wp-content\/uploads\/2024\/12\/B-1_30-scaled.jpg',\n        'https:\/\/ettalaliarchitects.com\/wp-content\/uploads\/2024\/12\/B-1_18-scaled.jpg',\n        'https:\/\/ettalaliarchitects.com\/wp-content\/uploads\/2024\/12\/A_02.jpg',\n        'https:\/\/ettalaliarchitects.com\/wp-content\/uploads\/2024\/12\/VISTIAIRES-F-.jpg',\n    ];\n    let currentIndex = 0;\n\n    function navigateSlide(direction) {\n        const slider = document.querySelector('#custom-slider .current-slide');\n        currentIndex = (currentIndex + direction + images.length) % images.length;\n        slider.src = images[currentIndex];\n    }\n\n    document.addEventListener('keydown', function(event) {\n        if (event.key === 'ArrowRight') navigateSlide(1);\n        if (event.key === 'ArrowLeft') navigateSlide(-1);\n    });\n<\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-614","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/ettalaliarchitects.com\/index.php\/wp-json\/wp\/v2\/pages\/614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ettalaliarchitects.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ettalaliarchitects.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ettalaliarchitects.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ettalaliarchitects.com\/index.php\/wp-json\/wp\/v2\/comments?post=614"}],"version-history":[{"count":72,"href":"https:\/\/ettalaliarchitects.com\/index.php\/wp-json\/wp\/v2\/pages\/614\/revisions"}],"predecessor-version":[{"id":1517,"href":"https:\/\/ettalaliarchitects.com\/index.php\/wp-json\/wp\/v2\/pages\/614\/revisions\/1517"}],"wp:attachment":[{"href":"https:\/\/ettalaliarchitects.com\/index.php\/wp-json\/wp\/v2\/media?parent=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}