Order summary card

Community feedback

• 

  Harshita Jain•380

  @Harshi786Posted over 2 years ago

  Hey! Congrats on completing the challenge.

  Your solution looks good but few more tips to make it perfect.

  • For background image, Change background size from cover to contain. body {background-size:contain;}

  • Add hover to links and buttons.

    1. For link. a:hover { text-decoration: none; opacity: 0.8; }
    2. For payment button. .btn-pay:hover { opacity: 0.8; cursor: pointer; }
    3. For cancel order button. .btn-cancel:hover { color: #1f2f56; cursor: pointers; }

  • Try mobile view as well.

  Hope this helps.

  Marked as helpful

  1

  ---

  

  yudiz•180

  @yud11zPosted over 2 years ago

  @Harshi786 Thanks for the feedback, that's really helpful.

  1

  

  Harshita Jain•380

  @Harshi786Posted over 2 years ago

  @yud11z then plz mark it as helpful. Thanks

  0
• 

  Mukesh Mahato•180

  @iammukeshmahatoPosted over 2 years ago

  Hello Mr. Yudiz, your design is quite similar to the challenge but it seems some miss-matched. The font weight of "Order Summary" is not similar to the challenge also there is more space between the text in the "subscription" division. The height of the "Proceed to payment" bottom should be a bit greater than than what you have given. You can take reference to my design. Here is the link of my github: https://github.com/mukeshmahato843/orderSummary

  I hope this will be helpful for you!!!

  1

  ---

  

  yudiz•180

  @yud11zPosted over 2 years ago

  @mukeshmahato843 Thanks, I will try to fixed it. Regards

  0