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

15th Challenge - Article preview

@DrunkenNeoguri

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


(I translated the sentences into English using 'translate.google.com'. Please understand if there are any strange grammar.)

Hello!

This is the 15th challenge.

This article preview page was able to work a little faster thanks to what I studied in the previous challenge.

However, there were some regrets and difficulties while working.

  1. Hover of button tag and i tag.
  • I wanted to change the color of the icon of the share button by using the button tag attribute in css. However, the color did not change even if I specified the color in the button, and the color of the share icon changed only by specifying the color in the i tag.

Due to this, even if you want to use the hover function, there is a problem that the i tag area and the button tag area are designated separately, so hover does not occur together.

Is there any way to solve this?

  1. Animation of share box. When the share button is pressed, I want to add an animation where the share box appears and disappears. I tried using the transition property, but the animation didn't work. How can I get an animation?

I think that I worked hard and got good results, but the above two things remain as disappointing points.

If we can solve the problem, we will try again next month!

Thanks for reading. :D If you have any other suggestions or solutions to the above problems, please feel free to let us know!

Comments always improve my learning!

Community feedback

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