order summary card challenge complete

Community feedback

• 

  Joseph Fola•590

  @Fola-JoePosted about 2 years ago

  Congratulations on your first project here! 😎🎉🎉 So, a few things to consider - concerning the music icon, you could have just used <img src="images/icon-music" alt=""> rather than the long svg tag you used. Also, try to avoid using inline CSS.

  You could solve the whole div issue using this:

  <div class="price">
      <div  class="left-side">
          <img src="images/icon-music" alt="music icon">
          <div class="inner-left-side">
              <h3>Annual Plan</h3>
              <p>$59.99/year</p>
          </div>
      </div>
      <a class="a" href="">Change</a>
  </div>
  
  
  
  .price {
      background-color: hsl(225, 100%, 98%);
      border-radius: 0.8rem;
      padding: 0.85rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .left-side {
      display: flex;
      align-items: center;
  }
  .inner-price-left {
      margin-left: 1rem;
  }
  

  You can make adjustments to the values and more often, use rem or em instead of px. Of course, you can make use of your own class names 😄 I hope this helps, happy coding!😁🎈

  Marked as helpful

  0

  ---

  

  vigneshajith•80

  @vigneshajithPosted about 2 years ago

  Hi fellow coder i just finish my second challenge. check it out bro and thanks for the previous solution ☺☺☺

  0