templates/portfolio/portfolio.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4.     <section class="page-section bg-light" id="portfolio">
  5.         <div class="container">
  6.             <div class="text-center">
  7.                 <div class="zoom">
  8.                     <h2 class="h2">Portfolio de créations</h2>
  9.                 </div>
  10.                     
  11.             </div>
  12.             <div class="row_portfolio">
  13.                 <div class="col-lg-4 col-sm-6 mb-4">
  14.                         <div class="portfolio-item">
  15.                             <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal2">
  16.                                 <div class="portfolio-hover">
  17.                                     <div class="portfolio-hover-content">
  18.                                     <i class="fa-solid fa-magnifying-glass-plus fa-3x"></i>
  19.                                     </div>
  20.                                 </div>
  21.                                 <img class="img-fluid lazy" data-original="assets/img/portfolio/lekatorze1.png" alt="..." />
  22.                             </a>
  23.                         <div class="portfolio-caption">
  24.                             <div class="portfolio-caption-heading">Le Katorze Hôtel</div>
  25.                             <div class="portfolio-caption-subheading text-muted">Un Boutique Hôtel Audacieux.</div>
  26.                         </div>
  27.                     </div>
  28.                 </div>
  29.                 <div class="col-lg-4 col-sm-6 mb-4">
  30.                     <div class="portfolio-item">
  31.                         <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal3">
  32.                             <div class="portfolio-hover">
  33.                                 <div class="portfolio-hover-content">
  34.                                  <i class="fa-solid fa-magnifying-glass-plus fa-3x"></i>
  35.                                 </div>
  36.                             </div>
  37.                             <img class="img-fluid lazy" data-original="assets/img/portfolio/eden1.png" alt="..." />
  38.                         </a>
  39.                         <div class="portfolio-caption">
  40.                             <div class="portfolio-caption-heading">Hôtel  Eden Opéra Paris</div>
  41.                             <div class="portfolio-caption-subheading text-muted">Un style typiquement Parisien</div>
  42.                         </div>
  43.                     </div>
  44.                 </div>
  45.                 <div class="col-lg-4 col-sm-6 mb-4">
  46.                     <div class="portfolio-item">
  47.                         <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal5">
  48.                             <div class="portfolio-hover">
  49.                                 <div class="portfolio-hover-content">
  50.                                  <i class="fa-solid fa-magnifying-glass-plus fa-3x"></i>
  51.                                 </div>
  52.                             </div>
  53.                             <img class="img-fluid lazy" data-original="assets/img/portfolio/msfNew.png" alt="..." />
  54.                         </a>
  55.                         <div class="portfolio-caption">
  56.                             <div class="portfolio-caption-heading">MS Financement</div>
  57.                             <div class="portfolio-caption-subheading text-muted">Des Experts pour le Financement</div>
  58.                         </div>
  59.                     </div>
  60.                 </div>
  61.                 <div class="col-lg-4 col-sm-6 mb-4">
  62.                     <div class="portfolio-item">
  63.                         <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal7">
  64.                             <div class="portfolio-hover">
  65.                                 <div class="portfolio-hover-content">
  66.                                  <i class="fa-solid fa-magnifying-glass-plus fa-3x fa-3x"></i>
  67.                                 </div>
  68.                             </div>
  69.                             <img class="img-fluid" src="assets/img/portfolio/mavalo1.png" alt="..." />
  70.                         </a>
  71.                         <div class="portfolio-caption">
  72.                             <div class="portfolio-caption-heading">MaValo</div>
  73.                             <div class="portfolio-caption-subheading text-muted">La valeur de votre affaire</div>
  74.                         </div>
  75.                     </div>
  76.                 </div>
  77.                 <div class="col-lg-4 col-sm-6 mb-4 ">
  78.                     <div class="portfolio-item">
  79.                         <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal1">
  80.                             <div class="portfolio-hover">
  81.                                 <div class="portfolio-hover-content">
  82.                                  <i class="fa-solid fa-magnifying-glass-plus fa-3x"></i>
  83.                                 </div>
  84.                             </div>
  85.                             <img class="img-fluid lazy" data-original="assets/img/portfolio/vsp1.png" alt="..." />
  86.                         </a>
  87.                         <div class="portfolio-caption">
  88.                             <div class="portfolio-caption-heading">Vsp-Incoming</div>
  89.                             <div class="portfolio-caption-subheading text-muted">Réservez votre hôtel</div>
  90.                         </div>
  91.                     </div>
  92.                 </div>
  93.                 <div class="col-lg-4 col-sm-6 mb-4">
  94.                     <div class="portfolio-item">
  95.                         <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal6">
  96.                             <div class="portfolio-hover">
  97.                                 <div class="portfolio-hover-content">
  98.                                  <i class="fa-solid fa-magnifying-glass-plus fa-3x fa-3x"></i>
  99.                                 </div>
  100.                             </div>
  101.                             <img class="img-fluid lazy" data-original="assets/img/portfolio/booking1.png" alt="..." />
  102.                         </a>
  103.                         <div class="portfolio-caption">
  104.                             <div class="portfolio-caption-heading">VSP Booking</div>
  105.                             <div class="portfolio-caption-subheading text-muted">Voyage Service Plus</div>
  106.                         </div>
  107.                     </div>
  108.                 </div>
  109.                  
  110.             </div>
  111.             <h3 class="section-subheading 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>
  112.         </div>
  113.     </section>
  115.     <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true" >
  116.         <div class="modal-dialog">
  117.             <div class="modal-content">
  118.                 <div class="close-modal" data-bs-dismiss="modal">
  119.                     <img class="lazy" data-original="assets/img/close-icon.svg" alt="Close modal" />
  120.                 </div>
  121.                 <div class="container">
  122.                     <div class="row justify-content-center">
  123.                         <div class="col-lg-8">
  124.                             <div class="modal-body">
  125.                                 <h2 class="text-uppercase">
  126.                                     <a class="link" href="https://www.vsp-incoming.com/" target="VSP-incoming" >VSP-incoming</a>
  127.                                 </h2>
  128.                                 <p class="item-intro text-muted">Réservez votre hôtel.</p>
  129.                                 <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/vsp2.png" alt="..." />
  130.                                 <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 à :
  131.                                     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>
  132.                                 <ul class="list-inline">
  133.                                     <li>
  134.                                         <strong>Client:</strong>
  135.                                         VSP
  136.                                     </li>
  137.                                 </ul>
  138.                                <a href="https://www.vsp-incoming.com/" class="btn btn-primary btn-xl text-uppercase CTABouttton">
  139.                                     <i class="fas fa-arrow-right me-1"></i> 
  140.                                     Voir plus
  141.                                 </a>
  142.                                 <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
  143.                                     <i class="fas fa-xmark me-1"></i>
  144.                                     Fermer
  145.                                 </button>
  146.                             </div>
  147.                         </div>
  148.                     </div>
  149.                 </div>
  150.             </div>
  151.         </div>
  152.     </div>
  154.     <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
  155.         <div class="modal-dialog">
  156.             <div class="modal-content">
  157.                 <div class="close-modal" data-bs-dismiss="modal">
  158.                     <img class="lazy" data-original="assets/img/close-icon.svg" alt="Close modal" />
  159.                 </div>
  160.                 <div class="container">
  161.                     <div class="row justify-content-center">
  162.                         <div class="col-lg-8">
  163.                             <div class="modal-body">
  164.                                 <!-- Project details-->
  165.                                 <h2 class="text-uppercase"><a class="link"  href="https://lekatorzehotel.com/fr"  target="le katorze hotel"  >le katorze Hôtel</a></h2>
  166.                                 <p class="item-intro text-muted">Un Boutique Hôtel Audacieux</p>
  167.                                 <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/lekatorze2.png" alt="..." />
  168.                                 <p>Ce site web épuré met en avant la modernité et l'accessibilité avec un design "tout à l'écran". Dès la première visite, les clients du Katorze Hôtel trouvent toutes les informations essentielles pour réserver une chambre. Un bouton de réservation fixe, placé à droite de l’écran, accompagne les visiteurs tout au long de leur navigation, facilitant ainsi l'accès au service de réservation en continu.</p>
  169.                                 <ul class="list-inline">
  170.                                     <li>
  171.                                         <strong>Client:</strong>
  172.                                         Le Katorze Hôtel
  173.                                     </li>
  174.                                 </ul>
  175.                                 <a href="https://lekatorzehotel.com/fr" class="btn btn-primary btn-xl text-uppercase CTABouttton">
  176.                                     <i class="fas fa-arrow-right me-1"></i> 
  177.                                     Voir plus
  178.                                 </a>
  179.                                 <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
  180.                                     <i class="fas fa-xmark me-1"></i>
  181.                                     Fermer
  182.                                 </button>
  183.                             </div>
  184.                         </div>
  185.                     </div>
  186.                 </div>
  187.             </div>
  188.         </div>
  189.     </div>
  191.     <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
  192.         <div class="modal-dialog">
  193.             <div class="modal-content">
  194.                 <div class="close-modal" data-bs-dismiss="modal">
  195.                     <img class="lazy" data-original="assets/img/close-icon.svg" alt="Close modal" />
  196.                 </div>
  197.                 <div class="container">
  198.                     <div class="row justify-content-center">
  199.                         <div class="col-lg-8">
  200.                             <div class="modal-body">
  201.                                 <!-- Project details-->
  202.                                 <h2 class="text-uppercase"><a class="link"  href="https://www.hotel-eden-opera.com/" target="Hôtel eden opéra paris"  >Hôtel eden opéra paris</a></h2>
  203.                                 <p class="item-intro text-muted">Style typiquement Parisien.</p>
  204.                                     <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/eden3.png" alt="..." />
  205.                                 <p>Le site web de l’Hôtel Eden Opéra incarne simplicité et élégance. Un lien de réservation fixe à droite du menu assure un accès constant au service de réservation. La section "Infos Pratiques" offre une navigation thématique pour aider les clients à choisir parmi une variété de "Tickets & Activités", enrichissant leur expérience. Les améliorations apportées à la vitesse de chargement des pages ont considérablement optimisé la fluidité et l'intuitivité de l'expérience utilisateur. </p>
  206.                                 <ul class="list-inline">
  207.                                     <li>
  208.                                         <strong>Client:</strong>
  209.                                         Hôtel Eden Opéra Paris
  210.                                     </li>
  211.                                 </ul>
  212.                                 <a href="https://www.hotel-eden-opera.com/" class="btn btn-primary btn-xl text-uppercase CTABouttton">
  213.                                     <i class="fas fa-arrow-right me-1"></i> 
  214.                                     Voir plus
  215.                                 </a>
  216.                                 <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
  217.                                     <i class="fas fa-xmark me-1"></i>
  218.                                     Fermer
  219.                                 </button>
  220.                             </div>
  221.                         </div>
  222.                     </div>
  223.                 </div>
  224.             </div>
  225.         </div>
  226.     </div>
  228.     <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
  229.         <div class="modal-dialog">
  230.             <div class="modal-content">
  231.                 <div class="close-modal" data-bs-dismiss="modal">
  232.                     <img class="lazy" data-original="assets/img/close-icon.svg" alt="Close modal" />
  233.                 </div>
  234.                 <div class="container">
  235.                     <div class="row justify-content-center">
  236.                         <div class="col-lg-8">
  237.                             <div class="modal-body">
  238.                                 <!-- Project details-->
  239.                                 <h2 class="text-uppercase"><a class="link"  href="https://ms-financement.fr/fr" target="ms Financement">ms Financement</a></h2>
  240.                                 <p class="item-intro text-muted">Des experts pour le Financement.</p>
  241.                                 <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/msfNew.png" alt="..." />
  242.                                 <p>"Notre expertise du secteur bancaire et financier vous offre gain de temps et solutions de financement optimales." Avec cette ambition, nous avons conçu le site de MS Financement. Notre approche rédactionnelle va au-delà de la simple présentation ; nous y infusons émotion et passion pour engager et connecter avec ceux partageant nos intérêts.</p>
  243.                                 <ul class="list-inline">
  244.                                     <li>
  245.                                         <strong>Client:</strong>
  246.                                         MS Financement
  247.                                     </li>
  248.                                 </ul>
  249.                                 <a href="https://ms-financement.fr/fr" class="btn btn-primary btn-xl text-uppercase CTABouttton">
  250.                                     <i class="fas fa-arrow-right me-1"></i> 
  251.                                     Voir plus
  252.                                 </a>
  253.                                 <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
  254.                                     <i class="fas fa-xmark me-1"></i>
  255.                                     Fermer
  256.                                 </button>
  257.                             </div>
  258.                         </div>
  259.                     </div>
  260.                 </div>
  261.             </div>
  262.         </div>
  263.     </div>
  265.     <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
  266.         <div class="modal-dialog">
  267.             <div class="modal-content">
  268.                 <div class="close-modal" data-bs-dismiss="modal">
  269.                     <img class="lazy" data-original="assets/img/close-icon.svg" alt="Close modal" />
  270.                 </div>
  271.                 <div class="container">
  272.                     <div class="row justify-content-center">
  273.                         <div class="col-lg-8">
  274.                             <div class="modal-body">
  275.                                 <!-- Project details-->
  276.                                 <h2 class="text-uppercase"><a class="link"  href="https://www.vsp-booking.com/" target="vsp booking" >vsp booking</a></h2>
  277.                                 <p class="item-intro text-muted">Voyage Service Plus</p>
  278.                                 <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/booking2.png" alt="..." />
  279.                                 <p>Ce site bénéficie d’un référencement optimisé, supporté par des traductions en anglais, russe, espagnol, portugais, et chinois, augmentant ainsi sa visibilité lors de recherches dans ces langues. Cette stratégie offre au client un avantage concurrentiel significatif dans son secteur.</p>
  280.                                 <ul class="list-inline">
  281.                                     <li>
  282.                                         <strong>Client:</strong>
  283.                                         VSP
  284.                                     </li>                                    
  285.                                 </ul>
  286.                                 <a href="https://www.vsp-booking.com/" class="btn btn-primary btn-xl text-uppercase CTABouttton">
  287.                                     <i class="fas fa-arrow-right me-1"></i> 
  288.                                     Voir plus
  289.                                 </a>
  290.                                 <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
  291.                                     <i class="fas fa-xmark me-1"></i>
  292.                                     Fermer
  293.                                 </button>
  294.                             </div>
  295.                         </div>
  296.                     </div>
  297.                 </div>
  298.             </div>
  299.         </div>
  300.     </div>
  301.     <div class="portfolio-modal modal fade" id="portfolioModal7" tabindex="-1" role="dialog" aria-hidden="true">
  302.         <div class="modal-dialog">
  303.             <div class="modal-content">
  304.                 <div class="close-modal" data-bs-dismiss="modal">
  305.                     <img src="assets/img/close-icon.svg" alt="Close modal" />
  306.                 </div>
  307.                 <div class="container">
  308.                     <div class="row justify-content-center">
  309.                         <div class="col-lg-8">
  310.                             <div class="modal-body">
  311.                                 <!-- Project details-->
  312.                                 <h2 class="text-uppercase"><a class="link"  href="https://mavalotest2.nextwebplus.fr/" target="vsp booking" >MaValo</a></h2>
  313.                                 <p class="item-intro text-muted">La valeur de votre affaire</p>
  314.                                 <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/mavalo1.png" alt="..." />
  315.                                 <p>Ce site internet est conçu pour valoriser les entreprises à partir d’informations commerciales fournies par les utilisateurs. S'appuyant sur des critères de valorisation établis par Michel Simond et des barèmes d’expert-comptable, cette valorisation instantanée vise à générer des leads qualifiés et ciblés, offrant ainsi un service enrichi aux consultants.</p>
  316.                                 <ul class="list-inline">
  317.                                     <li>
  318.                                         <strong>Client:</strong>
  319.                                         Michel Simond
  320.                                     </li>
  321.                                 </ul>
  322.                                  <a href="https://mavalotest2.nextwebplus.fr/" class="btn btn-primary btn-xl text-uppercase CTABouttton">
  323.                                     <i class="fas fa-arrow-right me-1"></i> 
  324.                                     Voir plus
  325.                                 </a>
  326.                                 <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
  327.                                     <i class="fas fa-xmark me-1"></i>
  328.                                     Fermer
  329.                                 </button>
  330.                             </div>
  331.                         </div>
  332.                     </div>
  333.                 </div>
  334.             </div>
  335.         </div>
  336.     </div>
  337. {% endblock body %}