Skill-Bar
Skill Bar
HTML
<div class="container">
<h2 class="header-html">HTML</h2>
<div class="bar-html">
<div class="skill-html"></div>
</div>
<h2 class="header-css">CSS</h2>
<div class="bar-css">
<div class="skill-css"></div>
</div>
<h2 class="header-js">JS</h2>
<div class="bar-js">
<div class="skill-js"></div>
</div>
</div>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #fbd8df;
}
.container{
height: 100vh;
display:flex;
justify-content: center;
align-items: center;
}
.skill-html{
width: 80%;
height: 20px;
background-color: #ee7267;
border-radius: 10px;
}
.skill-css{
width: 60%;
height: 20px;
background-color: #ee7267;
border-radius: 10px;
}
.skill-js{
width: 50%;
height: 20px;
background-color: #ee7267;
border-radius: 10px;
}
.bar-html{
width: 80%;
height: 20px;
background-color: #ccc;
position: absolute;
top: 30%;
border-radius: 10px;
}
.bar-css{
width: 80%;
height: 20px;
background-color: #ccc;
position: absolute;
top: 50%;
border-radius: 10px;
}
.bar-js{
width: 80%;
height: 20px;
background-color: #ccc;
position: absolute;
top: 70%;
border-radius: 10px;
}
.header-html{
position: absolute;
top: 20%;
left: 10%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
sans-serif;
}
.header-css{
position: absolute;
top: 40%;
left: 10%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
sans-serif;
}
.header-js{
position: absolute;
top: 60%;
left: 10%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
sans-serif;
}
</style>
Comments
Post a Comment