Landing page: testimonios
Este apartado es muy común en las landing pages como forma de implementar el boca a boca. Hoy día es muy habitual consultar las opiniones de otros consumidores cuando se asquiere un producto. Los sitios de venta onlline suelen incorporar una sección de opiniones donde los usuarios vierten su experiencia con el producto.
Así que siempre que sea posible es recomendable colocar este apartado. Se puede hacer con ima´gnes, solo texto, con datos del usuario. Todo va a depender de que el clietne de su permiso para poner estos detalles. Por supuesto se deben poner datos reales, cuanto más creíbles mejor.
Este módulo queda como puedes ver aquí
Código HTML
Para este apartado mantengo el esquema de filas: una para cada testimonio. Cada fila va a tener una celda para una imagen y otra para el comentario, con unas imagen de comillas como detalle de diseño.
<article id="testimonios">
<header class="titarticulo"><h1>Lo que dicen nuestros alumnos</h1></header>
<!-- primer testimonio -->
<section class="fila">
<div class="celdas"> <img src="imgs/testimonio1.jpg" width="300" height="300" alt=""/> </div>
<div class="quote"><i class="icon-comillas-abr"></i></div>
<div class="celdas"> Class aptent ... </div>
</section>
<!-- segundo testimonio -->
<section class="fila">
<div class="celdas"> <img src="imgs/testimonio2.jpg" width="300" height="300" alt=""/> </div>
<div class="quote"><i class="icon-comillas-abr"></i></div>
<div class="celdas"> Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. .... </div>
</section>
<!-- tercer testimonio -->
<section class="fila">
<div class="celdas"> <img src="imgs/testimonio3.jpg" width="300" height="300" alt=""/> </div>
<div class="quote"><i class="icon-comillas-abr"></i></div>
<div class="celdas"> Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. </div>
</section>
</article>
Estilo CSS
La estructura visual la completamos con los estilos CSS que colocarán las celdas en fomra de filas, Tendremos una fila por comentario, pero desalineadas verticalmente, en tresbolillo: alternando la alineación derecha - izquierda. Esto se vuelve a hacer con flex-box.
#testimonios{
margin-bottom:80px;
}
#testimonios .fila .celdas{
flex: 0 1 30%;
text-align:center;
}
#testimonios .fila:nth-of-type(odd){
justify-content:flex-end;
}
#testimonios .fila:nth-of-type(even){
justify-content:flex-start;
}
.quote{
font-size:3rem;
text-align:center;
align-self:flex-start;
width:4rem;
height:4rem;
line-height:4rem;
position:relative;
top: -2rem;
background:#f5f8ff;
color:aquamarine;
border-radius:50%;
border: 1px solid lightgray;
border-width: 5px 0 0 0;
}
Como ves he estrechado las filas respecto al ancho total y el elemento decorativo de las comillas lo pongo en position:relative y lo subo por encima de su posición.
Para que sea responsive y se ve bien en pantallas pequeñas solo se necestia con vertir las fila en colmun (felx-direction:colum) y algun otro ajuste para que se vea centrado y ocupando un espacio proporcioanl de la pantalla con paddings laterales.
#testimonios .fila{
flex-direction:column;
}
.quote{
align-self:center;
}
#testimonios .fila .celdas{
flex: 1 0 100%;
text-align:center;
padding:0 16px;
}