Fylo Data Storage Component

In this project, I used a screen-reader-only CSS, learned more about color gradients, and understood the positioning of child divs as a container inside parent divs which expand according to their parent (I used this in the progress bar).

One nice trick I also learned and implemented was the creation of a triangle by adjusting the thickness and color of borders as follows:

.storage__remain::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
  
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;

    border-right: 25px solid var(--clr-neutral-1000);

    bottom: -1.25rem;
    right: 0;
}