order-summary-component

Community feedback

• 

  CodeWithPedro•160

  @codewithpedroPosted over 2 years ago

  Hi Prayash,

  You have an amazing start with the challenge. Majority of the the content is there: Order summary, description, price, and payment button. Overall it looks great. Although, I do have 2 main concerns. The first one is why the hero image did not display and the second is how to layout your elements

  For the first concern the answer is really simple you forgot to add a dot to your src img. Should look like this.

  <img src="./images/illustration-hero.svg" alt="hero">
  

  Second is how to layout your elements. Lets define some elements. The header element is usually the top element that contains logo and nav (and/or) the hero. The footer element is usually the bottom end with links and a copyright. The section is like a div and it's usually use for articles. The main element is usually the most important information to the user. Therefore the header, footer, and section should not be inside your component. Instead use div elements for styling purposes.

  You would have something like this

  <main>
    <div class="wrapper">
       <div class="card">
          <img src="/images/illustration-hero.svg" alt="hero" />
          <div class="card--order-summary">
             <h1>Order Summary</h1>
             <p>You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!</p>
          </div>
          <div class="card--order-plan">
           <img src="images/icon-music.svg" alt="music">
           <h3>Annual Plan</h3>
           <p>$59.99/year</p>
           <a href="#">Change</a>
          </div>
          <div class="card--payment">
            <p>Proceed to Payment</p>
            <p>Cancel Order</p>
          </div>
        </div>
     </div>
   </main>
  

  Also I included some classes with as a name and double line ("card--payment") so I know in my css which part I am styling.

  Hope this helps! Good luck! Have fun coding!

  Marked as helpful

  0