Membuat Tabel penawaran menggunakan CSS

Membuat Tabel penawaran menggunakan CSS

  05 January    Andika

---

Tabel ini bisa di gunakan untuk menawarkan jasa tertentu pada laman sebuah website. Seperti tabel Plans and Pricing pada laman web Alexa. Tapi tentu saja tidak mirip dengan yang di gunakan pada laman Alexa tersebut. Namun jangan salah, meskipun hanya mengandalkan CSS sederhana, tampilan yang di hasilkannya tidak bisa di pandang sebelah mata.

Sebelumnya, Ini hanyalah sebuah contoh dan mungkin masih perlu di modifikasi sesuai kebutuhan. Misalnya saja font yang di gunakan. Pada pratinjau, saya hanya menggunakan font Arial. Kamu dapat menggantinya sesuai keinginan.

Berikut demonya.



Langsung saja,

Kode CSSnya

.pricing_table {
   width:900px;
   color:#FFF;
   font:normal 14px Arial;
   line-height:150%;
   text-align:center;
   margin:100px auto 0 auto;
}

.pricing_table > li {
   background: linear-gradient(#666, #333) repeat scroll 0% 0% transparent;
   width:33.33%;
   float:left;
   list-style-type:none;
   transition:all 0.2s;
}

.pricing_table > li.active {
   background: linear-gradient(#F9B84A, #DB7224) repeat scroll 0% 0% transparent;
   transform:scale(1.03);
   box-shadow:0 0 15px 1px rgba(0,0,0,0.5);
}

.pricing_table h3 {
   text-transform:uppercase;
   padding:15px 0 30px;
   font-size:17px;
   font-weight:bold;
}

.pricing_table .price_body {
   line-height:24px;
   width:130px;
   height:125px;
   margin:0 auto 15px auto;
   border:2px solid #fff;
   border-radius:100%;
   display:table;
}

.pricing_table .price {
   font-size:30px;
   font-weight:bold;
   text-transform:uppercase;
   vertical-align:middle;
   display:table-cell;
}

.pricing_table .price .price_figure {
   display:block;
}

.pricing_table .price .price_term {
   font-size:11px;
   font-weight:normal;
}

.pricing_table .features li {
   list-style-type:none;
   padding:5px 0;
}

.pricing_table .footer {
   padding:10px;
   background:#333;
   margin-top:10px;
}

.pricing_table .footer .action_button {
   color:#fff;
   font-size:11px;
   display:inline-block;
   text-decoration:none;
   font-weight:bold;
   background:#000;
   padding:4px 20px;
   border-radius:15px;
   background: linear-gradient(#666, #333) repeat scroll 0% 0% transparent;
}
.pricing_table li.active .footer .action_button:hover {
   background: linear-gradient(#666, #333) repeat scroll 0% 0% transparent;
}

.pricing_table .footer .action_button:hover {
   background: linear-gradient(#F9B84A, #DB7224) repeat scroll 0% 0% transparent;
}

.pricing_table li.active .footer .action_button {
   background: linear-gradient(#F9B84A, #DB7224) repeat scroll 0% 0% transparent;
}

.clr {
   clear:both;
}

Kode HTMLnya

<ul class="pricing_table">
    <li>
        <h3>Starter</h3>
        <div class="price_body">
            <div class="price">
                Free
            </div>
        </div>
        <div class="features">
            <ul>
                <li>Premium Profile Listing</li>
                <li>Unlimited File Access</li>
                <li>Free Appointments</li>
                <li><strong>5 Bonus Points</strong> every month</li>
                <li>Customizable Profile Page</li>
                <li><strong>2 months</strong> support</li>
            </ul>
        </div>
        <div class="footer">
            <a href="#" class="action_button">Get Started</a>
        </div>
    </li>
    <li class="active">
        <h3>Basic</h3>
        <div class="price_body">
            <div class="price">
                <span class="price_figure">$24</span>
                <span class="price_term">per month</span>
            </div>
        </div>
        <div class="features">
            <ul>
                <li>Premium Profile Listing</li>
                <li>Unlimited File Access</li>
                <li>Free Appointments</li>
                <li><strong>20 Bonus Points</strong> every month</li>
                <li>Customizable Profile Page</li>
                <li><strong>6 months</strong> support</li>
            </ul>
        </div>
        <div class="footer">
            <a href="#" class="action_button">Get Started</a>
        </div>
    </li>
    <li>
        <h3>Premium</h3>
        <div class="price_body">
            <div class="price">
                <span class="price_figure">$49</span>
                <span class="price_term">per month</span>
            </div>
        </div>
        <div class="features">
            <ul>
                <li>Premium Profile Listing</li>
                <li>Unlimited File Access</li>
                <li>Free Appointments</li>
                <li><strong>50 Bonus Points</strong> every month</li>
                <li>Customizable Profile Page</li>
                <li><strong>Lifetime</strong> support</li>
            </ul>
        </div>
        <div class="footer">
            <a href="#" class="action_button">Get Started</a>
        </div>
    </li>
    <div class="clr"></div>
</ul>

Silahkan modifikasi sesuai dengan kebutuhan!

Untuk tampilannya sendiri sudah saya uji coba dan mampu bekerja dengan baik pada browser Mozilla Firefox, Internet Explorer 11 dan Google Chrome!