templates/croisiere/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     <link href="{{ asset('front/plugins/colorbox/colorbox.css') }}" rel="stylesheet" type="text/css">
  5.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_style.css') }}">
  6.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_responsive.css') }}">
  7.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/single_listing_style.css') }}">
  8.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/single_listing_responsive.css') }}">
  9.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/about_style.css') }}">
  10.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/about_responsive.css') }}">
  11.     {# <style>
  12.         .intro_price {
  13.             font-size: 20px;
  14.             font-weight: 600;
  15.             color: #FFFFFF;
  16.             margin-top: -4px;
  17.         }
  18.         .button a:hover {
  19.             background-color: #ff9100;
  20.             color: white;
  21.         }
  25.         .intro_item_background {
  26.             position: relative;
  27.             overflow: hidden;
  28.             margin: auto;
  29.             top: 0;
  30.             left: 0;
  31.             width: 100%;
  32.             height: 100%;
  33.             background-repeat: no-repeat;
  34.             background-size: cover;
  35.             background-position: center center;
  36.             z-index: 1;
  37.         }
  38.         .intro_item_background img {
  39.             max-width: 100%;
  40.             transition: all 0.3s;
  41.             display: block;
  42.             transform: scale(1);
  43.         }
  45.         .offer_name{
  46.             display: block;
  47.             font-size: 22px;
  48.             font-weight: 700;
  49.             background: #0093a9;
  50.             color: #FFFFFF;
  51.             width: 360px;
  52.             line-height: 35px;
  53.             padding-left: 12px;
  54.             height: 50px;
  55.         }
  56.         .intro_item_background:hover img {
  57.             transform: scale(1.1);
  58.         }
  59.         .container {
  60.             max-width: 1440px!important;
  61.         }
  63.         .main_nav_item a {
  64.             font-family: 'Open Sans', sans-serif;
  65.             font-size: 15px;
  66.             font-weight: 700;
  67.             color: #0093a9!important;
  68.             text-transform: uppercase;
  69.             padding-bottom: 10px;
  70.             padding-top: 10px;
  71.         }
  72.         .main_nav_item::after {
  73.             display: block;
  74.             position: absolute;
  75.             left: -1px;
  76.             bottom: -11px;
  77.             width: calc(100% + 2px);
  78.             height: 2px;
  79.             background: linear-gradient(to right, #b29b63, #0093a9)!important;
  80.             content: '';
  81.             opacity: 0;
  82.             -webkit-transition: all 200ms ease;
  83.             -moz-transition: all 200ms ease;
  84.             -ms-transition: all 200ms ease;
  85.             -o-transition: all 200ms ease;
  86.             transition: all 200ms ease;
  87.         }
  88.     </style> #}
  90.     <style>
  91.         .cta {
  92.             padding-top: 190px;
  93.             padding-bottom: 183px;
  94.             background: linear-gradient(to right, #b29b63, #0093a9);
  95.         }
  96.         .search_tab.active {
  97.             background: linear-gradient(to right, #b29b63, #0093a9);
  98.             color: #FFFFFF;
  99.         }
  100.         .search_tab:hover {
  101.             background: linear-gradient(to right, #0093a9, #b29b63);
  102.             color: #FFFFFF;
  103.         }
  104.         .content {
  105.             max-height: 3em; /* Limite initiale de hauteur en fonction du nombre de lignes */
  106.             overflow: hidden;
  107.         }
  109.         .expanded {
  110.             max-height: none; /* Agrandir la hauteur lorsque le paragraphe est étendu */
  111.         }
  113.         .read-more {
  114.             cursor: pointer;
  115.             color: blue;
  116.         }
  117.         .home_slider_background {
  118.             height: 170vh;
  119.             width: 100%;
  120.             background-size: cover;
  121.             background-position: center center;
  122.             background-repeat: no-repeat;
  123.         }
  124.         .offers_price {
  125.             display: inline-block;
  126.             font-size: 29px;
  127.             font-weight: 700;
  128.             color: #ff9100;
  129.             line-height: 25px;
  130.         }
  131.         .offers_price a{
  132.             display: inline-block;
  133.             font-size: 22px;
  134.             font-weight: 700;
  135.             color: #0093a9;
  136.             line-height: 25px;
  137.         }
  138.         .offer_name{
  139.             display: block;
  140.             font-size: 22px;
  141.             font-weight: 700;
  142.             background: #0093a9;
  143.             color: #FFFFFF;
  144.             width: 310px;
  145.             line-height: 35px;
  146.             padding-left: 12px;
  147.         }
  148.         .offers_item {
  149.             border-radius: 12px;
  150.             overflow: hidden;
  151.             position: relative;
  152.             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  153.             transition: all 300ms;
  154.         }
  156.         .offers_item:hover {
  157.             transform: translateY(-2px);
  158.             box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  159.         }
  161.         .offers_image_background {
  162.             position: relative;
  163.             margin: auto;
  164.             overflow: hidden;
  165.         }
  166.         .offers_image_background img {
  167.             max-width: 100%;
  168.             transition: all 0.3s;
  169.             display: block;
  170.             transform: scale(1);
  171.         }
  173.         .offers_image_background:hover img {
  174.             transform: scale(1.1);
  175.         }
  177.         .offers_content {
  178.             margin-top: 22px;
  179.             margin-left: 17px;
  180.             margin-bottom: 22px;
  181.             margin-right: 17px;
  182.         }
  184.         .offers_link {
  185.             margin-top: 24px;
  186.         }
  187.         .intro_price {
  188.             font-size: 20px;
  189.             font-weight: 600;
  190.             color: #FFFFFF;
  191.             margin-top: -4px;
  192.         }
  193.         .button a:hover {
  194.             background-color: #ff9100;
  195.             color: white;
  196.         }
  197.         .ctaBackground {
  198.             position: absolute;
  199.             top: 0;
  200.             left: 0;
  201.             width: 100%;
  202.             height: 210%;
  203.             background-repeat: no-repeat;
  204.             background-size: cover;
  205.             background-position: center center;
  206.             opacity: 0.27;
  207.         }
  208.         img {
  209.             max-width: 100%;
  210.             height: 100%;
  211.         }
  213.         .container {
  214.             max-width: 1440px!important;
  215.         }
  217.         .main_nav_item a {
  218.             font-family: 'Open Sans', sans-serif;
  219.             font-size: 15px;
  220.             font-weight: 700;
  221.             color: #0093a9!important;
  222.             text-transform: uppercase;
  223.             padding-bottom: 10px;
  224.             padding-top: 10px;
  225.         }
  226.         .main_nav_item::after {
  227.             display: block;
  228.             position: absolute;
  229.             left: -1px;
  230.             bottom: -11px;
  231.             width: calc(100% + 2px);
  232.             height: 2px;
  233.             background: linear-gradient(to right, #b29b63, #0093a9)!important;
  234.             content: '';
  235.             opacity: 0;
  236.             -webkit-transition: all 200ms ease;
  237.             -moz-transition: all 200ms ease;
  238.             -ms-transition: all 200ms ease;
  239.             -o-transition: all 200ms ease;
  240.             transition: all 200ms ease;
  241.         }
  243.         .section-title h2 {
  244.             text-align: center;
  245.             font-size: 18px;
  246.             font-weight: 600;
  247.             text-transform: uppercase;
  248.             padding-bottom: 6px;
  249.             color: #000;
  250.             letter-spacing: 0.3px;
  251.             padding: 0;
  252.         }
  253.         .section-title::after {
  254.             content: "";
  255.             height: 3px;
  256.             background: #fbb900;
  257.             width: 80px;
  258.             position: absolute;
  259.             left: 0;
  260.             right: 0;
  261.             margin: auto;
  262.         }
  263.         /****************/
  264.         /*     BX-SLIDER     */
  265.         /****************/
  266.         section.client {
  267.             padding:0em 0em;
  269.         }
  270.         section.client .section-title {
  271.             margin-bottom: 6em;
  272.         }
  273.         .bx-controls {
  274.             position: relative;
  275.         }
  276.         .bx-wrapper{
  277.             margin: auto;
  278.             margin-top: 70px;
  279.         }
  280.         .bx-wrapper .bx-pager {
  281.             text-align: center;
  282.             padding-top: 30px;
  283.             display: none;
  284.         }
  285.         .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  286.             display: inline-block;
  287.             *zoom: 1;
  288.             *display: inline;
  289.         }
  290.         .bx-wrapper .bx-pager.bx-default-pager a {
  291.             background: #666;
  292.             text-indent: -9999px;
  293.             display: block;
  294.             width: 10px;
  295.             height: 10px;
  296.             margin: 0 5px;
  297.             outline: 0;
  298.             -moz-border-radius: 5px;
  299.             -webkit-border-radius: 5px;
  300.             border-radius: 5px;
  301.         }
  303.     </style>
  305. {% endblock %}
  307. {% block body %}
  308.     <div class="intro" style="padding-top: 71px;">
  309.         <div class="container mt-4">
  310.             <div class="row intro_items" style="margin-top: 99px;">
  311.                 {% for c in croisiere %}
  312.                     <div class="col-lg-4 intro_col">
  313.                         <div class="intro_item" style="position: relative; width: 100%; height: 320px; margin-top: 40px ;box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);">
  314.                             <div class="intro_item_background" style="position: relative;">
  315.                                 {% for img in c.imagescroisieres %}
  316.                                     {% if loop.first %}
  317.                                         <a href="{{ path('details',{'croisiereId':c.id}) }}">
  318.                                             <img src="{{ asset('./rusticav/public/uploads/croisieres/'~img.name) }}" alt="" width="100%" height="100%" />
  319.                                             <div class="offer_name" style="position: absolute; top: 95%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; color: #fff;">
  320.                                                 {{ c.name }}
  321.                                             </div>
  322.                                         </a>
  323.                                     {% endif %}
  324.                                 {% endfor %}
  325.                             </div>
  326.                         </div>
  327.                     </div>
  328.                 {% endfor %}
  329.             </div>
  331.             <div class="d-flex justify-content-end" style="margin-top: 60px">
  332.                 {% do croisiere.setPageRange(1) %}
  333.                 {{ knp_pagination_render(croisiere, 'pagination.html.twig') }}
  334.             </div>
  335.         </div>
  336.     </div>
  337.     <!-- Intro -->
  338.     <div class="intro" >
  339.         <div class="intro" style="margin-top: -196px;">
  340.             <section class="client">
  341.                 <div class="container">
  342.                     <div class="row">
  343.                         <div class="col text-center">
  344.                             <h2 class="section_title" style="font-size: 33px;color: #0093a9">Nos Partenaires</h2>
  345.                         </div>
  346.                     </div>
  347.                     <div class="row">
  348.                         <div class="col text-center">
  349.                             <div class="carousel-client">
  350.                                 <div class="slide">
  351.                                     <img src="{{ asset('front/images/logo_starcroisieres.svg') }}" style="margin-top: 15px">
  352.                                 </div>
  353.                                 <div class="slide">
  354.                                     <img src="{{ asset('front/images/msc.webp') }}">
  355.                                 </div>
  356.                                 <div class="slide">
  357.                                     <img src="{{ asset('front/images/costa.webp') }}">
  358.                                 </div>
  359.                                 <div class="slide">
  360.                                     <img src="{{ asset('front/images/rccl.webp') }}">
  361.                                 </div>
  362.                                 <div class="slide">
  363.                                     <img src="{{ asset('front/images/ponant.webp') }}">
  364.                                 </div>
  365.                                 <div class="slide">
  366.                                     <img src="{{ asset('front/images/celestyal.webp') }}">
  367.                                 </div>
  368.                             </div>
  369.                         </div>
  370.                     </div>
  371.                 </div>
  372.             </section>
  375.             <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  376.             <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script>
  377.             <script src="{{ asset('front/plugins/OwlCarousel2-2.2.1/owl.carousel.js') }}"></script>
  378.             <script>
  379.                 $('.carousel-client').bxSlider({
  380.                     auto: true,
  381.                     slideWidth: 234,
  382.                     minSlides: 1,
  383.                     maxSlides: 6,
  384.                     controls: false
  385.                 });
  386.             </script>
  387.         </div>
  388.     </div>
  389. {% endblock %}