Order Summary card

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Sorry, I forgot... the link to the css sheet is skipped because in the repository you named the css folder in uppercase. You can correct it by writing it in lowercase :)

  Marked as helpful

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Yousra, I took some time to look at your solution and you did a great job!

  Also I have some tips for improving your code:

  • add main tag and wrap the card for Accessibility
  • Centering a div with absolute positioning is now deprecated, it uses modern css like flexbox or grid
  • try to use flexbox to the body for center the card. Read here -> best flex guide
  • after add min-heigth: 100vh to body because Flexbox aligns to the size of the parent container
  • To make it look as close to the design as possible add width: 25rem and padding-bottom: 2rem to top-container class
  • For add the top image in the background just put more specific background properties to the body:

  background: url("../img/pattern-background-desktop.svg") no-repeat top center;
  background-size: contain;
  background-color: #e0e8ff;
  

  Overall you did well :)

  Hope this help and happy coding!

  Marked as helpful

  0

  ---

  

  Yous•170

  @yousra10Posted over 2 years ago

  @denielden Hello Deniel !! Thank you a lot for your taking time to detail and explain some tips to improve my coding!! It 's very helpful !! thank you a lot !!!

  1
• 

  foxynoxy•470

  @purplehippo911Posted over 2 years ago

  Hey @yousra10! Congratulations for finishing your first challenge!!🎈 The "top-container" does'nt have a width and a height added to it. Example:

  .top-container {
  width:200px;
  height:200px;
  }
  

  And for the image in the background ("images/pattern ........") you can add it with css like this: (PS: remember to remove the image element for the "image/pattern" in the html)

  .top-container{
    background-image: url(/images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
  }
  

  If you misunderstood something I wrote just reply to me.

  0