Submitted over 3 years ago

Four Card Feature - First time practice SCSS

Dev Monkey•100

@priopambudi

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I'm happy with my result. This is my first time build a web page with SCSS. But there are some thing that I'm confused about. On my solutions, I have code :nthchild(1),(2),(3) and (4). They have same code, just have a different background-color. Is in SCSS I can make a nesting from nthchild(1) to nthchild(2),(3), and (4)? The :nthchild() is in one parent class. Thank you.

Community feedback

Raul A.•130

@rarg22Posted over 3 years ago

In my case, I used card specific classes besides having a base class with all the common styles. Then I target the individual cards by doing

.specific_class.base_class::before

.card::before {
  content: "";
  position: absolute;
  height: 4px;
  width: 100%;
  left: 0%;
  top: 0%;
  z-index: 999;
}

.supervisor_card.card::before {
  background: var(--supervisor-card-highlight);
}

.teambuilder_card.card::before {
  background: var(--team-builder-card-highlight);
}

.karma_card.card::before {
  background: var(--karma-card-highlight);
}

.calculator_card.card::before {
  background: var(--calculator-card-highlight);
}

Dev Monkey•100

@priopambudiPosted over 3 years ago

@rarg22 I see.. Nice solutions. Thank you so much!

Please log in to post a comment

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