Submitted 7 months ago

Four Cards with HTML and SCSS

sass/scss

Mario Graf-Schantl•540

@mariosearchteam

A solution to the Four card feature section challenge

Preview Code

Solution retrospective

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

This one was pretty straight forward, only the top borders of the cards needed a little research to get them straight.

The scss loop for the four border colors was fun! :)

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

Every feedback is appreciated, maybe there are more flexible ways to setup the grid?

Code

Please log in to post a comment

Community feedback

Ronnarit00000•310

@Ronnarit00000

Posted 7 months ago

Good work! I like your feature-card. I have easy way setup grid by create map for feature-card use grid-template-areas

@media screen and (min-width: 55rem) {
  .features {
    &__cards {
       /*create map*/
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas: 
          "card-cyan card-red card-blue"
          "card-cyan card-orange card-blue"
        ;
    }

    &__card {
      max-width:350px; /* fixed card max-width*/
      min-height:250px; /* fixed card min-height */
    }

    &__card-cyan {
      grid-area:card-cyan;
      align-self: center; /* set card center*/
    }

    &__card-red {
       grid-area:card-red;
    }

    &__card-orange {
      grid-area:card-orange;
    }

    &__card-blue {
       grid-area:card-blue;
       align-self: center; /* set card center*/
    }
  }
}

Join 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