Solution Using CSS Flex

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Carlos Ng, It looks good! but you have some issues you need to fix.

  1. All page content should be contained by landmarks, So document should have one main landmark, Contain the component in <main>...</main>.
  2. Page should contain a level-one heading, Change h2 to h1 You should always have one h1 per page of the document.
  3. This <p>Cancel order</p> Should be a button to cancel the order when clicking on it, not a paragraph
  4. This <span class="change">Change</span> should be an anchor link, not a span

   <main>
        <div class="background">
  
           <div class="card">
              <div class="card-header"></div>
              <div class="card-content">
  
                 <h1>Order Summary</h1>
                 <p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Dolore fugit nemo recusandae nam enim! Facere cupiditate iste
                    id perferendis praesentium similique rerum ea vitae aut?</p>
  
                 <div class="plan-container">
                    <i class="m-icon"></i>
                    <div>
                       <span class="title">Annual Plan</span>
                       <span class="sub-title">$59.99/year</span>
                    </div>
                    <a class="change" href="#">Change</a>
                 </div>
  
                 <button> Proceed to Payment </button>
                 <button>Cancel order</button>
              </div>
           </div>
        </div>
     </main>
  

  I hope this is useful to you... Keep coding👍

  Marked as helpful

  1

  ---

  

  ahmed•40

  @ahmed-abdatPosted over 2 years ago

  @Bayoumi-dev Hello Brother I have question can I use a instead of button !

  and thank you that comment it is helpful

  0

  

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  @ahmed-abdat It depends on what you want to happen after clicking on "Cancel order" ... will it redirect the user to another page or section? Use anchor link <a> Otherwise, use the button

  • Buttons are used for actions like opening or closing something, or sending a form.
  • Links are used for navigation and actions.

  Marked as helpful

  2

  

  Carlos Ng•20

  @carlosngvPosted over 2 years ago

  Thanks @Bayoumi-dev Appreciate your feedback! I'll take note of your suggestions.

  0