Solution to Data Storage Component

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

CSS

To 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.