Los testimonios son recomendaciones escritas de los usuarios y, a menudo, se ven en una sección separada de una página web. En este artículo, aprenderemos cómo agregar testimonios receptivos atractivos en nuestra página web.
Por lo general, un testimonio contiene el nombre del usuario, una imagen, su identidad (opcional) y, lo que es más importante, el texto citado.
Adición de HTML:
agregaremos el nombre del usuario, la imagen de perfil, su identidad y la mayoría de sus textos citados
<div class="container"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190921104515/download18.png" alt="" width="318" height="159" class="aligncenter size-full wp-image-1271664" alt="Avatar" style="width:90px" />" <p><span>Chris Doe</span>, CEO at XYZ.</p> <p>"A Computer Science graduate who likes to make things simpler. When he's not working, you can find him surfing the web, learning facts, tricks and life hacks. He also enjoys movies in his leisure time."</p> </div> <div class="container"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190921104515/download18.png" alt="" width="318" height="159" class="aligncenter size-full wp-image-1271664" alt="Avatar" style="width:90px" /> <p><span>John Doe</span> CEO at ABC Company.</p> <p>"A Computer Science graduate who likes to make things simpler. When he's not working, you can find him surfing the web, learning facts, tricks and life hack. He also enjoys movies in his leisure time."</p> </div>
Agregando CSS:
.container {
border: 2px solid #ccc;
background-color: #eee;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
}
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
/* Adding media queries for responsiveness.
@media (max-width: 500px) {
.container {
text-align: center;
}
.container img {
margin: auto;
float: none;
display: block;
}
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<style>
.container {
border: 2px solid #ccc;
background-color: #eee;
border-radius: 5px;
padding: 16px;
margin: 16px 0
}
.container::after {
content: "";
clear: both;
display: table;
}
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
.container span {
font-size: 20px;
margin-right: 15px;
}
@media (max-width: 500px) {
.container {
text-align: center;
}
.container img {
margin: auto;
float: none;
display: block;
}
}
</style>
</head>
<body>
<h2>Testimonials</h2>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190921104515/download18.png"
alt=""
width="318"
height="159"
class="aligncenter size-full wp-image-1271664"
alt="Avatar"
style="width:90px" />
<p><span>Chris Doe</span>, CEO at XYZ</p>
<p>"A Computer Science graduate who likes to make things simpler.
When he's not working, you can find him surfing the web, learning facts
, tricks and life hack."</p>
</div>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190921104515/download18.png"
alt=""
width="318"
height="159"
class="aligncenter size-full wp-image-1271664"
alt="Avatar"
style="width:90px" />
<p><span>John Doe</span>, CEO at ABC Company.</p>
<p>"A Computer Science graduate who likes to make things simpler.
When he's not working, you can find him surfing the web,
learning facts, tricks and life hack."</p>
</div>
</body>
</html>
Producción: