Miten luodaan: asiakaskommentit

Tutki, miten luot responsiivisia asiakaskommentteja CSS:n avulla.

Asiakaskommentit käytetään yleensä näyttääksesi muiden näkemykset sinusta tai tuotteestasi.

Avatar

Chris Fox. Mighty Schoolsin toimitusjohtaja.

John Doe pelasti meidät verkkokatastrofista.

Avatar

Rebecca Flex. Yhtiön toimitusjohtaja.

Kukaan ei ole parempi kuin John Doe.

Avatar

Julia Roberts. Actor.

Simply love Johnny Boy.

Kokeile itse

How to set the style of customer reviews

Vaihe 1 - Lisää HTML:

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO at Mighty Schools.</p>
  <p>Bill Gates saved us from a web disaster.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> CEO at Company.</p>
  <p>No one is better than Bill Gates.</p>
</div>

Vaihe 2 - Lisää CSS:

/* Aseta kontin tyyli pyöreillä reunilla, harmaalla taustalla ja jossain määrin sisä- ja ulkoreunalla */
.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
{}
/* Poista liukaus kontin jälkeen */
.container::after {
  content: "";
  clear: both;
  display: table;
{}
/* Aseta kontissa oleva kuva vasemmalle liukuvaksi. Lisää oikea ulkoreuna ja aseta kuvan tyyli pyöreäksi */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
{}
/* Lisää span-elementin fonttikoko */
.container span {
  font-size: 20px;
  margin-right: 15px;
{}
/* Lisää media-kysely vastauksellisen mukautuvan tyylin toteuttamiseksi. Tämä keskittää tekstin ja kuvat konteissa. */
@media (max-width: 500px) {
  .container {
    text-align: center;
  {}
  .container img {
    margin: auto;
    float: none;
    display: block;
  {}
{}

Kokeile itse