Membuat Tabel Harga Produk dengan CSS

Assalamualaikum Wr. Wb.

Man-teman dimanapun berada, semoga selalu dalam keadaan sehat dan bahagia selalu ya, Amin.
Nah, pada kesempatan kali ini kita akan mempelajari tentang Membuat Tabel Harga Produk dengan menggunakan CSS.

Tentunya kita pernah melihat dalam sebuah website yang menyediakan produk maupun jasa. Biasanya disitu ada berbagai jenis paket beserta harga hingga keunggulan masing-masing paket.
Tampilannya berbentuk seperti tabel. Sebagai contoh ada beberapa website yang menyediakan produk hosting beserta domain.

Nah, sebagai bahan pelajaran kita kali ini. Kita akan menghayal seolah-olah kita membuat tampilan website untuk kebutuhan hosting dan domain tersebut.

Oke, kita langsung aja ya codingnya.

Buatlah file dengan format html terlebih dulu, lalu ketikkan script code berikut.

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Harga Hosting</title>
    <link rel="stylesheet" href="tabel-harga.css">
</head>

<body>

    <div class="badan">

        <h2>Paket Hosting Pilihan</h2>

        <div class="tabel-harga">
            <div class="header header-gratis">
                <span class="paket">Paket Free</span>
                <span class="harga">Gratis</span>
            </div>

            <ul>
                <li>Batas Waktu 3 Bulan</li>
                <li>Kapasitas 200 MB</li>
                <li>Tidak ada backup data</li>
            </ul>

            <div class="ruang-tombol">
                <a href="#" class="selengkapnya header-gratis">Pesan Sekarang</a>
            </div>
        </div>

        <div class="tabel-harga">
            <div class="header header-premium">
                <span class="paket">Paket Premimum</span>
                <span class="harga">Rp. 350.000,-</span>
            </div>

            <ul>
                <li>Batas Waktu 1 Tahun</li>
                <li>Kapasitas 1GB</li>
                <li>Dilengkapi Backup Data</li>
            </ul>

            <div class="ruang-tombol">
                <a href="#" class="selengkapnya header-premium">Pesan Sekarang</a>
            </div>
        </div>

        <div class="tabel-harga">
            <div class="header header-profesional">
                <span class="paket">Paket Profesional</span>
                <span class="harga">Rp 500.000,-</span>
            </div>

            <ul>
                <li>Batas Waktu 2 Tahun</li>
                <li>Kapasitas 3GB</li>
                <li>Dilengkapi Backup Data</li>
                <li>Bonus Domain</li>
            </ul>

            <div class="ruang-tombol">
                <a href="#" class="selengkapnya header-profesional">Pesan Sekarang</a>
            </div>
        </div>
    </div>

</body>

</html>

2. Kemudian buat file dengan format CSS. Lalu ketik script kodenya seperti berikut ini.

{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body
{
    background-color: black;
}

.badan
{
    width: 1000px;
    margin: auto;
    margin-top: 35px;
    background-color: white;
    padding: 20px;
    overflow: hidden;
}

.badan h2
{
    color: dodgerblue;
    border-bottom: 1px solid gainsboro;
    margin-bottom: 20px;
}

.tabel-harga
{
    float: left;
    margin: 10px;
    border: 1px solid gainsboro;
    width: 300px;
}

.header
{
    padding: 17px;
}

.header span
{
    display: block;
    text-align: center;
}

.paket
{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

.header-gratis
{
    background-color: dodgerblue;
    color: white;
}

.header-premium
{
    background-color:darkorange;
    color: white;
}

.header-profesional
{
    background-color: green;
    color: white;
}

.tabel-harga ul
{
    list-style-type: none;
}

.tabel-harga ul li
{
    padding: 15px;
    border-bottom: 1px solid gainsboro;
    margin: 0 10px 0 10px;
}

.ruang-tombol
{
    padding: 10px;
}

.selengkapnya
{
    padding: 15px;
    width: 100%;
    text-decoration: none;
    display: block;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1.5px;
}

.selengkapnya:hover
{
    transition-duration: 0.8s;
    background-color: black;
}

3. Yang terpenting juga, antara file HTML dan CSSnya sudah tersambung. Biasanya letaknya ada pada tag di file HTML-nya.

<link rel="stylesheet" href="nama_filenya.css">

4. Maka akan menghasilkan tampilan seperti berikut ini.

Nah, begitulah cara membuatnya. Selamat mencoba ya, semoga bermanfaat. Amin.

Related posts: