skill bar

<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {
box-sizing: border-box;
}

p1 {
font-family: PC98;
font-size: 0.75em;
text-align: left !important;
}

.cont {
line-height: 0.15;
width: auto;
background-color: #f0f2f0;
border: 1px solid #b0acb0;
border-radius: 20px;
}

.skills {
font-family: PC98;
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 10px;
color: #474747;
font-size: 0.75em;
}

.html {
width: 80%;
background-color: #fcdef1;
border-radius: 20px;
}

.css {
width: 90%;
background-color: #fcdef1;
border-radius: 20px;
}

.js {
width: 35%;
background-color: #fcdef1;
border-radius: 20px;
}

</style>
</head>
<body>

<p1>HTML</p1><div class="cont"><div class="skills html">80%</div></div>

<p1>CSS</p1><div class="cont"><div class="skills css">90%</div></div>

<p1>JavaScript</p1><div class="cont"><div class="skills js">35%</div></div>

</body></html>