Order Summary Component using HTML and CSS

Community feedback

• 

  Harshita Jain•380

  @Harshi786Posted over 2 years ago

  Hey @Shashwati09!

  Congrats on completing the challenge.

  Here are some tips to make it perfect.

  • For background Image, some changes-

   font-family: "Red Hat Display", sans-serif;
    background-image: url(order_images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-size:contain;
    background-color: #e0e8ff;
    display: grid;
    place-items: center;
    min-height: 100vh;
  

  • Background color of card is white.

  .card {
    overflow: hidden;
    width: 400px;
    background-color:white;
    border-radius: 20px;
   box-shadow: 0 40px 40px -20px rgba(13, 48, 189,0.15);
  }
  

  • You can Add a nice little shadow effect to payment button. box-shadow: 0 20px 20px 0 rgba(56, 42, 225, 0.19);

  • Add hover effects to buttons and links. For details see this once

  -Try using em/rem value units instead of pixels. For details Read this link

  Hope this helps :)

  Marked as helpful

  0