Order summary component

Community feedback

• 

  Vinicius Henrique•590

  @viniciusshenri96Posted over 2 years ago

  @JimaLoko Olá, parabéns por concluir o desafio, utiliza tags mais semânticas para marcar seu conteúdo no HTML como <main> <header> <nav> <section> <article> <aside> <footer>, você pode ler aqui o significado de cada uma delas: Semântica, exemplo no seu código:

  <main id="container">
      <section class="card">
        <div class="order-sumary">
          <img class="hero" src="assets/images/illustration-hero.svg" alt="">
          <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="plan-container">
          <img src="assets/images/icon-music.svg" alt="">
          <div class="plan">
            <h2>Annual Plan</h2>
            <p>$59.99/year</p>
          </div>
          <a href="#">change</a>
        </div>
        <div class="btns">
          <a class="proceed-btn" href="">Proceed to Payment</a> <br>
          <a class="cancel-btn" href="">Cancel Order</a>
        </div>
      </section>
  </main>
  <footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Jimaloko</a>.
  </footer>
  

  colocando seu conteúdo principal dentro do <main> vai evitar também problemas de ACCESSIBILITY ISSUES aqui no frontend Mentor.

  eu não usaria <h2> para marcar o Annual Plan, você pode usar uma tag mais genérica, tipo <p>, ou <span>. pq não tem uma descrição embaixo, ou seja um texto em relação ao titulo, e não é uma nova sessão.

    <div class="plan-container">
              <img src="assets/images/icon-music.svg" alt="">
              <div class="plan">
                  <p>Annual Plan</p>
                  <p>$59.99/year</p>
              </div>
              <a href="#">change</a>
      </div>
  

  Não usa id para selecionar seus elementos, tente sempre utilizar classe, pode dar problemas de especificidade no seu CSS e também evita problemas futuros.

  você pode ler mais sobre aqui: Especificidade

  Bom trabalho, continue praticando!

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Fala João Marcos, tudo bem? Parabéns pelo desafio!

  Acabei de olhar a sua solução e uma coisa que impede o container de ficar responsivo, são o width que deveriam ser max-width. No bloco da imagem header, seccao de preço, botao e container, vc tem que substituir todos com max-width. Por exemplo, o botao está width: 100%; significa que ele vai ter 100% sempre se fosse max-width: 100%; ele teria o maximo 100% mas poderia diminuir de acordo com o tamanho do container.

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  0

  ---

  

  João Marcos Teixeira Ribeiro•230

  @JimaLokoPosted over 2 years ago

  @correlucas Obg Lucas, vou corrigir, haha esse foi um dos primeiros que fiz com certeza deve ter alguns erros. Qualquer hora olhe alguma soluçao mais recente minha para ver minha evoluçao!

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @JimaLoko vou ver sim irmão 👏

  1