Order Summary Card with pure HTML and CSS

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  At the beginning working with media queries can be a bit difficult but it is very useful because most projects must have mobile, tablet, desktop and even TV view.

  But you have done well, I would have recommended you to add those background measures to the body so that when you close the screen it looks pretty good and give it the following ones:

  body { background-image: url(pattern-background-desktop.svg); background-color: #e0e8ff; background-repeat: no-repeat; background-size: contain; }

  To your section remove those measures. Also that now the media querie is applied to the body only changing the image to the mobile image.

  By the way the errors in your report are similar to those of your first project where Abdul gave you a tip to correct them.

  That would be all, keep going, you are doing well.

  Marked as helpful

  1

  ---

  

  Daniel•30

  @Aflora22Posted over 2 years ago

  @Sdann26 I'm a little dumb because I don't know how to solve these reports :( I tried to use section but is not this I think

  0
• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey!! Cheers 🥂 on completing this challenge.. .

  Here are my suggestions..

  • You should use <main class="container"> instead of <div class="container">.
  • Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

  This should fix most of your accessibility issues

  . Regardless you did amazing... hope you find this useful... Happy coding!!!

  Marked as helpful

  0
• 

  Jasur Kurbanov•80

  @jasurkurbanovPosted over 2 years ago

  Your main problem is from HTML part, not from CSS. Since your layout was created not coherently correct you had problem with media-queries. I suggest you this structure to your website.

  <section class="container">
      <div class="card">
          <img class="hero-img" ..../>
          <h2>...</h2>
          <p>...</p>
          <div class="payment">
              <img class="img2" src="icon-music.svg" alt="icon-music">
              <div class="payment-annual">
                  <span class="annual">Annual Plan</span><br>
                  <span class="year">$59.99/year</span>
              </div>
              <button class="text-outline blue">
                  <a href="https://github.com/Aflora22">Change</a>
              </button>
          </div>
          <button class="primary">Proceed to Payment</button>
          <button class="text-outline">Cancel Order</button>
      </div>
  </section>
  

  This structure can solve your problems and reduce amount of code you wrote. Feel free to ask question if you don't understand anything.

  2

  ---

  

  Daniel•30

  @Aflora22Posted over 2 years ago

  @jasurkurbanovinit looks much less code that I did 😅 I'll change tomorrow since is 1 am here, cya and thanks

  0

  

  Jasur Kurbanov•80

  @jasurkurbanovPosted over 2 years ago

  @Aflora22 glad that help you

  0
• 

  Daniel•30

  @Aflora22Posted over 2 years ago

  yay all fixed, thanks guys... my code still not perfect but I learn a lot with you <3

  0