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

All comments

  • Tyson W• 305

    @Tyson-Wellings

    Submitted

    I am wondering if there is a more efficient way to program the buttons. I gave them a general class but then had to use IDs when styling the individual colours and hover behaviours. I feel like there would be an easier way for this.

    @nilanshu96

    Posted

    Your solution looks pretty good. For button the better solution would be to use the following for hover

    .learn-more-button:hover {
        background-color: transparent;
        color: var(--very-light-gray);
    }
    

    For this to work you need to add a 1px solid white border on the button's class by default so that you won't have to add it separately for hover. Since the border and button's background would have the same color it won't be visible in button's normal state.

    1
  • Mathew• 10

    @MatCre

    Submitted

    Hi there, I would like some feedback on the code I used to handle the responsiveness and the behaviour of the image and the card on desktop. It feels like I over complicated such a simple component. Any other feedback would be bonus. Cheers

    @nilanshu96

    Posted

    Props for trying to be as close to the design as possible. There are few mistakes I see here:

    • Your card appears smaller in a 1440px screen. The design screenshot provided for the challenge is for a 1440px screen. Scaling everything relatively should fix it so no big issue.
    • I'm unable to scroll in mobile view so a part of your card gets cut off which is also easily fixable Apart from these you've done great.
    0
  • @nilanshu96

    Posted

    Looks good! For mobile view you can add some margin between the button and the paragraph. Although the style guide says that mobile is 375px, you have to take care of transition between desktop and mobile views. You can increase the min-width for mobile to make use of the mobile design for tablet views. Other than that everything seems good.

    1