templates/Home/index.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block stylesheets %}
  4.     <style>
  5.         .carousel-caption {
  6.             top: 50%;
  7.             transform: translateY(-50%);
  8.             bottom: auto;
  9.         }
  10.         .btn-custom {
  11.             background-color: transparent;
  12.             border: 1px solid rgb(0, 0, 0, 0.3);
  13.             color: rgb(0, 0, 0, 0.7);
  14.             padding: 0.5rem 1rem;
  15.             text-decoration: none;
  16.         }
  18.         .card-img-overlay {
  19.             top: auto;
  20.         }
  22.         .btn-card {
  23.             background-color: #FFF;
  24.             padding: 0.5rem 1rem;
  25.             text-decoration: none;
  26.             color: rgb(0, 0, 0, 0.7);
  27.             border-radius: 0;
  28.             transition: 0.3s ease-in-out;
  29.         }
  31.         .btn-card:hover {
  32.             background-color: #FFF;
  33.             color: rgb(0, 0, 0, 0.7);
  34.             font-weight: bold;
  35.             transition: 0.3s ease-in-out;
  36.         }
  38.         .card {
  39.             border: none;
  40.         }
  42.         .card-img-top {
  43.             border-radius: 0;
  44.         }
  46.         .border-right {
  47.             border-right: 1px solid #dee2e6;
  48.         }
  50.         .carousel-indicators-custom {
  51.             position: absolute;
  52.             right: 0;
  53.             left: 0;
  54.             top: 0;
  55.             z-index: 2;
  56.             display: flex;
  57.             justify-content: space-around;
  58.             padding: 0;
  59.             margin-right: 15%;
  60.             margin-top: 4rem;
  61.             margin-left: 15%;
  62.         }
  64.         .btn-indicator {
  65.             background-color: transparent;
  66.             border: none;
  67.             color: #FFF;
  68.             padding: 0.5rem 1rem;
  69.             margin: 0 0.5rem;
  70.             border-radius: 0;
  71.             transition: 0.3s ease-in-out;
  72.         }
  74.         .btn-indicator.active {
  75.             font-weight: bold;
  76.             transition: 0.3s ease-in-out;
  77.         }
  79.         .carousel-control-prev-icon {
  80.             opacity: 1;
  81.         }
  83.         .carousel-control-next-icon {
  84.             opacity: 1;
  85.         }
  87.         .description {
  88.             text-align: justify;
  89.             padding: 1rem 3rem;
  90.             font-size: 18px;
  91.         }
  93.         .flex-center {
  94.             display: flex;
  95.             justify-content: center;
  96.             align-items: center;
  97.             flex-direction: column;
  98.             gap: 0.5rem;
  99.         }
  101.         .title-header {
  102.             font-weight: bold;
  103.             text-transform: uppercase;
  104.             font-size: 50px;
  105.         }
  106.     </style>
  107. {% endblock %}
  109. {% block body %}
  110.     {# ------------------------------------------ Carousel ------------------------------------------ #}
  111.     <div id="newsCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
  112.         <div class="carousel-indicators">
  113.             <button type="button" data-bs-target="#newsCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  114.             <button type="button" data-bs-target="#newsCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
  115.             <button type="button" data-bs-target="#newsCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
  116.           </div>
  117.         <div class="carousel-inner bg-black">
  118.             {% if carouselImages|length > 0 %}
  119.                 {% for carousel in carouselImages %}
  120.                     <div {% if loop.first %}class="carousel-item active"{% else %}class="carousel-item"{% endif %}>
  121.                         <img src="{{ carousel.file.path }}" class="d-block w-100 opacity-50" alt="{{ carousel.description }}">
  122.                         <div class="carousel-caption d-none d-md-block">
  123.                             <h1 class="title-header">Crea el hogar de tus sueños, comenzando por el piso</h1>
  124.                         </div>
  125.                     </div>
  126.                 {% endfor %}
  127.             {% endif %}
  128.             {# <div class="carousel-item active">
  129.                 <img src="{{ asset('assets/img/Carousel/News/img1.png')}}" class="d-block w-100" alt="img1">
  130.                 <div class="carousel-caption d-none d-md-block">
  131.                     <h1 class="title-header">Crea el hogar de tus sueños, comenzando por el piso.</h1>
  132.                 </div>
  133.             </div>
  134.             <div class="carousel-item">
  135.                 <img src="{{ asset('assets/img/Carousel/News/img2.png')}}" class="d-block w-100" alt="img2">
  136.                 <div class="carousel-caption d-none d-md-block">
  137.                     <h1 class="title-header">Crea el hogar de tus sueños, comenzando por el piso.</h1>
  138.                 </div>
  139.             </div>
  140.             <div class="carousel-item">
  141.                 <img src="{{ asset('assets/img/Carousel/News/img3.png')}}" class="d-block w-100" alt="img3">
  142.                 <div class="carousel-caption d-none d-md-block">
  143.                     <h1 class="title-header">Crea el hogar de tus sueños, comenzando por el piso.</h1>
  144.                 </div>
  145.             </div> #}
  146.         </div>
  147.         <button class="carousel-control-prev" type="button" data-bs-target="#newsCarousel" data-bs-slide="prev">
  148.             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  149.             <span class="visually-hidden">Previous</span>
  150.           </button>
  151.           <button class="carousel-control-next" type="button" data-bs-target="#newsCarousel" data-bs-slide="next">
  152.             <span class="carousel-control-next-icon" aria-hidden="true"></span>
  153.             <span class="visually-hidden">Next</span>
  154.           </button>
  155.     </div>
  156.     {# ------------------------------------------ Carousel ------------------------------------------ #}
  158.     {# ------------------------------------------ Cards ------------------------------------------ #}
  159.     <section class="container mt-5">
  160.         <div class="row">
  161.             <div class="d-flex justify-content-between align-items-center">
  162.                 <h4 class="fw-normal">Estilos Únicos</h4>
  163.                 <a href="{{ path('catalog') }}" class="btn-custom">Catálogo <i class="fa-solid fa-arrow-right"></i></a>
  164.             </div>
  165.         </div>
  166.         <hr class="mt-3">
  167.         <div class="row row-cols-1 row-cols-lg-3 mt-3 gy-4">
  168.             <div class="col">
  169.                 <div class="card">
  170.                     <img src="{{ asset('assets/img/Card/img1.png')}}" class="card-img-top" alt="...">
  171.                     <div class="card-img-overlay d-grid gap-2">
  172.                         <a href="#" type="button" class="btn btn-card">Shakhir gray</a>
  173.                     </div>
  174.                 </div>
  175.             </div>
  176.             <div class="col">
  177.                 <div class="card">
  178.                     <img src="{{ asset('assets/img/Card/img2.png')}}" class="card-img-top" alt="...">
  179.                     <div class="card-img-overlay d-grid gap-2">
  180.                         <a href="#" type="button" class="btn btn-card">Pulse Antique</a>
  181.                     </div>
  182.                 </div>
  183.             </div>
  184.             <div class="col">
  185.                 <div class="card">
  186.                     <img src="{{ asset('assets/img/Card/img3.png')}}" class="card-img-top" alt="...">
  187.                     <div class="card-img-overlay d-grid gap-2">
  188.                         <a href="#" type="button" class="btn btn-card">Arenite Natural</a>
  189.                     </div>
  190.                 </div>
  191.             </div>
  192.         </div>
  193.     </section>
  194.     {# ------------------------------------------ Cards ------------------------------------------ #}
  196.     {# ------------------------------------------ Main Description ------------------------------------------ #}
  197.     <section class="container">
  198.         <hr class="mt-3 mb-5">
  199.         <div class="row">
  200.             <div class="col-md-8 border-right description">
  201.                 Los azulejos dan calidez y un sentimiento más hogareño. A su vez, 
  202.                 aportan más profundidad a la estancia donde se puede revestir las 
  203.                 paredes, dando un acabado mucho más elegante, haciendo que todo el 
  204.                 hogar tenga un sentido y un estilo compacto de pertenencia. Cada 
  205.                 vez son más y más las personas que se suman a decorar sus hogares 
  206.                 con los azulejos de salón, permitiendo renovar y dar algo de frescura 
  207.                 a la habitación más concurrida.
  208.             </div>
  209.             <div class="col-md-4 flex-center">
  210.                 <h3>10, 000+</h3>
  211.                 <h4>Clientes felices</h4>
  212.                 <a href="{{ path('contact') }}" class="btn-custom">Contacto</a>
  213.             </div>
  214.         </div>
  215.         <hr class="mt-5">
  216.     </section>
  217.     {# ------------------------------------------ Main Description ------------------------------------------ #}
  219.     {# ------------------------------------------ Second Carousel ------------------------------------------ #}
  220.     {# <div id="designsCarousel" class="carousel slide carousel-fade">
  221.         <div class="carousel-indicators-custom">
  222.             <button type="button" class="btn-indicator fs-5 active" data-bs-target="#designsCarousel" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1">Naunces</button>
  223.             <button type="button" class="btn-indicator fs-5" data-bs-target="#designsCarousel" data-bs-slide-to="1" aria-label="Slide 2">Verity</button>
  224.             <button type="button" class="btn-indicator fs-5" data-bs-target="#designsCarousel" data-bs-slide-to="2" aria-label="Slide 3">Ullise</button>
  225.         </div>
  226.         <div class="carousel-inner">
  227.             <div class="carousel-item active">
  228.                 <img src="{{ asset('assets/img/Carousel/Designs/img4.png')}}" class="d-block w-100" alt="img4">
  229.             </div>
  230.             <div class="carousel-item">
  231.                 <img src="{{ asset('assets/img/Carousel/Designs/img5.png')}}" class="d-block w-100" alt="img5">
  232.             </div>
  233.             <div class="carousel-item">
  234.                 <img src="{{ asset('assets/img/Carousel/Designs/img6.png')}}" class="d-block w-100" alt="img6">
  235.             </div>
  236.         </div>
  237.         <button class="carousel-control-prev" type="button" data-bs-target="#designsCarousel" data-bs-slide="prev">
  238.             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  239.             <span class="visually-hidden">Previous</span>
  240.         </button>
  241.         <button class="carousel-control-next" type="button" data-bs-target="#designsCarousel" data-bs-slide="next">
  242.             <span class="carousel-control-next-icon" aria-hidden="true"></span>
  243.             <span class="visually-hidden">Next</span>
  244.         </button>
  245.     </div> #}
  246.     {# ------------------------------------------ Second Carousel ------------------------------------------ #}
  247. {% endblock %}
  249. {% block javascripts %}
  250.     <script>
  252.         // Carousel btn indicators active animation
  253.         let btnIndicators = document.querySelectorAll('.btn-indicator');
  254.         btnIndicators.forEach((btn) => {
  255.             btn.addEventListener('click', () => {
  256.                 btnIndicators.forEach((btn) => {
  257.                     btn.classList.remove('active');
  258.                 });
  259.                 btn.classList.add('active');
  260.             });
  261.         });
  263.         // Corousel control prev and next on click change active indicator
  264.         let carouselControlPrev = document.querySelector('.carousel-control-prev');
  265.         let carouselControlNext = document.querySelector('.carousel-control-next');
  267.         carouselControlPrev.addEventListener('click', () => {
  268.             let activeBtn = document.querySelector('.btn-indicator.active');
  269.             if (activeBtn) {
  270.                 activeBtn.classList.remove('active');
  271.                 if (activeBtn.previousElementSibling) {
  272.                     activeBtn.previousElementSibling.classList.add('active');
  273.                 } else {
  274.                     btnIndicators[btnIndicators.length - 1].classList.add('active');
  275.                 }
  276.             }
  277.         });
  279.         carouselControlNext.addEventListener('click', () => {
  280.             let activeBtn = document.querySelector('.btn-indicator.active');
  281.             if (activeBtn.classList.contains('active')) {
  282.                 activeBtn.classList.remove('active');
  283.                 if (activeBtn.nextElementSibling) {
  284.                     activeBtn.nextElementSibling.classList.add('active');
  285.                 } else {
  286.                     btnIndicators[0].classList.add('active');
  287.                 }
  288.                 return;
  289.             }
  290.         });
  291.     </script>
  292. {% endblock %}