Complete Code For Creating User Rating Scorecard Using CSS And HTML.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>How To Create User Rating Scorecard Using CSS And HTML</title> <!-- Font Awesome Icon Library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"/> </head> <style> body{ background: black; } .middle { margin-top:10px; float: left; width: 70%; } /* Place text to the right */ .right { text-align: right; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* The bar container */ .bar-container { width: 100%; background-color: #f1f1f1; text-align: center; color: white; } lable{ color:white; padding:50px; font-size:30px; } /* Individual bars */ .bar-5 {width: 60%; height: 18px; background-color: #ff9800;} .bar-4 {width: 30%; height: 18px; background-color: #ff9800;} .bar-3 {width: 10%; height: 18px; background-color: #ff9800;} .bar-2 {width: 4%; height: 18px; background-color: #ff9800;} .bar-1 {width: 15%; height: 18px; background-color: #ff9800;} /* Responsive layout - make the columns stack on top of each other instead of next to each other */ @media (max-width: 400px) { .side, .middle { width: 100%; } .right { display: none; } } </style> <body> <div class="container"> <br/><br/> <div class="text-center"> <h1 id="color" style="color: White;">Create User Rating Scorecard Using CSS And HTML</h1> </div> <div class="row"> <div class="middle"> <lable>5 star</lable> <div class="bar-container"> <div class="bar-5"></div> </div> </div> <div class="middle"> <lable>4 star</lable> <div class="bar-container"> <div class="bar-4"></div> </div> </div> <div class="middle"> <lable>3 star</lable> <div class="bar-container"> <div class="bar-3"></div> </div> </div> <div class="middle"> <lable>2 star</lable> <div class="bar-container"> <div class="bar-2"></div> </div> </div> <div class="middle"> <lable>1 star</lable> <div class="bar-container"> <div class="bar-1"></div> </div> </div> </div> </div> </body> </html>