templates/AboutUs/index.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block stylesheets %}
  4.     <style>
  5.         .headerImg {
  6.             background-image: url("{{ asset('assets/img/Catalog/HeaderImg.jpeg')}}");
  7.             background-size: cover;
  8.             background-position: center;
  9.             height: 500px;
  10.             position: relative;
  11.         }
  13.         .top-25 {
  14.             top: 270px;
  15.         }
  17.         .flex-center {
  18.             display: flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             flex-direction: column;
  22.         }
  24.         .text-justify {
  25.             text-align: justify;
  26.         }
  28.         .map {
  29.             border: 0;
  30.             width: 1000px;
  31.             height: 600px;
  32.         }
  34.         .title-header {
  35.             font-weight: bold;
  36.             text-transform: uppercase;
  37.             font-size: 50px;
  38.         }
  40.         .subtitle-header {
  41.             font-weight: 200;
  42.             font-size: 25px;
  43.             line-height: 25px;
  44.             display: block;
  45.             margin: 0 auto;
  46.             max-width: 500px;
  47.         }
  48.     </style>
  49. {% endblock %}
  51. {% block body %}
  52.     {# ------------------------------------------ Header ------------------------------------------ #}
  53.     <section class="headerImg">
  54.         <div class="position-absolute top-25 start-50 translate-middle text-center">
  55.             <h1 class="text-white title-header">Acerca de Nosotros</h1>
  56.             <h2 class="text-white subtitle-header">Celebramos tus sueños hechos realidad</h2>
  57.             <h2 class="text-white subtitle-header"><i>D I A L V I</i></h2>
  58.             <h4 class="text-white subtitle-header mt-1">Buen gusto, diseño e innovación.</h4>
  59.         </div>
  60.     </section>
  61.     {# ------------------------------------------ Header ------------------------------------------ #}
  63.     {# ------------------------------------------ About Us ------------------------------------------ #}
  64.     <section class="container mt-5">
  65.         <div class="row">
  66.             <div class="col-md-12 col-lg-6 flex-center">
  67.                 <h2 class="text-center">¿Quiénes somos?</h2>
  68.                 <p class="mx-5 text-justify fs-5">
  69.                     En Dialvi sabemos el esfuerzo que dedicas a vivir mejor, día a día. 
  70.                     Nosotros queremos ser el compañero que te incita a que en casa puedas 
  71.                     ser y vivir tu mejor versión. Motivándote a hacer realidad la 
  72.                     renovación de tus espacios para celebrarlo juntos. Porque al lograrlo, 
  73.                     no solo transformaste un espacio, sino que transformaste tu vida.
  74.                 </p>
  75.             </div>
  76.             <div class="col-md-12 col-lg-6 text-center">
  77.                 <img src="{{ asset('assets/img/Logo/DIALVI_LOGO.png') }}" class="img-fluid" alt="About Us">
  78.             </div>
  79.         </div>
  80.     </section>
  81.     {# ------------------------------------------ About Us ------------------------------------------ #}
  83.     {# ------------------------------------------ Our Mission ------------------------------------------ #}
  84.     <section class="container mt-5">
  85.         <div class="row">
  86.             <div id="secondImage" class="col-md-12 col-lg-6 text-center">
  87.                 <img src="{{ asset('assets/img/AboutUs/img0.jpeg') }}" class="img-fluid" alt="Mission">
  88.             </div>
  89.             <div id="secondText" class="col-md-12 col-lg-6 flex-center">
  90.                 <h2 class="text-center">Nuestra Misión</h2>
  91.                 <p class="mx-5 text-justify fs-5">
  92.                     Convertirnos en el proveedor líder de soluciones innovadoras 
  93.                     en azulejos y revestimientos, estableciendo estándares de 
  94.                     calidad y diseño que inspiren espacios únicos y funcionales, 
  95.                     tanto en hogares como en proyectos comerciales a nivel nacional 
  96.                     e internacional.
  97.                 </p>
  98.             </div>
  99.         </div>
  100.     </section>
  101.     {# ------------------------------------------ Our Mission ------------------------------------------ #}
  103.     {# ------------------------------------------ Our Vision ------------------------------------------ #}
  104.     <section class="container mt-5">
  105.         <div class="row">
  106.             <div class="col-md-12 col-lg-6 flex-center">
  107.                 <h2 class="text-center">Nuestra Visión</h2>
  108.                 <p class="mx-5 text-justify fs-5">
  109.                     Ofrecer a nuestros clientes una amplia variedad de azulejos 
  110.                     de alta calidad, con diseños modernos y duraderos que transformen 
  111.                     sus espacios. Nos comprometemos a brindar un servicio excepcional, 
  112.                     satisfacer las necesidades de nuestros clientes y contribuir al 
  113.                     embellecimiento de sus proyectos con materiales sostenibles y de excelencia.
  114.                     Estos enunciados reflejan un enfoque en la calidad, la innovación y la 
  115.                     satisfacción del cliente, elementos importantes en la industria de 
  116.                     los azulejos y revestimientos.
  117.                 </p>
  118.             </div>
  119.             <div class="col-md-12 col-lg-6 text-center">
  120.                 <img src="{{ asset('assets/img/AboutUs/img1.jpeg') }}" class="img-fluid" alt="Vision">
  121.             </div>
  122.         </div>
  123.     </section>
  124.     {# ------------------------------------------ Our Vision ------------------------------------------ #}
  126.     {# ------------------------------------------ Find Us (Map) ------------------------------------------ #}
  127.     <section class="container mt-5">
  128.         <div class="row">
  129.             <hr class="my-5">
  130.             <div class="col-md-12">
  131.                 <h2 class="text-center">Encuentra Nuestras Tiendas</h2>
  132.                 <div class="text-center embed-responsive embed-responsive-16by9">
  133.                     <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d235.65302351847504!2d-102.35643274271376!3d19.08797603123925!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8431e16573185381%3A0xa0e682deebd656ba!2sDialvi!5e0!3m2!1ses-419!2smx!4v1735969103436!5m2!1ses-419!2smx" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>    
  134.                 </div>
  135.             </div>
  136.             <hr class="my-5">
  137.         </div>
  138.     </section>
  139.     {# ------------------------------------------ Find Us (Map) ------------------------------------------ #}
  141. {% endblock %}
  143. {% block javascripts %}
  144.     <script>
  145.         // Make the iframe dinamic to the screen
  146.         const map = document.querySelector('.map');
  147.         map.style.width = '100%';
  148.         map.style.height = '600px';
  150.         // Make the iframe responsive
  151.         window.addEventListener('resize', () => {
  152.             map.style.width = '100%';
  153.             map.style.height = '600px';
  154.         });
  156.         // Change the order of the elements in the second section
  157.         const secondImage = document.getElementById('secondImage');
  158.         const secondText = document.getElementById('secondText');
  159.         if (window.innerWidth < 992) {
  160.             secondImage.parentNode.insertBefore(secondText, secondImage);
  161.         }
  163.         window.addEventListener('resize', () => {
  164.             if (window.innerWidth < 992) {
  165.                 secondImage.parentNode.insertBefore(secondText, secondImage);
  166.             } else {
  167.                 secondText.parentNode.insertBefore(secondImage, secondText);
  168.             }
  169.         });
  170.     </script>
  171. {% endblock %}