scrimba
Frontend Career Path
Responsive design
Build a Responsive Site
Aside: Relative units and percentages
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Aside: Relative units and percentages
AboutCommentsNotes
Aside: Relative units and percentages
Expand for more info
index.css
run
preview
console
body {
color: #8C8D9C;
text-align: center;
}

.prog-container {
width: 460px;
margin: 38px auto;
}

.prog-bar {
height: 20px;
background-color: #808CB0;
overflow: hidden;
border-radius: 12px;
}

.prog-indicator {
height: 100%;
background-color: hotpink;
}

/* ----------------------------------------------------
Challenge:
Set the width of each progress bar using a percentage
*/

.prog-33 {

}

.prog-60 {

}

.prog-90 {

}

/* -------------------------------------------------- */

h1 {
font-family: 'Racing Sans One', cursive;
font-weight: normal;
font-size: 54px;
color: #808CB0;
margin: 40px 0 56px;
}

.prog-info {
display: flex;
margin-bottom: 10px;
}
.status {
font-weight: 600;
margin-left: auto;
}
Console
/index.html
-5:21