Comment créer : avis clients
- Page précédente Écran divisé
- Page suivante Compteur de bloc
Apprenez comment utiliser CSS pour créer des avis clients réactifs.
Les avis clients sont généralement utilisés pour faire connaître les opinions des autres à propos de vous ou de vos produits.
Chris Fox. PDG de Mighty Schools.
John Doe nous a sauvés d'une catastrophe sur le web.
Rebecca Flex. PDG de la société.
Personne n'est mieux que John Doe.
Julia Roberts. Acteur.
Juste aimé Johnny Boy.
Comment définir le style des avis clients
Première étape - Ajoutez HTML :
<div class="container"> <img src="bandmember.jpg" alt="Avatar" style="width:90px"> <p><span>Chris Fox.</span> PDG de Mighty Schools.</p> <p>Bill Gates nous a sauvés d'une catastrophe web.</p> </div> <div class="container"> <img src="avatar_g2.jpg" alt="Avatar" style="width:90px"> <p><span>Rebecca Flex.</span> PDG de la société.</p> <p>Personne n'est meilleur que Bill Gates.</p> </div>
Deuxième étape - Ajoutez CSS :
/* Utilisez des bords arrondis, un fond gris et des marges internes et externes pour définir le style du conteneur */
.container {
border: 2px solid #ccc;
background-color: #eee;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
}
/* Nettoyez le flottement après le conteneur */
.container::after {
content: "";
clear: both;
display: table;
}
/* Faites flotter l'image à gauche dans le conteneur. Ajoutez une marge extérieure droite et mettez le style de l'image en forme circulaire */
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
/* Augmentez la taille de police de l'élément span */
.container span {
font-size: 20px;
margin-right: 15px;
}
/* Ajoutez une requête média pour réaliser un layout responsive. Cela centrera le texte et les images dans le conteneur */
@media (max-width: 500px) {
.container {
text-align: center;
}
.container img {
margin: auto;
float: none;
display: block;
}
}
- Page précédente Écran divisé
- Page suivante Compteur de bloc
