Profile Card Preview with CSS Flexbox and semantic HTML
Design comparison
Solution retrospective
Hello frontend mentor community! This is my solution to Preview Card!
-
I wrapped the card in the
articletag, 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
headerinside the card makes sense or should i replace by adivtag or any other?
Community feedback
- @urboifoxPosted almost 2 years ago
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: .3son 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 calledheadingorheaderor anything you like😊👌
I hope this helps atleast a little bit, good luck 👨💻🌹
Marked as helpful1@michel-moreiraPosted almost 2 years ago@midoashraf010 Thank you for taking the time to review my solution and give me your precious feedback and this great shadow tool.
It was very useful!
1 -
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