<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet"> <div class="container"> <div class="row"> <div class="wrapper"> <div class="logo_header"> <a href="#"><img src="log-font.svg"/></a> </div> <div class="email_banner"> </div> <div class="email_body"> <div class="welcome-text"> <span class="name">Hai Azizah Septiningtyas, <p> Terima kasih telah berbelanja di JAKARTA STORE </p> <p> Kami akan mengirimkan nomor bukti pengiriman setelah pesanan kamu telah dikirimkan. kamu dapat mengecek status pemesanan dengan cara masuk ke akun kamu. </p> <p> Bila kamu memiliki pertanyaan, silakan Hubungi Kami </p> <div class="inv"> <span class="text-number">Nomor Pesanan: </span><br/> <span calss="id-number">#00000002</span><br/> <span calss="date">Dipesan pada 19 May 2019</span> </div> <div class="wrap-adress_list"> <div class="left_list"> <b>Alamat Pengiriman</b> <span class="address-list">Ridzky Darmawan<br/> Cempaka Putih 9 III<br/> 10520<br/> Kota Jakarta Pusat<br/> Indonesia<br/> +6281299339222<br/> </span> </div> <div class="right_list"> <b>Alamat Pengiriman</b> <span class="address-list">Ridzky Darmawan<br/> Cempaka Putih 9 III<br/> 10520<br/> Kota Jakarta Pusat<br/> Indonesia<br/> +6281299339222<br/> </span> </div> <div class="motode"> <div class="left_list"> <b>Metode Pembayaran</b> </div> <div class="right_list"> <span><b>Metode Pengiriman</b></span> </div> </div> </div> <div class="choice-pay"> <div class="choise_left"> <p>BCA Virtual Account</p> </div> <div class="choise_right"> <p>JNE YES - Yakin Esok Sampai</p> </div> </div> <table id="table-email" class="data table wrapper-tabel"> <thead> <tr> <th class="col item" scope="col"><span>Produk</span></th> <th class="col qty" scope="col"><span>Jumlah</span></th> <th class="col subtotal" scope="col"><span>Subtotal</span></th> </tr> </thead> <tbody class="list item"> <tr class="item-info"> <td class="col product" > <span class="name-product">TEE NEVER LOOK DOWN<br/> ON ME BLACK MALE</span><br/> <span class="name-product">DAMN! SIGNATURE MALE <br/>RED HD BLACK</span> </td> <td class="col qty"> <span class="inner-qty">2</span><br/> <span class="inner-qty">2</span> </td> <td class="col subtotal"> <span class="inner-subtotal">Rp 1.199.600</span><br/> <span class="inner-subtotal"> Rp 440.000</span> </td> </tr> <tr class="subtotal"> <td colspan="1"></td> <td colspan="2"> <span class="text">SUBTOTAL</span> <span class="nominal">Rp 1.639.600</span></td> </tr> <tr class="subtotal"> <td colspan="1"></td> <td colspan="2"> <span class="text">PENGIRIMAN</span> <span class="nominal">Rp 25.000</span></td> </tr> <tr class="total"> <td colspan="1"></td> <td colspan="2"> <span class="text-total">TOTAL HARGA</span> <span class="nominal-total">Rp 1.664.600</span></td> </tr> </tbody> </table> <div class="thanks"> <span class="text-thanks">Terima kasih,</span> <span class="text-dili">JAKARTA STORE</span> </div> <div class="wrapper-footer"> <div class="dili"> <span>PT. JAKARTA STORE</span> </div> <div class="address"> <span>Jalan Tomang Jakarta 11430</span> </div> <div class="icon_sosmed"> <ul> <li><a href="#"><img src="log-font.svg"/></a></li> <li><a href="#"><img src="log-font.svg"/></a></li> <li><a href="#"><img src="log-font.svg"/></a></li> <li><a href="#"><img src="log-font.svg"/></a></li> </ul> </div> <div class="copyright"> <span>@ 2019 JAKARTA STORE</span> </div> </div> </div> </div>

.wrapper{width:60%; margin:5% auto;height:100vh; box-shadow:0 0 2px #aaa; font-family:Hind;} .logo_header{text-align:center;width:100%; height:70px; padding:10px;} .email_body{width:100%; padding:0 15px;} .wrap-adress_list{width:100%;} .wrap-adress_list .left_list{float:left; width:50%;} .wrap-adress_list .right_list{float:left; width:50%;} .left_list b,.right_list b{width:100%; float:left; margin:0 0 10px 0;} .left_list span,.right_list span{width:100%; float:left; margin:0 0 5px 0;} .right_list span{text-align:left; } .list_divider{width:100%; border-top:1px solid rgba(0,0,0,0.2);float:left;} .invoice_trans{width:100%;float:left; margin:5px 0;} .choise_left{float:left; width:50%;} .choise_right{float:left; width:50%;} .wrapper-footer{ text-align:center; } ul { display:flex; text-align:center; justify-content:center; } li{ list-style-type:none; text-align:center; }