templates/homepage.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  4. {% block title %}Home{% endblock %}
  5. {% block body %}
  8. <style>
  9. h1,h2,h3,h4,h5,h6 {
  10.     font-family: "Raleway", sans-serif;
  11.     color:black;
  12.     }
  14. body, html {
  15.   height: 100%;
  16.   
  17. }
  19. /* Full height image header */
  20. .bgimg-1 {
  21.   background-position: center;
  22.   background-size: cover;
  23.   background-image: url("images/city1.jpg");
  24.   background-color: black;
  25.   min-height: 100%;
  26. }
  28. .w3-button {
  29.   padding: 16px;
  30. }
  31. </style>
  32. <header class="bgimg-1 w3-display-container w3-grayscale-min" id="home">
  33. <div class="w3-display-left w3-text-white ms-3 " style="padding:48px; background-color: rgba(0, 0, 0, 0.5);">
  34.     <span class="w3-jumbo w3-hide-small">Gestión Inmobiliaria - EXEM</span><br>
  35.     <span class="w3-xxlarge w3-hide-large w3-hide-medium">Property Management - EXEM</span>
  36.     <span class="w3-large">Te ayudamos a gestionar tus propiedades de manera eficiente y efectiva.</span>
  37.     <p><a href="/about" class="w3-button w3-white w3-padding-large w3-large w3-margin-top w3-hover-opacity-off">Aprende más</a></p>
  38. </div>
  39.   <div class="w3-display-bottomleft w3-text-grey w3-large" style="padding:24px 48px">
  40.     <i class="fa fa-facebook-official w3-hover-opacity"></i>
  41.     <i class="fa fa-instagram w3-hover-opacity"></i>
  42.      <i class="fa fa-linkedin w3-hover-opacity"></i>
  43.      <i class="fa fa-twitter w3-hover-opacity"></i>
  44.      {#}
  45.     <i class="fa fa-snapchat w3-hover-opacity"></i>
  46.     <i class="fa fa-pinterest-p w3-hover-opacity"></i>
  47.     #}
  48.    
  49.   </div>
  50. </header>
  52. <!-- About Section -->
  53. <div class="w3-container" style="padding:110px 16px" id="about">
  54.   <h3 class="w3-center pb-5">Características clave de nuestra empresa</h3>
  55.   <div class="w3-row-padding w3-center" style="margin-top:64px">
  56.     <div class="w3-quarter">
  57.       <i class="fa fa-desktop w3-margin-bottom w3-jumbo w3-center"></i>
  58.       <p class="w3-large">Pericia</p>
  59.       <p>Nuestra amplia experiencia y conocimiento en administración de propiedades garantiza una gestión eficiente y efectiva.</p>
  60.     </div>
  61.     <div class="w3-quarter">
  62.       <i class="fa fa-heart w3-margin-bottom w3-jumbo"></i>
  63.       <p class="w3-large">Pasión</p>
  64.       <p>Nos apasiona brindar un servicio excepcional y cuidar de las propiedades como si fueran nuestras propias.</p>
  65.     </div>
  66.     <div class="w3-quarter">
  67.       <i class="fa fa-diamond w3-margin-bottom w3-jumbo"></i>
  68.       <p class="w3-large">Comunicación transparente</p>
  69.       <p>Valoramos la comunicación abierta y honesta, manteniendo a los propietarios informados en todo momento sobre el rendimiento y las decisiones importantes relacionadas con su propiedad.</p>
  70.     </div>
  71.     <div class="w3-quarter">
  72.       <i class="fa fa-cog w3-margin-bottom w3-jumbo"></i>
  73.       <p class="w3-large">Soporte</p>
  74.       <p> Brindamos un sólido respaldo a los propietarios, asegurándonos de que sus propiedades estén bien cuidadas y que cuenten con asistencia confiable en todo momento.</p>
  75.     </div>
  76.   </div>
  77. </div>
  79. <!-- Promo Section - "We know design" -->
  80. <div class="w3-container " style="padding:128px 16px; background-color: #EBF5FB ;">
  81.   <div class="w3-row-padding">
  82.     <div class="w3-col m6 ps-5 pt-5">
  83.       <h3>We know Property Management.</h3>
  84.       <p>Tenemos experiencia en la administración de propiedades, asegurándonos de que tus inversiones estén en buenas manos.</p>
  85.       <p><a href="/about" class="w3-button w3-black"><i class="fa fa-th"> </i> Ver Nuestros Servicios</a></p>
  86.     </div>
  87.     <div class="w3-col m6 pe-5" style="text-align:center">
  88.       <img class="w3-image w3-round-large" src="/images/buildings2.jpg" alt="Buildings" width="500" >
  89.     </div>
  90.   </div>
  91. </div>
  94. <!-- Team Section -->
  95. <!--
  96. <div class="w3-container" style="padding:128px 16px" id="team">
  97.   <h3 class="w3-center">THE TEAM</h3>
  98.   
  99.   <p class="w3-center w3-large">Los que dirigen esta empresa</p>
  100.   <div class="w3-row-padding w3-grayscale-min" style="margin-top:64px">
  101.     <div class="w3-col l3 m6 w3-margin-bottom">
  102.       <div class="w3-card">
  103.         <img src="/images/woman3.jpg" alt="Joanna" style="width:100%">
  104.         <div class="w3-container">
  105.           <h3>Joanna Doe</h3>
  106.           <p class="w3-opacity">CEO y Fundadora</p>
  107.           <p>Responsable de establecer la visión estratégica de la empresa y liderar el equipo para brindar servicios de administración de propiedades de alta calidad.</p>
  108.           <br>
  109.           <p><button class="w3-button w3-block" style="background-color: #85C1E9 ;"><i class="fa fa-envelope"></i> Contact</button></p>
  110.           
  111.         </div>
  112.       </div>
  113.     </div>
  114.     <div class="w3-col l3 m6 w3-margin-bottom">
  115.       <div class="w3-card">
  116.         <img src="/images/woman2.jpg" alt="Jane" style="width:100%">
  117.         <div class="w3-container">
  118.           <h3>Jane Doe</h3>
  119.           <p class="w3-opacity">Directora de Gestión</p>
  120.           <p>Encargado de supervisar y coordinar las operaciones diarias de administración de propiedades, asegurando eficiencia y cumplimiento de los objetivos establecidos.</p>
  121.           <p><button class="w3-button w3-block" style="background-color: #85C1E9 ;"><i class="fa fa-envelope"></i> Contact</button></p>
  122.         </div>
  123.       </div>
  124.     </div>
  125.     <div class="w3-col l3 m6 w3-margin-bottom">
  126.       <div class="w3-card">
  127.         <img src="/images/man.jpg" alt="Mike" style="width:100%">
  128.         <div class="w3-container">
  129.           <h3>Mike Ross</h3>
  130.           <p class="w3-opacity">Web Designer</p>
  131.           <p>Responsable de crear y mantener la presencia en línea de la empresa de administración de propiedades, asegurando una experiencia de usuario atractiva y funcional.</p>
  132.           <p><button class="w3-button w3-block" style="background-color: #85C1E9 ;"><i class="fa fa-envelope"></i> Contact</button></p>
  133.         </div>
  134.       </div>
  135.     </div>
  136.     <div class="w3-col l3 m6 w3-margin-bottom">
  137.       <div class="w3-card">
  138.         <img src="/images/man2.jpg" alt="Dan" style="width:100%">
  139.         <div class="w3-container">
  140.           <h3>Dan Star</h3>
  141.           <p class="w3-opacity">Diseñador</p>
  142.           <p>Encargado de desarrollar diseños creativos y atractivos para promocionar propiedades gestionadas por la empresa, captando la atención de posibles inquilinos y propietarios.</p>
  143.           <p><button class="w3-button w3-block" style="background-color: #85C1E9 ;"><i class="fa fa-envelope"></i> Contact</button></p>
  144.         </div>
  145.       </div>
  146.     </div>
  147.   </div>
  148. </div>
  149. -->
  151. <!-- Skills Section -->
  152. <div class="w3-container  w3-padding-64" style="background-color: #EBF5FB ;">
  153.   <div class="w3-row-padding">
  154.     <div class="w3-col m6 ps-5 ">
  155.       <h3>Our skills.</h3>
  156.       <p>Tenemos experiencia en la administración de propiedades, ofreciendo servicios de calidad y eficiencia.<br>
  157.       Nos enfocamos en maximizar el rendimiento de las propiedades y garantizar la satisfacción de los propietarios y los inquilinos.</p>
  158.     </div>
  159.     <div class="w3-col m6">
  160.       <p class="w3-wide"><i class="fa fa-home w3-margin-right"></i>Administración de Propiedades</p>
  161.       
  162.       <div class="w3-grey">
  163.         <div class="w3-container w3-dark-grey w3-center" style="width:90%">90%</div>
  164.       </div>
  165.       <br>
  166.       <p class="w3-wide"><i class="fa fa-users w3-margin-right"></i>Relaciones con los Inquilinos</p>
  167.       <div class="w3-grey">
  168.         <div class="w3-container w3-dark-grey w3-center" style="width:95%">95%</div>
  169.       </div>
  170.       <br>
  171.       <p class="w3-wide"><i class="fa fa-money w3-margin-right"></i>Finanzas y Contabilidad</p>
  172.       <div class="w3-grey">
  173.         <div class="w3-container w3-dark-grey w3-center" style="width:100%">100%</div>
  174.       </div>
  175.     </div>
  176.   </div>
  177. </div>
  179. <!-- CONTAAACCTTTT -->
  180. <div class="w3-container" style="padding:128px 16px">
  181.   <div class="w3-row-padding">
  182.     <div class="w3-col m6 ps-5 pt-5">
  183.       <h3>Contáctanos</h3>
  184.       <p>Tenemos experiencia en la administración de propiedades y estamos aquí para ayudarte.<br> ¡Ponte en contacto con nosotros hoy mismo!</p>
  185.       <p><a href="/contact" class="w3-button w3-black"> <i class="fa fa-envelope pe-1"></i> Contactar </a></p>
  186.     </div>
  187.     <div class="w3-col m6 pe-5" style="text-align:center">
  188.       <img class="w3-image w3-round-large" src="/images/contact.jpg" alt="Edificios" width="500">
  189.     </div>
  190.   </div>
  191. </div>
  193. {#}
  194.     <!-- This should be at the bottom of the page -->
  196.     <div class="container my-5">
  197.         <div class="row text-center">
  198.     
  199.             <div class="col-md-4 pt-4 ps-2 pe-2">
  200.                 <h2>Nuestros Servicios</h2>
  201.                 <p>Descubre cómo podemos ayudarte a gestionar tus propiedades.</p>
  202.                 <p><a class="btn btn-secondary" href="/about" role="button">Ver detalles &raquo;</a></p>
  203.             </div>
  205.             <div class="col-md-4 pt-4 ps-2 pe-2">
  206.                 <h2>Nuestro Equipo</h2>
  207.                 <p>Conoce a nuestro equipo de gestores de propiedades.</p>
  208.                 <br>
  209.                 <p><a class="btn btn-secondary" href="/about" role="button">Ver detalles &raquo;</a></p>
  210.             </div>
  212.             <div class="col-md-4 pt-4 ps-2 pe-2">
  213.                 <h2>Contáctanos</h2>
  214.                 <p>Ponte en contacto con nosotros para conocer más acerca de nuestros servicios.</p>
  215.                 <p><a class="btn btn-secondary" href="/contact" role="button">Ver detalles &raquo;</a></p>
  216.             </div>
  217.         </div>
  218.     </div>
  219.     #}
  220.     
  221. {% endblock %}