Skip to content
Submitted over 3 years ago

3-column card – HTML/CSS using BEM & flexbox

Maria•290
@itsfedoruk
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi there 👋 Another day, another challenge – I enjoy a lot working through challenges and training my "coding" muscle so to say. This time, it's a simple card with flexbox; and I added a bit of an animation touch with a right arrow on a button hover. That's my learning from this challenge – how to manipulate one element if one hovers over another element.

Any feedback – let me know, super happy to hear any pointers on how to improve my code 🙌

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Maria! 👋

    You're going like crazy! Congrats on finishing another challenge. Kudos for button hover effects, i like them. I would suggest you to read again about BEM naming convencion because i think your code is a bit hard to read. For example, you have column block, then .column__text element, and then inside that element you start naming it text__title which is unreadable atleast for me. Instead you can name it .column__text-title or .column__text__title. Nothing to worry about tho, just read about it a bit more ;)

    Good luck with that, have fun coding! 💪

    0
    Maria•290
    @itsfedorukPosted over 3 years ago

    Hi Tediko, thank you for your feedback ☺️

    0

Please log in to post a comment

Log in with GitHub

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