Submitted 2 months ago

Responsive article preview component with vanilla HTML and CSS

Juan• 480

@JEWebDev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I´m proud that i feel a lot more comfortable doing the challenges

What challenges did you encounter, and how did you overcome them?

styling the image was tricky, i had to try a lot of things but found out how with the background-image property

What specific areas of your project would you like help with?

Any feedback is welcomed

Community feedback

Prem Kumar Talamanchipatnam• 260

@prem-kumart

Posted 2 months ago

The solution looks great. Visually accurate to the design.
I would suggest a few things. You seem to have not included the javascript part when clicking the the share button will show the social-links. Hope this is a deliberate decision.
Just the basics of the javascript DOM manipulation would suffice to implement the functionality.
I struggled with social-links bar that hovers over content in desktop version. Try using the CSS shapes site https://css-tricks.com/the-shapes-of-css/ this will. help you create such elements.and usage of position: absolute.

Please log in to post a comment

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