<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="AcelleSystemLayouts">
    <title>Checkout Layout</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/6_blue.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Recursive" rel="stylesheet" type="text/css"/>
    
  </head>
  <body style="width: 100%">    
    <form action="{ACTION}" method="POST" builder-element="FormElement" builder-container builder-wrapper role="main">
      <div class="blue-container">
        <div class="d-flex">     
          <div class="box-left" style="padding:2.2rem">
            <h2 builder-element builder-inline-edit>Blue Order Collection</h2>
  
            <div class="product-list">
              <div builder-element builder-draggable class="li">
                  <div>
                    <img builder-element src="image/p1.jpg" />
                  </div>
                  <div class="width-100">
                    <a builder-element builder-inline-edit href="">Laptop Probook 2000k</a>
                    <p builder-element builder-inline-edit class="m-0">Color: Grey/Black; Screen: 4K, touch</p>
                    <div builder-element builder-inline-edit class="price">$1,900</div>
                  </div>                    
              </div>
              <div builder-element builder-draggable class="li">
                  <div>
                    <img builder-element src="image/p2.jfif" />
                  </div>
                  <div class="width-100">
                    <a builder-element  builder-inline-edit href="">Surface Book 2020</a>
                    <p builder-element builder-inline-edit class="m-0">Color: Black; CPU: i7, 16GB RAM</p>
                    <div builder-element  builder-inline-edit class="price">$2,300</div>
                  </div>                    
              </div>
              <div builder-element builder-draggable class="li">
                  <div>
                    <img builder-element src="image/p3.jpg" />
                  </div>
                  <div class="width-100">
                    <a builder-element  builder-inline-edit href="">MacBook Pro 2020</a>
                    <p builder-element builder-inline-edit class="m-0">Color: Space Grey; Size: 16 inch</p>
                    <div builder-element  builder-inline-edit class="price">$2,540</div>
                  </div>                    
              </div>
            </div>
            <div builder-element builder-draggable class="bottom-summary line-1">
              <div builder-element  builder-inline-edit class="mr-auto">VAT 10</div>
              <div builder-element  builder-inline-edit class="">$674</div>
            </div>
            <div builder-element builder-draggable class="bottom-summary line-2">
              <div builder-element  builder-inline-edit class="mr-auto">Delivery</div>
              <div builder-element  builder-inline-edit class="">$40</div>
            </div>
            <div builder-element builder-draggable class="bottom-summary line-3">
              <div builder-element  builder-inline-edit class="mr-auto">TOTAL</div>
              <div builder-element  builder-inline-edit class="">$7,454</div>
            </div>
          </div>
          <div class="box-right d-flex justify-content-right" style="padding:2.2rem">
            <div class="left-form-container">      
              <div class="container">
                <h1 class="mb-4" builder-element builder-draggable builder-inline-edit>ORDER PLACEMENT</h1>       
              </div> 
              <div builder-element="BlockElement" builder-container style="min-height: 100px" id="formContainer">
                                                                               
              </div>
            </div>            
          </div>
        </div>        
      </div>
    </form>
  </body>
</html>
