Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

article preview component

remsB 170

@Sonalpt

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi ! i've done this project with a massive error, the HTML placement of the "share_bubble" . I will fix this after your feedback, but, before fixing, i have 2 questions, maybe basic, but, anyway :

  • How to create an arrow for the share bubble ? I've seen many ways to create a custom arrow, but, in this project, what is the better solution ? I mean, the more optimized ?

  • I'm a very beginner at CSS and JS, and creating the JS feature was really easy, but I don't know how to create and manage transitions/animatiosn on CSS, specifically in this case. I wanted to add a 1s transition to "share_bubble" when appearing after being clicked.

I hope you can help me on this.

thx you so much in advance, have a nice day !

Community feedback

@Robert-Rynard

Posted

That's ok everyone has to start somewhere! I found this cool article about one way to add the triangle https://css-tricks.com/snippets/css/css-triangle/ using the ::after pseudo element which is what I used in my solution. As for animations I would recommend shorter than 1s in this instance as that would feel like a life time on the site. One of the ways you can go about animating the share bubble is by using transform: scale(); changing the scale from 0 to 1 and adding transition: transform 200ms ease-in; I would also recommend looking over your mobile version and seeing if you can get it closer to the design and the positioning of the share pop-up. I have some transitions in my solution so feel free to have a look and maybe it will help and good luck with your learning journey!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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