Hoe te maken: klantbeoordeling

Leer hoe je responsieve klantbeoordelingen kunt maken met CSS.

Klantbeoordelingen worden meestal gebruikt om mensen te laten weten wat anderen van je of je product vinden.

Avatar

Chris Fox. CEO bij Mighty Schools.

John Doe heeft ons gered van een web ramp.

Avatar

Rebecca Flex. CEO bij Bedrijf.

Niemand is beter dan John Doe.

Avatar

Julia Roberts. Acteur.

Liefheeft Johnny Boy.

Try it yourself

Hoe de stijl van klantbeoordelingen in te stellen

Eerste stap - Voeg HTML toe:

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO bij Mighty Schools.</p>
  <p>Bill Gates heeft ons gered van een web ramp.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> CEO bij Bedrijf.</p>
  <p>Niemand is beter dan Bill Gates.</p>
</div>

Tweede stap - Voeg CSS toe:

/* Stel de stijl van de container in met ronde hoeken, een grijs achtergrond en enige binnen- en buitendiensten */
.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}
/* Maak de float in de container op */
.container::after {
  content: "";
  clear: both;
  display: table;
}
/* Laat de afbeeldingen in de container naar links floaten. Voeg een rechteruitsteeksel toe en stel de afbeeldingsstijl in op ronde */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}
/* Verhoog de lettergrootte van de span-elementen */
.container span {
  font-size: 20px;
  margin-right: 15px;
}
/* Voeg een media query toe om een responsieve lay-out te realiseren. Dit zorgt ervoor dat de tekst en afbeeldingen in de container centraal komen te staan */
@media (max-width: 500px) {
  .container {
    text-align: center;
  }
  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}

Try it yourself