src/DcSiteBundle/Resources/views/Modules/car/car-feature.html.twig line 1

Open in your IDE?
  1. {% block css %}
  2.     <link rel="stylesheet" href="{{ asset('/bundles/dcsite/css/modules/NEW_CARD_CAR/features.css') }}">
  3. {% endblock %}
  5. <section class="features section-padding section-grey pb-3" id="overview">
  6.     <div class="container" id="carFeature">
  7.         <div class="row">
  8.             <div class="col-md-12 title">
  9.                 <span>{{ 'car_page.new.overview'|trans({}, 'dc_base') }}</span>
  10.             </div>
  11.         </div>
  12.         <div class="row">
  13.             <div class="col-md-12">
  14.                 <div class="features-arrow-block active">
  15.                     <div id="features-left-button" class="features-btn features-btn-prev d-none"></div> <!-- add class active -->
  16.                     <div id="features-right-button" class="features-btn features-btn-next d-none"></div> <!-- add class deactive -->
  17.                 </div>
  18.                 <ul class="nav nav-tabs nav-features mobile-scroll cancel-mobile-scroll" id="featuresTab" role="tablist">
  19.                     {% for id, group in model.groupFeatures(app.request.locale) %}
  20.                         <li class="nav-item">
  21.                             <a class="nav-link {% if loop.index == 1 %}active{% endif %}" id="features{{ id }}-tab" data-toggle="tab" href="#features-{{ id }}" role="tab"  aria-selected="true">
  22.                                 {{ group.name }}
  23.                             </a>
  24.                         </li>
  25.                     {% endfor %}
  26.                 </ul>
  27.                     <div class="tab-content" id="featuresTabContent">
  28.                         {% for id, group in model.groupFeatures(app.request.locale) %}
  29.                             <div class="tab-pane fade {% if loop.index == 1 %}show active{% endif %}" id="features-{{ id }}" role="tabpanel" aria-labelledby="features-{{ id }}-tab">
  30.                                 {% for feature in group.features %}
  31.                                     <div class="row row-features-item">
  32.                                         <div class="col-md-6">
  33.                                             <div>
  34.                                                 {% if feature.videoId %}
  35.                                                     <iframe width="560" height="315" src="https://www.youtube.com/embed/{{ feature.videoId }}?rel=0'" frameborder="0" allowfullscreen></iframe>
  36.                                                 {% else %}
  37.                                                     {% if lazyLoad is defined and lazyLoad %}
  38.                                                         <img class="w-100 h-auto" width="570" height="403" style="visibility: hidden; " tab-data-src="{{ webpUrl(feature.image, 'reference') }}" alt="{{ feature.title }}">
  39.                                                     {% else %}
  40.                                                         <img class="w-100" style="visibility: hidden" data-src="{{ webpUrl(feature.image, 'reference') }}" alt="{{ feature.title }}">
  41.                                                     {% endif %}
  42.                                                 {% endif %}
  43.                                             </div>
  44.                                         </div>
  45.                                         <div class="col-md-6 d-flex align-items-center">
  46.                                             <div class="features-item">
  47.                                                 <p class="features-title title-text"> {{ feature.title }}</p>
  48.                                                 <p>{{ feature.content|raw }}</p>
  49.                                             </div>
  50.                                         </div>
  51.                                     </div>
  52.                                 {% endfor %}
  53.                             </div>
  54.                         {% endfor %}
  55.                     </div>
  56.             </div>
  57.         </div>
  58.     </div>
  59. </section>