<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%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.