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.
This project was developed to improve HTML and CSS skills. The designs were created to the following widths:
- Mobile: 375px
- Desktop: 1440px
Users should be able to:
- View the optimal layout depending on their device's screen size
Desktop
Mobile
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
A cool thing that I learned was to use em and css overflow: hidden
to properly set a border-radius to a div.
I want to learn more about units such as vh, vw, em, positions (absolute and relative), and how to have items properly aligned in every screen resolution.