Order Summary Component with Vanilla HTML and CSS

Community feedback

• 

  Alper•1,090

  @adonmez04

  Posted over 2 years ago

  Hi @tizerk,

  I checked your code. It's a good solution, keep coding. I have some suggestions for you.

  1 - I recommended to use <a> tag for button. <button> tag uses useally as a submit a form.

  2 - Also, you can follow this order to write your <a> tag in CSS: a:link, a:visited {} and a:hover, a:active {} It's best practice.

  3 - margin: none; It'll be better margin:0. Use numeric style.

  4 -<img> tag is an inline element. It has a white line at the bottom. It'll be a problem on mobile. You can change its display property as :display: block

  5 - border-radius: 2rem 2rem 0rem 0rem; You don't need this in the img tag. You can just write this code to img tag's parent: overflow:hidden; It'll execute the same way.

  Check some good solutions and implement to your code. I hope these will help you to improve your perspective. Keep coding. All the best.

  10

  Marked as helpful
• 

  Hassia Issah•50,390

  @Hassiai

  Posted over 2 years ago

  wrap <div class="attribution"> in the footer tag to fix the accessibility issue.

  You forgot to give the body a background-image with a background-size of contain and a background-repeat of no-repeat.

  In the media query, change the background-image of the body.

  For a responsive content, replace the width in .container with max-width. e.g.: max-width: 27rem which is 432px.

  To center .container on the page using flexbox, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body.

   To center .container on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  10

  Marked as helpful
• 

  Muhammadh•1,140

  @Mr-jaw

  Posted over 2 years ago

  Hello there 👋

  Congratulations on completing the challenge

  HTML 📄

  • replace <div class="attribution"> with the <footer> tag to fix accessibility issues.

  • Also use <em> or <small> for short text rather than using <p> which is used fro descriptive text.

  <p class="annual-header">Annual Plan</p>
  <p class="annual-price">$59.99/year</p>
  

  CSS 🎨

  • Add a max-width of 25em or something like that to decrease the size of the card to bring it closer to the original design

  .container {
         max-width: 25em;
  }
  

  I hope this was useful 😊

  HAPPY CODING

  10

  Marked as helpful