Cara Membuat Pricing Table Responsif dengan HTML & CSS

Tidak akan pernah bisa melihat wajah sendiri dengan baik jika cerminnya kusam dan kotor. Pun sama, tidak akan pernah bisa melihat dengan baik seluruh kehidupan ini jika hati kita kusam dan kotor. Oke kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Pricing Table Responsif dengan HTML & CSS.

Pricing table merupakan table harga yang biasanya digunakan untuk pada penjualan barang-barang, atau pada penjualan hosting dan domain teman-teman. Oke langsung saja, berikut Cara Membuat Pricing Table Responsif dengan HTML & CSS.

Pertama-tama, seperti biasa siapkan file index.html nya.

Kemudian, isi di bagian <body> tag-tag HTML berikut.

<h2 style="text-align:center">Responsive Pricing Tables</h2>
<p style="text-align:center">Resize the browser window to see the effect.</p>

<div class="columns">
  <ul class="price">
    <li class="header">Basic</li>
    <li class="grey">$ 9.99 / year</li>
    <li>10GB Storage</li>
    <li>10 Emails</li>
    <li>10 Domains</li>
    <li>1GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header" style="background-color:#4CAF50">Pro</li>
    <li class="grey">$ 24.99 / year</li>
    <li>25GB Storage</li>
    <li>25 Emails</li>
    <li>25 Domains</li>
    <li>2GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header">Premium</li>
    <li class="grey">$ 49.99 / year</li>
    <li>50GB Storage</li>
    <li>50 Emails</li>
    <li>50 Domains</li>
    <li>5GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

Dan setelah itu, isi untuk bagian CSS nya.

* {
    box-sizing: border-box;
}

.columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.price .grey {
    background-color: #eee;
    font-size: 20px;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

Bagaimana teman-teman? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang bagaimana Cara Membuat Pricing Table Responsif dengan HTML & CSS.

Semoga bermanfaat, terima kasih

Cara Membuat Pricing Table Responsif dengan HTML & CSS

Kategori