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.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: https://www.frontendmentor.io/solutions/css-grid-flexbox-combo-bmc7hMNpV
- Live Site URL: https://valleyman89.github.io/FrontEndMentor-Solution-3-column-preview-card-component-main/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox & CSS Grid
- Desktop-first workflow
I initially thought I'd have to use the alpha channel for rgb or hsl to imitiate transparency on the hover pseudo-class, however a quick search on MDN docs showed there was a better way.
button:hover {
color: hsl(0, 0%, 95%);
background-color: transparent;
border: 2px solid hsl(0, 0%, 95%);
}
This was a great opportunity to practice with Grid and Flexbox.
- GitHub - @valleyman89
- Frontend Mentor - @valleyman89
- Twitter - @steven_rolph