Skip to content
OverviewSolutions
1
Comments
1
Matthew Szanyi
@Szanyi95

All comments

  • Matthew Szanyi•35
    @Szanyi95Posted over 4 years ago

    One thing that stood out to me from looking at your code is how often you repeat the same styles in your card's CSS section. You could create a class for properties that are repeated such as width and height and then have that as a secondary class in your code.

    Also where you have border-top and then border-top-color, there is no need for the color property, you can just include this in your border-top like you'll see below.

    For example:

    HTML:

    div class="red card"

    CSS:

    .card { width: 350px; height: 250px; background-color: #fff; border-radius: 5px; box-shadow: 3px 3px 10px 5px rgba(0,0,0,0.1);

    .red { border-top: 4px solid hsl(0, 78%, 62%); grid-column: 2; }

    .orange { border-top: 4px solid hsl(34, 97%, 64%); grid-column: 2; grid-row: 2; margin-top: 30px; }

    You get the idea!

    You haven't done these bits wrong. It will just make your life easier and save so much repetition. It looks great though well done! Keep going.

    1