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 card using html,css,js

@Sk7867

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


Any improvements needed?

Community feedback

@Yohanr19

Posted

Hey Siddhesh Kamble , your code looks great. I think now you should try to step up your game and try to add a transition to your bar.

A few tips to do it: You need to use a different approach to handle the visibility of the bar, instead of relying on changing the display to ''none'', yo should try to hide with either opacity (setting it to 0 and then changing it to 1, is a easy way to make a fading effect). You can also handle it with the visibility property and by putting it to hidden and making the width and height 0, you can then change those property to the normal values and that will give the effect of the object appearing from the side/top. Which is also pretty cool. Try to mess around with those concepts and hit me up if you get stuck. Happy Coding!!!!

Marked as helpful

0

@Sk7867

Posted

@Yohanr19 Hey, Thank you for the suggestion. I was able to add fade-in/fade-out effect to the pop up. But I messed up with the button and it doesn't stay in an active state anymore. Still, I'll mess around more to find a solution

1

@Yohanr19

Posted

@Sk7867 that is the way, trial and error is a excellent way to learn new stuff on programing, because you learn how to do it right and on top of that you learn how is done wrong. Keep trying!!

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