templates/front/landing.html.twig line 1

Open in your IDE?
  1. {% extends "layout.html.twig" %}
  2. {% block body_tag %}
  3.     data-products-url="{{ path('front_ajax_products') }}"
  4. {% endblock %}
  5. {% block body %}
  6.     <div class="position-absolute t-0 r-0 zi-2 d-none d-sm-block ">
  7.         <img src="{{ asset('assets/img/background-rbbe.png') }}"  alt="background.png"/>
  8.     </div>
  9.     <div class="mawi-1225 mx-auto position-relative zi-9 pax-35">
  10.         <div class="text-center may-15">
  12.             <img id="logo" data-aos="zoom-in" data-aos-duration="800"  src="{{ asset('assets/img/logo.png') }}" alt="logo relais beauté bien être" width='204px'/>
  13.         </div>
  14.         <div class="d-flex align-items-center position-relative ">
  15.             <div data-aos="fade-right" data-aos-delay="400" data-aos-duration="800" class="col px-0" >
  16.                 <hr class="my-0 bgc-F4CFDA w-100 o-100" />
  17.             </div>
  18.             <div data-aos="flip-right" data-aos-duration="800" data-aos-delay="300" class="col-auto pax-2">
  19.                 <div class="square bgc-white"></div>
  20.             </div>
  21.             <div data-aos="fade-left" data-aos-delay="400 " data-aos-duration="800" class="col px-0">
  22.                 <hr class="my-0 bgc-F4CFDA w-100  o-100" />
  23.             </div>
  24.         </div>
  25.         {#      <div class="c-black" data-aos="fade-right" data-aos-delay="400" data-aos-duration="800">
  26.                   <i class="far fa-chevron-left mar-5 position-relative t-0" aria-hidden="true"></i>
  27.                   <a class="c-black tdl-none" href="#">Retour</a>
  28.               </div>#}
  29.         <div  data-aos="flip-right" data-aos-delay="400" data-aos-duration="800" class="may-15 text-center" data-aos="fade-in" data-aos-delay="400" data-aos-duration="800">
  30.             <img width='92px' src="{{ asset('assets/img/palette.png') }}" alt="palette couleur rbbe"/>
  31.         </div>
  32.         <h2 data-aos="fade-up" data-aos-delay="500" data-aos-duration="800" class="c-D78DA3 text-center fw-700 fs-28">
  33.             La palette à couleurs
  34.         </h2>
  35.         <p data-aos="fade-up" data-aos-delay="500" data-aos-duration="800" class='mat-15 mab-40 fs-18 text-center c-black'>
  36.             Cliquez et découvrez l’ensemble de nos gammes de couleur !
  37.         </p>
  38.     </div>
  39.     <div class="position-relative">
  40.         <div class="linear-backgound">
  42.         </div>
  43.     </div>
  44.     <div class="bgc-F7F7F7  ">
  45.         <div class="mawi-1225 mx-auto pab-300 position-relative zi-99 pax-5 " data-aos="fade-up" data-aos-delay="700" data-aos-duration="800">
  46.             <div class="pax-15">
  47.                 <div class="filter-color" >
  48.                     <div class='d-flex position-relative pab-130 justify-content-between'>
  49.                         {% for key, colorCategory in colorCategories %}
  50.                             <div class='col px-0 position-relative'>
  51.                                 <div class="colorCategory pointer text-center" data-id="{{ colorCategory.id }}">
  52.                                     <i class=" fas fa-check fa-check-active position-absolute c-white t-3 b-0 align-items-center r-0 l-0 justify-content-center m-auto fs-20"></i>
  53.                                     <div class="wi-30 he-30 deco-color position-absolute "></div>
  54.                                     <img src="{{ asset(vich_uploader_asset(colorCategory, 'colorCategoryFile')) }}"
  55.                                          alt="{{ colorCategory.name }}" width="48px" class=" pax-4 pointer"
  56.                                          />
  57.                                 </div>
  58.                             </div>
  59.                             <div class="position-absolute b-0 r-0 l-0 colorCategoryDiv colorCategory{{ colorCategory.id }}">
  60.                                 {#   <div class="position-absolute" style='background-image:{{ colorCategory.linearGradient }}'>
  61.                                        <img src="{{ asset('assets/img/cursor.png') }}" alt="cursor"/>
  62.                                    </div>#}
  63.                                 <div class=' w-100 paletteLinear' style='height:120px;background-image:{{ colorCategory.linearGradient }}'>
  64.                                 </div>
  65.                                 <div class="range-wrap">
  66.                                     <output class="bubble"></output>
  67.                                     <input type="range" min="0" max="{{(getColors(colorCategory)|length) -1}}" value="0"  step="1" class="range w-100 rangeColor{{ colorCategory.id }}" data-colorCategory="{{ colorCategory.id }}" />
  68.                                 </div>
  69.                             </div>
  70.                         {% endfor %}
  71.                     </div>
  72.                 </div>
  73.                 {% for key, colorCategory in colorCategories %}
  74.                     <div class="text-center colorCategoryDiv colorCategoryDiv2 colorCategory{{ colorCategory.id }}">
  75.                         <div class="d-flex justify-content-between position-relative zi-99">
  76.                             {% for key, color in getColors(colorCategory) %}
  77.                                 <div data-color="{{color.colorCode}}" class="color c-black pointer color{{ loop.index0 }}" data-id="{{ color.id }}">
  78.                                     {#   {{ color.position }}#} {#<div class="bs-solid bc-black brw-1 blw-0 he-7"></div>#} |
  79.                                 </div>
  80.                             {% endfor %}
  81.                         </div>
  82.                     </div>
  83.                 {% endfor %}
  84.             </div>
  86.             <div class="products ">
  88.             </div>
  89.             {# <div class="pay-48 text-center" data-aos="fade-right" data-aos-duration="800">
  90.                  <a href="{{path('front_landing')}}" class="btn bgc-white-h c-D78DA3-h  bgc-D78DA3 c-white wi-300 pay-14 br-0 ">
  91.                      <i class="fal fa-chevron-left mar-5 position-relative t-1" aria-hidden="true"></i>
  92.                      Retour</a>
  93.              </div>#}
  94.         </div>
  95.     </div>
  96.     <div class="modal fade" id="productModal" tabindex="-1"
  97.          aria-labelledby="productModalLabel" aria-hidden="true">
  98.         <div class="modal-dialog modal-dialog-centered">
  99.             <div class="modal-content">
  100.                 <div class="modal-body c-black position-relative customLs">
  101.                     <a data-dismiss="modal"type="button"  aria-label="Close" class="position-absolute t-4 r-20 fs-26 c-black zi-999 ">
  102.                         <i class="fal fa-times" aria-hidden="true" ></i>
  103.                     </a>
  104.                     <div class="brandName fs-18 fw-700 text-uppercase"></div>
  105.                     <div class="brandSubTitle fs-18 fw-300 text-uppercase"></div>
  106.                     <div class="bc-F8F8F8 bw-10 bs-solid text-center pa-25 may-16 ">
  107.                         <img src=""
  108.                              alt=""
  109.                              height="195px" class="productImg"/>
  110.                     </div>
  111.                     <div class="text-center fs-16 c-black text-shadow">
  113.                         <div class="productColorName may-8 "></div>
  114.                         <div class="productColorType may-8 "></div>
  115.                         <div class="d-flex justify-content-center align-items-center">
  116.                             <div class="productIconOpacity may-8">
  117.                                 <div class="he-16 mar-5 icon-opacity position-relative wi-16 br-16 bc-black bw-2 bs-solid ">
  118.                                     <div class="bgc-black semiOpacity2 d-none he-14">
  119.                                     </div>
  120.                                 </div>
  121.                             </div>
  122.                             <div class="productOpacity may-8"></div>
  123.                         </div>
  124.                         <div class="productVolume may-8"></div>
  125.                         <div class="text-center mat-20">
  126.                             <a href="" class="productLink btn bgc-white-h c-D78DA3-h  bgc-D78DA3 c-white w-100 pay-14 br-0" target="_blank">Voir le produit</a>
  127.                         </div>
  128.                     </div>
  129.                     <div class="right mab-30 position-absolute r--35 t-0 h-100 d-flex zi-999">
  130.                         <div class="br-90 m-auto wi-48 he-48 d-flex bgc-white boxShadow pal-2 c-333333 bgc-333333-h  pointer c-white-h fs-20">
  131.                             <i class="fas fa-chevron-right m-auto"></i></div>
  132.                     </div>
  133.                     {#                    <div class="right  bgc-white position-absolute r-20 wi-30 b-0 t-0 h-100 d-sm-none d-flex zi-999">#}
  135.                 </div>
  136.                 <div class="left position-absolute l--35 t-0 h-100 d-flex zi-999">
  137.                     <div class="br-90 m-auto wi-48 he-48 d-flex bgc-white boxShadow par-2 c-333333 bgc-333333-h  pointer c-white-h fs-20">
  138.                         <i class="fas fa-chevron-left m-auto"></i></div>
  139.                 </div>
  140.             </div>
  141.         </div>
  142.     </div>
  143. </div>
  145. {% endblock %}
  146. {% block javascripts %}
  147.     {{ parent() }}
  148.     {{ encore_entry_script_tags('landing') }}
  149.     <style type="text/css">
  150.     </style>
  151. {% endblock %}