<main>
  <h1>Skills</h1>
    
  <ul>
    <li>
    <label for="html" data-value="60">HTML</label>
      
		<progress max="100" value="60" id="html">
      </li>
       <li>
    <label for="css"data-value="80">CSS</label>
		<progress max="100" value="80"  id="css">
      </li>
          <li>
    <label for="js" data-value="30">Javascript</label>
		<progress max="100" value="30"  id="js">
      </li>
  </ul>
</main>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

li {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 12px 0;
}

label {
  margin: 4px 0;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
label::after {
  content: ''attr(data-value)'%';
  display: block;
  font-size: 12px;
}
progress {
  	width: 100%;
  height: 20px;
  min-width: 100%;
}
progress[value] {
  position: relative;
	appearance: none;
	border: none;
	margin: 0;
	background-color: rgb(255, 200, 124);
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}
progress[value]::-webkit-progress-bar {
	background-color: whiteSmoke;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
  width: 100%;
}

progress[value]::-webkit-progress-value {
	
	border-radius:3px;
  background-color: rgb(255, 200, 124);
}



body {
  margin: 30px auto;
  display: flex;
  justify-items: center;
  max-width: 500px;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(to top, #09203f 0%, #537895 100%);
  background-repeat: no-repeat;
  height: 100vh;
  color: white;

}

ul {
  list-style: none;
  padding:0;
}

main {
  width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.