<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="description" content="Travelix Project"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{% block title %}Meilleur Agence de voyages en Tunisie - Rustica Voyages{% endblock %}</title> <link rel="icon" href="{{ asset('./public/front/images/rustica-icone.png') }}"> <link rel="stylesheet" type="text/css" href="{{ asset('front/style/bootstrap4/bootstrap.min.css') }}"> <link href="{{ asset('front/plugins/font-awesome-4.7.0/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="{{ asset('front/style/main_style.css') }}"> <link rel="stylesheet" type="text/css" href="{{ asset('front/style/responsive.css') }}"> <style> .card-5::before { background: #FFFFFF; border: 1px solid black; } </style> <style> /*.container {*/ /* max-width: 1370px!important;*/ /*}*/ .hotel_info_text p { color: black; font-family: Poppins,sans-serif; font-size: 12pt; font-weight: normal; margin: 30px; } .search_button { margin-top: 0px; } .search_input { border-color: black!important; } .check_in { border-color: black!important; } .content { height: 5vh; } .p-b-120 { padding-bottom: 21px; } .p-t-395 { padding-top: 35px; } .modal .modal-content .modal-body { background: #FFFFFF; border: 1px solid black; border-radius: 7px; overflow: hidden; color: #fff; padding-left: 35px; padding-right: 16px; -webkit-box-shadow: 0 10px 50px -10px rgba(0, 0, 0, 0.9); box-shadow: 0 10px 50px -10px rgba(0, 0, 0, 0.9); } .top_bar { width: 100%; height: 41px; background: #350a4e; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } .rooms { margin-top: 35px; } .hotel_info_text { border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 300ms; } {# .hotel_info_text:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } #} .footer_social_item:hover{ color:red; } .main_nav_item a { font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 700; color: #0093a9!important; text-transform: uppercase; padding-bottom: 10px; padding-top: 10px; text-decoration: none!important; } .main_nav_item::after { display: block; position: absolute; left: -1px; bottom: -11px; width: calc(100% + 2px); height: 2px; background: linear-gradient(to right, #b29b63, #0093a9)!important; content: ''; opacity: 0; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .contact_info_item:hover .contact_info_text, .contact_info_item:hover .contact_info_text a { color: #b29b63!important; } /**/ .toggle_menu { background: transparent; border: none; cursor: pointer; padding: 10px; font-size: 16px; display: none; } .main_nav_list { list-style: none; padding: 0; margin: 0; } .main_nav_item { display: inline-block; margin-right: 20px; } @media (max-width: 1024px) { .logo a img{ width:135px !important; margin-top: 50px; } .toggle_menu { display: block; margin-right:70px; margin-top: 65px; } .main_nav_list { display: none; } .main_nav_list.show { display: block; } } /* Styles pour les sous-menus */.main_nav_list { list-style: none; padding: 0; margin: 0;}.main_nav_list > .main_nav_item { display: inline-block; margin-right: 20px; position: relative; /* Ajout de position relative pour les sous-menus absolus */}/* Media query pour les appareils de petite taille */@media screen and (max-width: 1024px) { .main_nav_list { display: none; /* Masquer le menu principal par défaut sur les appareils de petite taille */ position: absolute; /* Position absolue pour couvrir toute la largeur */ top: 100%; /* Aligner le haut du menu principal avec le bas du header */ right: 0px; background-color: #ffffff; /* Couleur de fond */ /* width: 100%; *//* Largeur maximale */ /*padding: 10px 0;*/ /* Ajouter un peu de rembourrage */ box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Ajouter une ombre */ z-index: 999; /* Assurer la visibilité au-dessus de tout le reste */ } .main_nav_list.show { display: block; /* Afficher le menu principal lorsque le bouton de menu est cliqué */ } .main_nav_list > .main_nav_item { display: block; margin: 0; padding: 10px 20px; /* Ajouter un peu de rembourrage */ } .toggle_menu { display: inline-block; cursor: pointer;}.bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #0093a9; margin: 6px 0; transition: 0.4s; margin-right:-40px;}.change .bar1 { transform: translate(0, 11px) rotate(-45deg);}.change .bar2 {opacity: 0;}.change .bar3 { transform: translate(0, -11px) rotate(45deg);}} </style> {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #} {% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %} {% block javascripts %} {{ encore_entry_script_tags('app')}} {% endblock %} </head> <body> <div class="super_container"> <!-- Header --> <header class="header" style="background-color: #ffffff"> <!-- Top Bar --> <div class="top_bar" style="background-color: #0093a9"> <div class="container"> <div class="row"> <div class="col d-flex flex-row"> <div class="phone" style="color: #FFFFFF;font-size: 16px;font-weight: 500"><a href="tel://0021672238880" style="color:white">(+216) 72 238 880</a></div> <div class="social"> <ul class="social_list"> <li class="social_list_item" style="font-size: small;"> <a href="mailto:reservation@rusticavoyages.com" style="color: #FFFFFF;font-size: 16px;font-weight: 500">reservation@rusticavoyages.com</a> </li> </ul> </div> </div> <div class="col d-flex flex-row"> <ul class="footer_social_list" style="margin-left: 500px;margin-top:-1px;" > <li class="footer_social_item" style="background-color:#3b5998;border: solid 1px #0093a9;width: 30px;height:30px;margin-top:4px;"><a href="https://www.facebook.com/rustica.voyages?mibextid=ZbWKwL"><i class="fa fa-facebook-f" style="font-size:large;color:white;"></i></a></li> <li class="footer_social_item" style="background-color:#c32aa3;border: solid 1px #0093a9;width: 30px;height:30px;margin-top:4px;"><a href="https://www.instagram.com/rusticavoyages?igsh=dms3c2I4enV0eWZt"><i class="fa fa-instagram" style="font-size:large;color:white;"></i></a></li> </ul> </div> </div> </div> </div> <!-- Main Navigation --> <nav class="main_nav"style="height: 105px"> <div class="container" style="top: -20px"> <div class="row"> <div class="col main_nav_col d-flex flex-row align-items-center justify-content-start"> <div class="logo_container"> <div class="logo" style="height: 44px"><a href="{{ path('app_list') }}"><img src="{{ asset('front/images/logo-rustica-voyages.png') }}" alt=""></a></div> </div> <div class=" ml-auto" style="margin-right: 10px;top: 10px"> <div class=" toggle_menu" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <ul class="main_nav_list"> <li class="main_nav_item"><a href="{{ path('list_search', {'city': '10'}) }}">Hôtels en Tunisie</a></li> <li class="main_nav_item"><a href="{{ path('app_croisiere') }}">Croisières</a></li> <li class="main_nav_item"><a href="{{ path('app_sejour') }}">Voyages Organisés</a></li> <li class="main_nav_item"><a href="{{ path('contact') }}">Contact</a></li> </ul> </div> </div> </div> </div> </nav> </header></div> {% block body %}{% endblock %} <!-- Footer --> <footer class="footer" style="background-color: #0e2737"> <div class="container"> <div class="row"> <!-- Footer Column --> <div class="col-lg-4 footer_column"> <div class="footer_col"> <div class="footer_content footer_about" > <div class="logo_container footer_logo"> <div class="logo"><a href="#"><img src="{{ asset('front/images/logo-rustica-footer.png') }}" alt=""></a></div> </div> <p class="footer_about_text"> - Meilleurs conseillère des croisières, séjours et voyage à l'étranger. Réservation Croisières, hôtels en promotions aux meilleurs prix en Tunisie ou dans le Monde. </p> <p class="footer_about_text">- Suivez-nous sur les Réseaux Sociaux</p> <ul class="footer_social_list"> <li class="footer_social_item" style="background-color:#3b5998;border: solid 1px #0e2737;width: 33px;height:33px;"><a href="https://www.facebook.com/rustica.voyages?mibextid=ZbWKwL"><i class="fa fa-facebook-f" style="font-size:large;color:white;"></i></a></li> <li class="footer_social_item" style="background-color:#c32aa3;border: solid 1px #0e2737;width: 33px;height:33px;"><a href="https://www.instagram.com/rusticavoyages?igsh=dms3c2I4enV0eWZt"><i class="fa fa-instagram" style="font-size:large;color:white;"></i></a></li> </ul> </div> </div> </div> <!-- Footer Column --> <div class="col-lg-4 footer_column"> <div class="footer_col"> <div class="footer_title" style="text-align: center;" >Navigation</div> <div class="footer_content footer_tags" style="margin-left: 180px;" > <li class="footer_nav_item"><a href="{{ path('app_testfilter') }}" style="color: #FFFFFF">Hôtels en tunisie</a></li><br> <li class="footer_nav_item"><a href="{{ path('app_croisiere') }}" style="color: #FFFFFF">Croisières</a></li><br> <li class="footer_nav_item"><a href="{{ path('app_sejour') }}" style="color: #FFFFFF">Voyages Organisés</a></li><br> <li class="footer_nav_item"><a href="{{ path('contact') }}" style="color: #FFFFFF">Contact</a></li><br> </div> </div> </div> <!-- Footer Column --> <div class="col-lg-4 footer_column"> <div class="footer_col"> <div class="footer_title">contact info</div> <div class="footer_content footer_contact"> <ul class="contact_info_list"> <li class="contact_info_item d-flex flex-row"> <div><div class="contact_info_icon"><img src="{{ asset('front/images/placeholder.svg') }}" alt=""></div></div> <div class="contact_info_text" style="font-size: small;"> - Avenue Fadhel Ben Achour Beni Khiar 8060, Nabeul. <br> - Immeuble omrane, bloc b 1er étage , rue lac leman, Les Berges du Lac 1, Tunis 1053. </div> </li> <li class="contact_info_item d-flex flex-row" style="font-size: small;"> <div><div class="contact_info_icon"><img src="{{ asset('front/images/phone-call.svg') }}" alt=""></div></div> <div class="contact_info_text"><a href="tel://0021672238880" style="color:white;text-decoration:none!important;">(+216) 72 238 880</a></div> </li> <li class="contact_info_item d-flex flex-row" style="font-size: small;"> <div><div class="contact_info_icon"><img src="{{ asset('front/images/message.svg') }}" alt=""></div></div> <div class="contact_info_text"><a href="mailto:reservation@rusticavoyages.com" style="text-decoration:none!important;" target="_top">reservation@rusticavoyages.com</a></div> </li> <li class="contact_info_item d-flex flex-row" style="font-size: small;"> <div><div class="contact_info_icon"><img src="{{ asset('front/images/planet-earth.svg') }}" alt=""></div></div> <div class="contact_info_text"><a href="https://rusticavoyages.com" style="text-decoration:none!important;">www.rusticavoyages.com</a></div> </li> </ul> </div> </div> </div> </div> </div> </footer> <!-- Copyright --> <div class="copyright" style="background-color: #0e2737;margin-top:-80px;"> <div class="container"> <div class="row"> <div class="col-lg-3 order-lg-1 order-2 "> <div class="copyright_content d-flex flex-row align-items-center"> <div style="color: #FFFFFF"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> Copyright ©<script>document.write(new Date().getFullYear());</script> <a href="https://www.yo-marketing-agency.com">by Yo Marketing Agency</a> <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></div> </div> </div> </div> </div> </div> </div> <script src="{{ asset('front/style/bootstrap4/popper.js') }}"></script> <script src="{{ asset('front/style/bootstrap4/bootstrap.min.js') }}"></script> <script src="{{ asset('front/plugins/OwlCarousel2-2.2.1/owl.carousel.js') }}"></script> <script src="{{ asset('front/plugins/easing/easing.js') }}"></script> <script src="{{ asset('front/js/custom.js') }}"></script> <script src="{{ asset('front/plugins/colorbox/jquery.colorbox-min.js') }}"></script> <script src="{{ asset('front/plugins/parallax-js-master/parallax.min.js') }}"></script> <script src="{{ asset('front/js/blog_custom.js') }}"></script> <script src="{{ asset('front/js/single_listing_custom.js') }}"></script> <script src="{{ asset('front/js/about_custom.js') }}"></script> </body></html><script> document.addEventListener("DOMContentLoaded", function() { const toggleMenuButton = document.querySelector('.toggle_menu'); const mainNavList = document.querySelector('.main_nav_list'); toggleMenuButton.addEventListener('click', function() { mainNavList.classList.toggle('show'); }); }); function myFunction(x) { x.classList.toggle("change");}</script>