Skip to content
Submitted over 2 years ago

Advice Generator App with html, css, javascript(Jquery) with api call

Dev JP•140
@JpJonker
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

Any feedback would be appreciated, ( I have a question, I add a border radius on the dice image, for some reason the image and the border became a circle. The goal was that the border would be a circle, but not the image. I would appreciate a explaination of why this happend. Thank you very much )

Community feedback

  • Alister Xavier•170
    @Alister153Posted over 2 years ago

    It's cause u added border-radius to the image itself..

    #generate-dice { position: absolute; bottom: -1.75rem; background: hsl(150, 100%, 66%); padding: 1rem; border-radius: 100%; }

    You could've enclosed the dice in a tag and then add border radius to that tag or maybe just add a div and use the image as a background image for that div like this..

    .next-btn{ background-position: center; background-image: url(./images/icon-dice.svg); background-repeat: no-repeat; }

    Marked as helpful
    0
    Dev JP•140
    @JpJonkerPosted over 2 years ago

    @Alister153 Thank you, I will remember that for the future.

    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