This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
Flexbox flex-flow: row wrap;
$colors:(
orange:hsl(31,77%,52%),
cyan:hsl(184,100%,22%),
darkCyan:hsl(179,100%,13%)
);
@each $name, $color in $colors {
div.#{$name} {
background: #{$color};
button {
color:#{$color};
}
:hover {
background:#{$color};
color:$lightGray;
cursor: pointer;
}
}
}
SASS functions
- Website - 404
- Frontend Mentor - @LenyPython