CSS Problem- Help Anyone?

I’m trying to create a “level bar” , kind of like what they put in resumes, wherein the class “skills” has a gray background then set any color i like to the corresponding div class (html, css, js).

My problem is my container “divs” won’t show up in a live page but the “p” and “img” elements show up just fine.

I’m using a grid layout (if that helps).

HTML
                        <p>HTML</p>
                        <img src="./assets/HTML5_logo_and_wordmark.svg">
                        <div class="skills">
                            <div class="html"></div>
                        </div>

                        <p>CSS</p>
                        <img src="./assets/CSS3_logo_and_wordmark.svg">
                        <div class="skills">
                            <div class="css"></div>
                        </div>

CSS

.skills{
    width: 100%;
    background-color: gray;
    border-radius: 20%;
}

.html {
    width: 80%;
    background-color: red;
    border-radius 20%;
} 

.css{


---and so on

The divs are empty, if you add some content or give them a height you can see them.

1 Like

damn, that was dumb of me.

thanks btw! cheers

I really don’t think that there should be a valid class called “html”. the reason why it doesn’t show up is because you need to add the following code:
position:absolute;
top:[however many pixels you want]px;
left:[however many pixels you want]px;
width:[however many pixels you want]px;
height:[however many pixels you want]px;