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
Finished project on a 1440px screen
Finished project on a 375px screen
- Solution URL: My solution on github
- Live Site URL: Live preview on netlify
- Semantic HTML5 markup
- CSS custom properties
I learned a lot about Grid, watching tutorials and reading the documentation. I also played with the :hover selector to change the background color of the buttons and transition / transform to add a little animation. It was a very good project to practice the variables in CSS. Had chance to practice the media queries as well.
I don't plan to improve the gode of this project, i'm happy with the result. I will continue to learn about Grid and Flexbox, and i will try to use them more effectively in my future projects.
- GitHub - @zsoolti8917
- Frontend Mentor - @zsoltvarju
This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.