I'm currently facing a bug that won't let me set the width of the progress bar to anything other than 100%, but I know it's possible.I don't know if it's because I'm using too many classes (if that's the case) or if I have a syntax error, but most likely I have something wrong in my html code.
HTML:
<div >
<div >
<div >
<h3 >CSS</h3>
<span >50%</span>
</div>
<div >
<span ></span>
</div>
</div>
</div>
<div >
<div >
<h3 >JS</h3>
</div>
<div >
<span ></span>
</div>
</div>
CSS:
/*==================== VARIABLES CSS ====================*/
:root {
--header-height: 3rem;
/*========== Colors ==========*/
/* Change favorite color */
--hue-color: 255; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/
/* HSL color mode */
--first-color: hsl(var(--hue-color), 69%, 61%);
--first-color-second: hsl(var(--hue-color), 69%, 61%);
--first-color-alt: hsl(var(--hue-color), 57%, 53%);
--first-color-lighter: hsl(var(--hue-color), 92%, 85%);
--title-color: hsl(var(--hue-color), 8%, 15%);
--text-color: hsl(var(--hue-color), 8%, 45%);
--text-color-light: hsl(var(--hue-color), 8%, 65%);
--input-color: hsl(var(--hue-color), 70%, 96%);
--body-color: hsl(var(--hue-color), 60%, 99%);
--container-color: #fff;
--scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
--scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
/* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
--big-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== Margenes Bottom ==========*/
/* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
--mb-0-25: .25rem;
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
--mb-3: 3rem;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
--z-modal: 1000;
}
.skills__container{
row-gap: 0;
}
.skills__header{
display: flex;
align-items: center;
margin-bottom: var(--mb-2-5);
cursor: pointer;
}
.skills__icon,
.skills__arrow{
font-size: 2rem;
color: var(--first-color);
}
.skills__icon{
margin-right: var(--mb-0-75);
}
.skills__titles{
font-size: var(--h3-font-size);
}
.skills__subtitle{
font-size: var(--small-font-size);
color: var(--text-color);
}
.skills__arrow{
margin-left: auto;
transition: .6s;
}
.skills__list{
row-gap: 1.5rem;
padding-left: 2.7rem;
}
.skills__titles{
display: flex;
justify-content: space-between;
margin-bottom: var(--mb-0-5);
}
.skills__name{
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
.skills__bar,
.skills__percentage{
height: 5px;
border-radius: .25rem;
}
.skills__bar{
background-color: var(--first-color);
}
.skills__percentage{
display: block;
background-color: var(--first-color);
}
.skills__css{
width: 50%;
}
i tried getting help from ChatGPT and watching a youtube tutorial but nothing seemed to work. Any help is appreciated.
This is the desired look
CodePudding user response:
Try this and see if this suits your need.
/*==================== VARIABLES CSS ====================*/
:root {
--header-height: 3rem;
/*========== Colors ==========*/
/* Change favorite color */
--hue-color: 255;
/*Purple 250 - Green 142 - Blue 230 - Pink 340*/
/* HSL color mode */
--first-color: hsl(var(--hue-color), 69%, 61%);
--first-color-second: hsl(var(--hue-color), 69%, 61%);
--first-color-alt: hsl(var(--hue-color), 57%, 53%);
--first-color-lighter: hsl(var(--hue-color), 92%, 85%);
--title-color: hsl(var(--hue-color), 8%, 15%);
--text-color: hsl(var(--hue-color), 8%, 45%);
--text-color-light: hsl(var(--hue-color), 8%, 65%);
--input-color: hsl(var(--hue-color), 70%, 96%);
--body-color: hsl(var(--hue-color), 60%, 99%);
--container-color: #fff;
--scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
--scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);
/*========== Font and typography ==========*/
--body-font: "Poppins", sans-serif;
/* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
--big-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: 0.938rem;
--small-font-size: 0.813rem;
--smaller-font-size: 0.75rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== Margenes Bottom ==========*/
/* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
--mb-0-25: 0.25rem;
--mb-0-5: 0.5rem;
--mb-0-75: 0.75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
--mb-3: 3rem;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
--z-modal: 1000;
}
.skills__container {
row-gap: 0;
}
.skills__header {
display: flex;
align-items: center;
margin-bottom: var(--mb-2-5);
cursor: pointer;
}
.skills__icon,
.skills__arrow {
font-size: 2rem;
color: var(--first-color);
}
.skills__icon {
margin-right: var(--mb-0-75);
}
.skills__titles {
font-size: var(--h3-font-size);
}
.skills__subtitle {
font-size: var(--small-font-size);
color: var(--text-color);
}
.skills__arrow {
margin-left: auto;
transition: 0.6s;
}
.skills__list {
row-gap: 1.5rem;
padding-left: 2.7rem;
}
.skills__titles {
display: flex;
justify-content: space-between;
margin-bottom: var(--mb-0-5);
}
.skills__name {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
.skills__bar,
.skills__percentage {
height: 15px;
border-radius: 0.25rem;
}
.skills__bar {
background-color: var(--first-color);
/* display: inline-block;
width: 50%; */
}
.skills__percentage {
display: block;
background-color: var(--first-color-lighter);
}
.skills__css {
width: 50%;
display: inline-block;
background-color: var(first-color-lighter);
}
<div >
<div >
<div >
<h3 >CSS</h3>
<span >50%</span>
</div>
<div >
<span ></span>
</div>
</div>
</div>
<div >
<div >
<h3 >JS</h3>
</div>
<div >
<span ></span>
</div>
</div>