templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %} 
  5. <div class=" background-page">
  6.     <div id="wrapper ">
  7.         <section class="slideshow" id="js-header">
  8.             <div class="slideshow__slide js-slider-home-slide is-current" data-slide="1">
  9.                 <div class="slideshow__slide-background-parallax background-absolute js-parallax" data-speed="-1" data-position="top" data-target="#js-header">
  10.                     <div class="slideshow__slide-background-load-wrap background-absolute">
  11.                         <div class="slideshow__slide-background-load background-absolute">
  12.                             <div class="slideshow__slide-background-wrap background-absolute">
  13.                                 <div class="slideshow__slide-background background-absolute">
  14.                                     <div class="slideshow__slide-image-wrap background-absolute">
  15.                                         <div class="slideshow__slide-image background-absolute background-absolute-pos slider1"></div>
  16.                                     </div>
  17.                                 </div>
  18.                             </div>
  19.                         </div>
  20.                     </div>
  21.                 </div>
  22.                 <div class="slideshow__slide-caption">
  23.                     <div class="slideshow__slide-caption-text">
  24.                         <div class="container js-parallax" data-speed="2" data-position="top" data-target="#js-header">
  25.                             <h1 class="slideshow__slide-caption-title ">Vous imaginez,</h1>
  26.                             <h1 class="slideshow__slide-caption-title Acceuill_titel "> nous réalisons</h1>
  27.                         </div>
  28.                     </div>
  29.                 </div>
  30.             </div>
  31.             
  32.             <div class="slideshow__slide js-slider-home-slide is-prev" data-slide="2">
  33.                 <div class="slideshow__slide-background-parallax background-absolute js-parallax" data-speed="-1" data-position="top" data-target="#js-header">
  34.                     <div class="slideshow__slide-background-load-wrap background-absolute">
  35.                         <div class="slideshow__slide-background-load background-absolute">
  36.                             <div class="slideshow__slide-background-wrap background-absolute">
  37.                                 <div class="slideshow__slide-background background-absolute">
  38.                                     <div class="slideshow__slide-image-wrap background-absolute">
  39.                                         <div class="slideshow__slide-image background-absolute background-absolute-pos slider2"></div>
  40.                                     </div>
  41.                                 </div>
  42.                             </div>
  43.                         </div>
  44.                     </div>
  45.                 </div>
  46.                 <div class="slideshow__slide-caption">
  47.                     <div class="slideshow__slide-caption-text">
  48.                         <div class="container js-parallax" data-speed="2" data-position="top" data-target="#js-header">
  49.                             <h1 class="slideshow__slide-caption-title text-design-slide">Design, intégration,</h1><br>
  50.                             <h1 class="slideshow__slide-caption-title text-design-slide Acceuill_titel " >Référencement</h1>
  51.                         </div>
  52.                     </div>
  53.                 </div>
  54.             </div>
  56.             <div class="slideshow__slide js-slider-home-slide is-prev" data-slide="3">
  57.                 <div class="slideshow__slide-background-parallax background-absolute js-parallax" data-speed="-1" data-position="top" data-target="#js-header">
  58.                     <div class="slideshow__slide-background-load-wrap background-absolute">
  59.                         <div class="slideshow__slide-background-load background-absolute">
  60.                             <div class="slideshow__slide-background-wrap background-absolute">
  61.                                 <div class="slideshow__slide-background background-absolute">
  62.                                     <div class="slideshow__slide-image-wrap background-absolute">
  63.                                         <div class="slideshow__slide-image background-absolute background-absolute-pos slider3" ></div>
  64.                                     </div>
  65.                                 </div>
  66.                             </div>
  67.                         </div>
  68.                     </div>
  69.                 </div>
  70.                 <div class="slideshow__slide-caption">
  71.                     <div class="slideshow__slide-caption-text">
  72.                         <div class="container js-parallax" data-speed="2" data-position="top" data-target="#js-header">
  73.                             <h1 class="slideshow__slide-caption-title">
  74.                                 <h1>Solutions Digitales</h1>
  75.                                 <h1 class="slideshow__slide-caption-title adapt">Adaptées</h1>
  76.                                 <h2 class="Acceuill_titel ">à votre secteur d'activité</h2></h1>
  77.                         </div>
  78.                     </div>
  79.                 </div>
  80.             </div>
  81.             
  82.             <div class="slideshow__slide js-slider-home-slide is-prev" data-slide="4">
  83.                 <div class="slideshow__slide-background-parallax background-absolute js-parallax" data-speed="-1" data-position="top" data-target="#js-header">
  84.                     <div class="slideshow__slide-background-load-wrap background-absolute">
  85.                         <div class="slideshow__slide-background-load background-absolute">
  86.                             <div class="slideshow__slide-background-wrap background-absolute">
  87.                                 <div class="slideshow__slide-background background-absolute">
  88.                                     <div class="slideshow__slide-image-wrap background-absolute">
  89.                                         <div class="slideshow__slide-image background-absolute background-absolute-pos slider4" ></div>
  90.                                     </div>
  91.                                 </div>
  92.                             </div>
  93.                         </div>
  94.                     </div>
  95.                 </div>
  96.                 <div class="slideshow__slide-caption">
  97.                     <div class="slideshow__slide-caption-text">
  98.                         <div class="container js-parallax" data-speed="2" data-position="top" data-target="#js-header">
  99.                       
  100.                                 <h1 class="slideshow__slide-caption-title adapt img-for-slide"><img class="lazy" data-original="{{asset('assets/img/slide-4-extra1.png')}}" ></h1>
  101.                                 <h2 class="Acceuill_titel img-for-slide"><img class="lazy" data-original="{{asset('assets/img/slide-4-extra-2.png')}}" ></h2>
  102.                                 <div class="slider4-description">
  103.                                     <p>Avec une expertise de plus de 15 ans</p>
  104.                                     <p><strong>Logisassist</strong> vous offre les meilleurs façons pour gérer vos établissements ...</p>
  105.                                 </div>
  106.                         </div>
  107.                         <div class="btn-deamnder"><a href="{{path('app_devis')}}"><img class="lazy" data-original="{{asset('assets/img/bouton-demander.png')}}" ></a></div>
  108.                     </div>
  109.                     
  110.                 </div>
  111.             </div>
  112.             
  113.             <div class="c-header-home_footer">
  114.                 <div class="o-container">
  115.                     <div class="c-header-home_controls -nomobile o-button-group">
  116.                         <div class="js-parallax is-inview" data-speed="1" data-position="top" data-target="#js-header">
  117.                             <button class="o-button -white -square -left js-slider-home-button js-slider-home-prev" type="button">
  118.                                 <span class="o-button_label">
  119.                                     <svg class="o-button_icon" role="img"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-prev"></use></svg>
  120.                                 </span>
  121.                             </button>
  122.                             <button class="o-button -white -square js-slider-home-button js-slider-home-next" type="button">
  123.                                 <span class="o-button_label">
  124.                                     <svg class="o-button_icon" role="img"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-next"></use></svg>
  125.                                 </span>
  126.                             </button>
  127.                         </div>
  128.                     </div>
  129.                 </div>
  130.             </div>
  131.         </section>
  133.         <div class="transbox">
  134.             <svg class="d-none" xmlns="http://www.w3.org/2000/svg">
  135.             <symbol viewBox="0 0 18 18" id="arrow-next">
  136.                 <path id="arrow-next-arrow.svg" d="M12.6,9L4,17.3L4.7,18l8.5-8.3l0,0L14,9l0,0l-0.7-0.7l0,0L4.7,0L4,0.7L12.6,9z"/>
  137.             </symbol>
  138.             <symbol viewBox="0 0 18 18" id="arrow-prev">
  139.                     <path id="arrow-prev-arrow.svg" d="M14,0.7L13.3,0L4.7,8.3l0,0L4,9l0,0l0.7,0.7l0,0l8.5,8.3l0.7-0.7L5.4,9L14,0.7z"/>
  140.             </symbol>
  141.             </svg>
  142.         </div>
  144.         <!--Logisassit section !-->
  145.        <section class="apropos logisassit">
  146.            <div class="header">
  147.                 <section class="hero">
  148.                     <div class="left">
  149.                         <h1>Notre Produit</h1>
  150.                         <p>Découvrir <strong>Logisassist</strong> </p>
  151.                         <a href="{{path('logisassist')}}">Voir plus</a>
  152.                     </div>
  153.                     <div class="right">
  154.                          <img class="lazy" data-original="{{asset('assets/img/logiasisst.jpg')}}" alt="">
  155.                     </div>
  156.                 </section>
  157.             </div>
  158.         </section>
  160.       <!--A Propos section !-->
  161.         <section class="historique">
  162.             <div class="center">
  163.                 <div class="container reveal">
  164.                   <h2>QUI SOMMES – NOUS ?</h2>
  165.                 </div>
  166.                 </br>
  167.                 <a href="{{'apropos'}}" class="historiques">XPER WEB PLUS</a>
  168.             </div>
  169.         </section>
  170.         <!--Historique section !-->
  171.        <section class=" apropos">
  172.            <div class="header">
  173.                 <section class="hero">
  174.                     <div class="left">
  175.                         <h1>Historique </h1>
  176.                         <p> Découvrir notre histoire</p>
  177.                         <a href="{{'apropos'}}#history">Voir plus</a>
  178.                     </div>
  179.                     <div class="right">
  180.                          <img class="lazy" data-original="{{asset('assets/img/historique.jpg')}}" alt="">
  181.                     </div>
  182.                 </section>
  183.             </div>
  184.         </section>
  185.           <!--Contact section !-->
  186.         <section  class="banner">
  187.             <div class="center">
  188.                 <div class="container reveal">
  189.                   <h2>Contactez-nous</h2>
  190.                 </div>
  191.                 </br>
  192.                 <a href="{{'contact'}}" class="contacts">Voir Plus</a>
  193.             </div>
  194.         </section>
  195.        
  196.               <!--Partenaire section !-->
  197.         <section class=" section_partenaires " >
  198.             <div class="text-center">
  199.                 <div class="container reveal">
  200.                   <h2>Nos partenaires</h2>
  201.                 </div>
  202.             </div>
  203.             <div class="slider-rotation">
  204.                 <div class="slider">
  205.                     <div class="flip-card">
  206.                         <div class="flip-card-inner">
  207.                             <div class="flip-card-front">
  208.                                 <div class="slide">
  209.                                     <img class="img_slide lazy" data-original="assets/img/logos/logo.png"  alt="" >
  210.                                 </div>
  211.                             </div>
  212.                             <div class="flip-card-back">
  213.                                 <p class="text">1er réseau national de conseil en cession et reprise de commerces et entreprises.</p>
  214.                                 <a href="https://www.msimond.fr/" target="_blank" class="button"><span> More </span></a>
  215.                             </div>
  216.                         </div>
  217.                     </div>
  218.                        <div class="flip-card">
  219.                         <div class="flip-card-inner">
  220.                             <div class="flip-card-front">
  221.                                 <div class="slide">
  222.                                     <img class="img_slide lazy" data-original="assets/img/logos/logo-2.jpg"  alt="" >
  223.                                 </div>
  224.                             </div>
  225.                             <div class="flip-card-back">
  226.                                 <p class="text">GERHOTEL, est un groupe indépendant parisien fondé en 1997 à la tête de 3 hôtels en Ile-de-France.</p>
  227.                                 <a href="https://gerhotel.fr/" target="_blank" class="button"><span> More </span></a>
  228.                             </div>
  229.                         </div>
  230.                     </div>
  231.                    <div class="flip-card">
  232.                         <div class="flip-card-inner">
  233.                             <div class="flip-card-front">
  234.                                 <div class="slide">
  235.                                     <img class="img_slide lazy" data-original="assets/img/logos/VSP_Maste_Negative-02.png"  alt="" >
  236.                                 </div>
  237.                             </div>
  238.                             <div class="flip-card-back">
  239.                                 <p class="text">VSP-booking est une agence réceptive située au coeur de Paris qui vous propose de choisir votre voyage en toute liberté .</p>
  240.                                 <a href="https://www.vsp-booking.com/" target="_blank" class="button"><span> More </span></a>
  241.                             </div>
  242.                         </div> 
  243.                     </div>
  244.                     <div class="flip-card">
  245.                         <div class="flip-card-inner">
  246.                             <div class="flip-card-front">
  247.                                 <div class="slide">
  248.                                     <img class="img_slide lazy" data-original="{{asset('assets/img/logo-footer.png')}}"  alt="" >
  249.                                 </div>
  250.                             </div>
  251.                             <div class="flip-card-back">
  252.                                 <p class="text">C’est un hôtel moderne et confortable, construit en 1966 et rénové en 2008/2009/2014.</p>
  253.                                 <a href="https://sindbadhotel.com/" target="_blank" class="button"><span> More </span></a>
  254.                             </div>
  255.                         </div>
  256.                     </div>
  257.                 </div>
  258.             </div>
  259.         </section> 
  260.               <!--Portfolio section !-->
  261.         <section class="bannerPortfolio">
  262.             <div class="center">
  263.                 <div class="container reveal">
  264.                   <h2>Portfolio</h2>
  265.                 </div>
  266.                 </br>
  267.                 <a href="{{'portfolio'}}" class="historiques">Voir plus </a>
  268.             </div>
  269.         </section>
  270.          <!--Portfolio section !-->
  271.         {# <section class="section_home " id="portfolio">
  272.             <div class="container">
  273.                 <div class="text-center">
  274.                     <div class="container reveal">
  275.                         <h2>Portfolio de créations</h2>
  276.                     </div>
  277.                     <h3 class=" text-muted"> info : d'autres référence sont dans des réseaux Intranet (ERP, CRM ..), nhésitez pas de nous contacter pour découvrir nos dernières créations.</h3>
  278.                 </div>
  279.                 <div class="row">
  280.                     <div class="sliderportfolio">
  281.                         <div class="col-lg-4 col-sm-6">
  282.                             <!-- Portfolio item 1-->
  283.                             <div class="portfolio-item">
  284.                                 <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal1">
  285.                                     <div class="portfolio-hover">
  286.                                         <div class="portfolio-hover-content"><i class="fa-solid fa-magnifying-glass-plus fa-3x"></i></div>
  287.                                     </div>
  288.                                 
  289.                                     <img class="img-fluid" src="assets/img/portfolio/vsp1.png" alt="..." />
  290.                                 </a>
  291.                                 <div class="portfolio-caption">
  292.                                     <div class="portfolio-caption-heading">vsp-incoming</div>
  293.                                     <div class=" text-muted">Réservez votre hôtel</div>
  294.                                 </div>
  295.                             </div>
  296.                         </div>
  297.                         <div class="col-lg-4 col-sm-6">
  298.                             <!-- Portfolio item 2-->
  299.                             <div class="portfolio-item">
  300.                                 <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal2">
  301.                                     <div class="portfolio-hover">
  302.                                         <div class="portfolio-hover-content"><i class="fa-solid fa-magnifying-glass-plus fa-3x"></i></div>
  303.                                     </div>
  304.                                     <img class="img-fluid" src="assets/img/portfolio/lekatorze1.png" alt="..." />
  305.                                 </a>
  306.                                 <div class="portfolio-caption">
  307.                                     <div class="portfolio-caption-heading">lekatorzehôtel</div>
  308.                                     <div class=" text-muted">Un Boutique Hôtel Audacieux.</div>
  309.                                 </div>
  310.                             </div>
  311.                         </div>
  312.                         <div class="col-lg-4 col-sm-6">
  313.                             <!-- Portfolio item 3-->
  314.                             <div class="portfolio-item">
  315.                                 <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal3">
  316.                                     <div class="portfolio-hover">
  317.                                         <div class="portfolio-hover-content"><i class="fa-solid fa-magnifying-glass-plus fa-3x"></i></div>
  318.                                     </div>
  319.                                     <img class="img-fluid" src="assets/img/portfolio/eden1.png" alt="..." />
  320.                                 </a>
  321.                                 <div class="portfolio-caption">
  322.                                     <div class="portfolio-caption-heading">Hôtel  Eden Opéra Paris</div>
  323.                                     <div class="text-muted">Un style typiquement Parisien</div>
  324.                                 </div>
  325.                             </div>
  326.                         </div>
  327.                         <div class="col-lg-4 col-sm-6">
  328.                             <!-- Portfolio item 4-->
  329.                             <div class="portfolio-item">
  330.                                 <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal4">
  331.                                     <div class="portfolio-hover">
  332.                                         <div class="portfolio-hover-content"><i class="fa-solid fa-magnifying-glass-plus fa-3x"></i></div>
  333.                                     </div>
  334.                                     <img class="img-fluid" src="assets/img/portfolio/cheval1.png" alt="..." />
  335.                                 </a>
  336.                                 <div class="portfolio-caption">
  337.                                     <div class="portfolio-caption-heading">Hôtel  Le Cheval Blanc</div>
  338.                                     <div class="portfolio-caption-subheading text-muted">La découverte</div>
  339.                                 </div>
  340.                             </div>
  341.                         </div>
  342.                         <div class="col-lg-4 col-sm-6">
  343.                             <!-- Portfolio item 5-->
  344.                             <div class="portfolio-item">
  345.                                 <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal5">
  346.                                     <div class="portfolio-hover">
  347.                                         <div class="portfolio-hover-content"><i class="fa-solid fa-magnifying-glass-plus fa-3x"></i></div>
  348.                                     </div>
  349.                                     <img class="img-fluid" src="assets/img/portfolio/ms1.png" alt="..." />
  350.                                 </a>
  351.                                 <div class="portfolio-caption">
  352.                                     <div class="portfolio-caption-heading">ms Financement</div>
  353.                                     <div class="portfolio-caption-subheading text-muted">Des Experts pour le Financement</div>
  354.                                 </div>
  355.                             </div>
  356.                         </div>
  357.                         <div class="col-lg-4 col-sm-6">
  358.                             <!-- Portfolio item 6-->
  359.                             <div class="portfolio-item">
  360.                                 <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal6">
  361.                                     <div class="portfolio-hover">
  362.                                         <div class="portfolio-hover-content"><i class="fa-solid fa-magnifying-glass-plus fa-3x"></i></div>
  363.                                     </div>
  364.                                     <img class="img-fluid" src="assets/img/portfolio/booking1.png" alt="..." />
  365.                                 </a>
  366.                                 <div class="portfolio-caption">
  367.                                     <div class="portfolio-caption-heading">VSP Booking</div>
  368.                                     <div class="portfolio-caption-subheading text-muted">Voyage Service Plus</div>
  369.                                 </div>
  370.                             </div>
  371.                         </div>
  372.                     </div>
  373.                 </div>
  374.             </div>
  375.         </section>
  376.         <!-- Portfolio Modals-->
  377.         <!-- Portfolio item 1 modal popup-->
  378.         <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
  379.             <div class="modal-dialog">
  380.                 <div class="modal-content">
  381.                     <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
  382.                     <div class="container">
  383.                         <div class="row justify-content-center">
  384.                             <div class="col-lg-8">
  385.                                 <div class="modal-body">
  386.                                     <!-- Project details-->
  387.                                     <h2 class="text-uppercase " >
  388.                                         <a class="text-decoration-none" href="http://vsp-incoming.com" target="VSP-incoming" >VSP-incoming</a>
  389.                                     </h2>
  390.                                     <p class="item-intro text-muted">Réservez votre hôtel.</p>
  391.                                     
  392.                                     <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/vsp2.png" alt="..." />
  393.                                     <p>Chez VSP, nous sommes des connecteurs, des créateurs et des créateurs d'expériences, et nous aimerions partager notre expertise et nos capacités avec vous. Les services que nous proposons pour les groupes, les FIT et les MICE incluent mais ne sont pas limités à :
  394.                                         hébergement, transferts, restaurants, excursions, visites guidées, billets de théâtre et de divertissement, visites des coulisses, rencontre avec les habitants, goûts des spécialités locales, expériences uniques . Nous avons un système de réservation en ligne simple et pratique pour les agents, et répondons à une gamme d'exigences budgétaires, de l'économique au luxe, et pour les voyages d'affaires et de loisirs. Nous proposons également une ligne d'urgence 24h/24 et 7j/7.</p>
  395.                                     <ul class="list-inline">
  396.                                         <li>
  397.                                         <strong>Client:</strong>
  398.                                             VSP
  399.                                         </li>
  400.                                         <li>
  401.                                         <strong>Category:</strong>
  402.                                             Tourisme
  403.                                         </li>
  404.                                         <li>
  405.                                         <strong>Env.Technique:</strong>
  406.                                             back-office, syfmony 5, bootstrap
  407.                                         </li>
  408.                                     </ul>
  409.                                     <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
  410.                                         <i class="fas fa-xmark me-1"></i>
  411.                                         Close Project
  412.                                     </button>
  413.                                 </div>
  414.                             </div>
  415.                         </div>
  416.                     </div>
  417.                 </div>
  418.             </div>
  419.         </div>
  420.         <!-- Portfolio item 2 modal popup-->
  421.         <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
  422.             <div class="modal-dialog">
  423.                 <div class="modal-content">
  424.                     <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
  425.                     <div class="container">
  426.                         <div class="row justify-content-center">
  427.                             <div class="col-lg-8">
  428.                                 <div class="modal-body">
  429.                                     <!-- Project details-->
  430.                                     <h2 class="text-uppercase">
  431.                                         <a  class="text-decoration-none" href="https://lekatorzehotel.com/fr"  target="le katorze hotel" >le katorze Hôtel</a>
  432.                                     </h2>
  433.                                     <p class="item-intro text-muted">Un Boutique Hôtel Audacieux</p>
  434.                                     <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/lekatorze2.png" alt="..." />
  435.                                     <p>Le site internet s’est construit autour de la modernité, dans un style non, chargé et « tout à l’écran ». En effet, l’arrivée sur le site de le Katorze Hotel présente en clin d’oeil toutes les informations majeures dont un client pourrait avoir besoin pour réserver sa chambre.Comme pour beaucoup de nos créations web, un lien direct à la réservation est fixé à droite de l’écran et suivra le visiteur tout du long de son expérience.</p>
  436.                                     <ul class="list-inline">
  437.                                         <li>
  438.                                             <strong>Client:</strong>
  439.                                             Le Katorzehôtel
  440.                                         </li>
  441.                                         <li>
  442.                                             <strong>Category:</strong>
  443.                                             Tourisme
  444.                                         </li>
  445.                                         <li>
  446.                                             <strong>Env.Technique:</strong>
  447.                                             un cms créé par Xper Web Plus, symfony 4, bootstrap
  448.                                         </li>
  449.                                     </ul>
  450.                                     <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
  451.                                         <i class="fas fa-xmark me-1"></i>
  452.                                         Close Project
  453.                                     </button>
  454.                                 </div>
  455.                             </div>
  456.                         </div>
  457.                     </div>
  458.                 </div>
  459.             </div>
  460.         </div>
  461.         <!-- Portfolio item 3 modal popup-->
  462.         <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
  463.             <div class="modal-dialog">
  464.                 <div class="modal-content">
  465.                     <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
  466.                     <div class="container">
  467.                         <div class="row justify-content-center">
  468.                             <div class="col-lg-8">
  469.                                 <div class="modal-body">
  470.                                     <!-- Project details-->
  471.                                     <h2 class="text-uppercase">
  472.                                         <a  class="text-decoration-none" href="https://www.hotel-eden-opera.com/" target="Hôtel eden opéra paris" >Hôtel eden opéra paris</a>
  473.                                     </h2>
  474.                                     <p class="item-intro text-muted">Style typiquement Parisien.</p>
  475.                                     <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/eden2.png" alt="..." />
  476.                                     <p>Le site internet de cet établissement de luxe a été conçu autour de la simplicité et raffinement. Un lien de réservation fixe a été intégré à droite de menu pour un accès direct et permanent au moteur de réservation du client.Une section « INFOS PRATIQUES » qui permette aux client de découvrir par theme ses besoins a fin de selectionner la section de « TICKETS & ACTIVITES » pour trouvez son guide avec une diversité d'activités.Finalement, le travail de fond qui a été entrepris sur le temps de chargement des pages a permis de parfaire une expérience utilisateur, désormais très fluide et intuitive.   </p>
  477.                                     <ul class="list-inline">
  478.                                         <li>
  479.                                             <strong>Client:</strong>
  480.                                             Hôtel eden opéra paris
  481.                                         </li>
  482.                                         <li>
  483.                                             <strong>Category:</strong>
  484.                                             Tourisme
  485.                                         </li>
  486.                                         <li>
  487.                                             <strong>Env.Technique:</strong>
  488.                                             PHP, HTML, CSS, JS
  489.                                         </li>
  490.                                     </ul>
  491.                                     <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
  492.                                         <i class="fas fa-xmark me-1"></i>
  493.                                         Close Project
  494.                                     </button>
  495.                                 </div>
  496.                             </div>
  497.                         </div>
  498.                     </div>
  499.                 </div>
  500.             </div>
  501.         </div>
  502.         <!-- Portfolio item 4 modal popup-->
  503.         <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
  504.             <div class="modal-dialog">
  505.                 <div class="modal-content">
  506.                     <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
  507.                     <div class="container">
  508.                         <div class="row justify-content-center">
  509.                             <div class="col-lg-8">
  510.                                 <div class="modal-body">
  511.                                     <!-- Project details-->
  512.                                     <h2 class="text-uppercase">
  513.                                         <a  class="text-decoration-none" href="https://www.chevalblanchotel.com/" target="hôtel le cheval blanc" >hôtel le cheval blanc</a>
  514.                                     </h2>
  515.                                     <p class="item-intro text-muted"></p>
  516.                                     <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/cheval2.png" alt="..." />
  517.                                     <p>L’Hôtel Le Cheval Blanc Paris Marne-La-Vallée est situé à 30 minutes de Paris et à 7 kilomètres de la première destination européenne, Disneyland Paris®.Si un site Web d’hôtel peut transmettre un message à ses clients potentiels, celui de Hôtel  le cheval blanc est simple : n’allez pas plus loin, vous êtes arrivés.Le client potentiel a la sensation immédiate que l’hôtel est propre et accueillant,l’endroit parfait où se reposer pendant un voyage d’affaires ou de loisir.</p>
  518.                                     <ul class="list-inline">
  519.                                         <li>
  520.                                             <strong>Client:</strong>
  521.                                             Hôtel  le cheval blanc
  522.                                         </li>
  523.                                         <li>
  524.                                             <strong>Category:</strong>
  525.                                             Tourisme
  526.                                         </li>
  527.                                         <li>
  528.                                             <strong>Env.Technique:</strong>
  529.                                             PHP, HTML, CSS, JS
  530.                                         </li>
  531.                                     </ul>
  532.                                     <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
  533.                                         <i class="fas fa-xmark me-1"></i>
  534.                                         Close Project
  535.                                     </button>
  536.                                 </div>
  537.                             </div>
  538.                         </div>
  539.                     </div>
  540.                 </div>
  541.             </div>
  542.         </div>
  543.         <!-- Portfolio item 5 modal popup-->
  544.         <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
  545.             <div class="modal-dialog">
  546.                 <div class="modal-content">
  547.                     <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
  548.                     <div class="container">
  549.                         <div class="row justify-content-center">
  550.                             <div class="col-lg-8">
  551.                                 <div class="modal-body">
  552.                                     <!-- Project details-->
  553.                                     <h2 class="text-uppercase">
  554.                                         <a class="text-decoration-none" href="https://ms-financement.fr/fr" target="ms Financement">ms Financement</a>
  555.                                     </h2>
  556.                                     <p class="item-intro text-muted">Des experts pour le Financement.</p>
  557.                                     <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/ms2.png" alt="..." />
  558.                                     <p>"Une parfaite connaissance du monde bancaire et financier, pour vous faire gagner du temps et vous garantir la meilleure solution de financement".C'est avec ce défit qu'on a créer le site de ms Financement .La rédaction de contenus ne se résume pas à une simple synthèse de toute l’idée de notre projet. Il s’agit d’injecter des émotions dans nos textes, d’impliquer les gens, d’enflammer et de partager une passion avec des personnes qui se soucient des mêmes choses que nous.</p>
  559.                                     <ul class="list-inline">
  560.                                         <li>
  561.                                             <strong>Client:</strong>
  562.                                             Michel Simond
  563.                                         </li>
  564.                                         <li>
  565.                                             <strong>Category:</strong>
  566.                                             Financement
  567.                                         </li>
  568.                                         <li>
  569.                                             <strong>Env.Technique:</strong>
  570.                                             Back-office, un cms créé par Xper Web Plus, Symfony 4, boostrap
  571.                                         </li>
  572.                                     </ul>
  573.                                     <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
  574.                                         <i class="fas fa-xmark me-1"></i>
  575.                                         Close Project
  576.                                     </button>
  577.                                 </div>
  578.                             </div>
  579.                         </div>
  580.                     </div>
  581.                 </div>
  582.             </div>
  583.         </div>
  584.         <!-- Portfolio item 6 modal popup-->
  585.         <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
  586.             <div class="modal-dialog">
  587.                 <div class="modal-content">
  588.                     <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
  589.                     <div class="container">
  590.                         <div class="row justify-content-center">
  591.                             <div class="col-lg-8">
  592.                                 <div class="modal-body">
  593.                                     <!-- Project details-->
  594.                                     <h2 class="text-uppercase">
  595.                                         <a  class="text-decoration-none" href="https://www.vsp-booking.com/" target="vsp booking">vsp booking</a>
  596.                                     </h2>
  597.                                     <p class="item-intro text-muted">Voyage Service Plus</p>
  598.                                     <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/booking2.png" alt="..." />
  599.                                     <p>Ce référencement optimal est appuyé par l’ajout de traductions en Anglais,Russe,Espagnol,Portugais et Chinois: C’est tout autant de langues dans lesquelles le site apparaitra pour toute recherche sur ces mots-clés! Le client dispose ainsi d’un avantage concurrentiel notoire dans le secteur.</p>
  600.                                     <ul class="list-inline">
  601.                                         <li>
  602.                                             <strong>Client:</strong>
  603.                                             VSP
  604.                                         </li>
  605.                                         <li>
  606.                                             <strong>Category:</strong>
  607.                                             Tourisme
  608.                                         </li>
  609.                                         <li>
  610.                                             <strong>Env.Technique:</strong>
  611.                                             Back-office, Apis XML, Kit de paiement
  612.                                         </li>
  613.                                         
  614.                                     </ul>
  615.                                     <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
  616.                                         <i class="fas fa-xmark me-1"></i>
  617.                                         Close Project
  618.                                     </button>
  619.                                 </div>
  620.                             </div>
  621.                         </div>
  622.                     </div>
  623.                 </div>
  624.             </div>
  625.         </div> #}
  626.     </div>
  627. </div>  
  628. {% endblock body %}