Skip to content
Submitted over 2 years ago

Profile Card Preview with CSS Flexbox and semantic HTML

Michel Moreira•300
@michel-moreira
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello frontend mentor community! This is my solution to Preview Card!

  • I wrapped the card in the article tag, should I use another tag to have more meaning and semantic?

  • I've putted some hover state by myself apart from the requesition of the challenge, in the mobile device's screen did it stuck in interection mode?

  • The tag header inside the card makes sense or should i replace by a div tag or any other?

Code

Please log in to post a comment

Log in

Community feedback

  • Fox•550
    @urboifox

    Hey Michel, nice solution!

    • the <article> tag is fine here because it specifies independent, self-contained content.

    • a tip for using hover state is to put a transition: .3s on the element with the hover state so it makes it animate smoother 👌 and there are a lot of css shadows and gradient generators out there which can help you make more cool shadows! like this one

    • the <header> element is intended to usually contain the section's heading (an h1 – h6 element or an h group elements) in this case it's not a section it's a card so in the big projects you might just use a <div> with a class name called heading or header or anything you like😊👌

    I hope this helps atleast a little bit, good luck 👨‍💻🌹

    Marked as helpful

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