How can I add spacing between these progress bar titles? - html

Question

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>

Answer 1

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>

Answer 2

If I understood properly, what you want to increase the height is for that black bar containing your actual progress bar, right? If that's the case, I think this should work:
.skill-percentage {
height: x (here you place how much height you want);
}
That should give you the height that you want.
And, in order to add the spacing, you can take advantage of CSS padding or margin, depending on what you exactly need.
I'll give you a small snippet here so you can see exactly what I mean. Note that I modified a bit your HTML to fit what you wanted to do, but this may not be necessary on your original file.
/* progress bar */
* {
margin: 0;
padding: 0;
}
.center {
height: 500px;
width: 100%;
background-color: rgba(0, 0, 0, 0.678);
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: 0;
}
/* skillbar languages */
.text-container {
display: flex;
width: 100%;
justify-content: space-between;
}
.text-container p {
padding: 0 40px; /* this is the one that changes the position of your text. Be carefull, you don't want this to change the position too much, just a bit, if you need to change the full position, better try something like grid, or modifying the flex */
}
.skillbar-html {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-html p {
margin: 10px;
}
.skillbar-html > div {
margin: 10px;
}
.skillbar-css {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-css p {
margin: 10px;
}
.skillbar-css > div {
margin: 10px;
}
.skillbar-javascript {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-javascript p {
margin: 10px;
}
.skillbar-javascript > div {
margin: 10px;
}
.skill_percentage{
height: 20px; /* this is the one that changes your height, now it's changing nothing, but you can modify the height by changing this value */
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">
<div class="text-container">
<p>HTML</p>
<p>90%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;">
</div>
</div>
</div>
<div class="skillbar-css">
<div class="text-container">
<p>CSS</p>
<p>70%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;">
</div>
</div>
</div>
<div class="skillbar-javascript">
<div class="text-container">
<p>JavaScript</p>
<p>50%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;">
</div>
</div>
</div>
</div>
</section>