Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I learned how to do the progress bar by using div, and span to put the fill in the bar
To see how you can add code snippets, see below:
HTML CSSTo be able to do the circle indicator inside the progress bar, I used the pseudo-code ::after
.
I included the code snippet of the value for the span::after
.
/* Add the indicator to progress bar fill */
.progress_bar span::after{
content:'';
background-color:var(--PaleBlue);
height:inherit;
width:1rem;
right: 20%;
position:absolute;
border-radius: 50%;
}
What challenges did you encounter, and how did you overcome them?
Adding the tip to the quota box is a bit challenging for me so I did use for now a CSS Clip Path Generator.
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord