templates/pages/search/result.html.twig line 1

Open in your IDE?
  1. {% extends 'pages/base.html.twig' %}
  2. {% block stylesheets %}
  3.     <!-- CUSTOM CSS -->
  4.     <link href="{{ asset('dev/css/tailwind.min.css')}}" rel="stylesheet" />
  5.     <link href="{{ asset('dev/css/pages/home.css')}}" rel="stylesheet" />
  6.     <link href="{{ asset('dev/css/header1.css')}}" rel="stylesheet">
  7.     <link href="{{ asset('dev/css/forms.css')}}" rel="stylesheet">
  8.     <link href="{{ asset('dev/css/pages/search-listing.css')}}" rel="stylesheet">
  9. {% endblock %}
  10. {% block title %}{{"Resultat de recherche"|trans }}{% endblock %} 
  11. {% block content %}
  12.     <main>
  13.         <section id="hero" class="background-image">
  14.             <div class="opacity-mask">
  15.                 <div class="intro_title m-auto bg-hero-sc">
  16.                     <h3 class="animated fadeInDown">Resultat de recherche</h3>
  17.                     <p class="animated fadeInDown">Lorem ipsum dolor sit amet  iste quod mollitia Illum, labore quis!</p>
  18.                 </div>
  19.             </div>
  20.         </section>
  21.         <div id="position">
  22.             <div class="container">
  23.                 <ul>
  24.                     <li><a href="#">Home</a>
  25.                     </li>
  26.                     <li><a href="#">Seach</a>
  27.                     </li>
  28.                 </ul>
  29.             </div>
  30.         </div>
  31.         <!-- Position -->
  32.         <div class="collapse" id="collapseMap">
  33.             <div id="map" class="map"></div>
  34.         </div>
  35.         <!-- End Map -->
  36.         <div class="container margin_60 background-image background-image">
  37.             <div class="row">
  38.                 <aside class="col-lg-3 col-md-4 hidden sm:block relative side-menu" >
  39.                     <div id="filters_col" >
  40.                         <form class="max-w-md mx-auto mt-3">   
  41.                             <div class="form-floating mb-3 recherche ">
  42.                                 <i load-hicon="lens"></i>
  43.                                 <input type="text"  name="recherche" class="block sm:text-sm form-control p-2.5 rounded-lg w-full " id="floatingInput" placeholder="coachs, destinations..." >
  44.                                 <label class="mb-2 ps-4 text-sm font-medium text-gray-900 dark:text-white" for="floatingInput">Recherche</label>
  45.                             </div>
  46.                         </form>
  47.                         <a data-bs-toggle="collapse" class="font-bold text-lg mt-4 pb-2 d-flex" style="color: #ff7f00; border-bottom: 1px solid #d1d5db;" href="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters"
  48.                            id="filters_col_bt"><i load-hicon="settings" class="me-2"></i>Filtrer par</a>
  49.                         <div class="collapse show" id="collapseFilters">
  50.                             <div class="filter_type mt-3 px-2">
  51.                                 <h5 class="text-sm xl:text-base font-semibold mb-2">Prix</h5>
  52.                                 <div>
  53.                                     <div class="range_container">
  54.                                         <div class="sliders_control">
  55.                                             <input id="fromSlider" type="range" value="10" min="0" max="100" />
  56.                                             <input id="toSlider" type="range" value="40" min="0" max="100" />
  57.                                         </div>
  58.                                         <div class="form_control">
  59.                                             <div class="form_control_container d-flex align-items-center">
  60.                                                 <span class="form_control_container__time ">$ </span>
  61.                                                 <input class="form_control_container__time__input " type="number" id="fromInput" value="10"
  62.                                                        min="0" max="100" />
  63.                                             </div>
  64.                                             <div class="form_control_container d-flex align-items-center">
  65.                                                 <span class="form_control_container__time ">$ </span>
  66.                                                 <input class="form_control_container__time__input " type="number" id="toInput" value="40"
  67.                                                        min="0" max="100" style="width: 30px;"/>
  68.                                             </div>
  69.                                         </div>
  70.                                     </div>
  71.                                 </div>
  72.                             </div>
  73.                         </div>
  74.                         <div class="filter_type mt-3 px-2">
  75.                             <div class="d-flex justify-content-between accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#date-filter" href="#collapseOne_Date-filter">
  76.                                 <h5 class="text-sm xl:text-sm xl:text-base font-semibold mb-2">Choisir une date</h5>
  77.                                 <i  load-hicon="chevron-right"></i>
  78.                             </div>
  79.                             <div  id="collapseOne_Date-filter" class="collapse " data-bs-parent="#date-filter">
  80.                                 <div class="form-floating mb-3 " id="date-reservation">
  81.                                     <input type="text"  name="reservation" datepicker datepicker-autohide datepicker-orientation="bottom " class="block sm:text-sm form-control p-2.5 rounded-lg w-full" id="floatingInput" placeholder="date">
  82.                                     <label class="mb-2 ps-4 text-sm font-medium text-gray-900 dark:text-white" for="floatingInput">Date de reservation
  83.                                     </label>
  84.                                 </div>
  85.                             </div>    
  86.                         </div>
  87.                         <div class="filter_type mt-3 px-2">
  88.                             <div class="d-flex justify-content-between accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#categories-pop" href="#collapseOne_Categories_pop">
  89.                                 <h5 class="text-sm xl:text-base font-semibold mb-2">Les catégories populaires</h5>
  90.                                 <i  load-hicon="chevron-right"></i>
  91.                             </div>
  92.                             <div  id="collapseOne_Categories_pop" class="collapse " data-bs-parent="#categories-pop">
  93.                                 <div class="filter-cat">
  94.                                     <div class="card-header px-0 py-2">
  95.                                         <h4>
  96.                                             <a class="accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#payment"
  97.                                                href="#collapseOne_payment">Luxury Retreats<i load-hicon="chevron-right"></i></a>
  98.                                         </h4>
  99.                                     </div>
  100.                                     <div id="collapseOne_payment" class="collapse " data-bs-parent="#payment">
  101.                                         <li>
  102.                                             <h4>
  103.                                                 <a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
  104.                                                    data-bs-parent="#under-1" href="#under1">Personnel<i load-hicon="chevron-right"></i></a>
  105.                                             </h4>
  106.                                             <div id="under1" class="collapse ps-4 " data-bs-parent="#under-1">
  107.                                                 <a>
  108.                                                     <h5 class="mb-2">under 1</h5>
  109.                                                 </a>
  110.                                                 <a>
  111.                                                     <h5 class="mb-2">under 2</h5>
  112.                                                 </a>
  113.                                                 <a>
  114.                                                     <h5 class="mb-2">under 3</h5>
  115.                                                 </a>
  116.                                             </div>
  117.                                         </li>
  118.                                         <li>
  119.                                             <h4>
  120.                                                 <a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
  121.                                                    data-bs-parent="#under-2" href="#under2">Professional<i load-hicon="chevron-right"></i></a>
  122.                                             </h4>
  123.                                             <div id="under2" class="collapse ps-4 " data-bs-parent="#under-2">
  124.                                                 <a>
  125.                                                     <h5 class="mb-2">under 1</h5>
  126.                                                 </a>
  127.                                                 <a>
  128.                                                     <h5 class="mb-2">under 1</h5>
  129.                                                 </a>
  130.                                                 <a>
  131.                                                     <h5 class="mb-2">under 1</h5>
  132.                                                 </a>
  133.                                             </div>
  134.                                         </li>
  135.                                         <li>
  136.                                             <h4>
  137.                                                 <a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
  138.                                                    data-bs-parent="#under-3" href="#under3">Personnel<i load-hicon="chevron-right"></i></a>
  139.                                             </h4>
  140.                                             <div id="under3" class="collapse ps-4 " data-bs-parent="#under-3">
  141.                                                 <a>
  142.                                                     <h5 class="mb-2">under 1</h5>
  143.                                                 </a>
  144.                                                 <a>
  145.                                                     <h5 class="mb-2">under 1</h5>
  146.                                                 </a>
  147.                                                 <a>
  148.                                                     <h5 class="mb-2">under 1</h5>
  149.                                                 </a>
  150.                                             </div>
  151.                                         </li>
  152.                                     </div>
  153.                                     <div class="card-header px-0 py-2">
  154.                                         <h4>
  155.                                             <a class="accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#cat1"
  156.                                                href="#collapseOne_Cat1">Personnel<i load-hicon="chevron-right"></i></a>
  157.                                         </h4>
  158.                                     </div>
  159.                                     <div id="collapseOne_Cat1" class="collapse " data-bs-parent="#cat1">
  160.                                         <li>
  161.                                             <h4>
  162.                                                 <a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
  163.                                                    data-bs-parent="#under-11" href="#under11">Personnel<i load-hicon="chevron-right"></i></a>
  164.                                             </h4>
  165.                                             <div id="under11" class="collapse ps-4 " data-bs-parent="#under-11">
  166.                                                 <a>
  167.                                                     <h5 class="mb-2">under 1</h5>
  168.                                                 </a>
  169.                                                 <a>
  170.                                                     <h5 class="mb-2">under 1</h5>
  171.                                                 </a>
  172.                                                 <a>
  173.                                                     <h5 class="mb-2">under 1</h5>
  174.                                                 </a>
  175.                                             </div>
  176.                                         </li>
  177.                                         <li>
  178.                                             <h4>
  179.                                                 <a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
  180.                                                    data-bs-parent="#under-22" href="#under22">Professional<i load-hicon="chevron-right"></i></a>
  181.                                             </h4>
  182.                                             <div id="under22" class="collapse ps-4 " data-bs-parent="#under-22">
  183.                                                 <a>
  184.                                                     <h5 class="mb-2">under 1</h5>
  185.                                                 </a>
  186.                                                 <a>
  187.                                                     <h5 class="mb-2">under 1</h5>
  188.                                                 </a>
  189.                                                 <a>
  190.                                                     <h5 class="mb-2">under 1</h5>
  191.                                                 </a>
  192.                                             </div>
  193.                                         </li>
  194.                                         <li>
  195.                                             <h4>
  196.                                                 <a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
  197.                                                    data-bs-parent="#under-33" href="#under33">Personnel<i load-hicon="chevron-right"></i></a>
  198.                                             </h4>
  199.                                             <div id="under33" class="collapse ps-4 " data-bs-parent="#under-33">
  200.                                                 <a>
  201.                                                     <h5 class="mb-2">under 1</h5>
  202.                                                 </a>
  203.                                                 <a>
  204.                                                     <h5 class="mb-2">under 1</h5>
  205.                                                 </a>
  206.                                                 <a>
  207.                                                     <h5 class="mb-2">under 1</h5>
  208.                                                 </a>
  209.                                             </div>
  210.                                         </li>
  211.                                     </div>
  212.                                     <div class="card-header px-0 py-2">
  213.                                         <h4>
  214.                                             <a class="accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#cat3"
  215.                                                href="#collapseOne_Cat3">Yoga Retreats<i load-hicon="chevron-right"></i></a>
  216.                                         </h4>
  217.                                     </div>
  218.                                     <div id="collapseOne_Cat3" class="collapse " data-bs-parent="#cat3">
  219.                                         <li>
  220.                                             <h4>
  221.                                                 <a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
  222.                                                    data-bs-parent="#under-111" href="#under111">Personnel<i load-hicon="chevron-right"></i></a>
  223.                                             </h4>
  224.                                             <div id="under111" class="collapse ps-4 " data-bs-parent="#under-111">
  225.                                                 <a>
  226.                                                     <h5 class="mb-2">under 1</h5>
  227.                                                 </a>
  228.                                                 <a>
  229.                                                     <h5 class="mb-2">under 1</h5>
  230.                                                 </a>
  231.                                                 <a>
  232.                                                     <h5 class="mb-2">under 1</h5>
  233.                                                 </a>
  234.                                             </div>
  235.                                         </li>
  236.                                         <li>
  237.                                             <h4>
  238.                                                 <a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
  239.                                                    data-bs-parent="#under-222" href="#under222">Professional<i load-hicon="chevron-right"></i></a>
  240.                                             </h4>
  241.                                             <div id="under222" class="collapse ps-4 " data-bs-parent="#under-222">
  242.                                                 <a>
  243.                                                     <h5 class="mb-2">under 1</h5>
  244.                                                 </a>
  245.                                                 <a>
  246.                                                     <h5 class="mb-2">under 1</h5>
  247.                                                 </a>
  248.                                                 <a>
  249.                                                     <h5 class="mb-2">under 1</h5>
  250.                                                 </a>
  251.                                             </div>
  252.                                         </li>
  253.                                         <li>
  254.                                             <h4>
  255.                                                 <a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
  256.                                                    data-bs-parent="#under-333" href="#under333">Personnel<i load-hicon="chevron-right"></i></a>
  257.                                             </h4>
  258.                                             <div id="under333" class="collapse ps-4 " data-bs-parent="#under-333">
  259.                                                 <a>
  260.                                                     <h5 class="mb-2">under 1</h5>
  261.                                                 </a>
  262.                                                 <a>
  263.                                                     <h5 class="mb-2">under 1</h5>
  264.                                                 </a>
  265.                                                 <a>
  266.                                                     <h5 class="mb-2">under 1</h5>
  267.                                                 </a>
  268.                                             </div>
  269.                                         </li>
  270.                                     </div>
  271.                                 </div>
  272.                             </div>
  273.                         </div>
  274.                         <div class="filter_type mt-3 px-2">
  275.                             <div  class=" d-flex justify-content-between accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#destination"
  276.                                   href="#collapseOne_destination">
  277.                                 <h5 class="text-sm xl:text-base font-semibold mb-2">Les Destinations populaires</h5>
  278.                                 <i  load-hicon="chevron-right"></i>
  279.                             </div>
  280.                             <div id="collapseOne_destination" class="collapse " data-bs-parent="#destination"  >
  281.                                 <ul class="mb-0 text-capitalize initiale-list" style="
  282.                                     overflow-y: scroll;
  283.                                     scrollbar-width: none;
  284.                                     height: 136px;">
  285.                                     <li>
  286.                                         <label class="container_check">
  287.                                             <div class="d-flex justify-content-between"><span>Paris</span><span class="nbr-tag">14</span>
  288.                                             </div>
  289.                                             <input type="checkbox">
  290.                                             <span class="checkmark"></span>
  291.                                         </label>
  292.                                     </li>
  293.                                     <li>
  294.                                         <label class="container_check">
  295.                                             <div class="d-flex justify-content-between"><span>Marrakech</span><span class="nbr-tag">12</span></div>
  296.                                             <input type="checkbox">
  297.                                             <span class="checkmark"></span>
  298.                                         </label>
  299.                                     </li>
  300.                                     <li>
  301.                                         <label class="container_check">
  302.                                             <div class="d-flex justify-content-between"><span>Marbelia</span><span
  303.                                                     class="nbr-tag">16</span></div>
  304.                                             <input type="checkbox">
  305.                                             <span class="checkmark"></span>
  306.                                         </label>
  307.                                     </li>
  308.                                     <li>
  309.                                         <label class="container_check">
  310.                                             <div class="d-flex justify-content-between"><span>Essaouira</span> <span
  311.                                                     class="nbr-tag">8</span></div>
  312.                                             <input type="checkbox">
  313.                                             <span class="checkmark"></span>
  314.                                         </label>
  315.                                     </li>
  316.                                     <li>
  317.                                         <label class="container_check">
  318.                                             <div class="d-flex justify-content-between"><span>Dubai</span><span
  319.                                                     class="nbr-tag">16</span></div>
  320.                                             <input type="checkbox">
  321.                                             <span class="checkmark"></span>
  322.                                         </label>
  323.                                     </li>
  324.                                     <li>
  325.                                         <label class="container_check">
  326.                                             <div class="d-flex justify-content-between"><span>Tangier</span> <span
  327.                                                     class="nbr-tag">8</span></div>
  328.                                             <input type="checkbox">
  329.                                             <span class="checkmark"></span>
  330.                                         </label>
  331.                                     </li>
  332.                                     <li>
  333.                                         <label class="container_check">
  334.                                             <div class="d-flex justify-content-between"><span>Seville</span><span
  335.                                                     class="nbr-tag">16</span></div>
  336.                                             <input type="checkbox">
  337.                                             <span class="checkmark"></span>
  338.                                         </label>
  339.                                     </li>
  340.                                     <li>
  341.                                         <label class="container_check">
  342.                                             <div class="d-flex justify-content-between"><span>London</span> <span
  343.                                                     class="nbr-tag">8</span></div>
  344.                                             <input type="checkbox">
  345.                                             <span class="checkmark"></span>
  346.                                         </label>
  347.                                     </li>
  348.                                     <li>
  349.                                         <label class="container_check">
  350.                                             <div class="d-flex justify-content-between"><span>Lyon</span><span
  351.                                                     class="nbr-tag">11</span></div>
  352.                                             <input type="checkbox">
  353.                                             <span class="checkmark"></span>
  354.                                         </label>
  355.                                     </li>
  356.                                     <li>
  357.                                         <label class="container_check">
  358.                                             <div class="d-flex justify-content-between"><span>Madrid</span><span class="nbr-tag">14</span>
  359.                                             </div>
  360.                                             <input type="checkbox">
  361.                                             <span class="checkmark"></span>
  362.                                         </label>
  363.                                     </li>
  364.                                     <li>
  365.                                         <label class="container_check">
  366.                                             <div class="d-flex justify-content-between"><span>Bali</span><span class="nbr-tag">12</span></div>
  367.                                             <input type="checkbox">
  368.                                             <span class="checkmark"></span>
  369.                                         </label>
  370.                                     </li>
  371.                                     <li>
  372.                                         <label class="container_check">
  373.                                             <div class="d-flex justify-content-between"><span>Essaouira</span><span
  374.                                                     class="nbr-tag">16</span></div>
  375.                                             <input type="checkbox">
  376.                                             <span class="checkmark"></span>
  377.                                         </label>
  378.                                     </li>
  379.                                     <li>
  380.                                         <label class="container_check">
  381.                                             <div class="d-flex justify-content-between"><span>Rome</span> <span
  382.                                                     class="nbr-tag">8</span></div>
  383.                                             <input type="checkbox">
  384.                                             <span class="checkmark"></span>
  385.                                         </label>
  386.                                     </li>
  387.                                     <li>
  388.                                         <label class="container_check">
  389.                                             <div class="d-flex justify-content-between"><span>Barcelona</span><span
  390.                                                     class="nbr-tag">11</span></div>
  391.                                             <input type="checkbox">
  392.                                             <span class="checkmark"></span>
  393.                                         </label>
  394.                                     </li>
  395.                                 </ul>
  396.                                 <div class="d-flex justify-content-center">
  397.                                     <button onclick="scrollDown()" class="d-flex justify-content-center scroll-btn"><i load-hicon="circle-chevron-down"></i></button>
  398.                                     <button onclick="scrollToTop()" class="d-flex justify-content-center scroll-btn"><i load-hicon="circle-chevron-up"></i></button>
  399.                                 </div>
  400.                             </div>
  401.                         </div>
  402.                         <div class="filter_type mt-3 px-2">
  403.                             <div class="d-flex justify-content-between accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#age" href="#collapseOne_age">
  404.                                 <h5 class="text-sm xl:text-base font-semibold mb-2">Les catégories d'âge</h5>
  405.                                 <i  load-hicon="chevron-right"></i>
  406.                             </div>
  407.                             <div id="collapseOne_age" class="collapse " data-bs-parent="#age">
  408.                                 <ul class="mb-0 text-capitalize">
  409.                                     <li>
  410.                                         <label class="container_check">
  411.                                             <div class="d-flex justify-content-between"><span>Enfants (0-12 ans)</span><span
  412.                                                     class="nbr-tag">14</span></div>
  413.                                             <input type="radio" name="radio1">
  414.                                             <span class="custom-radio"></span>
  415.                                         </label>
  416.                                     </li>
  417.                                     <li>
  418.                                         <label class="container_check">
  419.                                             <div class="d-flex justify-content-between"><span>Adolescents (13-19 ans)</span><span
  420.                                                     class="nbr-tag">21</span></div>
  421.                                             <input type="radio" name="radio1">
  422.                                             <span class="custom-radio"></span>
  423.                                         </label>
  424.                                     </li>
  425.                                     <li>
  426.                                         <label class="container_check">
  427.                                             <div class="d-flex justify-content-between"><span>Adultes (20-59 ans)</span><span
  428.                                                     class="nbr-tag">19</span></div>
  429.                                             <input type="radio" name="radio1">
  430.                                             <span class="custom-radio"></span>
  431.                                         </label>
  432.                                     </li>
  433.                                     <li>
  434.                                         <label class="container_check">
  435.                                             <div class="d-flex justify-content-between"><span>Personnes âgées (60+ ans)</span><span
  436.                                                     class="nbr-tag">15</span></div>
  437.                                             <input type="radio" name="radio1">
  438.                                             <span class="custom-radio"></span>
  439.                                         </label>
  440.                                     </li>
  441.                                 </ul>
  442.                             </div>
  443.                         </div>
  444.                         <div class="filter_type mt-3 px-2">
  445.                             <div class="d-flex justify-content-between accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#langue" href="#collapseOne_langue">
  446.                                 <h5 class="text-sm xl:text-base font-semibold mb-2">Langue d'instruction</h5>
  447.                                 <i  load-hicon="chevron-right"></i>
  448.                             </div>
  449.                             <div id="collapseOne_langue" class="collapse " data-bs-parent="#langue">
  450.                                 <ul class="mb-0 text-capitalize">
  451.                                     <li>
  452.                                         <label class="container_check">
  453.                                             <div class="d-flex justify-content-between"><span>Francais</span><span>12</span></div>
  454.                                             <input type="checkbox">
  455.                                             <span class="checkmark"></span>
  456.                                         </label>
  457.                                     </li>
  458.                                     <li>
  459.                                         <label class="container_check">
  460.                                             <div class="d-flex justify-content-between"><span>Anglais</span><span class="nbr-tag">14</span></div>
  461.                                             <input type="radio">
  462.                                             <span class="checkmark"></span>
  463.                                         </label>
  464.                                     </li>
  465.                                     <li>
  466.                                         <label class="container_check">
  467.                                             <div class="d-flex justify-content-between"><span>Espagnol</span><span class="nbr-tag">16</span></div>
  468.                                             <input type="radio">
  469.                                             <span class="checkmark"></span>
  470.                                         </label>
  471.                                     </li>
  472.                                 </ul>
  473.                             </div>
  474.                         </div>
  475.                         <div class="filter_type mt-3 px-2">
  476.                             <div class="d-flex justify-content-between accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#niveau" href="#collapseOne_niveau">
  477.                                 <h5 class="text-sm xl:text-base font-semibold mb-2">Niveau de compétence</h5>
  478.                                 <i  load-hicon="chevron-right"></i>
  479.                             </div>
  480.                             <div id="collapseOne_niveau" class="collapse " data-bs-parent="#niveau">
  481.                                 <ul class="mb-0 text-capitalize">
  482.                                     <li>
  483.                                         <label class="container_check">
  484.                                             <div class="d-flex justify-content-between"><span>Débutant</span><span class="nbr-tag">14</span></div>
  485.                                             <input type="checkbox">
  486.                                             <span class="checkmark"></span>
  487.                                         </label>
  488.                                     </li>
  489.                                     <li>
  490.                                         <label class="container_check">
  491.                                             <div class="d-flex justify-content-between"><span>Intermédiaire</span><span class="nbr-tag">17</span>
  492.                                             </div>
  493.                                             <input type="checkbox">
  494.                                             <span class="checkmark"></span>
  495.                                         </label>
  496.                                     </li>
  497.                                     <li>
  498.                                         <label class="container_check">
  499.                                             <div class="d-flex justify-content-between"><span>Avancé</span><span class="nbr-tag">11</span></div>
  500.                                             <input type="checkbox">
  501.                                             <span class="checkmark"></span>
  502.                                         </label>
  503.                                     </li>
  504.                                     <li>
  505.                                     </li>
  506.                                 </ul>
  507.                             </div>
  508.                         </div>
  509.                     </div>
  510.                     <div class="block xl:flex filters-btn py-2 justify-center items-center mb-3  ">
  511.                         <a class="btn1 my-2 mx-1 lg:mx-2 sm:mx-0 sm:mr-2 sm:mb-0 d-flex justify-content-center whitespace-nowrap block">Recherche</a>
  512.                         <a class="btn2 btn-anuller my-2 mx-2 sm:mx-0 d-flex justify-content-center whitespace-nowrap hidden sm:block" >Annuler</a>
  513.                         <a class="btn2 btn-anuller my-2 mx-2 sm:mx-0 d-flex justify-content-center whitespace-nowrap block sm:hidden" id="annuler">Annuler</a>
  514.                     </div>
  515.                     <!--End collapse -->
  516.                     <!--End filters col-->
  517.                     <div class="box_style_2 d-none d-sm-block">
  518.                         <i class="icon_set_1_icon-57"></i>
  519.                         <h4>Need <span>Help?</span></h4>
  520.                         <a href="tel://004542344599" class="phone">+45 423 445 99</a>
  521.                         <small>Monday to Friday 9.00am - 7.30pm</small>
  522.                     </div>
  523.                 </aside>
  524.                 <div class="col-lg-9 col-md-8">
  525.                     <div class="result-search d-flex justify-content-between align-items-center mb-3" >
  526.                         <p class="text-sm font-light">Affichage de 1 à 30 sur 62 résultats</p>
  527.                         <div class="hidden sm:flex w-70 z-30">
  528.                             <div class="relative w-full">
  529.                                 <button id="btn-sort" class="text-sm d-flex align-items-center p-2 rounded-xl w-full flex justify-between text-left dark:text-gray-200 bg-white dark:bg-gray-700 border border-solid border-gray-300 dark:border-gray-500 undefined">
  530.                                     <div>Recommended </div><span class="text-gray-300"><svg width="1.5rem" viewBox="0 0 20 20"
  531.                                                                                             fill="currentColor">
  532.                                         <path fill-rule="evenodd"
  533.                                               d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
  534.                                               clip-rule="evenodd"></path>
  535.                                         </svg></span>
  536.                                 </button>
  537.                                 <div  class="right-0 top-full undefined p-2 rounded-xl shadow-xl absolute mt-2 min-w-full z-50 overflow-hidden bg-white dark:bg-gray-700 dark:shadow-gray-900 opacity-100" id="filter-sort" style="display: none;">
  538.                                     <ul class="flex flex-col" >
  539.                                         <li class="p-2 py-3 text-sm rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 sort-choix">Recommandé</li>
  540.                                         <li class="p-2 py-3 text-sm rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 sort-choix">Prix, moins cher</li>
  541.                                         <li class="p-2 py-3 text-sm rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 sort-choix">Prix, plus cher</li>
  542.                                         <li class="p-2 py-3 text-sm rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 sort-choix">Plus élevé</li>
  543.                                         <li class="p-2 py-3 text-sm rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 sort-choix">Plus bas</li>
  544.                                         <li class="p-2 py-3 text-sm rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 sort-choix">Durée, plus longue</li>
  545.                                         <li class="p-2 py-3 text-sm rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 sort-choix">Durée, plus courte</li>
  546.                                     </ul>
  547.                                 </div>
  548.                             </div>
  549.                         </div>
  550.                         <div class="filter-mb block sm:hidden flex items-center">
  551.                             <i load-hicon="filter"></i>
  552.                             <p class="text-base font-light">Filter</p>
  553.                         </div>
  554.                     </div>
  555.                     <div class="tags-searchs d-flex mb-3 flex-wrap">
  556.                         <div class="desktopFilterChipContainer__2E0F me-2 my-2 sm:my-0">
  557.                             <button role="button" type="button"
  558.                                     class="filterChip__ffnz border border-solid border-gray-300 dark:border-gray-500">Développement
  559.                                 Professionnel
  560.                                 <i load-hicon="x"></i>
  561.                             </button>
  562.                         </div>
  563.                         <div class="desktopFilterChipContainer__2E0F me-2 my-2 sm:my-0">
  564.                             <button role="button" type="button"
  565.                                     class="filterChip__ffnz border border-solid border-gray-300 dark:border-gray-500">Relations et Communication
  566.                                 <i load-hicon="x"></i>
  567.                             </button>
  568.                         </div>
  569.                         <div class="desktopFilterChipContainer__2E0F me-2 my-2 sm:my-0">
  570.                             <button role="button" type="button"
  571.                                     class="filterChip__ffnz border border-solid border-gray-300 dark:border-gray-500">Parentalité et
  572.                                 Famille                                
  573.                                 <i load-hicon="x"></i>
  574.                             </button>
  575.                         </div>
  576.                     </div>
  577.                     <div class="row">
  578.                         <div class="col-lg-4 col-md-6 col-sm-6">
  579.                             <article class="visibility-tracking-container"></article>
  580.                             <div class="vertical-activity-card__content-wrapper"><a
  581.                                     class="vertical-activity-card__container gtm-trigger__card-interaction">
  582.                                     <div class="vertical-activity-card__top-wrapper">
  583.                                         <div class="vertical-activity-card__top">
  584.                                             <div class="vertical-activity-card__photo">
  585.                                                 <picture>
  586.                                                     <div class="location flex bg-white py-1 px-3" s>
  587.                                                         <i load-hicon="map-drop"></i>
  588.                                                         <span class="location text-black">Marrakech</span>
  589.                                                     </div>
  590.                                                     <source type="image/webp" fetchpriority="auto" class="relative">
  591.                                                     <div class="heart-icon">
  592.                                                         <i load-hicon="heart"></i>
  593.                                                     </div>
  594.                                                     <img src="{{ asset('dev/images/annie-spratt-upJFoyr7BBA-unsplash.jpg') }}"
  595.                                                          alt="NYC: Top of the Rock Observation Deck Ticket" class="" fetchpriority="auto">
  596.                                                 </picture>
  597.                                             </div>
  598.                                         </div>
  599.                                         <div class="vertical-activity-card__header sticky">
  600.                                             <div class="vertical-activity-card__activity-type-wrapper">
  601.                                                 <span
  602.                                                     class="c-classifier-badge vertical-activity-card__activity-type text-slate-300     font-light text-uppercase   "
  603.                                                     style="color: #2A2A2A;">Entry ticket</span>
  604.                                             </div>
  605.                                             <h3 class="vertical-activity-card__title  text-base font-semibold py-1">NYC: Top of the Rock
  606.                                                 Observation Deck Ticket</h3>
  607.                                             <div class="litle-text  text-sm font-light">
  608.                                                 <span>2 days </span><span><strong>•</strong> </span><span>Groupe privée</span>
  609.                                             </div>
  610.                                             <div class="review-ftr d-flex text-sm pt-1 text-xs">
  611.                                                 <div class="stars d-flex align-items-center "><i load-hicon="star"></i><i
  612.                                                         load-hicon="star"></i><i load-hicon="star"></i><i load-hicon="star"></i></div>
  613.                                                 <span class="mx-1 font-medium">4.5 </span>
  614.                                                 <span class="font-normal">(1732 reviews) </span>
  615.                                             </div>
  616.                                             <div class="price d-flex align-items-center pb-3 pt-2">
  617.                                                 <p class="text-lg font-semibold pe-2" style="color: #ff7f00;">From 200$</p>
  618.                                                 <span class="text-xs font-normal px-1"> par personne</span>
  619.                                             </div>
  620.                                         </div>
  621.                                     </div>
  622.                                 </a>
  623.                             </div>
  624.                         </div>
  625.                         <div class="col-lg-4 col-md-6 col-sm-6">
  626.                             <article class="visibility-tracking-container"></article>
  627.                             <div class="vertical-activity-card__content-wrapper"><a
  628.                                     class="vertical-activity-card__container gtm-trigger__card-interaction">
  629.                                     <div class="vertical-activity-card__top-wrapper">
  630.                                         <div class="vertical-activity-card__top">
  631.                                             <div class="vertical-activity-card__photo">
  632.                                                 <picture>
  633.                                                     <div class="location flex bg-white py-1 px-3" >
  634.                                                         <i load-hicon="map-drop"></i>
  635.                                                         <span class="location text-black">Marrakech</span>
  636.                                                     </div>                                                        <source type="image/webp" fetchpriority="auto" class="relative">
  637.                                                     <div class="heart-icon">
  638.                                                         <i load-hicon="heart"></i>
  639.                                                     </div>
  640.                                                     <div class="location flex">
  641.                                                         <i load-hicon="map-drop"></i>
  642.                                                         <span class="location text-black">Marrakech</span>
  643.                                                     </div>
  644.                                                     <img src="{{ asset('dev/images/annie-spratt-RCmr0Pe9Uxg-unsplash.jpg') }}"
  645.                                                          alt="NYC: Top of the Rock Observation Deck Ticket" class="" fetchpriority="auto">
  646.                                                 </picture>
  647.                                             </div>
  648.                                         </div>
  649.                                         <div class="vertical-activity-card__header sticky">
  650.                                             <div class="vertical-activity-card__activity-type-wrapper">
  651.                                                 <span
  652.                                                     class="c-classifier-badge vertical-activity-card__activity-type text-slate-300     font-light text-uppercase   "
  653.                                                     style="color: #2A2A2A;">Entry ticket</span>
  654.                                             </div>
  655.                                             <h3 class="vertical-activity-card__title  text-base font-semibold py-1">NYC: Top of the Rock
  656.                                                 Observation Deck Ticket</h3>
  657.                                             <div class="litle-text  text-sm font-light">
  658.                                                 <span>2 days </span><span><strong>•</strong> </span><span>Groupe privée</span>
  659.                                             </div>
  660.                                             <div class="review-ftr d-flex text-sm pt-1 text-xs">
  661.                                                 <div class="stars d-flex align-items-center "><i load-hicon="star"></i><i
  662.                                                         load-hicon="star"></i><i load-hicon="star"></i><i load-hicon="star"></i></div>
  663.                                                 <span class="mx-1 font-medium">4.5 </span>
  664.                                                 <span class="font-normal">(1732 reviews) </span>
  665.                                             </div>
  666.                                             <div class="price d-flex align-items-center pb-3 pt-2">
  667.                                                 <p class="text-lg font-semibold pe-2" style="color: #ff7f00;">From 200$</p>
  668.                                                 <span class="text-xs font-normal px-1"> par personne</span>
  669.                                             </div>
  670.                                         </div>
  671.                                     </div>
  672.                                 </a>
  673.                             </div>
  674.                         </div>
  675.                         <div class="col-lg-4 col-md-6 col-sm-6">
  676.                             <article class="visibility-tracking-container"></article>
  677.                             <div class="vertical-activity-card__content-wrapper"><a
  678.                                     class="vertical-activity-card__container gtm-trigger__card-interaction">
  679.                                     <div class="vertical-activity-card__top-wrapper">
  680.                                         <div class="vertical-activity-card__top">
  681.                                             <div class="vertical-activity-card__photo">
  682.                                                 <picture>
  683.                                                     <div class="location flex bg-white py-1 px-3" style="
  684.                                                          position: absolute;
  685.                                                          bottom: 0px;
  686.                                                          right: 0;
  687.                                                          border-radius: 20px 0px 0px 20px;
  688.                                                          ">
  689.                                                         <i load-hicon="map-drop"></i>
  690.                                                         <span class="location text-black">Marrakech</span>
  691.                                                     </div>
  692.                                                     <source type="image/webp" fetchpriority="auto" class="relative">
  693.                                                     <div class="heart-icon">
  694.                                                         <i load-hicon="heart"></i>
  695.                                                     </div>
  696.                                                     <img src="{{ asset('dev/images/ben-ostrower-OFHbBkE1f1I-unsplash.jpg') }}"
  697.                                                          alt="NYC: Top of the Rock Observation Deck Ticket" class="" fetchpriority="auto">
  698.                                                 </picture>
  699.                                             </div>
  700.                                         </div>
  701.                                         <div class="vertical-activity-card__header sticky">
  702.                                             <div class="vertical-activity-card__activity-type-wrapper">
  703.                                                 <span
  704.                                                     class="c-classifier-badge vertical-activity-card__activity-type text-slate-300     font-light text-uppercase   "
  705.                                                     style="color: #2A2A2A;">Entry ticket</span>
  706.                                             </div>
  707.                                             <h3 class="vertical-activity-card__title  text-base font-semibold py-1">NYC: Top of the Rock
  708.                                                 Observation Deck Ticket</h3>
  709.                                             <div class="litle-text  text-sm font-light">
  710.                                                 <span>2 days </span><span><strong>•</strong> </span><span>Groupe privée</span>
  711.                                             </div>
  712.                                             <div class="review-ftr d-flex text-sm pt-1 text-xs">
  713.                                                 <div class="stars d-flex align-items-center "><i load-hicon="star"></i><i
  714.                                                         load-hicon="star"></i><i load-hicon="star"></i><i load-hicon="star"></i></div>
  715.                                                 <span class="mx-1 font-medium">4.5 </span>
  716.                                                 <span class="font-normal">(1732 reviews) </span>
  717.                                             </div>
  718.                                             <div class="price d-flex align-items-center pb-3 pt-2">
  719.                                                 <p class="text-lg font-semibold pe-2" style="color: #ff7f00;">From 200$</p>
  720.                                                 <span class="text-xs font-normal px-1"> par personne</span>
  721.                                             </div>
  722.                                         </div>
  723.                                     </div>
  724.                                 </a>
  725.                             </div>
  726.                         </div>
  727.                         <div class="col-lg-4 col-md-6 col-sm-6">
  728.                             <article class="visibility-tracking-container"></article>
  729.                             <div class="vertical-activity-card__content-wrapper"><a
  730.                                     class="vertical-activity-card__container gtm-trigger__card-interaction">
  731.                                     <div class="vertical-activity-card__top-wrapper">
  732.                                         <div class="vertical-activity-card__top">
  733.                                             <div class="vertical-activity-card__photo">
  734.                                                 <picture>
  735.                                                     <div class="location flex bg-white py-1 px-3" style="
  736.                                                          position: absolute;
  737.                                                          bottom: 0px;
  738.                                                          right: 0;
  739.                                                          border-radius: 20px 0px 0px 20px;
  740.                                                          ">
  741.                                                         <i load-hicon="map-drop"></i>
  742.                                                         <span class="location text-black">Marrakech</span>
  743.                                                     </div>
  744.                                                     <source type="image/webp" fetchpriority="auto" class="relative">
  745.                                                     <div class="heart-icon">
  746.                                                         <i load-hicon="heart"></i>
  747.                                                     </div>
  748.                                                     <img src="{{ asset('dev/images//dimitrie-stanescu-Z3ziDZPl1D0-unsplash.jpg') }}"
  749.                                                          alt="NYC: Top of the Rock Observation Deck Ticket" class="" fetchpriority="auto">
  750.                                                 </picture>
  751.                                             </div>
  752.                                         </div>
  753.                                         <div class="vertical-activity-card__header sticky">
  754.                                             <div class="vertical-activity-card__activity-type-wrapper">
  755.                                                 <span
  756.                                                     class="c-classifier-badge vertical-activity-card__activity-type text-slate-300     font-light text-uppercase   "
  757.                                                     style="color: #2A2A2A;">Entry ticket</span>
  758.                                             </div>
  759.                                             <h3 class="vertical-activity-card__title  text-base font-semibold py-1">NYC: Top of the Rock
  760.                                                 Observation Deck Ticket</h3>
  761.                                             <div class="litle-text  text-sm font-light">
  762.                                                 <span>2 days </span><span><strong>•</strong> </span><span>Groupe privée</span>
  763.                                             </div>
  764.                                             <div class="review-ftr d-flex text-sm pt-1 text-xs">
  765.                                                 <div class="stars d-flex align-items-center "><i load-hicon="star"></i><i
  766.                                                         load-hicon="star"></i><i load-hicon="star"></i><i load-hicon="star"></i></div>
  767.                                                 <span class="mx-1 font-medium">4.5 </span>
  768.                                                 <span class="font-normal">(1732 reviews) </span>
  769.                                             </div>
  770.                                             <div class="price d-flex align-items-center pb-3 pt-2">
  771.                                                 <p class="text-lg font-semibold pe-2" style="color: #ff7f00;">From 200$</p>
  772.                                                 <span class="text-xs font-normal px-1"> par personne</span>
  773.                                             </div>
  774.                                         </div>
  775.                                     </div>
  776.                                 </a>
  777.                             </div>
  778.                         </div>
  779.                         <div class="col-lg-4 col-md-6 col-sm-6">
  780.                             <article class="visibility-tracking-container"></article>
  781.                             <div class="vertical-activity-card__content-wrapper"><a
  782.                                     class="vertical-activity-card__container gtm-trigger__card-interaction">
  783.                                     <div class="vertical-activity-card__top-wrapper">
  784.                                         <div class="vertical-activity-card__top">
  785.                                             <div class="vertical-activity-card__photo">
  786.                                                 <picture>
  787.                                                     <div class="location flex bg-white py-1 px-3" style="
  788.                                                          position: absolute;
  789.                                                          bottom: 0px;
  790.                                                          right: 0;
  791.                                                          border-radius: 20px 0px 0px 20px;
  792.                                                          ">
  793.                                                         <i load-hicon="map-drop"></i>
  794.                                                         <span class="location text-black">Marrakech</span>
  795.                                                     </div>
  796.                                                     <source type="image/webp" fetchpriority="auto" class="relative">
  797.                                                     <div class="heart-icon">
  798.                                                         <i load-hicon="heart"></i>
  799.                                                     </div>
  800.                                                     <img src="{{ asset('dev/images/kyriacos-georgiou-CMmgfHQiYsc-unsplash.jpg') }}"
  801.                                                          alt="NYC: Top of the Rock Observation Deck Ticket" class="" fetchpriority="auto">
  802.                                                 </picture>
  803.                                             </div>
  804.                                         </div>
  805.                                         <div class="vertical-activity-card__header sticky">
  806.                                             <div class="vertical-activity-card__activity-type-wrapper">
  807.                                                 <span
  808.                                                     class="c-classifier-badge vertical-activity-card__activity-type text-slate-300     font-light text-uppercase   "
  809.                                                     style="color: #2A2A2A;">Entry ticket</span>
  810.                                             </div>
  811.                                             <h3 class="vertical-activity-card__title  text-base font-semibold py-1">NYC: Top of the Rock
  812.                                                 Observation Deck Ticket</h3>
  813.                                             <div class="litle-text  text-sm font-light">
  814.                                                 <span>2 days </span><span><strong>•</strong> </span><span>Groupe privée</span>
  815.                                             </div>
  816.                                             <div class="review-ftr d-flex text-sm pt-1">
  817.                                                 <div class="stars d-flex align-items-center "><i load-hicon="star"></i><i
  818.                                                         load-hicon="star"></i><i load-hicon="star"></i><i load-hicon="star"></i></div>
  819.                                                 <span class="mx-1 font-medium">4.5 </span>
  820.                                                 <span class="font-normal">(1732 reviews) </span>
  821.                                             </div>
  822.                                             <div class="price d-flex align-items-center pb-3 pt-2">
  823.                                                 <p class="text-lg font-semibold pe-2" style="color: #ff7f00;">From 200$</p>
  824.                                                 <span class="text-xs font-normal px-1"> par personne</span>
  825.                                             </div>
  826.                                         </div>
  827.                                     </div>
  828.                                 </a>
  829.                             </div>
  830.                         </div>
  831.                         <div class="col-lg-4 col-md-6 col-sm-6">
  832.                             <article class="visibility-tracking-container"></article>
  833.                             <div class="vertical-activity-card__content-wrapper"><a
  834.                                     class="vertical-activity-card__container gtm-trigger__card-interaction">
  835.                                     <div class="vertical-activity-card__top-wrapper">
  836.                                         <div class="vertical-activity-card__top">
  837.                                             <div class="vertical-activity-card__photo">
  838.                                                 <picture>
  839.                                                     <source type="image/webp" fetchpriority="auto" class="relative">
  840.                                                     <div class="heart-icon">
  841.                                                         <i load-hicon="heart"></i>
  842.                                                     </div>
  843.                                                     <img src="{{ asset('dev/images/toa-heftiba-szzPU6ae1Bc-unsplash.jpg') }}"
  844.                                                          alt="NYC: Top of the Rock Observation Deck Ticket" class="" fetchpriority="auto">
  845.                                                 </picture>
  846.                                             </div>
  847.                                         </div>
  848.                                         <div class="vertical-activity-card__header sticky">
  849.                                             <div class="vertical-activity-card__activity-type-wrapper">
  850.                                                 <span
  851.                                                     class="c-classifier-badge vertical-activity-card__activity-type text-slate-300     font-light text-uppercase   "
  852.                                                     style="color: #2A2A2A;">Entry ticket</span>
  853.                                             </div>
  854.                                             <h3 class="vertical-activity-card__title  text-base font-semibold py-1">NYC: Top of the Rock
  855.                                                 Observation Deck Ticket</h3>
  856.                                             <div class="litle-text  text-sm font-light">
  857.                                                 <span>2 days </span><span><strong>•</strong> </span><span>Groupe privée</span>
  858.                                             </div>
  859.                                             <div class="review-ftr d-flex text-sm pt-1 text-xs">
  860.                                                 <div class="stars d-flex align-items-center "><i load-hicon="star"></i><i
  861.                                                         load-hicon="star"></i><i load-hicon="star"></i><i load-hicon="star"></i></div>
  862.                                                 <span class="mx-1 font-medium">4.5 </span>
  863.                                                 <span class="font-normal">(1732 reviews) </span>
  864.                                             </div>
  865.                                             <div class="price d-flex align-items-center pb-3 pt-2">
  866.                                                 <p class="text-lg font-semibold pe-2" style="color: #ff7f00;">From 200$</p>
  867.                                                 <span class="text-xs font-normal px-1"> par personne</span>
  868.                                             </div>
  869.                                         </div>
  870.                                     </div>
  871.                                 </a>
  872.                             </div>
  873.                         </div>
  874.                     </div>
  875.                     <div class="paggination d-flex justify-content-center">
  876.                         <a class="btn-round-acive d-flex align-items-center justify-content-center mx-2  text-lg font-medium rounded-circle" href="#" >1</a>    
  877.                         <a class="btn-round d-flex align-items-center justify-content-center mx-2  text-lg font-medium rounded-circle" href="#" >2</a>    
  878.                         <a class="btn-round d-flex align-items-center justify-content-center mx-2  text-lg font-medium rounded-circle" href="#" >3</a>    
  879.                     </div>
  880.                 </div>
  881.             </div>
  882.         </div>
  883.         <!-- End col lg-9 -->
  884.     </div>
  885.     <!-- End row -->
  886. </div>
  887. <!-- End container -->
  888. </main>
  889. <!-- End main -->
  890. {% endblock %}
  891. {% block javascripts %}
  892.     <script src="{{ asset('dev/js/home.js')}}" type="module"></script>
  893.     <script src="{{ asset('dev/js/search-listing.js')}}" type="module"></script>
  894.     <script src="{{ asset('dev/js/hicon.min.js')}}"></script>
  895.     <script> hicon.replace();</script>
  896.     <script src="{{ asset('dev/js/datepicker.min.js')}}"></script>      
  897. {% endblock %}