Sådan oprettes: Kundeevaluering

Lær, hvordan man bruger CSS til at skabe responsiv kundeevaluering.

Kundeevalueringer bruges ofte til at lade folk vide, hvad andre synes om dig eller dit produkt.

Avatar

Chris Fox. CEO i Store Skoler.

John Doe reddede os fra en internettokatasstrofe.

Avatar

Rebecca Flex. CEO i Company.

Ingen er bedre end John Doe.

Avatar

Julia Roberts. Skuespiller.

Elsker bare Johnny Boy.

Try it yourself

Sådan indstiller du kundeevalueringens stil

Første trin - Tilføj HTML:

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO i Mighty Schools.</p>
  <p>Bill Gates reddede os fra en webkatastrofe.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> CEO i Company.</p>
  <p>Ingen er bedre end Bill Gates.</p>
</div>

Andet trin - Tilføj CSS:

/* Brug runde kanter, grå baggrund og nogle indre og ydre margener til at sætte beholderens stil */
.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}
/* Ryd floating i beholderen */
.container::after {
  content: "";
  clear: both;
  display: table;
}
/* Flyt billederne til venstre i beholderen. Tilføj højre sidestilling og sæt billedstilen til cirkulær */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}
/* Øg fontstørrelsen på span-elementet */
.container span {
  font-size: 20px;
  margin-right: 15px;
}
/* Tilføj mediequery for at opnå responsiv layout. Dette vil centere teksten og billederne i beholderen */
@media (max-width: 500px) {
  .container {
    text-align: center;
  }
  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}

Try it yourself