Cara Membuat Element Card Responsive Model Tabel

Mas Koding
Januari 10, 2021
1

Disini saya akan membagikan sebuah Element Card Responsive Model Tabel, yang mana ini merupakan desain model yang sering saya gunakan untuk menampilkan tampilan model Card di  web saya yang lain.


Sebagai contoh hasilnya seperti berikut ini :

Kode Voucher 8927 7637 8928 3894
Expired 24 Desember 2021
Status Pemakaian Menunggu Konfirmasi Pemakai
Link Download Ambil Voucher


Coba kamu buka inspect element lalu geser ukuran layar untuk uji responsivenya.

Sebenarnya ini hanya catatan agar mempermudah saya dalam mendesain artikel yang memerlukan model card responsive. Jika kamu rasa perlu menggunakan model ini, silahkan kamu ikuti tutorial cara menggunakannya berikut ini :


Cara Penggunaan Element Card Responsive Model Tabel

Untuk menggunakan element card ini, kamu harus memasang kode html dan kode style.

Kode HTML

<div class="so">
  <div class="st">
    <span class="sti">Kode Voucher</span>
    <span class="sto">8927 7637 8928 3894</span>
  </div>
  <div class="st">
    <span class="sti">Expired</span>
    <span class="sto">24 Desember 2021</span>
  </div>
  <div class="st">
    <span class="sti">Status Pemakaian</span>
    <span class="sto">Menunggu Konfirmasi Pemakai</span>
  </div>
  <div class="st">
    <span class="sti">Link Download</span>
    <span class="sto">Ambil Voucher</span>
  </div>
</div>

Kode Style

<style>
.so {
    box-shadow: 0px 0px 2px 1px #00000078;
    border-radius: 5px;
    width: fit-content;
    margin: 10px 0;
}
.st {
    display: table-row;
    width: -webkit-fill-available;
    border-bottom: 2px solid #00000094;
}
.sti {
    display: table-cell;
    text-align: left;
    width: max-content;
    background-color: #93ddfc33;
    padding: 2px 10px;
    font-weight: bold;
    border-bottom: 1px solid #0000004a;
}
.sto {
    padding: 2px 10px;
    display: table-cell;
    background-color: #94fdff12;
    width: -webkit-fill-available;
  	border-bottom: 1px solid #0000004a;
}
</style>


Mungkin ini saja yang bisa saya bagikan, jika ada kendala silahkan komentar di bawah.


Donasi Buat Secangkir Kopi...wkwk

Dana : 0838-1174-6714
Paypal : https://www.paypal.me/maskoding