{% extends 'base.html.twig' %} {#<!-- Stylesheets ============================================= -->#} {% block stylesheets %} {{ parent() }} {% endblock stylesheets %} {#<!-- Document Title ============================================= -->#} {% block title %}{{ parent() }} {% endblock title %} {% block navigation %} {{ parent() }} {% endblock navigation %} {#<!-- Slider ============================================= -->#} {# SLIDER #} {% block slider %} {{ parent() }} {% endblock slider %} {#<!-- Content ============================================= -->#} {% block body %} {% include 'home/_slider.html.twig' %} <div class="container clearfix" style="margin-top: -50px; margin-bottom: -40px;"> <div class="row clearfix"> <div class="col-lg-12"> <p style="font-family: Cormorant_Garamond_italic, serif;{# /*Cormorant Garamond*/ #} color:#232d23; font-size:30px; line-height:50px; text-align:center"> D’une superficie de 2236 Km2, les Comores, situées au débouché du canal de Mozambique au nord de Madagascar, sont composées de quatre îles qui ne se sont pas formées en même temps, mais suite à un phénomène migratoire du volcanisme il y a huit millions d’années, de l’Est à l’Ouest. </p> </div> </div> </div> {# Section testimoniale #} <section id="section-testimonials" class="section parallax mb-0 page-section dark" style="background-image: url('{{ asset('medel_assets/images/comores_office_du_tourisme.jpg') }}'); padding: 140px 0; background-size: cover" data-bottom-top="background-position:0px 300px;" data-top-bottom="background-position:0px -300px;"> <div class="container clearfix"> <div class="row"> <div class="col-lg-6"> <div class="heading-block border-bottom-0"> <h3 style="font-family: Cormorant_Garamond_italic, serif; color:#ffae00; text-shadow: 2px 2px 2px black; font-size:30px; line-height:50px; text-align:center"> Une destination à ne pas négliger</h3> </div> <div class="fslider restaurant-reviews" data-arrows="false" data-animation="slide"> <div class="flexslider"> <div class="slider-wrap"> <div class="slide"> <p class="lead" style="font-family: Cormorant_Garamond_italic, serif; color:#ffffff; text-shadow: 2px 2px 2px black; font-size:30px; line-height:50px; text-align:center"> "L’archipel des Comores ou les îles de la Lune, ressemble à un paysage sorti des contes des mille et une nuit. Un voyage dans le temps, dans les récits des Sultans venus de Perse et dans l'histoire d'une dynastie qui ne demande qu'à être découverte. <br/> Il y en a pour tous les goûts et de toutes les couleurs. Les âmes nomades qui veulent perdre pieds peuvent partir à la découverte de ses innombrables plages sauvages et sa richesse sous• marine. " </p> {# <span class="font-primary"><strong>John Doe</strong>, New York Magazine</span><br> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star-half-full"></i> #} </div> <div class="slide" style="font-family: Cormorant_Garamond_italic, serif; color:#ffffff; text-shadow: 2px 2px 2px black; font-size:30px; line-height:50px; text-align:center"> <p class="lead">"Les aventuriers en soif de découvertes peuvent S’enivrer dans ses terres et en découvrir les particularités à travers des randonnées sur les sentiers des rêves et de l'impossible. Les amoureux de l'histoire et de l'architecture peuvent se perdre dans ses Médinas et ses villes à l'allure de vieux comptoirs portuaires. " </p> {# <span class="font-primary"><strong>Mary Jane</strong>, Chicago News</span><br> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star-half-full"></i> <i class="icon-star-empty"></i> #} </div> {# <div class="slide"> <p class="lead">"Healthcare forward-thinking public service, social innovation making progress. Arab Spring social analysis, equality treatment, diversification."</p> <span class="font-primary"><strong>Luis Frank</strong>, France</span><br> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star-empty"></i> </div> #} </div> </div> </div> </div> </div> </div> </section> <div class="container clearfix" style="margin-top: 40px;"> <div class="row clearfix"> <div class="col-lg-12"> <!-- Tab Menu ============================================= --> <nav class="navbar navbar-expand-lg navbar-light p-0"> <h4 class="mb-0 pr-2 ls1 text-uppercase font-weight-bold">{% trans %}Visitez l'archipel des Comores{% endtrans %}</h4> </nav> <div class="line line-xs line-dark"></div> <!-- Articles ============================================= --> <div class="row col-mb-50 mb-0"> {% for img in imagesiles %} <div class="col-md-3 mt-4"> <!-- Post Article --> <div class="posts-md"> <div class="entry"> <div class="entry-image"> {#{{ path('page_single', {id:entite_eco.id, 'nature_page':'entiteeconomique',slug: entite_eco.getSlug()}) }}#} {% if img.imagemenu %} <a href=" {% if img.entiteeconomique %} {{ path('page_single', {id:img.entiteeconomique.id, 'nature_page':'entiteeconomique',slug: img.entiteeconomique.getSlug()}) }} {% else %}#{% endif %}"> <img src="{{ vich_uploader_asset(img, 'imagemenuFile') | imagine_filter('format_ile_pg_accueil') }}" alt="{{ img.designation }}"> </a> {% else %} <a href="{% if img.entiteeconomique %} {{ path('page_single', {id:img.entiteeconomique.id, 'nature_page':'entiteeconomique',slug: img.entiteeconomique.getSlug()}) }} {% else %}#{% endif %}"> <img src="{{ asset('medel_assets/images/ontc_site/ile.png') }}" alt="Image 3"> </a> {% endif %} <div class="entry-categories"> <a href="{{ path('page_by_ile',{'ile':img.id}) }}" class="bg-lifestyle"> {% trans %}Voir tout de l'île{% endtrans %} </a> </div> </div> <div class="entry-title title-sm nott"> <h3 class="mb-2"><a href="#">{{ img.designation }}</a></h3> </div> </div> </div> </div> {% endfor %} </div> </div> </div> <div class="row clearfix"> <!-- Second Posts Area ============================================= --> <div class="col-lg-8"> <!-- Gallery Slider ============================================= --> <div class="clearfix"> <h4 class="mb-2 ls1 text-uppercase font-weight-bold">À Découvrir</h4> <div class="line line-xs line-market"></div> <!-- Flex Thumbs Slider ============================================= --> <div class="fslider flex-thumb-grid grid-8 mt-4" data-pagi="false" data-speed="650" data-pause="3500" data-animation="fade" data-arrows="true" data-thumbs="true"> <div class="flexslider"> <div class="slider-wrap"> {% for carousel in carouselaccueil %} <div class="slide" {% if carouselaccueil | length > 3 %}data-thumb="{{ vich_uploader_asset(carousel, 'imageFile') | imagine_filter('format_miniaturecarousel_accueil') }}"{% endif %}> <!-- Post Article --> <div class="entry mb-0"> <img src="{{ vich_uploader_asset(carousel, 'imageFile') | imagine_filter('format_carousel_accueil') }}" alt="{{ carousel.designation }}"> <div class="bg-overlay"> <div class="bg-overlay-content text-overlay-mask dark desc-sm align-items-end justify-content-start p-4"> <div class="position-relative w-100"> {% if carousel.categorie or carousel.enCategorie %} <div class="entry-categories"> <a href="#" class="{{ carousel.couleurcategorie ? carousel.couleurcategorie : 'bg-tech' }}"> {% if app.request.locale == 'en' %} {{ carousel.getEnCategorie() ? carousel.getEnCategorie() : carousel.categorie }} {% else %} {{ carousel.categorie ? carousel.categorie :'' }} {% endif %} </a> </div> {% endif %} <div class="entry-title nott"> <h3 class="font-weight-semibold mb-2 ls0"> <a href="#" class="text-light"> {{ carousel.designation }} </a> </h3> </div> <div class="entry-meta no-separator"> <ul> {#vérifions si c'est une URL ou c'est une entite econom#} {% if carousel.url %} <li><i class="icon-check-circle"></i><a target="_blank" href="http://{{ carousel.url }}">{{ carousel.url ? carousel.url : carousel.entiteeconomique.designation }}</a></li> {% elseif carousel.entiteeconomique %} {#{{ path('page_single', {id:entite_eco.id, 'nature_page':'entiteeconomique',slug: entite_eco.getSlug()}) }}#} <li><i class="icon-check-circle"></i> <a href="{{ path('page_single', {id:carousel.entiteeconomique.id, 'nature_page':'entiteeconomique',slug: carousel.entiteeconomique.getSlug()}) }}"> {{ carousel.url ? carousel.url : carousel.entiteeconomique.designation }} </a> </li> {% else %} <li><i class="icon-check-circle"></i><a target="_blank" href="{{ carousel.url ? carousel.url : '' }}">{{ carousel.url ? carousel.url : carousel.entiteeconomique.designation }}</a></li> {% endif %} </ul> </div> <ul class="entry-icons d-none d-sm-block"> {#<li><a href="#" class="icon-bookmark-empty"></a></li>#} {% if is_granted('ROLE_SUPERADMIN') and getConnectedUser().email == "medel.youssouf@gmail.com" %} <li><a href="#" class="icon-heart-empty"><span>18</span></a></li> {% endif %} {#<li><a href="#" class="icon-comment-alt"><span>3</span></a></li>#} {% if is_granted("ROLE_ADMIN") %} <li><a target="_blank" href="{{ path('admin_carouselaccueil_edit',{id:carousel.id}) }}" class="icon-pencil-alt"></a></li> {% endif %} </ul> </div> </div> </div> </div> </div> {% endfor %} </div> </div> </div> <!-- Flex Slider End --> </div> </div> <!-- Second Sidebar ============================================= --> <div class="col-lg-4 sticky-sidebar-wrap mt-5 mt-lg-0"> <div class="sticky-sidebar"> <!-- Sidebar Widget 1 ============================================= --> <div class="widget widget_links clearfix" style="margin-bottom: -20px;"> <h4 class="mb-2 ls1 text-uppercase font-weight-bold">{% trans %}Accès rapide{% endtrans %}</h4> <div class="line line-xs line-sports"></div> <ul> {% for lien in lien_par_nbr_click %} <li class="d-flex align-items-center"> <a href="{{ path('page_redirect', {'number':'AINFCbYAAAAAYPmUMbFhnXYhV4N4roangXp4l3DUkNdD&oq' ,'parametremenu': lien.parametremenu}) }}" class="flex-fill"> {% if app.request.locale == "en" %} {{ lien.getEnDesignation() ? lien.getEnDesignation() : lien.designation }} {% else %} {{ lien.designation }} {% endif %} </a> <span class="badge text-light bg-{{ lien.getCouleurtitre() }}">{{ lien.nombreclick }}</span> </li> {% endfor %} </ul> </div> <!-- Sidebar Widget 2 ============================================= --> <div class="widget clearfix"> <h4 class="mb-2 ls1 text-uppercase font-weight-bold"> {% trans %}Dans l'actu{% endtrans %} {% if is_granted('ROLE_ADMIN') %} <a target="_blank" href="{{ path('admin_article_new') }}" class="icon-plus-sign" style="position: absolute; right: 0px;"> </a> {% endif %} </h4> <div class="line line-xs line-lifestyle"></div> <div class="posts-sm row col-mb-15"> {% for article in articles %} <div class="entry col-12"> <div class="grid-inner row align-items-center no-gutters"> <div class="col-auto"> <div class="entry-image"> {% set images = article.articleImages %} {% for image in images | filter(image => image.pourLaDescription == true) %} <a href="{{ path('evenement_single', {id : article.id, 'slug':article.getSlug()}) }}"> <img src="{{ vich_uploader_asset(image, 'imageFile') }}" alt="Image"></a> {% else %} <a href="{{ path('evenement_single', {id : article.id, 'slug':article.getSlug()}) }}"> <img src="{{ asset('medel_assets/images/ontc_site/evenements/small128x128.png') }}" alt="Image"></a> {% endfor %} </div> </div> <div class="col pl-3"> <div class="entry-title"> <h4 class="font-weight-semibold"> <a href="{{ path('evenement_single', {id : article.id, 'slug':article.getSlug()}) }}"> {{ article.titre }} </a> {% if is_granted('ROLE_ADMIN') %} <a href="{{ path('admin_article_edit', {id:article.id}) }}" target="_blank" class="color-sports"> <i class="icon-pencil-alt"></i> </a> {% endif %} </h4> </div> <div class="entry-meta"> <ul> <li><i class="icon-time"></i><a href="#">{{ article.DateAjoutAt | date('d-m-Y') }}</a></li> <li><i class="icon-affiliatetheme"></i> <a href="{{ path('evenement_all', {'theme_id':article.theme.id}) }}"> {{ article.theme }} </a> </li> </ul> </div> </div> </div> </div> {% endfor %} {% if articles | length >3 %} <div class="entry col-12" style="margin-top: -10px;"> <small style="margin-left: 300px;"><a href=""> {% trans %}Voir plus +{% endtrans %}</a></small> </div> {% endif %} </div> </div> {# NOUS SUIVRE #} <div class="widget clearfix" > <h4 class="mb-2 ls1 text-uppercase font-weight-bold">{% trans %}Nous suivre{% endtrans %}</h4> <div class="line line-xs line-market"></div> <div class="row center mt-4 clearfix"> <div class="col-3"> <a href="{{ getOptionssystem().getUrlFacebook() }}" target="_blank" class="social-icon si-dark float-none m-auto si-colored si-facebook"> <i class="icon-facebook"></i> <i class="icon-facebook"></i> </a> </div> <div class="col-3"> <a href="{{ getOptionssystem().getUrlTwitter() }}" target="_blank" class="social-icon si-dark float-none m-auto si-colored si-twitter"> <i class="icon-twitter"></i> <i class="icon-twitter"></i> </a> </div> <div class="col-3"> <a href="{{ getOptionssystem().getUrlInstagram() }}" target="_blank" class="social-icon si-dark float-none m-auto si-colored si-instagram"> <i class="icon-instagram"></i> <i class="icon-instagram"></i> </a> </div> <div class="col-3"> <a href="{{ getOptionssystem().getUrlYoutube() }}" target="_blank" class="social-icon si-dark float-none m-auto si-colored si-youtube"> <i class="icon-youtube"></i> <i class="icon-youtube"></i> </a> </div> </div> </div> <!-- Sidebar Widget 3 ============================================= --> </div> </div> </div> </div> {% endblock body %} {#<!-- #content end -->#} {#<!-- Footer ============================================= -->#} {% block footer %} {{ parent() }} {% endblock footer %} {#<!-- #footer end -->#} {#<!-- JavaScripts ============================================= -->#} {% block javascripts %} {{ parent() }} {#<!-- SLIDER REVOLUTION 5.x SCRIPTS -->#} <script type="text/javascript" src="{{ asset('medel_assets/include/rs-plugin/js/jquery.themepunch.tools.min.js') }}"></script> <script type="text/javascript" src="{{ asset('medel_assets/include/rs-plugin/js/jquery.themepunch.revolution.min.js') }}"></script> <script type="text/javascript" src="{{ asset('medel_assets/include/rs-plugin/js/extensions/revolution.extension.actions.min.js') }}"></script> <script type="text/javascript" src="{{ asset('medel_assets/include/rs-plugin/js/extensions/revolution.extension.carousel.min.js') }}"></script> <script type="text/javascript" src="{{ asset('medel_assets/include/rs-plugin/js/extensions/revolution.extension.kenburn.min.js') }}"></script> <script type="text/javascript" src="{{ asset('medel_assets/include/rs-plugin/js/extensions/revolution.extension.layeranimation.min.js') }}"></script> <script type="text/javascript" src="{{ asset('medel_assets/include/rs-plugin/js/extensions/revolution.extension.migration.min.js') }}"></script> <script type="text/javascript" src="{{ asset('medel_assets/include/rs-plugin/js/extensions/revolution.extension.navigation.min.js') }}"></script> <script type="text/javascript" src="{{ asset('medel_assets/include/rs-plugin/js/extensions/revolution.extension.parallax.min.js') }}"></script> <script type="text/javascript" src="{{ asset('medel_assets/include/rs-plugin/js/extensions/revolution.extension.slideanims.min.js') }}"></script> <script type="text/javascript" src="{{ asset('medel_assets/include/rs-plugin/js/extensions/revolution.extension.video.min.js') }}"></script> {#<!-- ADD-ONS JS FILES -->#} <script> var tpj=jQuery; var revapi206; tpj(document).ready(function() { if(tpj("#rev_slider_206_1").revolution == undefined){ revslider_showDoubleJqueryError("#rev_slider_19_1"); }else{ revapi19 = tpj("#rev_slider_206_1").show().revolution({ sliderType:"standard", jsFileLocation: "{{ asset('medel_assets/include/rs-plugin/js/') }}", sliderLayout:"fullwidth", dottedOverlay:"none", delay:9000, navigation: { keyboardNavigation:"off", keyboard_direction: "horizontal", mouseScrollNavigation:"off", onHoverStop:"off", touch: { touchenabled: "on", swipe_threshold: 75, swipe_min_touches: 50, swipe_direction: "horizontal", drag_block_vertical: false } , tabs: { style:"metis", enable:true, width:250, height:40, min_width:249, wrapper_padding:25, wrapper_color:"", wrapper_opacity:"0", {#tmp: '<div class="tp-tab-wrapper"><div class="tp-tab-number">{param1}</div>' + '<div class="tp-tab-divider"></div><div class="tp-tab-title-mask">' + '<div class="tp-tab-title">{title}</div></div></div>',#} visibleAmount: 5, hide_onmobile: true, hide_under:480, hide_onleave:false, hide_delay:200, direction:"vertical", span:true, position:"inner", space:0, h_align:"left", v_align:"center", h_offset:0, v_offset:0 } }, carousel: { horizontal_align: "center", vertical_align: "center", fadeout: "on", vary_fade: "on", maxVisibleItems: 3, infinity: "on", space: 0, stretch: "off", showLayersAllTime: "off", easing: "Power3.easeInOut", speed: "800" }, responsiveLevels:[1140,992,768,576], visibilityLevels:[1140,992,768,576], gridwidth:[850,700,400,300], gridheight:[580,600,500,400], lazyType:"single", shadow:0, spinner:"off", stopLoop:"on", stopAfterLoops:-1, stopAtSlide:-1, shuffle:"off", autoHeight:"off", disableProgressBar:"off", hideThumbsOnMobile:"off", hideSliderAtLimit:0, hideCaptionAtLimit:0, hideAllCaptionAtLilmit:0, debugMode:false, fallbacks: { simplifyAll:"off", nextSlideOnWindowFocus:"off", disableFocusListener:false, } }); } }); /* Revolution Slider End */ // Navbar on hover $('.nav.tab-hover a.nav-link').hover(function() { $(this).tab('show'); }); // Current Date var weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"], month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], a = new Date(); jQuery('.date-today').html( weekday[a.getDay()] + ', ' + month[a.getMonth()] + ' ' + a.getDate() ); // Infinity Scroll jQuery(window).on( 'load', function(){ var $container = $('.infinity-wrapper'); $container.infiniteScroll({ path: '.load-next-portfolio', button: '.load-next-portfolio', scrollThreshold: false, history: false, status: '.page-load-status' }); $container.on( 'load.infiniteScroll', function( event, response, path ) { var $items = $( response ).find('.infinity-loader'); // append items after images loaded $items.imagesLoaded( function() { $container.append( $items ); $container.isotope( 'insert', $items ); setTimeout( function(){ SEMICOLON.widget.loadFlexSlider(); }, 1000 ); }); }); }); $('#oc-news').owlCarousel({ items: 1, margin: 20, dots: false, nav: true, navText: ['<i class="icon-angle-left"></i>','<i class="icon-angle-right"></i>'], responsive:{ 0:{ items: 1,dots: true, }, 576:{ items: 1,dots: true }, 768:{ items: 2,dots:true }, 992:{ items: 2 }, 1200:{ items: 3 } } }); </script> {% endblock javascripts %}