Skip to content
Submitted almost 2 years ago

Four Card Feature Section using Flexbox

David Pelo•110
@DavidPelo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Fun challenge! I felt pretty confident setting up the layout and styles.

One thing I'm curious how others would go about doing is the top border of the feature cards. I found a solution using a container with extra padding and color for each card. Let me know how you did it!

Community feedback

  • Adán Estévez•320
    @rafdidactPosted almost 2 years ago

    Hey, David!

    I gave mine a solid 4px with the border-top property and then assigned each one their respective color with the border-color property, like so:

    .modal {
  padding: 1rem;
  margin: 1rem;
  border-top: solid 4px;
  border-radius: 4px;
  overflow: auto;
}

.modal.light-blue {
  border-color: var(--cyan);
}

.modal.red {
  border-color: var(--red);
}

.modal.yellow {
  border-color: var(--orange);
}

.modal.blue {
  border-color: var(--blue);
}

    You can also check my solution's code for reference. Hope it helps.

    0

Please log in to post a comment

Log in with GitHub

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