Skip to content
Submitted about 1 year ago

html css and js to get dynamic scores

SHANbic•100
@SHANbic
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

i wanted to do some vanilla js dom manipulation to generate scores dynamically.

I didnt manage to add a transition effect on the button, probably because of the linear-gradient

Community feedback

  • Jennu Rayen•150
    @jennurayenPosted about 1 year ago

    you did good job.

    to add a transition hover effect on button you can follow this code... in HTML " <a id="continue" href="#">Continue</a>" In CSS " #continue { width: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 18px; font-weight: 500; color: white; background: hsl(224, 30%, 27%); height: 55px; border-radius: 30px; margin-top: 30px; } /* hover effect and gradient Effect */ #continue:hover { background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%)); } "

    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