Skip to content
Submitted over 2 years ago

Advice Generator App using HTML CSS SASS and API using async/await

liezl•190
@liezsm
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi all just finished this challenge any feedbacks tips suggesstions advices will do 🥰. I'm curious tho how can I achieve that glowing box shadow when button is hovered, I tried it myself but my btn is clip-path so it doesn't show when hovered but when i removed clip-path it works, any idea how to do it?

Community feedback

  • Account deleted

    hi There,

    • put the advice content inside a <blockquote> tag instead of a <p> to be more semantic

    i hope this is helpful and goodluck

    Marked as helpful
    1
    liezl•190
    @liezsmPosted over 2 years ago

    thanks for suggestion we'll do it 😊 @Old1337

    1
  • Harmanjot Singh•985
    @arkharman12Posted over 2 years ago

    Make the container with fixed width and height because jumping around of text is not best for UX. The position of the button should also be fixed in one place. Good luck!

    Marked as helpful
    0
  • Bhremada Fevreano•1,395
    @boedegoatPosted over 2 years ago

    Nice work @liezsm

    Based on your question, you may simply add border-radius: 50% to the button to make it fully rounded like a circle. The box-shadow can then be added when is hovered.

    Hope this helps and happy coding

    Marked as helpful
    0
    liezl•190
    @liezsmPosted over 2 years ago

    @boedegoat yay thanks! i'll try it

    0
  • liezl•190
    @liezsmPosted over 2 years ago

    yay thanks for the suggestion

    0

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