order-summary-component

Community feedback

• 

  Ed-dyb Abdelilah•1,560

  @eddybproPosted over 1 year ago

  Hello, Judith👏

  Congratulation for finishing this challenge 🎉.

  For the code here some improvements:

  • HTML code:

  <div class="price">
  <div>
  <img src="icon-path"/>
  <p class="plan"> Annual Plan
  <span>$59.99/year</span> 
  </p>
  </div>
  <a href="#" class="link">Change</a>
  </div>
  

  • CSS code:

  main{
  /* no need to use "padding" and "margin" */;
  /* add overflow property*/
  overflow : hidden;
  }
  
  main > img{
  /* no need to use border-radius*/
  /* add width property */
  width : 100%;
  }
  
  .summary{
  /* add "padding" property*/
  padding: 0 1rem;
  } 
  /* update the price class*/
  .price{
  display : flex;
  align-items : center;
  justify-content: center;
  gap: 1rem;
  padding : 0 1rem;
  }
  #pay{
  /* add "width" property*/
  width : 80%;
  color : white;
  }
  
  .btn{
  /* add this*/
  border: none;
  outline: none;
  cursor: pointer;
  /* update this*/
  border-radius: .5rem;
  /* no need to  "display" property*/
  }
  
  .cancel{
  background-color : transparent;
  color : blue;
  }
  

  I hope that will help:)

  good luck with your journey

  Marked as helpful

  0