Testimonios por código en tu página web

En esta ocasión vamos a aprender a crear testimonios por código, para ello crearemos la estructura de los mismos con HTML y le daremos una apariencia bonita utilizando CSS.

Código que hemos utilizado

Como hemos dicho anteriormente, en primer lugar crearemos la estructura de los testimonios utilizando código HTML, y posteriormente lo pondremos bonito mediante código CSS.

El código HTML que hemos utilizado es este:

¿Qué es lo que hace este código?

Este código es muy sencillo de entender, simplemente creamos cajas contenedores (la clase testimonios), en las que, los comentarios de nuestros usuarios se escribirán formateados como blockquote (dependiendo del tema saldrán de una forma u otra, pero por lo general, se muestran en cursiva). Por último, se muestra el nombre del comentarista y la profesión del mismo.

Fíjate que creamos una caja por cada comentario que queremos mostrar.

¿Dónde ponemos este código?

Como son testimonios, solo tenemos que crear una página nueva llamada testimonios (o como tú quieras llamarla), y pegar el código en el modo HTML.

Código CSS que vamos a utilizar

Una vez que hemos creado los comentarios, ha llegado el momento de hacer que luzcan bonitos, para ello debemos utilizar código CSS.

En el ejemplo de hoy utilizaremos este código:

¿Qué hace este código?

Lo primero que haremos es crear una caja contenedora para cada testimonio, esta caja tendrá una sombra, un borde de 1 pixel por los laterales, un borde azul de 10 píxeles en la parte superior y de 5 píxeles (también azul), en la parte inferior. El tamaño de la caja es de 300 por 250 píxeles, de color blanco de fondo y el texto centrado.

Después le aplicamos un efecto con unos estilos concretos, paddings para separar los textos de los bordes de la caja, tamaños y colores tanto para los nombres como para las profesiones y por último los estilos para la opinión en sí.

El resultado es el siguiente: