Jak tworzyć: Ocena użytkownika

Jak utworzyć kartę oceny użytkownika

Krok 1 - Dodaj HTML:

<!-- Dodaj bibliotekę ikon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="heading">Ocena użytkownika</span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<p>średnia ocena 4.1 na podstawie 254 recenzji.</p>
<hr style="border:3px solid #f1f1f1">
<div class="row"></div>
  <div class="side"></div>
    <div>5 gwiazdek</div>
  </div>
  <div class="middle"></div>
    <div class="bar-container"></div>
      <div class="bar-5"></div>
    </div>
  </div>
  <div class="side right">
    <div>150</div>
  </div>
  <div class="side"></div>
    <div>4 gwiazdki</div>
  </div>
  <div class="middle"></div>
    <div class="bar-container"></div>
      <div class="bar-4"></div>
    </div>
  </div>
  <div class="side right">
    <div>63</div>
  </div>
  <div class="side"></div>
    <div>3 gwiazdki</div>
  </div>
  <div class="middle"></div>
    <div class="bar-container"></div>
      <div class="bar-3"></div>
    </div>
  </div>
  <div class="side right">
    <div>15</div>
  </div>
  <div class="side"></div>
    <div>2 gwiazdki</div>
  </div>
  <div class="middle"></div>
    <div class="bar-container"></div>
      <div class="bar-2"></div>
    </div>
  </div>
  <div class="side right">
    <div>6</div>
  </div>
  <div class="side"></div>
    <div>1 gwiazdka</div>
  </div>
  <div class="middle"></div>
    <div class="bar-container"></div>
      <div class="bar-1"></div>
    </div>
  </div>
  <div class="side right">
    <div>20</div>
  </div>
</div>

Krok drugi - Dodaj CSS:

* {
  obsługa boków: pudełko;
}
ciało {
  rodzina czcionek: Arial;
  odległość: 0 auto; /* Środkowanie strony */
  maksymalna szerokość: 800px; /* Maksymalna szerokość */
  odległość od krawędzi: 20px;
}
.heading {
  rozmiar czcionki: 25px;
  odległość od prawej: 25px;
}
.fa {
  rozmiar czcionki: 25px;
}
.checked {
  kolor: pomarańczowy;
}
/* Trzykolumnowy układ */
.side {
  unoszenie się: lewo;
  szerokość: 15%;
  odległość od góry: 10px;
}
.middle {
  unoszenie się: lewo;
  szerokość: 70%;
  odległość od góry: 10px;
}
/* Umieść tekst po prawej stronie */
.right {
  wyważenie tekstu: prawo;
}
/* Usuń unoszenie się po kolumnach */
.row:after {
  zawartość: "";
  wyświetl: tabela;
  wyczyść: oba;
}
/* Kontener pasków */
.bar-container {
  szerokość: 100%;
  kolor tła: #f1f1f1;
  wyważenie tekstu: środek;
  kolor: biały;
}
/* Oddzielne paski */
.bar-5 {szerokość: 60%; wysokość: 18px; kolor tła: #04AA6D;}
.bar-4 {szerokość: 30%; wysokość: 18px; kolor tła: #2196F3;}
.bar-3 {szerokość: 10%; wysokość: 18px; kolor tła: #00bcd4;}
.bar-2 {szerokość: 4%; wysokość: 18px; kolor tła: #ff9800;}
.bar-1 {szerokość: 15%; wysokość: 18px; kolor tła: #f44336;}
/* Responsywna rozkład – kolumny są układane jeden nad drugim zamiast równolegle */
@media (maksymalna szerokość: 400px) {
  .side, .middle {
    szerokość: 100%;
  }
  /* Ukryj prawą kolumnę na małych ekranach */
  .right {
    display: none;
  }
}

Spróbuj sam