Desktop design

Confirmation modal

Mobile design

Product list with cart

<div class="details">
              <p class="category">Waffle</p>
              <h3>Waffle with Berries</h3>
              <p class="price">$6.50</p>
              </div>

<div class="details">
              <p class="category">Crème Brûlée</p>
              <h3>Vanilla Bean Crème Brûlée</h3>
              <p class="price">$7.00</p>
              </div>

<div class="details">
              <p class="category">Macaron</p>
              <h3>Macaron Mix of Five</h3>
              <p class="price">$8.00</p>
              </div>

<div class="details">
              <p class="category">Tiramisu</p>
              <h3>Classic Tiramisu</h3>
              <p class="price">$5.50</p>
              </div>

<div class="details">
              <p class="category">Baklava</p>
              <h3>Pistachio Baklava</h3>
              <p class="price">$4.00</p>
              </div>

<div class="details">
              <p class="category">Pie</p>
              <h3>Lemon Meringue Pie</h3>
              <p class="price">$5.00</p>
              </div>

<div class="details">
              <p class="category">Cake</p>
              <h3>Red Velvet Cake</h3>
              <p class="price">$4.50</p>
              </div>

<div class="details">
              <p class="category">Brownie</p>
              <h3>Salted Caramel Brownie</h3>
              <p class="price">$4.50</p>
              </div>

<div class="details">
              <p class="category">Panna Cotta</p>
              <h3>Vanilla Panna Cotta</h3>
              <p class="price">$6.50</p>
              </div>

<div class="no-items-content">
          <img src="./assets/images/illustration-empty-cart.svg" alt="Empty Cart Illustration">
          <p class="empty-cart-text">Your added items will appear here</p>
        </div>

<div>
            <img src="./assets/images/icon-order-confirmed.svg" alt="Ordir confirm svg">
            <h2>Order Confirmed</h2>
            <p class="message">We hope you enjoy your food!</p>

            <ul class="confirmation-product-list"></ul>
          </div>

<div class="total-amt">
              <p>Order Total</p>
              <h2>$46.50</h2>
            </div>

<div class="attribution">
      <p class="anim">
        Challenge by
        <a href="https://www.frontendmentor.io?ref=challenge">Frontend Mentor</a>. Coded by <a href="#">Sudip Khatri</a>.
      </p>
    </div>

Please log in to post a comment

Community feedback

Responsive interactive Product Listing With Carts

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community