SAA/SCSS Four Card Feature

What are you most proud of, and what would you do differently next time?

This project helped me tackled the usage of mixins for different borders

I would learn how to use other SCSS styling

What challenges did you encounter, and how did you overcome them?

It took me some time to get used to learning SCSS as this was my second time using it. However, for the mixins, I had to read the SASS documentations to understand what was needed to be done.

Once I read the documentation, it was straightforward on how to implement it.

For those of you, who is curious on how it was done, here is the code snippet:

@mixin cardContainerBorder($color) {
  &::before {
    content: "";
    display: block;
    border-top: 4px solid $color;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}
// then use it like so
    &.supervisor {
      @include cardContainerBorder(var(--cyan));
    }
    &.team-builder {
      @include cardContainerBorder(var(--red));
    }
    &.karma {
      @include cardContainerBorder(var(--orange));
    }
    &.calculator {
      @include cardContainerBorder(var(--blue));
    }

What specific areas of your project would you like help with?

At the moment, none.