Crear testimonios por código

Tiempo estimado de lectura: 11 minutos

 

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:

<figure class="testimonios">
<figcaption>
<blockquote>
<p>Una web muy recomendable, tiene tutoriales de todo lo que puedas imaginar.</p>
</blockquote>
<h3>Francisco Pérez</h3>
<h4>Diseñador Gráfico</h4>
</figcaption>
</figure>
<figure class="testimonios">
<figcaption>
<blockquote>
<p>Con su ayuda he conseguido hacer la web que quería. Un servicio técnico increíble.</p>
</blockquote>
<h3>Marta Carrión</h3>
<h4>Emprendedora</h4>
</figcaption>
</figure>
<figure class="testimonios">
<figcaption>
<blockquote>
<p>Gracias por no hacerme aprender con prueba y error. Va al grano y te explica lo que funciona.</p>
</blockquote>
<h3>María Castro</h3>
<h4>Emprendedora</h4>
</figcaption>
</figure>
<figure class="testimonios">
<figcaption>
<blockquote>
<p>Siempre aprendo algo nuevo en esta página, ya sea con plugins o con códigos.</p>
</blockquote>
<h3>Lucía Álvarez</h3>
<h4>Administrativo</h4>
</figcaption>
</figure>

¿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 para crear testimonios por código
Código para crear testimonios por código

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:

.testimonios {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
color: #3c3c3c;
display: inline-block;
font-size: 16px;
margin: 35px 7px 10px;
max-width: 300px;
min-width: 250px;
position: relative;
text-align: center;
width: 100%;
background-color: #ffffff;
border-radius: 5px;
border-top: 10px solid #3575d3;
border-bottom: 5px solid #3575d3;
}
.testimonios *,
.testimonios *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
.testimonios figcaption {
padding: 13% 10% 12%;
}
.testimonios h3 {
color: #3c3c3c;
font-size: 20px;
font-weight: 300;
line-height: 24px;
margin: 10px 0 5px;
}
.testimonios h4 {
font-weight: 400;
margin: 0;
opacity: 0.5;
}
.testimonios blockquote {
font-style: italic;
font-weight: 300;
margin: 0 0 20px;
}

¿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íxles (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:

Resultado final de cómo crear testimonios por código
Resultado final de cómo crear testimonios por código


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *