Skip to content
OverviewSolutions
30
Comments
10

Alysson Gomes

@EONRaiderCuritiba, Brazil470 points

On my way to becoming a specialist front-end developer

I’m currently learning...

SCSS and TypeScript

Latest solutions

View more solutions

Latest comments

  • Alysson Gomes•470
    @EONRaider

    Hello there.

    Try this shadow on the card: box-shadow: 0 40px 40px -20px rgba(13, 48, 189, 0.15);

    And this one for the “Proceed to Payment” button: 0 20px 20px 0 rgba(56, 42, 225, 0.19);

    The “You can now listen…” text has this color: #717fa6

    Finally, the card’s dimensions should be 450x697px.

    Marked as helpful
  • Alysson Gomes•470
    @EONRaider

    Hello. Take a look at CUBE CSS if you're interested in methodology. You can still use BEM along with it but it will also help you structure your code.

    Marked as helpful
  • Alysson Gomes•470
    @EONRaider

    Hello. Try using this box-shadow declaration around your "main" container:

    box-shadow: 0 30px 60px 0 rgba(61, 108, 236, 0.15);

    You should get the correct shadow when compared to the model.

  • Alysson Gomes•470
    @EONRaider

    The glow you see are very subtle linear gradients. Check my solution to see the correct values: https://eonraider-results-summary-component.netlify.app/

    Just use the browser developer tools and copy the declarations.

    Marked as helpful
  • Alysson Gomes•470
    @EONRaider

    Hello. You've got a problem with the "Get Started" hover dynamics. The hovering itself goes all the way until the end of the block. To fix this, simply add "align-items: flex-start" to your ".card" class.

    I hope this helps.

  • Alysson Gomes•470
    @EONRaider

    Here's the correct value to use for the box-shadow property on the cards:

    box-shadow: 0 15px 30px -11px rgba(131, 166, 210, 0.50);

    Marked as helpful
View more comments