Order summary component

Community feedback

• 

  vinu cyril•980

  @vinumanPosted over 1 year ago

  Hello,

  Good job completing the project. The design looks impeccable.

  • Kindly use the <main> tag to enclose the content instead of the 'container' div. The <main> tag is used to indicate the primary content of the document, and it helps search engines and accessibility tools to understand the structure and hierarchy of the content on the page.

  • The "<p>Proceed to Payment</p>" should be replaced with a button element and do add hover to it.

  <button>Proceed to Payment</button>

  • You can make your buttons and other clickable items more interactive and engaging, you can use the, <--cursor:pointer;--!> property in CSS. This property changes the appearance of the cursor when it hovers over a button, indicating that it is clickable.

  • Additionally, you can use the :hover pseudo-class which can change the styling of an element when a user hovers over it with their mouse. This can be a great way to add visual feedback and make your website more engaging for your visitors.

    button:hover{ background-color: somecolor; color: somecolor; }

  • The <p class="order">Cancel Order</p> can also be changes to a button or <a> tag.

  • Hope this helps. Happy Coding!

  Marked as helpful

  2
• 

  Shaxboz•1,230

  @shakhboz-shukhratPosted over 1 year ago

  Hello there👋! Congratulations on completing this challenge!

  There are no logical errors in the code provided. However, a few improvements can be made. For instance:

  The font name 'Areial' should be corrected to 'Arial.'

  The background-color property is declared twice in the ".container" selector. Only one declaration is necessary.

  Instead of using "!important" to override the default padding-top value of 0, it is better to avoid it altogether by removing the "padding-top" declaration and adding "margin-top: 30px;" to the ".container" selector.

  In the ".plan_info img" selector, "object-fit: cover;" property is not applicable. Instead, it is better to use the "object-fit: contain;" property to maintain theOpenAI: API Response was: Error aborted More information about this error: https://www.codegpt.co/docs/tutorial-basics/api_errorsThere are some minor issues with the code, the major ones are:

  There is a typo in the font family name of "Aerial" in body styling which should be "Arial".

  The URL of the background image is incorrect and doesn't exist, so it should be replaced with a valid image URL.

  The box-shadow value in the ".song-box" class is incorrect, it should be "0px 40px 40px -20px rgba(13, 48, 189, 0.2)".

  Here is the corrected code:

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  *::after,
  *::before {
    box-sizing: border-box;
  }
  
  body {
    font-family: "Arial", sans-serif;
  }
  
  @media all and (max-width: 600px) {
    body {
      font-family: "Arial", sans-serif;
      background-color: #e0e8ff;
    }
  }
  
  .container {
    display: grid;
    place-items: center;
    max-width: 1440px;
    margin: 1% auto;
    width: 100%;
    background-color: #e0e8ff;
    min-height: calc(100vh - 50px);
    height: 100%;
    background-image: url("https://www.example.com/images/pattern-background-desktop.svg");
    background-position: top center;
    background-repeat: no-repeat;
    padding: 0 24px;
    padding-top: 30px !important;
  }
  
  .desktop-topbg img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
  }
  
  .song-box {
    display: block;
    background-color: #fff;
    border-radius: 20px;
    max-width: 495px;
    width: 100%;
    position: relative;
    text-align: center;
    box-shadow: 0px 40px 40px -20px rgba(13, 48, 189, 0.2);
  }
  
  .song-box img {
    border-radius: 20px 20px 0 0;
    max-width: 100%;
    width: 100%;
    height: auto;
  }
  
  .song-box h2 {
    color: #1f2e55;
    font-size: 28px;
    margin-top: 45px;
  }
  
  .song-box p {
    color: #717fa6;
    margin-top: 17px;
  }
  
  .year_plan {
    background-color: #f7f9ff;
    border-radius: 11px;
    display: inline-block;
    width: 354px;
    max-width: 354px;
    height: 98px;
    margin-top: 20px;
  }
  
  @media all and (max-width: 600px) {
    .year_plan {
      width: 279px;
    }
  }
  
  .plan_info {
    display: flex;
    justify-content: space-around;
    margin-top: 25px;
  }
  
  .plan_info img {
    width: 48px;
    height: 48px;
    object-fit: cover;
  }
  
  .plan_info .text_info p {
    color: #717fa6;
    margin-top: 6px;
  }
  
  .plan_info a {
    color: #382ae1;
    font-weight: bold;
  }
  
  .text_info h4 {
    color: #1f2e55;
  }
  
  .submit {
    max-width: 354px;
    width: 100%;
    height: 50px;
    background-color: #382ae1;
    color: white;
    font-size: 15px;
    font-weight: bolder;
    display: inline-block;
    border-radius: 11px;
    margin-top: 32px;
    box-shadow: 0px 20px 20px rgba(56, 42, 225, 0.19);
  }
  
  @media all and (max-width: 600px) {
    .submit {
      width: 279px;
    }
  }
  
  .submit p {
    color: white;
  }
  
  p.order {
    margin: 32px 0;
    font-size: 15px;
    font-weight: bold;
    color: #717fa6;
  }
  
  .attribution {
    text-align: center;
    display: none;
  }
  

  Anyway, your solution is great. Hope you will find this helpful. Happy coding!

  0