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
I decided to use bootstrap to help with spacing and the grid setup for the different columns. I started the project with the customized styles in css: background colors, font family, buttons, and hover states. I created a container for the 3 columns using bootstrap's container and then utilized grid to create 3 rows. I then added padding and margin to the headings, paragraphs, and buttons to match the design.
- CSS custom properties
- CSS Grid
- Bootstrap
- Frontend Mentor - @alwodzicki
- Twitter - @ashwodz