THIS IS A RESPONSIVE DESIGN, MAKE SURE TO TURN ON TOGGLE DEVICE TOOLBAR ON YOUR BROWSER
I am trying to make a progress bar. First I want to increase the height of the transparent black background. I can't find a way to do that. I am confused. And secondly, I want to add spacing and align the 2nd and 3rd text properly.
/* progress bar */
.center {
height: 300px;
width: 100%;
position: absolute;
left: 50%;
margin-top: 140px;
transform: translate(-50%, -50%);
padding: 20px;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}<section>
<div class="center">
<h1 id="progress">Progress</h1>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</section>You can take advantage of the <br> element in your HTML.
Line break and tab elements can be used when you need a little more control over how the browser renders the text. The
<BR>element is used to force a line break.
-W3.org
/* progress bar */
.center {
height: 300px;
width: 100%;
position: absolute;
left: 50%;
margin-top: 140px;
transform: translate(-50%, -50%);
padding: 20px;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}<section>
<div class="center">
<h1 id="progress">Progress</h1>
<br>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<br>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<br>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>The Height: - I noticed a fixed height of 300px, and that you were centering the parent div by using margins and translations in your CSS. I went ahead and removed those margins and translations, also removed your absolute positioning. You can adjust your fixed height of 300px to expand the grey background. For this example, I made it 100 view height.
/* progress bar */
.center {
height: 100vh;
width: 100%;
padding: 20px;
position: relative;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}<section>
<div class="center">
<h1 id="progress">Progress</h1>
<br>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<br>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<br>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>