templates/front/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base_front.html.twig' %}
  3. {% block body %}
  5. <div class="faucon"></div>
  6. <div class="t-fighter"></div>
  8.     <div class="header-home position-relative">
  9.         <!--img src="{{ asset('img/header_home.png') }}" title="welcome Hamilius"-->
  10.         <!--canvas id="myCanvas" width="1500" height="500" style="    position: absolute;
  11.         z-index: 10;
  12.         top: 0;
  13.         left: 0;"></canvas-->
  14.         <div class="image"></div>
  15.         <h1 class="red position-absolute">Bienvenue à</h1>
  16.     </div>
  18.     <div class="col-md-12 text-center logo-text bg-light-grey">
  19.         <img src="{{ asset('img/royal-hamilius.svg') }}" alt="Royal Hamilius">
  20.     </div>
  22.     <section id="news" class="bg-light-grey">
  23.         <div class="text-center col-md-12">
  24.             <h2 class="red">Nos actualités</h2>
  25.         </div>
  26.         <div class="list-news col-md-12 col-lg-10 col-xl-8 col-xl-6 pt-5 m-auto row justify-content-between">
  27.             {% for post in posts %}
  28.                 {% if loop.first %}
  29.                     {% set colorLink = 'bg-red' %}
  30.                 {% elseif loop.index == 2 %}
  31.                     {% set colorLink = 'bg-orange' %}
  32.                 {% else %}
  33.                     {% set colorLink = 'bg-green' %}
  34.                 {% endif %}
  35.                 <a href="{{ path('front_post_single', {'slug': post.slug}) }}"  class="col-md-4 col-lg-4">
  36.                     <span class="card">
  37.                         <img class="card-img-top" src="{{ asset(constant('App\\Services\\UploadFileService::POST_IMAGE_DIR') ~ post.image) }}" alt="{{ post.title }}" style="height:170px;">
  38.                         <span class="card-body">
  39.                             <span class="date green">{{ post.createdAt|date('d.m.Y') }}</span>
  40.                             <h5 class="card-title red mt-3">{{ post.title }}</h5>
  41.                             <p class="card-text">{{ post.content|slice(0, 150)|striptags|replace({'&eacute;': 'é', '&agrave;': 'à', '&egrave;': 'è', '&rsquo;': '’', '&ecirc;': 'ê', '&nbsp;?': ' ?'}) ~ '...' }}</p>
  42.                             <span class="btn-news {{ colorLink }}">
  43.                                 <img src="{{ asset('img/icons/img-right-white.svg') }}">
  44.                             </span>
  45.                         </span>
  46.                     </span>
  47.                 </a>
  48.             {% endfor %}
  49.         </div>
  50.         <div class="col-md-12 text-center mt-5">
  51.             <a class="link-arrow black ml-5 position-relative" href="{{ path('front_post_list') }}">
  52.                 <img src="{{ asset('img/icons/arrow-right-black.svg') }}" class="position-absolute">
  53.                 Voir tous
  54.             </a>
  55.         </div>
  56.     </section>
  58.     <section id="parking">
  59.         <div class="text-center col-md-12">
  60.             <h2 class="orange">Parking</h2>
  61.             <h3 class="subtitle">37 Avenue Monterey, 2163 Luxembourg</h3>
  62.             <img class="mt-4" src="{{ asset('img/map-hamilius.png') }}" title="map">
  63.         </div>
  64.         <div class="col-md-12 text-center mt-5">
  65.             <a class="link-arrow black ml-5 position-relative" href="{{ path('front_parking') }}">
  66.                 <img src="{{ asset('img/icons/arrow-right-black.svg') }}" class="position-absolute">
  67.                 Plus d'info
  68.             </a>
  69.         </div>
  70.     </section>
  72.     <section id="ctaBanner" class="position-relative pb-0">
  73.         <div class="col-md-12 h-100 p-0 banner d-flex" style="background:url({{ asset('img/bg-img-cta.jpg') }})no-repeat center;background-size: cover">
  74.             <div class="col-12 col-md-5 h-100 position-relative text-block">
  75.                 <div class="col-md-12 col-xl-6 h-100 float-right d-flex justify-content-center flex-column" style="z-index:99">
  76.                     <h2 class="white mb-4">Vous aimeriez louer un Commerce ?</h2>
  77.                     <a class="link-arrow white ml-5 position-relative" target="_blank" href="https://www.royal-hamilius.lu/">
  78.                         <img src="{{ asset('img/icons/img-right-white.svg') }}" class="position-absolute">
  79.                         Plus d'info
  80.                     </a>
  81.                 </div>
  82.                 <div class="position-absolute block-diag-right bg-red"></div>
  83.             </div>
  84.             <div class="col-0 col-md-7 h-100 img-block">
  85.             </div>
  86.         </div>
  87.     </section>
  89.     <section id="newsletter">
  90.         <div class="text-center col-md-12">
  91.             <h2 class="red">Newsletter</h2>
  92.         </div>
  93.         <div class="col-md-6 col-xl-4 m-auto text-center mt-3">
  95.             {{ include('front/inc/newsletter.html.twig') }}
  96.             {#
  97.             <form id="formNewsletter" class="d-flex flex-column align-items-center">
  98.                 <div class="col-md-6 col-lg-3">
  99.                     <input type="text" placeholder="E-MAIL" name="email" class="input w-100">
  100.                 </div>
  101.                 <button type="submit" class="link-arrow black ml-5 mt-4 position-relative">
  102.                     <img src="{{ asset('img/icons/arrow-right-black.svg') }}" class="position-absolute">
  103.                     S'abonner
  104.                 </button>
  105.             </form>
  106.             #}
  108.         </div>
  109.     </section>
  111.     <section id="contact" class="bg-light-grey">
  112.         <div class="text-center col-md-12">
  113.             <h2 class="red">Contact</h2>
  114.         </div>
  115.         <div class="col-md-8 col-lg-6 text-center pt-4 m-auto">
  117.             {{ include('front/contact/_form.html.twig') }}
  119.         </div>
  120.     </section>
  122.     <section id="instagram" class="bg-light-grey">
  123.         <div class="text-center col-md-12">
  124.             <h2 class="red">Instagram</h2>
  125.         </div>
  126.         <div class="feed col-md-12 mt-5 p-0">
  127.             <div class="img-list w-100 d-flex">
  128.                 {% for image in imagesInsta %}
  129.                     <div class="p-0">
  130.                         <img src="{{ image }}">
  131.                     </div>
  132.                 {% endfor %}
  133.             </div>
  134.         </div>
  135.     </section>
  137. {% endblock %}