Testimonianze

Danesi Carlo. Professore universitario.
Ho sempre usato questa applicazione e la trovo eccellente.
Codice HTML
<div class="testimonianza"> <img src="https://www.puntoinformaticofree.it/guida_css/resources/foto/avatar.jpg" alt="Avatar" style="width:90px"> <p><span>Danesi Carlo.</span> Professore universitario.</p> <p>Ho sempre usato questa applicazione e la trovo eccellente.</p> </div>
Codice CSS
/* Style the container with a rounded border, grey background and some padding and margin */ .testimonianza { border: 2px solid #ccc; background-color: #eee; border-radius: 5px; padding: 16px; margin: 16px 0; }/* Clear floats after containers */ .testimonianza::after { content: ""; clear: both; display: table; }
/* Float images inside the container to the left. Add a right margin, and style the image as a circle */ .testimonianza img { float: left; margin-right: 20px; border-radius: 50%; }
/* Increase the font-size of a span element */ .testimonianza span { font-size: 20px; margin-right: 15px; }
/* Add media queries for responsiveness. This will center both the text and the image inside the container */ @media (max-width: 500px) { .testimonianza { text-align: center; }
.testimonianza img { margin: auto; float: none; display: block; } }