In this star rating system design we also provide feedback and review design. we also display user review and message. this feedback page design is also responsive. and supported all the browser. this star rating system with feedback page design create usign html and css. in this demo we can not use any other plugin.

Into star rating system you can display average rating of all feedback. and also you can display star in to progress bar with all star in percentage. and also display half star.

Design of feedback and review you can display user Image who can give you feedback,user name,time,report review,star of feedback and his feedback and review.

We allows to free snippets of customer reviews page design , you can download full code of product review page design layout. Here in this post i will give you example of review page examples snippet and you will get simple code of html, css and jquery. In product testimonial page design snippet i give you three tab with html, css and js, you can easily get code of star rating css demo layout.


<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed" rel="stylesheet"> </head> <body> <div class="main-section"> <div class="hedding-title"><h1>Star Rating System</h1></div> <div class="rating-part"> <div class="average-rating"> <h2>2.5</h2> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i class="fa fa-star-half-o" aria-hidden="true"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <p>Average Rating</p> </div> <div class="loder-ratimg"> <div class="progress"></div> <div class="progress-2"></div> <div class="progress-3"></div> <div class="progress-4"></div> <div class="progress-5"></div> </div> <div class="start-part"> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <span>80%</span><br> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <span>60%</span><br> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <span>40%</span><br> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <span>20%</span><br> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <span>10%</span> </div> <div style="clear: both;"></div> <div class="reviews"><h1>Reviews</h1></div> <div class="comment-part"> <div class="user-img-part"> <div class="user-img"> <img src="/demo/man01.png"> </div> <div class="user-text"> <h4>8 days ago</h4> <p>Tom kok</p> <span>Report</span> </div> <div style="clear: both;"></div> </div> <div class="comment"> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> <div style="clear: both;"></div> </div> <div class="comment-part"> <div class="user-img-part"> <div class="user-img"> <img src="/demo/man02.png"> </div> <div class="user-text"> <h4>30 days ago</h4> <p>Win Rool</p> <span>Report</span> </div> <div style="clear: both;"></div> </div> <div class="comment"> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> <div style="clear: both;"></div> </div> <div class="comment-part"> <div class="user-img-part"> <div class="user-img"> <img src="/demo/man03.png"> </div> <div class="user-text"> <h4>1 days ago</h4> <p>Jui Choal</p> <span>Report</span> </div> <div style="clear: both;"></div> </div> <div class="comment"> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> <div style="clear: both;"></div> </div> <div class="comment-part"> <div class="user-img-part"> <div class="user-img"> <img src="/demo/man04.png"> </div> <div class="user-text"> <h4>24 days ago</h4> <p>Jack Mins</p> <span>Report</span> </div> <div style="clear: both;"></div> </div> <div class="comment"> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> <div style="clear: both;"></div> </div> </div> </div> </body> </html>
body{ background:#00CED1; font-family: 'Barlow Semi Condensed', sans-serif; } .main-section{ background:#FFFFFF; width:80%; margin: 0 auto; padding: 10px; margin-top:50px; box-shadow:0px 2px 7px 1px #aa9191; } .hedding-title h1{ margin:0px; padding:0px 0px 10px 0px; font-size:25px; } .average-rating{ float:left; text-align: center; width:30%; } .average-rating h2{ margin:0px; font-size:80px; } .average-rating p{ margin:0px; font-size:20px; } .fa-star,.fa-star-o,.fa-star-half-o{ color:#FDC91B; font-size:25px !important; } .progress,.progress-2,.progress-3,.progress-4,.progress-5{ background:#F5F5F5; border-radius: 13px; height:18px; width:97%; padding:3px; margin:5px 0px 3px 0px; } .progress:after,.progress-2:after,.progress-3:after,.progress-4:after,.progress-5:after{ content: ''; display: block; background: #337AB7; width:80%; height: 100%; border-radius: 9px; } .progress-2:after{ width: 60%; } .progress-3:after{ width:40%; } .progress-4:after{ width:20%; } .progress-5:after{ width:10%; } .loder-ratimg{ display: inline-block; width:40%; } .start-part{ float:right; width:30%; text-align: center; } .start-part span{ color:#337AB7; font-size:23px; } .reviews h1{ margin:10px 0px 20px 30px; } .user-img img{ height: 80px; width: 80px; border:1px solid blue; border-radius: 50%; } .user-img-part{ width:30%; float:left; } .user-img{ width:48%; float:left; text-align: center; } .user-text{ float:left; } .user-text h4,.user-text p{ margin:0px 0px 5px 0px; } .user-text p{ font-size: 20px; font-weight: bold; } .user-text h4,.user-text span{ color:#B3B5B4; } .comment{ width:68%; float:right; width: }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post


Random Blog