Order Summary Component

Community feedback

• 

  John_diddles•470

  @JohndiddlesPosted over 2 years ago

  body {
      background-image: url(images/pattern-background-desktop.svg);
      background-position: top;
      background-repeat: no-repeat;
      background-size: contain;
      background-color: hsl(225, 100%, 94%);
      width: 100vw;
      height: 100vh;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  main {
  
  }
  
  .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  
  .card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 350px;
      background-color: white;
      border-end-end-radius: 20px;
      border-end-start-radius: 20px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
  }
  
  .card-texto h1 {
      font-family: 'Red Hat Display', sans-serif;
      color: hsl(223, 47%, 23%);
      margin-left: 65px;
      padding: 8px;
      font-weight: 900;
      font-size: 24px;
  }
  
  .imagem {
  
  }
  
  

  Hi Ingrid! Good job you've done here.

  Above are a few tweaks to your css I think you might find helpful. First, to center the card within the body element both horizontally and vertically, I used flex but I had to first set the width to 100vw and height to 100vh. I also took out the styles for the <main> element. I also took out the height for the card since I want the card to take up the height of its content and not a predefined height. I also took out the margin-top for the h1 since it won't be needed anymore. For the image, I realized you used position: absolute. Although I'm not sure why you took this approach but I feel you won't need it. so I removed it and voila, it still works.

  Sorry about the epistle, I just like to explain whatever code it is I write so you can understand it well. But then, I think you did a really good job. Keep coding....cheers 🍻 🥂

  Marked as helpful

  1
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey IngridsSilveira, good job completing this challenge. Keep up the good work

  Your solution looks great however I think your card needs some margin from the top using margin-top

  In terms of the accessibility issue simply wrap all the content between main tags

  Cheers

  Happy coding 👍

  Marked as helpful

  1