Danesi Carlo. Professore universitario.

Ho sempre usato questa applicazione e la trovo eccellente.

Codice HTML

<div class="testimonianza">
 <img src="http://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>

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; } }