How To Create User Rating Scorecard Using CSS And HTML

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

Using CSS and html we can create user rating score card.So today we discuss how to do it.

How To Create User Rating Scorecard Using CSS And HTML

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>

Related Post