Submitted about 3 years ago

Created using basic HTML and CSS

Ignatius Jovanka•90

@IgnJov

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, this is my first Front End Mentor challenges that I solved, any feedback for my solution would be really appreciated! I would like to improve my HTML and CSS skills based on the feedbacks :) Thank you so much for your feedbacks

Community feedback

Ignatius Jovanka•90
@IgnJovPosted about 3 years ago
Ohh okey thank you so much for the correction! Really appreciated!
0

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 years ago

hey.. the accessibility issue says that you should have wrapped all divs in <main> which is the semantic tag ,except for the div with class attribution that should be wrapper in <footer> tag also headings should be written in h1

<body>
<main>
  <div class="card">
    <div id="card-img">
      <img src="images/illustration-hero.svg" alt="">
    </div>

    <div class="card-desc">
      <h1 class="fw-900">Order Summary</h1>
      <p id="desc-text">You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!</p>
  
      <div id="plan">
        <img src="images/icon-music.svg" alt="" class="plan-icon">
        <div class="plan-detail">
          <h4 class="no-margin">Annual Plan</h4>
          <p class="no-margin">$59.99/year</p>
        </div>
        <a class="self-center" href="">Change</a>
      </div>
  
      <a class="fw-700 btn" id="proceed-btn" href="">Proceed to Payment</a>
      <a class="fw-900 btn" id="cancel-btn" href="">Cancel Order</a>
    </div>
  </div>
</main>
<footer>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Ignatius Jovanka</a>.
  </div>
</footer>
</body>```

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord