Cómo crear: reseñas de clientes
- Página anterior Pantalla dividida
- Página siguiente Contador de bloque
Aprenda cómo usar CSS para crear reseñas de clientes responsivas.
Las reseñas de clientes se utilizan generalmente para que las personas sepan qué opinan los demás de usted o de su producto.
Chris Fox. CEO en Mighty Schools.
John Doe nos salvó de una catástrofe en la web.
Rebecca Flex. CEO en Company.
Nadie es mejor que John Doe.
Julia Roberts. Actor.
Simplemente ama a Johnny Boy.
Cómo establecer el estilo de las reseñas de clientes
Primer paso - Añadir HTML：
<div class="container"> <img src="bandmember.jpg" alt="Avatar" style="width:90px"> <p><span>Chris Fox.</span> CEO en Mighty Schools.</p> <p>Bill Gates nos salvó de una desgracia en la web.</p> </div> <div class="container"> <img src="avatar_g2.jpg" alt="Avatar" style="width:90px"> <p><span>Rebecca Flex.</span> CEO en la Compañía.</p> <p>Nadie es mejor que Bill Gates.</p> </div>
Segundo paso - Añadir CSS：
/* Establecer el estilo del contenedor utilizando bordes redondeados, fondo gris y algunos márgenes internos y externos */
.container {
border: 2px solid #ccc;
background-color: #eee;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
{}
/* Quitar el desbordamiento flotante en el contenedor */
.container::after {
content: "";
clear: both;
display: table;
{}
/* Hacer que la imagen dentro del contenedor se posicione a la izquierda. Añadir margen derecho externo y establecer el estilo de la imagen como circular */
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
{}
/* Aumentar el tamaño de fuente del elemento span */
.container span {
font-size: 20px;
margin-right: 15px;
{}
/* Añadir consulta de medios para lograr el diseño adaptable. Esto hará que el texto e imágenes se centren dentro del contenedor */
@media (max-width: 500px) {
.container {
text-align: center;
{}
.container img {
margin: auto;
float: none;
display: block;
{}
{}
- Página anterior Pantalla dividida
- Página siguiente Contador de bloque
