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
- Solution URL: https://github.com/drvnprgrmr/3-column-preview-card-component
- Live Site URL: drvnprgrmr.github.io/3-column-preview-card-component
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS variables
Starting to use css variables more in my code.
:root {
--orange: hsl(31, 77%, 52%);
--cyan: hsl(184, 100%, 22%);
--d-cyan: hsl(179, 100%, 13%);
--white: hsla(0, 0%, 100%, 0.75);
--gray: hsl(0, 0%, 95%);
--card-radius: 0.5rem;
}
I use the tools below on almost every project as reference guides
- Frontend Mentor - @drvnprgrmr
- Twitter - @drvnprgrmr