---
title: "Invoice"
group: pages
---
<div class="row">
  <div class="m-auto col-md-10 offset-md-1">
    <div class="text-monospace">
      <div class="card">
        <div class="bg-dark text-light rounded-top p-5">
          <div class="p-5">
            <h1 class="font-weight-bold">Envato</h1>
            <div class="d-md-flex">
              <div class="mr-auto">
                <ul class="list-unstyled">
                  <li>Austin Walker</li>
                  <li>austin.walker94@example.com</li>
                </ul>
                <ul class="list-unstyled">
                  <li>4147 Calle de Toledo</li>
                  <li>Parla</li>
                  <li>Castilla la Mancha</li>
                  <li>Spain</li>
                  <li>94329</li>
                </ul>
                <ul class="list-unstyled">
                  <li>Invoice #45789</li>
                  <li></li>
                </ul>
              </div>
              <div class="text-right">
                <ul class="list-unstyled">
                  <li>Amazon AWS</li>
                  <li>Francine Miles</li>
                  <li>frank.miles98@example.com</li>
                </ul>
                <ul class="list-unstyled">
                  <li>9502 Rue de L'Abbé-Patureau</li>
                  <li>Montcherand</li>
                  <li>Basel-Landschaft</li>
                  <li>Switzerland</li>
                  <li>6873</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="rounded-bottom p-5">
          <div class="p-5">
            <div class="d-flex py-2 text-muted  border-bottom border-top align-items-center border-light">
              <div class="mr-auto">
                <small>Description</small>
              </div>
              <div class="text-right">
                <small>Amount</small>
              </div>
            </div>
            <div class="d-flex py-4 border-bottom align-items-center border-light">
              <div class="mr-auto">
                <span>Maintanance</span>
                <small class="d-block text-muted">Monthly web updates for http://www.themeforest.net<span>&nbsp;*&nbsp;1</span></small>
              </div>
              <div class="text-right">
                <span>$250.00</span>
              </div>
            </div>
            <div class="d-flex py-4 border-bottom align-items-center border-light">
              <div class="mr-auto">
                <span>Recurring Bill (Hosting)</span>
                <small class="d-block text-muted">Monthly dedicated VPN web hosting (1 Jan - 30 Jan, 2014)<span>&nbsp;*&nbsp;3</span></small>
              </div>
              <div class="text-right">
                <span>$1,958.61</span>
              </div>
            </div>
            <div class="d-flex py-4 border-bottom align-items-center border-light">
              <div class="mr-auto">
                <span>Recurring Bill (Domain)</span>
                <small class="d-block text-muted">2 year domain name purchase<span>&nbsp;*&nbsp;3</span>
                </small>
              </div>
              <div class="text-right">
                <span>$717.00</span>
              </div>
            </div>
            <div class="d-flex py-4 border-bottom align-items-center border-light">
              <div class="mr-auto">
                <span>Web design</span>
                <small class="d-block text-muted">PSD to HTML Conversion (3 pages)<span>&nbsp;*&nbsp;1</span>
                </small>
              </div>
              <div class="text-right">
                <span>$958.00</span>
              </div>
            </div>
            <div class="d-flex">
              <div class="d-block ml-auto w-100" style="max-width: 400px;">
                <div class="d-flex py-4 border-bottom border-top align-items-center border-light">
                  <small class="mr-auto text-muted">Subtotal</small>
                  <span class="text-right">$3,883.61</span>
                </div>
                <div class="d-flex py-4 border-bottom border-top align-items-center border-light">
                  <small class="mr-auto text-muted">Tax</small>
                  <span>
                    <small class="text-muted">@ 15% -
                    </small>
                    <span>$582.54</span>
                  </span>
                </div>
                <div class="d-flex py-4 border-bottom border-top align-items-center border-light">
                  <small class="mr-auto text-muted">Discount</small>
                  <span>
                    <small class="text-muted">0% off -
                    </small>
                    <span>$0.00</span>
                  </span>
                </div>
                <div class="d-flex py-4 border-bottom border-top align-items-center border-primary">
                  <small class="mr-auto text-muted">Total</small>
                  <strong>$4,466.15</strong>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="my-5 text-center">
        <button class="py-2 px-4 mx-2 btn btn-primary">Pay Now</button>
        <button class="py-2 px-4 mx-2 btn btn-danger">Cancel</button>
      </div>
    </div>
  </div>
</div>