"Untitled"
Bootstrap 4.1.1 Snippet by krunb

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-7"> <div class="card"> <div class="title mb-3"> <h4> سند قبض من ولاء بلس</h4> <p class="text-muted"> رقم السند : 1237</p> </div> <div class="info mb-3"> <div class="info-box"> <h5>المبلغ</h5> <p class="text-muted">200,000 ريال</p> </div> <div class="info-box"> <h5>التاريخ</h5> <p class="text-muted">2020-04-22</p> </div> <div class="info-box"> <h5>طريقة الدفع</h5> <p class="text-muted">حوالة بنكية</p> </div> </div> <h5 class="mb-3">التفاصيل</h5> <table class="table table-borderless"> <tbody> <tr> <td>اشتراك سنوي في برنامج الخصومات</td> <td class="text-left"><span>150,000</span> ريال</td> </tr> <tr> <td>اشتراك سنوي في برنامج برافو</td> <td class="text-left"><span>50,000</span> ريال</td> </tr> <tr> <td>الضريبة</td> <td class="text-left"><span>50,000</span> ريال</td> </tr> <tr class="green-dark"> <td>المجموع</td> <td class="text-left"><span>250,000</span> ريال</td> </tr> </tbody> </table> <div class="note"> <p> اذا كان لديك أي أسئلة أو استفسارات بإمكانك التواصل معنا على <a href="mailto:info@walaplus.com" class="text-primary">info@walaplus.com</a> </p> <p> <small class="text-muted"> لقد تلقيت هذا البريد لأنك قمت بالدفع للإشتراك في منتجات شركة ثورة العلم لتقنية المعلومات المسجلة في المملكة العربية السعودية سجل تجاري رقم (1010352498) والرقم الضريبي (310218493500003) </small> </p> <p> <small class="text-muted"> شركة ثورة العلم لتقنية المعلومات - المملكة العربية السعودية - 3297 شارع الأمير جلوي بن تركي بن عبد العزيز ، المروج ، 6315، الرياض 12813297 </small> </p> </div> </div> </div> </div> </div>
*{ direction: rtl; text-align: right; } .card{ margin-top: 30px; padding: 2rem; border-radius: 5px; } .text-muted{ color: #a0a0a0!important; } .text-primary{ color: #02d081!important; } .info{ display: flex; justify-content: space-between; } .info .info-box{ text-align: center; } table tr{ background-color: #dcfbf3; } .green-dark{ font-weight: bold; background-color: #02e3b7; }

Related: See More


Questions / Comments: