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://www.frontendmentor.io/solutions/3column-preview-card-component-built-with-html-and-css-GXiORFwOBZ
- Live Site URL: https://joshjavier.github.io/3-column-preview-card-component-v2/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
Another take on another simple challenge using basic HTML and CSS.
Again, I added CSS variables that allow customization, such as --max-width
, --min-height
.
For the card's layout logic, I used the Flexbox Holy Albatross technique and added constraints specific to this layout. Ideally, the card can hold one to three child segments. That said, nothing prevents users from adding more child segments, but the layout will switch to a vertical layout to prevent columns that are too narrow for the contained elements.
- Website - Josh Javier
- Frontend Mentor - @joshjavier