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

nextJS styled-components Rock-Paper-Scissors-Game

@mateus-gotardi

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

Solution retrospective


I'm a beginner and I couldn't do the layout exactly as it should, I had difficulties mainly with the winner's box-shadow, if you can give me a hint about that I'll be grateful

Community feedback

Warren 630

@warrenlee

Posted

Hey Mateus, good on job on tackling the challenge. I also had a go at least and I agree, coding the layout is easy as there is a lot of tweaking with the positions in order to get them in the right places. With the box-shadow, I think you've nailed it there and I would recommend spreading them out evenly, like have spread out in multiples of 30 and add a transition property to give it that smooth spread when appearing.

box-shadow: 
    rgba(255, 255, 255, 0.09) 0px 0px 0px 30px, 
    rgba(255, 255, 255, 0.06) 0px 0px 0px 60px, 
    rgba(255, 255, 255, 0.03) 0px 0px 0px 90px;
transition: box-shadow 500ms ease;

Hope that helps!

Marked as helpful

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