Skip to content
Submitted over 3 years ago

Vanilla CSS using Grid, Flexbox, Relative, Absolute Position, Awesome

Mipsmonsta•150
@mipsmonsta
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Seems to have issue centralizing font awesome icon. In the end using translate and extra parent div to contain the FA icon. If you have a better solution, let me know.

The share bar trick to get to overlap the avatar segment fully, in the end use the absolute to parent (avatar segment) to solve this easily. Feel free to share your comment.

Community feedback

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