
<section class="page-section" id="contact" style="margin-top: 100px;">
  <div class="container">
      <div class="divider-custom">
          <div class="divider-custom-line"></div>
          <div class="divider-custom-icon"><svg class="svg-inline--fa fa-star" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z"></path></svg><!-- <i class="fas fa-star"></i> Font Awesome fontawesome.com --></div>
          <div class="divider-custom-line"></div>
      </div>
      <!-- Contact Section Form-->
      <div class="row justify-content-center">
          <div class="col-lg-8 col-xl-7">
                  <div class="form-floating mb-3">
                      <h1>Carrinho com seus produtos</h1>
                      <div *ngFor="let pedido of mostraPedido" class="carrinho">
                        <p> Nome : {{pedido.nome}}</p>
                        <p> Descrição : {{pedido.descricao}}</p>
                        <p> Preço : {{pedido.preco}}</p>
                        <p>Ordem: {{pedido.idPedido}}</p>
                        <button (click)="deletaPedido(pedido.idPedido)">Retirar do Carrinho</button>
                      </div>

                      <h2 class="total">TOTAL : R$ {{total}}</h2>
                  </div>
          </div>
      </div>
  </div>
</section>
