hodnoceni

by Petr Haluza

HTML

<div class="demo">

<div class="review-box">

  <div class="review-summary">
    <div class="review-summary-value">4,8</div>
    <div class="review-stars" data-stars="5"></div>
    <div class="review-summary-count">hodnotilo <br><span><b>12</b> zákazníků</span></div>
  </div>

  <div class="review-bars">

    <div class="review-bar">
        <div class="review-bar-star">5</div>
        <div class="review-bar-chart">
          <div class="review-bar-chart-line" style="width:75%"></div>
        </div>
        <div class="review-bar-count">50x</div>
    </div>

    <div class="review-bar">
        <div class="review-bar-star">4</div>
        <div class="review-bar-chart">
          <div class="review-bar-chart-line" style="width:25%"></div>
        </div>
        <div class="review-bar-count">10x</div>
    </div>

    <div class="review-bar">
        <div class="review-bar-star">3</div>
        <div class="review-bar-chart">
          <div class="review-bar-chart-line" style="width:5%"></div>
        </div>
        <div class="review-bar-count">3x</div>
    </div>
    
    <div class="review-bar">
        <div class="review-bar-star">2</div>
        <div class="review-bar-chart">
          <div class="review-bar-chart-line" style="width:1%"></div>
        </div>
        <div class="review-bar-count">1x</div>
    </div>
    
    <div class="review-bar">
        <div class="review-bar-star">1</div>
        <div class="review-bar-chart">
          <div class="review-bar-chart-line" style="width:0%"></div>
        </div>
        <div class="review-bar-count">0x</div>
    </div>    
  </div><!--/review-bars -->

</div><!-- /review-box -->



<div class="new-review">
<form>
  <div>
    <input type="text">
    <input type="text">
    <textarea></textarea>
  </div>

  <div class="rating-card">
    <div class="rating-bar">
      <input type="radio" name="rating" id="rating-5">  <label for="rating-5"></label>
      <input type="radio" name="rating" id="rating-4">  <label...

CSS

* {box-sizing: border-box}
body {background:#eee; font: 14px arial}
.demo {width:360px;}

/* hodnocení a recenze */

/* shrnutí hodnocení */
.review-box {display:flex;background-color: #fff;padding:1em; margin: 0 0 1.5em}

.review-summary {display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 2em 0 0;}
.review-summary-value {font-size:2em;}
.review-stars{width: 5em; height: 1.5em; background-repeat: repeat-x; background-position: center left; background-size: 1em; }
.review-stars[data-stars="5"] {width:5em}
.review-stars[data-stars="4"] {width:4em}
.review-stars[data-stars="3"] {width:3em}
.review-stars[data-stars="2"] {width:2em}
.review-stars[data-stars="1"],
.review-stars[data-stars="0"],
.review-stars:not([data-stars]){display:none}

.review-summary-count {font-size:.85em;}
.review-summary-count span {white-space:nowrap}

.review-bars {width:100%; } 
.review-bar { display:flex; align-items: center; gap:5px}
.review-bar-star { width: 1.25em; height: 1.25em; background-repeat: no-repeat; background-position: center right; background-size: 1em; display: flex; align-items: center; padding-right: 2em;}
.review-bar-chart { background-color: #f3f3f3; width: 100%; height: 1em; border-radius: .5em}

.review-bar-chart-line{ height:100%;  border-radius: .5em; background: #cdeb8e; background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cdeb8e), color-stop(100%, #a5c956)); background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); background: -o-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); background: -ms-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); background: linear-gradient(to bottom, #cdeb8e 0%, #a5c956 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cdeb8e', endColorstr='#a5c956', GradientType=0)}
.review-bar-count { width: 2.5em; font-size:.85em}
/* /shrnutí hodnocení */

/* list recenzí */
.review-list...