Membuat tabel penawaran edisi premium menggunakan CSS
Tabel penawaran yang hanya bermodal CSS ini juga tak kalah keren di bandingkan Tabel penawaran yang pernah saya bagikan sebelumnya.
Konsepnya memang tidak jauh beda sih sebenarnya. Namun edisi kali ini menggunakan sedikit gambar untuk menghasilkan tampilan yang lebih baik. Mubazir memang, tapi selain tampil premium, tampilannya di pastikan akan dapat di eksekusi dengan baik walau di akses menggunakan browser lawas sekalipun.
Jika semua kode yang telah saya bagikan telah di terapkan dengan benar, maka hasilnya akan seperti tampilan yang bisa kamu lihat di bawah ini.
Berikut Demonya
Langsung saja,
Kode CSSnya
*,html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,label,fieldset,input,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul,li {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
a img {
border:none;
}
sup {
font-size:50%;
}
a,a:hover {
text-decoration:none;
}
body {
font-family:"Arial",sans-serif;
font-size:14px;
line-height:1.3em;
}
.cl {
clear:left;
}
div#isi-laman {
width:960px;
margin:0 auto;
padding-top:30px;
}
div.kotak-harga {
margin:0 auto;
font-family:"Arial",sans-serif;
color:#31b4b6;
}
div.kotak-harga span {
font-size:12px;
color:#a1a7b0;
}
div.harga1 {
background:url('img/harga1.png') top center no-repeat;
width:112px;
height:112px;
margin-top:36px;
font-size:24px;
}
div.harga1 p {
padding-top:30px;
padding-bottom:6px;
}
div.harga2 {
background:url('img/harga2.png') top center no-repeat;
width:122px;
height:122px;
margin-top:31px;
font-size:28px;
}
div.harga2 p {
padding-top:35px;
padding-bottom:6px;
}
div.harga3 {
background:url('img/harga3.png') top center no-repeat;
width:132px;
height:132px;
margin-top:26px;
font-size:32px;
}
div.harga3 p {
padding-top:40px;
padding-bottom:10px;
}
div.harga4 {
background:url('img/harga4.png') top center no-repeat;
width:142px;
height:142px;
margin-top:21px;
font-size:36px;
}
div.harga4 p {
padding-top:45px;
padding-bottom:6px;
}
div#isi-tabel {
border:1px solid #e2e7eb;
padding:1px;
background:url('img/bawah.png') left bottom repeat-x;
}
div.tabel-cell {
border-right:1px solid #616365;
width:238px;
float:left;
text-align:center;
}
table.tabel-harga {
width:100%;
}
td {
text-align:center;
vertical-align:middle;
width:238px;
border-right:1px solid #e2e7eb;
color:#77808a;
}
.tanpa-border {
border-right:none;
}
div.kepala-tabel {
background:#3a3c3f url('img/kepala.png');
padding-top:25px;
height:111px;
}
div.kepala-tabel h2 {
font-family:"Arial",sans-serif;
font-size:20px;
color:white;
}
table.tabel-harga tr td {
padding:10px 0;
}
table.tabel-harga tr.altRow td {
background-color:#f5f5f5;
}
table.tabel-harga tr.kolom-daftar td {
padding:75px 0 20px 0;
}
table.tabel-harga td strong {
color:#424447;
}
table.tabel-harga tfoot td {
border-top:1px solid #e2e7eb;
padding:25px 0;
}
table.tabel-harga tfoot td h4 {
color:#3a3c3f;
font-size:18px;
}
table.tabel-harga tfoot td span {
display:block;
font-size:12px;
color:#a1a7b0;
margin-bottom:15px;
}
div.rekomendasi .kepala-tabel,
td.rekomendasi {
background:#3a3c3f;
color:#b4bac4;
}
div.rekomendasi .kepala-tabel {
background:#3a3c3f url('img/rekomendasi.png') top left no-repeat;
margin-top:-20px;
padding-top:45px;
}
table.tabel-harga tr.altRow td.rekomendasi {
background-color:#46494c;
}
table.tabel-harga td.rekomendasi strong,
table.tabel-harga tfoot td.rekomendasi h4 {
color:white;
}
table.tabel-harga tfoot td.rekomendasi {
border-top:1px solid #4f5357;
}
div.rekomendasi .harga1 {
background:url('img/harga1rekomendasi.png') top center no-repeat;
}
div.rekomendasi .harga2 {
background:url('img/harga2rekomendasi.png') top center no-repeat;
}
div.rekomendasi .harga3 {
background:url('img/harga3rekomendasi.png') top center no-repeat;
}
div.rekomendasi .harga4 {
background:url('img/harga4rekomendasi.png') top center no-repeat;
}
a.tombol-daftar {
color:white;
border:1px solid #63b13d;
font-weight:bold;
padding:8px 20px;
display:inline-block;
background-color:#72ce3f;
background:-moz-linear-gradient(top,#72cf3f,#60bb2d);
background:-webkit-linear-gradient(top,#72cf3f,#60bb2d);
}
a.tombol-daftar:hover {
background-color:#79db43;
background:-moz-linear-gradient(top,#79db43,#66c730);
background:-webkit-linear-gradient(top,#79db43,#66c730);
}
.ie7 .harga1 p {
padding-top:25px;
}
.ie7 .harga2 p {
padding-top:30px;
}
.ie7 .harga3 p {
padding-top:30px;
}
.ie7 .harga4 p {
padding-top:35px;
}
.ie7 .kotak-harga span {
display:inline-block;
}
.ie7 div.rekomendasi .kepala-tabel {
z-index:100;
position:relative;
}
.ie7 table.tabel-harga tr.kolom-daftar td.rekomendasi {
z-index:10;
}Pada bagian-bagian tertentu dalam kode CSS ada url gambar yang masih belum lengkap. Contoh "img/rekomendasi.png". Nah untuk melengkapi ke semua url dari gambar yang belum lengkap tersebut, Kamu dapat mendownload semua file gambarnya Di sini. Jika selesai, upload semua file dan ambil url masing-masing gambarnya dan ganti url gambar yang belum lengkap tersebut.
Kode HTMLnya
<div id="isi-laman"> <div id="isi-tabel"> <div class="tabel-cell"> <div class="kepala-tabel"> <h2>Basic</h2> <div class="harga1 kotak-harga"> <p>$9<sup>.00</sup></p> <span>per month</span> </div> </div> </div> <div class="tabel-cell"> <div class="kepala-tabel"> <h2>Corporate</h2> <div class="harga2 kotak-harga"> <p>$14<sup>.00</sup></p> <span>per month</span> </div> </div> </div> <div class="tabel-cell rekomendasi"> <div class="kepala-tabel"> <h2>Business</h2> <div class="harga3 kotak-harga"> <p>$29<sup>.00</sup></p> <span>per month</span> </div> </div> </div> <div class="tabel-cell tanpa-border"> <div class="kepala-tabel"> <h2>Platinum</h2> <div class="harga4 kotak-harga"> <p>$59<sup>.00</sup></p> <span>per month</span> </div> </div> </div> <div class="cl"></div> <table class="tabel-harga"> <tr class="kolom-daftar"> <td><a href="#" class="tombol-daftar">Sign Up</a></td> <td><a href="#" class="tombol-daftar">Sign Up</a></td> <td class="rekomendasi"><a href="#" class="tombol-daftar">Sign Up</a></td> <td class="tanpa-border"><a href="#" class="tombol-daftar">Sign Up</a></td> </tr> <tr> <td><strong>100MB</strong> Disk Space</td> <td><strong>300MB</strong> Disk Space</td> <td class="rekomendasi"><strong>1GB</strong> Disk Space</td> <td class="tanpa-border"><strong>5GB</strong> Disk Space</td> </tr> <tr class="altRow"> <td><strong>200MB</strong> Monthly Traffic</td> <td><strong>400MB</strong> Monthly Traffic</td> <td class="rekomendasi"><strong>1GB</strong> Monthly Traffic</td> <td class="tanpa-border"><strong>Unlimited</strong> Monthly Traffic</td> </tr> <tr> <td><strong>2</strong> Subdomains</td> <td><strong>5</strong> Subdomains</td> <td class="rekomendasi"><strong>10</strong> Subdomains</td> <td class="tanpa-border"><strong>Unlimited</strong> Subdomains</td> </tr> <tr class="altRow"> <td><strong>5</strong> Email Accounts</td> <td><strong>10</strong> Email Accounts</td> <td class="rekomendasi"><strong>25</strong> Email Accounts</td> <td class="tanpa-border"><strong>Unlimited</strong> Email Accounts</td> </tr> <tr> <td>Webmail Support</td> <td>Webmail Support</td> <td class="rekomendasi">Webmail Support</td> <td class="tanpa-border">Webmail Support</td> </tr> <tr class="altRow"> <td>MySQL Support</td> <td>MySQL Support</td> <td class="rekomendasi">MySQL Support</td> <td class="tanpa-border">MySQL Support</td> </tr> <tr> <td> </td> <td>PHP5 Support</td> <td class="rekomendasi">PHP5 Support</td> <td class="tanpa-border">PHP5 Support</td> </tr> <tr class="altRow"> <td> </td> <td> </td> <td class="rekomendasi">Plesk Control Panel</td> <td class="tanpa-border">Plesk Control Panel</td> </tr> <tr> <td> </td> <td> </td> <td class="rekomendasi"> </td> <td class="tanpa-border">Spam Assassin</td> </tr> </table> </div> </div>
Jangan lupa untuk mengganti "#" pada kode HTML di atas dengan url yang kamu inginkan.
Hasilnya sudah saya uji coba dan mampu bekerja dengan baik pada browser Mozilla Firefox, Internet Explorer 11 dan Google Chrome!
0 komentar:
Post a Comment
Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.