Sustainable mountain resort design integrating modern luxury with environmental consciousness.
[!TIP] Cuándo las imágenes y backgrounds no se ven, a veces basta hacer
git pushpara que se vea localmente.
[!TIP] Si sigue sin verse suele corregirse si borramos los datos de navegación.
[!TIP] Por último limpiar el cache con
bundle exec jekyll clean
estructura y dentro de ella hay dos archivos
desarrollo.md: Se irán detallando los pasos a seguir para generar el sitio web.estructura.md: Indica la estructura guía que tendrá el sitio web.Eliminamos archivos innecesarios para el desarrollo del sitio web, como por ejemplo los archivos de demostración que vienen con el tema. Solo nos quedamos:
.
├── 📁_authors
├── 📁 _data
├── 📁 _includes
├── 📁 _layouts
├── 📁 _posts
├── 📁 _projects
├── 📁 _sass
├── 📁 _site
├── 📁 .jekyll-cache
├── 📁 assets
├── 📁 docs
├── 📁 estructura
├── 📁 scripts
├── 📄 _config.yml
├── 📄 404.md
├── 📄 demo32.md
├── 📄 Gemfile
├── 📄 Gemfile.lock
├── 📄 package-lock.json
├── 📄 package.json
├── 📄 Rakefile
├── 📄 README.md
├── 📄 search-data.json
└── 📄 search.html
13 directories, 11 files
Para inicializar el repositorio en GitHub hubo que modificar el archivo _config.yml:
baseurl: "/yair_webpage"
url: "https://memochuz.github.io/"
En la carpeta de _includes/helpers modificamos el archivo styles.html:
Hace referencia a un archivo que no existe
<link rel="stylesheet" href="/assets/css/styles.css">
Hay que cambiar styles.css por style.css
Problema en rutas relativas, doble comillas para los paths:
<link rel="stylesheet" href="/assets/css/plugins.css">
Debemos cambiar las dobles comillas por apostrofes:
También debemos cambiar como se llaman los estilos de color_scheme, custome_color, font_scheme y custome_font porque no se llamaban correctamente (error de sintaxis)
<!-- corrected version: -->
<link rel="shortcut icon" href="/assets/img/svg/cantarito.svg" />
<link rel="stylesheet" href="/assets/css/plugins.css">
<link rel="stylesheet" href="/assets/css/style.css">
<!-- corrected version: -->
<link rel="stylesheet" type="text/css" href="/assets/css/colors/yellow.css">
<link rel="stylesheet" type="text/css" href="/assets/css/fonts/space.css">
Algunas cosas para entender el código anterior:
<link>: A diferencia de los enlaces normales <a>, esta etiqueta no es para que el usuario haga clic, sino para que el navegador descargue herramientas necesarias para el funcionamiento del sitio.
rel="stylesheet": Es el atributo más crítico. Le da la instrucción al navegador de: “Lee este archivo y aplica sus reglas de diseño a esta página”.
type="text/css”: Aunque es opcional en HTML5, sirve como una confirmación técnica de que el archivo contiene texto plano destinado a ser CSS.
href: En tu caso, usas una ruta inteligente:
/assets/css/colors/space.css
Esto permite que, si cambias el color en el Front Matter (por ejemplo a primary o aqua), la etiqueta busque automáticamente el archivo correcto en la carpeta de activos.
En la carpeta de _includes/helpers modificamos el archivo scripts.html:
Hay modificar correctamente las rutas relativas, mismo problema que es styles.html
<!-- corrected version: -->
<script src="/assets/js/bootstrap.bundle.js"></script>
<script src="/assets/js/plugins.js"></script>
<script src="/assets/js/theme.js"></script>
demo32.md se modificó para que:
/. Esto hace que el sitio web se muestre al ingresar a https://memochuz.github.io/yair_webpage/ sin necesidad de agregar /demo32/ al final de la URL. title: Lindo Trago
permalink: /
</section>
<section class="">
Sustainable mountain resort design integrating modern luxury with environmental consciousness.
Sustainable mountain resort design integrating modern luxury with environmental consciousness.
Sustainable mountain resort design integrating modern luxury with environmental consciousness.
Sustainable mountain resort design integrating modern luxury with environmental consciousness.
Sustainable mountain resort design integrating modern luxury with environmental consciousness.
Sustainable mountain resort design integrating modern luxury with environmental consciousness.
</section>
<section class="">
</section>
<section class="">
</section>
```
La sección hero, del archivo demo32.md, se modificó para que el fondo tenga el nuevo gradiente y en vez de texto muestre los logos:
bg_class # Hero Section
hero:
bg_class: "wrapper gradient-12 bg-lines"
title_tag: "h1"
buttons:
- label: "Contáctanos"
url: "#"
class: "btn btn-lg btn-white"
logo_hero: "/assets/img/svg/logo_3.svg"
frase_hero: "/assets/img/svg/frase.svg"
logo_hero_cel: "/assets/img/svg/logo_movil.svg" # Nuevo logo para celular
Para ver el include hero.html vayamos más abajo en el documento, y veamos que problemas nos habíamos encontrado.
La sección video, del archivo demo32.md, se modificó para que el fondo tenga el nuevo gradiente y en cambiamos las rutas:
bg_class # Video Section
video:
bg_class: "wrapper gradient-13 bg-lines"
video_url: "/assets/media/cantarito_video.mp4"
poster: "/assets/img/photos/video_portada.png"
Para ver el include vayamos más abajo en el documento, y veamos que problemas nos habíamos encontrado.
about y de values se modificaron así:
main_title_class: se puso letras amarillas y observamos que text-primary no era amarillo y lo cambiamos por text-yellow.values: Se agregó la variable icon_path en los items para las imágenes de los númerosbg_class # About Section
about:
bg_class: "wrapper gradient-10"
title_tag: "Sobre el Servicio"
# text-primary ahorita es azul, lo cambiamos a amarillo
title_class: "fs-16 text-uppercase text-yellow mb-3"
main_title: "Nos encargamos de que brindes, disfrutes y recuerdes"
main_title_class: "display-3 mb-5 text-yellow"
# Agregamos text-yellow
text: "Llevamos la coctelería a tro nivel con un servicio completo, profesional y personalizado para que tu evento sea inolvidable."
counters:
- count: "99.7%"
text: "Satisfacción de Clientes"
- count: "500+"
text: "Eventos Realizados"
images:
- image: "/assets/img/photos/yair_medium_2.png"
image2x: "/assets/img/photos/yair_medium_2.png"
- image: "/assets/img/photos/yair_medium.png"
image2x: "/assets/img/photos/yair_medium.png"
- image: "/assets/img/photos/yair_large.png"
image2x: "/assets/img/photos/yair_large.png"
# Values Section # agregamos icon_path
values:
items:
- icon_path: "/assets/img/svg/uno.svg"
title: Barra móvil elegante
text: Se adapta a cualquier espacio.
- icon_path: "/assets/img/svg/dos.svg"
title: Mixólogo profesional
text: Coctelería de autor de alto nivel.
- icon_path: "/assets/img/svg/tres.svg"
title: Ingredientes premium
text: Insumos frescos de temporada.
- icon_path: "/assets/img/svg/cuatro.svg"
title: Montaje completo incluido
text: Tú solo disfruta del evento.
- icon_path: "/assets/img/svg/cinco.svg"
title: Servicio a domicilio
text: Llevamos la experiencia del bar directamente a tu puerta.
services se modificará de la siguiente manera:
bg_class services:
bg_class: "wrapper gradient-14"
title_tag: "Eventos"
title_class: "fs-16 text-uppercase text-white mb-3"
main_title: "A continuación, te presentamos los conceptos que hemos diseñado para cada ocasión."
main_title_class: "display-3 text-white mb-10"
service_items:
- icon: "/assets/img/svg/mimosa.svg"
title: Bodas
text: Creamos una atmósfera de elegancia con una selección de Gins botánicos y Mimosas vibrantes para el brindis, asegurando que cada detalle sea tan especial como tu gran día.
- icon: "/assets/img/svg/cantarito.svg"
title: Cumpleaños
text: ¡La barra se llena de energía! Desde Mojitos clásicos hasta Cantaritos tradicionales, personalizamos el menú para que refleje tu personalidad favorita.
- icon: "/assets/img/svg/mezcalita.svg"
title: Eventos Corporativos
text: Sofisticación y networking. Ofrecemos catas de Whiskey de etiqueta y Mezcalitas de autor, ideales para cerrar negocios o celebrar logros de equipo con distinción.
- icon: "/assets/img/svg/cuba.svg"
title: Quince Años
text: Una explosión de color y sabor. Diseñamos versiones con y sin alcohol de nuestras bebidas estrella, además de barras temáticas que se convierten en el spot favorito de los invitados.
- icon: "/assets/img/svg/gin.svg"
title: Baby Showers
text: Momentos dulces y relajados. Destacamos nuestras Mimosas (con opciones mocktail) y bebidas refrescantes que acompañan perfectamente la calidez de esta celebración.
- icon: "/assets/img/svg/cerveza.svg"
title: Fiestas y Eventos Personalizados Management
text: ¿Tienes una idea loca o un tema específico? Si tú lo sueñas, nosotros lo mezclamos. Desde una barra exclusiva de Cervezas artesanales hasta coctelería temática diseñada desde cero para tu marca o concepto
La sección de testimonials se modificará de la siguiente manera:
bg_class # Testimonials Section
testimonials:
# cambiamos el card_bg_class
card_bg_class: "gradient-12 bg-lines"
La sección de galeria no existía y se creo, tomando de referencia las otras secciones:
# Galería Section
galeria:
bg_class: "wrapper gradient-11"
title_tag: "Galería"
title_class: "fs-16 text-uppercase text-white mb-3"
main_title: "Nuestra galería es un recorrido visual por los momentos que hemos tenido el honor de acompañar."
main_title_class: "display-3 text-white mb-10"
La sección de footeren el front matter quedó así:
# Footer
footer:
style: "dark"
text_inverse: true
y el la inclusión del include así
```markdown
```
_dataEl archivo _data/theme.yml se modificó y a continuación ponemos el archivo final:
# General Settings
site_name: Lindo Trago
title: "Coctelería de Autor"
description: >- # this means to ignore newlines until "baseurl:"
Lindo Trago es una barra de bebidas para eventos que ofrece experiencias únicas a través de coctelería profesional y atención personalizada.
color_scheme: yellow
font_scheme: space
# Sitewide Logo
logo_1x: "/assets/img/svg/cantarito.svg"
logo_2x: "/assets/img/svg/margarita.svg"
black_logo_1x: "/assets/img/svg/cuba.svg"
black_logo_2x: "/assets/img/svg/whiskey_small_black.svg" # menu scroll
light_logo_1x: "/assets/img/svg/tequila.svg"
light_logo_2x: "/assets/img/svg/whiskey_medium.svg" # menu inicio
Modificamos el footer
address: ''
address_01: ''
phone_number: "55 5559 3616"
phone_number2: "55 1493 7814"
email: "lindo_trago@gmail.com"
email_2: ""
copyright: "© 2025 Guillermo Gachuz"
copyright_text: "Todos los derechos reservados"
El archivo _data/testimonials.json se modifican las siguientes entradas nada más. Las otras entradas son para dinstintas demos:
"name": "Mariana Dannel",
"position": "Cliente Boda",
"avatar_image": "/assets/img/photos/dannel.jpg",
"avatar_image2x": "/assets/img/photos/dannel.jpg",
"quote": "¡Increíble experiencia! Los tragos estuvieron buenísimos, se nota que usan ingredientes de calidad y están súper bien equilibrados.",
"ratings": 5,
El archivo _data/galeria.yml se creo y tiene la siguiente estructura:
# _data/galeria.yml
items:
- image: "assets/img/photos/yair_medium.png"
alt: "Yair Medium"
- image: "assets/img/photos/yair_medium_2.png"
alt: "Yair Medium 2"
El archivo _data/footer.yml se modificó así:
# Cambié a dark PERO NO VEO QUE FUNCIONE
bg_color: bg-navy # Options: bg-light, bg-dark, bg-navy, bg-primary, bg-soft-primary, etc.
_sass y _assets/cssEl archivo _sass/_variables.scss se modificó para agregar gradientes del 10 al 13 con los siguientes colores:
$gradient-10: linear-gradient(180deg, rgb(0, 0, 0), rgb(54, 56, 58)) !default;
$gradient-11: linear-gradient(180deg, #CAA45B, #EAE3D2) !default;
$gradient-12: linear-gradient(180deg, rgb(0,0,0), rgb(202,164,91)) !default;
$gradient-13: linear-gradient(180deg, #CAA45B, #000000) !default;
$gradient-14: linear-gradient(180deg, rgb(54, 56, 58) ,rgb(0, 0, 0)) !default;
$gradients: (
gradient-1: $gradient-1,
gradient-2: $gradient-2,
gradient-3: $gradient-3,
gradient-4: $gradient-4,
gradient-5: $gradient-5,
gradient-6: $gradient-6,
gradient-7: $gradient-7,
gradient-8: $gradient-8,
gradient-9: $gradient-9,
gradient-10: $gradient-10,
gradient-11: $gradient-11,
gradient-12: $gradient-12,
gradient-13: $gradient-13,
gradient-14: $gradient-14,
) !default;
[!Warning] Los gradientes 12 y 13 no se están aplicando correctamente, a pesar de tener la misma estructura que los gradientes 10 y 11 (que sí funcionan). Sospecho que se trata de un problema intermitente durante la compilación, ya que a veces parece funcionar por azar. Mis siguientes pasos serán depurar el caché de Jekyll y del navegador para descartar problemas de persistencia. Dado que el código es un ‘copy-paste’ directo del gradiente 10, no debería haber errores de sintaxis en este archivo; es posible que haya un conflicto de compilación subyacente en otra parte del proyecto.
[!Success] Si subo a github los cambios y luego vuelvo a correr local si los reconoce
_includes/components/sections/demo32hero.htmlEl include hero.htmlquedó así
<section class="">
<div class="container pt-17 pt-md-19 pb-21 pb-lg-23 text-center">
<div class="row">
<div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto" data-cues="zoomIn" data-group="page-title" data-interval="-200" data-delay="500">
<!-- Cambiamos el estilo para que los tamaños y las imagenes sean distintas para celulares y pantallas medianas -->
<style>
.logo-hero-responsive {
height: auto;
display: block;
margin: 0 auto;
}
/* --- Pantallas Grandes (Desktop) --- */
@media (min-width: 768px) {
.logo-hero-responsive {
width: 66.6%;
}
.hide-on-desktop {
display: none !important;
}
}
/* --- Pantallas Pequeñas (Móvil) --- */
@media (max-width: 767px) {
.logo-hero-responsive {
width: 80% !important;
}
.hide-on-mobile {
display: none !important;
}
}
</style>
<!-- botón de contacto -->
<div class="d-flex justify-content-center mb-4" data-cues="zoomIn" data-group="page-title-buttons" data-delay="500">
</div>
</div>
</div>
</div>
</section>
> [!WARNING]
> Teníamos un problema con la animación del include `hero.html` porque el título principal no se muestra (ahora tenemos imágenes pero la solución es la misma). Si quitamos esta parte si aparece el contenido, pero sin animación:
>
> `<div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto" data-cues="zoomIn" data-group="page-title" data-interval="-200" data-delay="500">`
>
> es quitar desde `data-cues` hasta `data-delay`.
**¿Qué significan esos atributos?**
* `data-cues`: Define el tipo de animación (zoomIn, fadeIn, slideIn).
* `data-group`: Agrupa varios elementos para que se animen uno tras otro (cascada).
* `data-interval`: El tiempo (en milisegundos) entre la animación de un elemento y el siguiente dentro del grupo. El valor -200 que tienes es inusual; normalmente son valores positivos (ej. 200).
* `data-delay`: Cuánto tiempo espera antes de empezar la primera animación.
> [!SUCCESS]
> Arreglamos `styles.html` y `scripts.html`, lo hablamos en los puntos siguientes y ya aparecen las animaciones. Podemos dejar la sección de `hero.html` como originalmente estaba (nos quedamos con la modificada de imágenes)
video.htmlEl include video.htmlquedó así una vez que cambiamos las rutal a rutas relativas
<section class="">
<div class="container pt-15 pt-md-17 position-relative">
<figure class="rounded mt-n21 mt-lg-n23 position-relative" data-cues="fadeIn" data-delay="250">
<a href="" class="btn btn-circle btn-white btn-play ripple mx-auto position-absolute" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox>
<i class="icn-caret-right"></i></a>
<video class="w-100 rounded caption-overlay d-block"
poster=""
src=""
autoplay loop playsinline muted>
</video>
</figure>
</div>
</section>
[!WARNING] Tenemos un problema con la animación del include
video.htmlporque el video principal no se muestra. Si quitamos esta parte si aparece el contenido, pero sin animación:
<figure class="rounded mt-n21 mt-lg-n23 position-relative" data-cues="fadeIn" data-delay="250">es quitar desde
data-cueshastadata-delay.
[!SUCCESS] Arreglamos
styles.htmlyscripts.html, lo hablamos en los puntos siguientes y ya aparecen las animaciones. Podemos dejar la sección devideo.htmlcomo originalmente estaba y solamente modificar las rutas relativas
[!WARNING] Ya se ve el video en github, curiosamente localmente se ve el poster pero no carga el video. Según gemini: A veces, el servidor que levanta
bundle exec rake serveno entrega archivos pesados como un.mp4de la misma forma que un servidor de producción.
about.htmlEl include about.htmlquedó así:
text-whitesvg de los números. Explicamos unas variables:
w-100 y h-100: Esto obliga a la imagen a ocupar todo el espacio del contenedor w-13 h-13 que ya tenías definido.
<div class="icon btn btn-block pe-none btn-soft-primary me-4 w-13 h-13 p-2">
Así quedó al final:
<section class="">
<div class="container py-15 py-md-17 position-relative">
<div class="row gy-10 gy-sm-13 gx-md-8 gx-xl-12 align-items-center mb-10 mb-md-12">
<div class="col-lg-6">
<div class="row gx-md-5 gy-5">
<div class="col-md-6">
<!-- Corregimos las rutas relativas -->
<figure class="rounded">
<img src="" srcset=" 2x" alt="">
</figure>
</div>
<!--/column -->
<div class="col-md-6 align-self-end">
<figure class="rounded"><img src="" srcset=" 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-12">
<figure class="rounded mx-md-5"><img src="" srcset=" 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-6">
<h2 class=""></h2>
<h3 class=""></h3>
<!-- Cambiamos el texto a blanco -->
<p class="mb-6 text-white"></p>
<div class="row align-items-center counter-wrapper gy-6">
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row gx-lg-8 gx-xl-12 gy-6 mb-7 mb-md-9">
<!-- Cambiamos para incluir imágenes -->
</div>
<!--/.row -->
<div class="text-center"><a href="#" class="btn btn-yellow">Más detalles</a></div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
services.htmlEl include services.htmlquedó así:
<section class="">
<div class="container py-15 py-md-17">
<div class="row text-center">
<div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto">
<h2 class=""></h2>
<h3 class=""></h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row gx-lg-8 gx-xl-12 gy-9">
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
testimonials.htmlEl include services.htmlquedó así:
testimonial.image cuando era testimonial.avatar_image<section class="wrapper ">
<!-- Modificamos pt-md-0 por pt-md-5 para agregar mas espacio arriba y no quede junto a eventos -->
<div class="container py-15 pt-md-5 pb-md-17 text-center">
<div class="row text-center">
<div class="col-xl-9 mx-auto">
<div class="card shadow-lg mt-md-n16 mb-15 mb-md-17">
<div class="card-body p-9 p-xl-12">
<div class="row gx-0">
<div class="col-xxl-9 mx-auto">
<div class="swiper-container dots-closer mb-6" data-margin="30" data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span class="ratings five mb-3"></span>
<blockquote class="border-0 fs-lg mb-2">
<p>"¡Increíble experiencia! Los tragos estuvieron buenísimos, se nota que usan ingredientes de calidad y están súper bien equilibrados."</p>
<div class="blockquote-details justify-content-center">
<!-- Cambiammos .image (no existe) por avatar_image -->
<img class="rounded-circle w-12" src="/assets/img/photos/dannel.jpg" srcset="/assets/img/photos/dannel.jpg 2x" alt="" />
<div class="info">
<h5 class="mb-1">Mariana Dannel</h5>
<p class="mb-0">Cliente Boda</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<span class="ratings five mb-3"></span>
<blockquote class="border-0 fs-lg mb-2">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details justify-content-center">
<!-- Cambiammos .image (no existe) por avatar_image -->
<img class="rounded-circle w-12" src="/assets/img/avatars/te2.webp" srcset="/assets/img/avatars/te2@2x.webp 2x" alt="" />
<div class="info">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<span class="ratings five mb-3"></span>
<blockquote class="border-0 fs-lg mb-2">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details justify-content-center">
<!-- Cambiammos .image (no existe) por avatar_image -->
<img class="rounded-circle w-12" src="/assets/img/avatars/te3.webp" srcset="/assets/img/avatars/te3@2x.webp 2x" alt="" />
<div class="info">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<span class="ratings five mb-3"></span>
<blockquote class="border-0 fs-lg mb-2">
<p>"Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien."</p>
<div class="blockquote-details justify-content-center">
<!-- Cambiammos .image (no existe) por avatar_image -->
<img class="rounded-circle w-12" src="/assets/img/avatars/te4.webp" srcset="/assets/img/avatars/te4@2x.webp 2x" alt="" />
<div class="info">
<h5 class="mb-1">Coriss Juker</h5>
<p class="mb-0">Market Analyst</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<span class="ratings five mb-3"></span>
<blockquote class="border-0 fs-lg mb-2">
<p>"Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus."</p>
<div class="blockquote-details justify-content-center">
<!-- Cambiammos .image (no existe) por avatar_image -->
<img class="rounded-circle w-12" src="/assets/img/avatars/te5.webp" srcset="/assets/img/avatars/te5@2x.webp 2x" alt="" />
<div class="info">
<h5 class="mb-1">Jackie Sanders</h5>
<p class="mb-0">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<span class="ratings five mb-3"></span>
<blockquote class="border-0 fs-lg mb-2">
<p>"Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue."</p>
<div class="blockquote-details justify-content-center">
<!-- Cambiammos .image (no existe) por avatar_image -->
<img class="rounded-circle w-12" src="/assets/img/avatars/te6.webp" srcset="/assets/img/avatars/te6@2x.webp 2x" alt="" />
<div class="info">
<h5 class="mb-1">Laura Widerski</h5>
<p class="mb-0">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!--/.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center">
<h2 class=""></h2>
<h3 class=""></h3>
<a href="" class=""></a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
galeria.htmlEste include no existía, pero se creo de la documentación y se usó un archivo galeria.yml en _data para mejorar la inclusión de imágenes. Quedó así:
<!-- Factorizado para usar un archivo yml en _data -->
<section class="">
<div class="container py-15 py-md-17">
<div class="row text-center">
<div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto mb-10">
<h2 class=""></h2>
<h3 class=""></h3>
</div>
</div>
<div class="swiper-container swiper-thumbs-container dots-over" data-margin="10" data-dots="false" data-nav="true" data-thumbs="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="rounded">
<img src="/assets/img/photos/yair_medium.png" alt="Yair Medium" />
<a class="item-link" href="/assets/img/photos/yair_medium.png" data-glightbox data-gallery="product-group">
<i class="uil uil-focus-add"></i>
</a>
</figure>
</div>
<div class="swiper-slide">
<figure class="rounded">
<img src="/assets/img/photos/yair_medium_2.png" alt="Yair Medium 2" />
<a class="item-link" href="/assets/img/photos/yair_medium_2.png" data-glightbox data-gallery="product-group">
<i class="uil uil-focus-add"></i>
</a>
</figure>
</div>
</div>
</div>
<div class="swiper swiper-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/assets/img/photos/yair_medium.png" class="rounded" alt="Yair Medium thumb" />
</div>
<div class="swiper-slide">
<img src="/assets/img/photos/yair_medium_2.png" class="rounded" alt="Yair Medium 2 thumb" />
</div>
</div>
</div>
</div>
</div>
</section>
[!TIP] Checar el tamaño de las imágenes que usa el include para decirle al cliente que tamaños necesitas.
components/navbar/navbar.htmlNecesitabamos cambiar el tamaño de las imágenes de la barra de navegación, y que fuera dinámico, si estamos en un celular que muestre un tamaño y si estamos en una laptop otro.
Estos fueron los cambios:
<style>
/* Clase para controlar el tamaño responsivo de los logos */
.logo-responsive {
width: 20% !important; /* Tamaño en Laptop/Desktop */
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Ajuste para celulares (pantallas menores a 768px) */
@media (max-width: 767px) {
.logo-responsive {
width: 20% !important; /* Tamaño en Móvil */
}
}
</style>
<img class="logo-responsive" src="/assets/img/svg/cantarito.svg"
srcset="/assets/img/svg/margarita.svg 2x" alt="" />
components/footer y components/footer/partials