templates/front/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base_front.html.twig' %}
  3. {% block body %}
  5.     <section id="videoHome">
  6.         {# Modal Bootstrap Video #}
  7.         <div class="modal fade bd-example-modal-lg modal-video" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  8.             <div class="modal-dialog modal-lg">
  9.                 <div class="modal-content position-relative">
  10.                     <button class="close-modal close" data-dismiss="modal" aria-label="Close"><img src="{{ asset('img/icons/cross_video.svg') }}" alt="Fermeture modal vidéo"></button>
  11.                     <iframe src="https://www.youtube.com/embed/wUacY5w--wo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  12.                 </div>
  13.             </div>
  14.         </div>
  16.         <div class="container-right container-video position-relative">
  17.             <div class="title-video position-absolute">
  18.                 <div class="row justify-content-between">
  19.                     <div class="col-md-12 col-lg-6 col-xl-5 big-title-video">
  20.                         <h1>EVERY PROCESS<br> CAN BE <span>INNOVATED</span></h1>
  21.                         <p class="white regular">Mauro Service the ideal partner to improve production
  22.                             flows in concrete plants. </p>
  23.                     </div>
  24.                     <div class="col-md-12 col-lg-6 col-xl-5">
  25.                         <button type="button" class="video-link d-flex align-items-center" data-toggle="modal" data-target=".bd-example-modal-lg">
  26.                             <div class="btn-border-video d-flex">
  27.                                 <img src="{{ asset('img/button_video.svg') }}" alt="video presentation">
  28.                             </div>
  30.                             <p class="white ml-4 mb-0">DISCOVER THE FUTURE OF CONSTRUCTION IN OUR VIDEO</p>
  31.                         </button>
  32.                     </div>
  33.                 </div>
  34.             </div>
  35.         </div>
  36.     </section>
  38.     <section class="img-left-text-right">
  39.         <div class="container-right pb-5 pt-5">
  40.             <div class="row m-auto align-items-center">
  41.                 <div class="col-md-5">
  42.                     <div class="img-rounded position-relative">
  43.                         <img src="https://fakeimg.pl/350x200/ff0000/000" alt="img presentation">
  44.                     </div>
  45.                 </div>
  46.                 <div class="col-md-5 pl-5">
  47.                     <h2 class="black mb-3">ABOUT <br><span>US</span></h2>
  48.                     <p>Our philosophy is to create innovative solutions to modernise one of the oldest industries in the world. We build machines and systems that improve the quality of work and make it possible to produce and work safely and reliably.</p>
  49.                 </div>
  50.             </div>
  51.         </div>
  52.     </section>
  54.     <section class="text-left-links-right">
  55.         <div class="container-right pb-5 pt-5">
  56.             <div class="row justify-content-center">
  57.                 <div class="col-12 col-md-5 pr-5">
  58.                     <h2 class="black mb-3">What <br><span>we offer</span></h2>
  59.                     <p>We help concrete producers to be more sustainable through use of recycled and renewable materials.</p>
  60.                 </div>
  61.                 <div class="col-12 col-md-5">
  62.                     <ul class="list-links">
  63.                         <li>
  64.                             <a href="#" class="position-relative">
  65.                                 <img src="{{ asset('img/icons/readymix.svg') }}">
  66.                                 <span class="position-absolute">Readymix Concrete Solutions</span>
  67.                                 <img src="{{ asset('img/icons/arrow-right.svg') }}">
  68.                             </a>
  69.                         </li>
  70.                         <li>
  71.                             <a href="#" class="position-relative">
  72.                                 <img src="{{ asset('img/icons/precast.svg') }}">
  73.                                 <span class="position-absolute">Precast Concrete Solutions</span>
  74.                                 <img src="{{ asset('img/icons/arrow-right.svg') }}">
  75.                             </a>
  76.                         </li>
  77.                         <li>
  78.                             <a href="#" class="position-relative">
  79.                                 <img src="{{ asset('img/icons/turnkey.svg') }}">
  80.                                 <span class="position-absolute">Turnkey solutions</span>
  81.                                 <img src="{{ asset('img/icons/arrow-right.svg') }}">
  82.                             </a>
  83.                         </li>
  84.                     </ul>
  85.                 </div>
  86.             </div>
  87.         </div>
  88.     </section>
  90.     <section class="text-left-img-right">
  91.         <div class="container-right pb-5 pt-5">
  92.             <div class="row m-auto justify-content-center align-items-center">
  93.                 <div class="col-12 col-md-5 pr-5">
  94.                     <h2 class="black mb-3">How <br><span>we do it</span></h2>
  95.                     <p>Once the client tells us about their needs, we provide taylor made solutions to enhance their workflow and make them sustainable.</p>
  96.                 </div>
  97.                 <div class="col-12 col-md-5">
  98.                     <div class="img-rounded position-relative">
  99.                         <img src="https://fakeimg.pl/350x200/ff0000/000" alt="img presentation">
  100.                     </div>
  101.                 </div>
  102.             </div>
  103.         </div>
  104.     </section>
  106.     <section class="text-left-logos-right">
  107.         <div class="container-right pb-5 pt-5">
  108.             <div class="row m-auto justify-content-center">
  109.                 <div class="col-md-5 pr-5 pl-5">
  110.                     <h2 class="black mb-3">Our <br><span>clients</span></h2>
  111.                     <p>Over the years, MAURO SERViCE has built up a strong network of partners. The close cooperation and the possibility to use synergies allow for optimal performance beyond the company’s borders. </p>
  112.                     <div class="mt-5 col-mg-12 col-lg-10 col-xl-8 pl-0">
  113.                         <a href="#" class="blue-link"><span>FREE Consultation</span></a>
  114.                     </div>
  115.                 </div>
  116.                 <div class="col-md-5">
  117.                     <div class="row col-md-12 logos-list">
  118.                         {% for i in 1..12 %}
  119.                             <div class="col-6 col-md-4 col-lg-4 col-xl-3 mt-3">
  120.                                 <img src="https://fakeimg.pl/300/" alt="nom entreprise" width="100%">
  121.                             </div>
  122.                         {% endfor %}
  123.                     </div>
  124.                 </div>
  125.             </div>
  126.         </div>
  127.     </section>
  129.     <section class="latest-news position-relative">
  130.         <div class="container-bg"></div>
  131.         <div class="container-right">
  132.             <div class="row m-auto justify-content-center">
  133.                 <div class="col-md-10">
  134.                     <div class="row list-news">
  135.                         <div class="col-md-12 col-lg-6 col-xl-5 offset-md-2 pr-5 pl-5">
  136.                             <h2 class="black mb-5">Our <br><span>news</span></h2>
  138.                             <div class="card mb-5">
  139.                                 <img class="card-img-top" src="{{ asset('img/img_news.png') }}" alt="Card image cap">
  140.                                 <div class="card-body">
  141.                                     <h3 class="card-title blue">Lorem ipsum dolor</h3>
  142.                                     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
  143.                                     <a href="#" class="news-more">
  144.                                         <img src="{{ asset('img/icons/news_more.svg') }}">
  145.                                         <span>Read More</span>
  146.                                     </a>
  147.                                 </div>
  148.                             </div>
  149.                             <div class="card mb-5">
  150.                                 <img class="card-img-top" src="{{ asset('img/img_news.png') }}" alt="Card image cap">
  151.                                 <div class="card-body">
  152.                                     <h3 class="card-title blue">Lorem ipsum dolor</h3>
  153.                                     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
  154.                                     <a href="#" class="news-more">
  155.                                         <img src="{{ asset('img/icons/news_more.svg') }}">
  156.                                         <span>Read More</span>
  157.                                     </a>
  158.                                 </div>
  159.                             </div>
  160.                         </div>
  161.                         <div class="col-md-12 col-lg-6 col-xl-5 mt-4 pr-5 pl-5">
  162.                             <div class="card mb-5">
  163.                                 <img class="card-img-top" src="{{ asset('img/img_news.png') }}" alt="Card image cap">
  164.                                 <div class="card-body">
  165.                                     <h3 class="card-title blue">Lorem ipsum dolor</h3>
  166.                                     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
  167.                                     <a href="#" class="news-more">
  168.                                         <img src="{{ asset('img/icons/news_more.svg') }}">
  169.                                         <span>Read More</span>
  170.                                     </a>
  171.                                 </div>
  172.                             </div>
  173.                             <div class="card mb-5">
  174.                                 <img class="card-img-top" src="{{ asset('img/img_news.png') }}" alt="Card image cap">
  175.                                 <div class="card-body">
  176.                                     <h3 class="card-title blue">Lorem ipsum dolor</h3>
  177.                                     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
  178.                                     <a href="#" class="news-more">
  179.                                         <img src="{{ asset('img/icons/news_more.svg') }}">
  180.                                         <span>Read More</span>
  181.                                     </a>
  182.                                 </div>
  183.                             </div>
  185.                             <a href="#" class="blue-link"><span>More news</span></a>
  186.                         </div>
  187.                     </div>
  188.                 </div>
  189.             </div>
  190.         </div>
  191.     </section>
  193.     <section class="newsletter">
  194.         <div class="container-right pb-5 pt-5">
  195.             <div class="col-md-12 col-lg-10 col-xl-5 m-auto">
  196.                 <h2 class="black mb-5">don’t miss anything <br>by subscribing to <br><span>our newsletter</span></h2>
  197.                 <form id="newsletterForm" class="d-flex">
  198.                     <input type="email" placeholder="Your email" name="email_newsletter" required>
  199.                     <button type="submit"><img src="{{ asset('img/icons/send.svg') }}"></button>
  200.                 </form>
  201.             </div>
  202.         </div>
  203.     </section>
  205.     <section class="contact">
  206.         <div class="container-right d-flex justify-content-end">
  207.             <div class="col-lg-12 col-xl-10 row">
  208.                 <div class="col-md-12 col-lg-6 col-xl-6 pt-5 pb-5 container-form-contact">
  209.                     <h2 class="black mb-5">Contact <br><span>us</span></h2>
  210.                     <div class="contact-form">
  211.                         <form class="d-flex flex-column">
  212.                             <input type="text" name="name" placeholder="Name*" required>
  213.                             <input type="email" name="email" placeholder="Email*" required>
  214.                             <textarea name="message" placeholder="Message*" rows="6" required></textarea>
  215.                             <div class="checkbox">
  216.                                 <input type="checkbox" name="privacy_policy" id="privacyPolicy" required>
  217.                                 <label for="privacyPolicy">* Accept privacy policy</label>
  218.                             </div>
  219.                             <div class="checkbox">
  220.                                 <input type="checkbox" name="novelties" id="novelties">
  221.                                 <label for="novelties">I want to stay updated on the latest novelties</label>
  222.                             </div>
  223.                             <div class="col-lg-10 col-xl-8 pl-0 mt-4">
  224.                                 <button type="submit" class="blue-link">
  225.                                     <span>Send us a message</span>
  226.                                 </button>
  227.                             </div>
  228.                         </form>
  229.                     </div>
  230.                 </div>
  231.                 <div class="col-md-12 col-lg-6 col-xl-6 bg-black contact-location">
  232.                     <h2 class="white mb-4">Our <br><span>location</span></h2>
  233.                     <p>Production plant -<br> administrative office</p>
  234.                     <span>Via Fiume Pò,<br>
  235.                         215 24040 - Stezzano (BG) <strong>Italy</strong></span>
  237.                     <p class="mt-3">Official Dealer Northern Europe</p>
  238.                     <span>Mauro Service (Lux) S.A., <br>
  239.                         L-4989 Sanem, <strong>Luxembourg</strong></span>
  240.                 </div>
  241.             </div>
  242.         </div>
  243.     </section>
  245. {% endblock %}