<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="main-content container"> <div class="row invoice"> <div class="col-md-3 invoice-aside"> <div class="invoice-logo"></div> <div class="invoice-data"> <div class="invoice-person text-center"><span class="name d-block font-weight-bold h4">James C. Grace</span><span class="position d-block">Developer and Designer</span><span class="d-block">james@example.com</span><span class="d-block">661 Bubby Street</span><span class="d-block">United States</span></div> <div class="invoice-payment-direction mt-5 mb-5 text-center"><i class="icon dcircle"></i></div> <div class="invoice-person text-center"><span class="name d-block font-weight-bold h4">Robert L. Juarez</span><span class="position d-block">CEO at BLX</span><span class="d-block">robert@example.com</span><span class="d-block">839 Owagner Drive</span><span class="d-block">United States</span></div> <div class="invoice-company-info mt-5"> <div class="summary"><span class="title">Maisonette Company</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="phone"> <ul class="list-unstyled"> <li>+1(223)-123456</li> <li>+1(335)-456789</li> </ul> </div> <div class="email"> <ul class="list-unstyled"> <li>mail@example.com</li> <li>email@example.com</li> </ul> </div> </div> </div> </div> <div class="col-md-9 invoice-content"> <div class="row invoice-header mb-5"> <div class="col-6 invoice-title h2 font-weight-light"><span>Invoice</span></div> <div class="col-6 invoice-order text-right"><span class="d-block h6 invoice-number">Number 2308</span><span class="text-muted invoice-date">August 23, 2018</span></div> </div> <div class="row"> <div class="col-md-12"> <table class="invoice-details mb-5"> <thead> <tr> <th style="width:60%;">Description</th> <th class="hours" style="width:17%;">Hours</th> <th class="amount" style="width:15%;">Amount</th> </tr> </thead> <tbody> <tr> <td class="description">Web design (Etiam sagittis metus sit amet mauris gravida hendrerit)</td> <td class="hours">60</td> <td class="amount">$4,200.00</td> </tr> <tr> <td class="description">Responsive design (Etiam sagittis metus sit amet mauris gravida hendrerit)</td> <td class="hours">10</td> <td class="amount">$1,500.00</td> </tr> <tr> <td class="description">Logo design (Cras faucibus tincidunt elit id rhoncus.)</td> <td class="hours">12</td> <td class="amount">$1,700.00</td> </tr> </tbody> </table> <table class="invoice-summary"> <thead> <tr> <th>Subtotal</th> <th>Discount (20%)</th> <th class="total">Total</th> </tr> </thead> <tbody> <tr> <td class="amount">$7,400,00</td> <td class="amount">$1,480,00</td> <td class="amount total-value">$5,920</td> </tr> </tbody> </table> </div> </div> <div class="row"> <div class="col-md-12"> <div class="invoice-payment-details border-bottom border-top mt-5 mb-5 pt-5 pb-5"> <p><b>Payment Method:</b> Credit card</p> <p><b>Card type:</b> Mastercard</p> <p><b>Number verification:</b> 4256981387</p> </div> </div> </div> <div class="row"> <div class="col-md-12 invoice-message mt-5 mb-5 mt-sm-6 mb-sm-6"><span class="title mb-4">Thank you for contacting us!</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis massa nisl. Sed fringilla turpis id mi ultrices, et faucibus ipsum aliquam.</p> </div> </div> <div class="row invoice-footer text-right"> <div class="col-md-12"> <button class="btn btn-space btn-secondary">Save PDF</button> <button class="btn btn-space btn-secondary">Print</button> <a href="https://www.totoprayogo.com" class="btn btn-space btn-primary" target="_blank">Pay now</a> </div> </div> </div> </div> </div>

body { background: grey; margin-top: 120px; margin-bottom: 120px; } .invoice-aside { background-color: #ededed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 50px 33px; min-width: 300px; } .invoice-logo { height: 39px; min-width: 233px; background-image: url(https://lorempixel.com/233/39?text=logo); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0; margin: 0 auto 115px; } .invoice-content { background-color: #fff; padding: 50px 33px; -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; } .invoice-summary { width: 100%; font-size: 1.38462rem; border-top: 1px solid #d9d9d9; margin-bottom: 110px; } .invoice-summary th { padding-top: 26px; font-weight: 600; } invoice-content .amount, invoice-content .hours { text-align: right; } .dcircle { height: 64px; width: 64px; display: block; margin: 20px auto; background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MzMgNDM4LjUzMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUzMyA0MzguNTMzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTQwOS4xMzMsMTA5LjIwM2MtMTkuNjA4LTMzLjU5Mi00Ni4yMDUtNjAuMTg5LTc5Ljc5OC03OS43OTZDMjk1LjczNiw5LjgwMSwyNTkuMDU4LDAsMjE5LjI3MywwICAgYy0zOS43ODEsMC03Ni40Nyw5LjgwMS0xMTAuMDYzLDI5LjQwN2MtMzMuNTk1LDE5LjYwNC02MC4xOTIsNDYuMjAxLTc5LjgsNzkuNzk2QzkuODAxLDE0Mi44LDAsMTc5LjQ4OSwwLDIxOS4yNjcgICBjMCwzOS43OCw5LjgwNCw3Ni40NjMsMjkuNDA3LDExMC4wNjJjMTkuNjA3LDMzLjU5Miw0Ni4yMDQsNjAuMTg5LDc5Ljc5OSw3OS43OThjMzMuNTk3LDE5LjYwNSw3MC4yODMsMjkuNDA3LDExMC4wNjMsMjkuNDA3ICAgczc2LjQ3LTkuODAyLDExMC4wNjUtMjkuNDA3YzMzLjU5My0xOS42MDIsNjAuMTg5LTQ2LjIwNiw3OS43OTUtNzkuNzk4YzE5LjYwMy0zMy41OTYsMjkuNDAzLTcwLjI4NCwyOS40MDMtMTEwLjA2MiAgIEM0MzguNTMzLDE3OS40ODUsNDI4LjczMiwxNDIuNzk1LDQwOS4xMzMsMTA5LjIwM3ogTTM2MS43MzMsMjA0LjcwNUwyMzIuMTE5LDMzNC4zMjRjLTMuNjE0LDMuNjE0LTcuOSw1LjQyOC0xMi44NDksNS40MjggICBjLTQuOTQ4LDAtOS4yMjktMS44MTMtMTIuODQ3LTUuNDI4TDc2LjgwNCwyMDQuNzA1Yy0zLjYxNy0zLjYxNS01LjQyNi03Ljg5OC01LjQyNi0xMi44NDVjMC00Ljk0OSwxLjgwOS05LjIzNSw1LjQyNi0xMi44NTEgICBsMjkuMTE5LTI5LjEyMWMzLjYyMS0zLjYxOCw3LjktNS40MjYsMTIuODUxLTUuNDI2YzQuOTQ4LDAsOS4yMzEsMS44MDksMTIuODQ3LDUuNDI2bDg3LjY1LDg3LjY1bDg3LjY1LTg3LjY1ICAgYzMuNjE0LTMuNjE4LDcuODk4LTUuNDI2LDEyLjg0Ny01LjQyNmM0Ljk0OSwwLDkuMjMzLDEuODA5LDEyLjg0Nyw1LjQyNmwyOS4xMjMsMjkuMTIxYzMuNjIxLDMuNjE2LDUuNDI4LDcuOTAyLDUuNDI4LDEyLjg1MSAgIEMzNjcuMTY0LDE5Ni44MDcsMzY1LjM1NywyMDEuMDksMzYxLjczMywyMDQuNzA1eiIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) }