Lección: 11 Sección de testimonio de clientes en el SISTEMA VETERINARIO (PHP y MySql) FullStack

11 Sección de testimonio de clientes en el SISTEMA VETERINARIO (PHP y MySql) FullStack

Duración: 8 min

Módulo: 🎨 Fundamentos e Interfaz Pública (Front-End con Bootstrap) Lección 11 de 14

Descripción

🎬 Lección 11: Sección de Testimonios de Clientes (PHP y MySql) FullStack

¡Claro! La Lección 11 se enfoca en añadir una sección de prueba social fundamental: los testimonios de clientes, utilizando una adaptación del componente Carrusel de Bootstrap. 💬

Diseño de la Sección de Testimonios (Prueba Social) 🗣️

Esta lección demuestra cómo reutilizar y adaptar componentes existentes de Bootstrap para crear una nueva sección de contenido. El objetivo es mostrar los comentarios y experiencias positivas de los clientes, lo cual aumenta la credibilidad del sistema veterinario.

Técnicas y adaptaciones clave:

Creación de la Nueva Sección:
- Se añade una nueva sección con la clase CSS .clientes o .testimonios. [01:31]
- Se establece el título "Testimonios de Clientes" centrado para introducir el contenido. [03:16]
Reutilización del Carrusel para Testimonios: 🔄
- El componente Carrusel (.carousel) se copia de la sección del header para ser usado como contenedor de los testimonios.
- Dentro de cada item del carrusel, se crea una fila (Row) que se divide en tres columnas (col-md-4 x 3 = 12 columnas). [02:27]
- Cada columna alberga un Card que representa un testimonio.
Adaptación de las Tarjetas de Testimonio:
- Se eliminan los botones de enlace (<a class="btn...">) de los Cards, ya que los testimonios no requieren redirección, simplificando el diseño para que solo muestre la foto, el nombre y el comentario. [04:59]
- Cada item del carrusel contendrá tres tarjetas de testimonio, que rotarán automáticamente.
Verificación Responsiva:
- Se confirma, utilizando Responsinator, que los tres Cards se apilan correctamente en dispositivos móviles y que el Carrusel de testimonios funciona correctamente en diferentes resoluciones. [06:44]

Con la sección de testimonios implementada, la página principal está casi completa, faltando solo el mapa de ubicación, el formulario de contacto y el footer.

Hilari Web

11 Sección de testimonio de clientes en el SISTEMA VETERINARIO (PHP y MySql) FullStack

Descripción

🎬 Lección 11: Sección de Testimonios de Clientes (PHP y MySql) FullStack

Diseño de la Sección de Testimonios (Prueba Social) 🗣️

Lecciones

Apoya este proyecto