Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

Responsive 3-Column Preview Card using Flexbox

P
Clifford Anderson•200
@cdanderson76
A solution to the 3-column preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Although this is listed as a simple project, the 3-Column Preview Card really tested me on the concepts of the postioning of elements and the spacing between them. I really had to rely on the 'Inspect' tool within the browser in order to get an idea of where, and how, I could get things in the correct place. I also had a hard time creating the button that really wasn't a 'button' (lol). Toward the end of my project, I realized that it was missing a hover effect, but for some reason, I could not get the border visible around my anchor element. After a decent amount of googling, I found that there would actually NEED to be an ORIGINAL border in order to create the appropriate hover effect. Once I understood this, I was able to finish the project.

Hopefully, my HTML and CSS is up to par. If there are any questions or tips on what I could have done better in reference to writing cleaner code (or anything for that matter), please feel free to let me know. Thanks...

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Clifford Anderson's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License