Cara Membuat Pricing Table Responsif dengan HTML CSS
Tak akan pernah dapat melihat wajah sendiri dengan bagus sekiranya cerminnya kusam dan kotor. Pun sama, tak akan pernah dapat melihat dengan bagus seluruh kehidupan ini sekiranya hati kita kusam dan kotor. Oke kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Membangun Pricing Table Responsif dengan HTML CSS.
Pricing table adalah sebuah table harga yang biasanya digunakan bagi di penjualan barang-barang, atau di penjualan hosting dan domain teman-teman. Oke seketika saja, berikut Cara Membangun Pricing Table Responsif dengan HTML CSS.
Pertama-tama-tama, seperti lazimnya siapkan file index.html nya.
Kemudian, isi di bagian <body> tag-tag HTML berikut.
<h2 style=text-align:center>Memiliki tampilan yang dinamis 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 bagi 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? Lumayan gampang bukan?
Demikian bagi panduan kali ini mengenai bagaimana Cara Membangun Pricing Table Responsif dengan HTML CSS.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
