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

Animated, responsive solution using React Hooks and Sass

@yinonhever

Desktop design screenshot for the Rock, Paper, Scissors game coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Community feedback

Magda Kokot 1,425

@magdakok

Posted

Thank you! Just forked your solutution and will try to learn something.

I only came up with idea of gradient and coded it like this: background-image: radial-gradient( 700px 700px ellipse, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.05) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100% );

It was not the best solution though ;-) Yours is working just perfectly!

0
Magda Kokot 1,425

@magdakok

Posted

Wow! I'm really impressed both with animations and the gradient behind the winning symbol. I'll study your code thoroughly, cause you solved some issues I was not able to :)

0

@yinonhever

Posted

@magdakok Thanks! The animations in your solution are also very impressive. And I think it would be more correct to call it layers, rather than gradient (I used pseudo-elements to create the layers).

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