Widodo

Membuat Pricing Table dengan CSS dan HTML

Selamat malam semuanya, udah lama ini kami tidak update sebuah tutorial web maupun blog dikarenakan ada kegiatan di dunia nyata, alhamdulillah di kesepempatan mlm ini kami mau berbagi tutorial lagi karna udah hampir 1 bulan gak on..
Untuk itu kami akan memberikan tutorial cara membuat table pricing. Didalam sebuah web maupun blog yang mempunyai jasa produk table pricing sangat berguna unuk
membuat daftar harga produk maupun jasa yang kita tawarkan kepada client dan ini sangat membantu sekali untuk memberikan informasi harga produk maupun jasa  yang di tawarkan kepada client.
Pembuatanya pun tidak begitu sulit dan gak harus menguasai bahasa pemongaman karena ini murni memakai CSS dan HTML, penggunaan CSS ini akan mempercantik tampilan sebuah table yang akan kita buat supaya lebih menarik dilihat. smiley

Untuk itu kita gak usah banyang kata-kata langsung aja kita praktekkan oke..
1. Silahkan buatlah document baru dengan format HTML
2. Anda bisa menysipkan code cssnya diatas kode </head> atau di buat di file lain dengan format CSS

.pricing-tables-s-widodo-com {
position: relative;
float: left;
width: 33%;
border: 1px solid #eee;
}
.pricing-tables-s-widodo-com .title {
float: left;
width: 100%;
height: 57px;
padding: 13px 0 10px 0;
background-color: #454545;
text-align: center;
font-size: 23px;
color: #fff;
border-top: 3px solid #272727;
border-bottom: 1px solid #818181;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
}
.pricing-tables-s-widodo-com .price {
float: left;
width: 100%;
padding: 30px 0 30px 0;
background-color: #636363;
text-align: center;
font-size: 40px;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
}
.pricing-tables-s-widodo-com .price i {
font-size: 14px;
color: #ccc;
display: block;
font-weight: normal;
font-style: normal;
margin-top: 5px;
}
.pricing-tables-s-widodo-com .cont-list {
float: left;
width: 100%;
padding: 15px 0;
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
background-color: #f9f9f9;
text-align: center;
color: #727272;
}
.pricing-tables-s-widodo-com .cont-list ul {
margin: 0;
padding: 0;
}
.pricing-tables-s-widodo-com .cont-list li {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 30px;
border-bottom: 1px solid #fff;
}
.pricing-tables-s-widodo-com .cont-list li.last {
border: none;
}
.pricing-tables-s-widodo-com .ordernow {
float: left;
width: 100%;
padding: 28px 0;
background-color: #eee;
text-align: center;
color: #fff;
}

.pricing-tables-helight-s-widodo-com{
position: relative;
float: left;
width: 33%;
z-index: 3;
-webkit-box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.1);
box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.1);
}
.pricing-tables-helight-s-widodo-com .title {
float: left;
width: 100%;
height: 73px;
padding: 20px 0 0 0;
margin-top: -10px;
background-color: #0aa4df;
text-align: center;
font-size: 23px;
color: #fff;
border-top: 3px solid #0893c9;
border-bottom: 1px solid #1cb7f3;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
}
.pricing-tables-helight-s-widodo-com .price {
float: left;
width: 100%;
padding: 30px 0 30px 0;
background-color: #7ab700;
text-align: center;
font-size: 45px;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
}
.pricing-tables-helight-s-widodo-com .price i {
font-size: 14px;
color: #eee;
display: block;
font-weight: normal;
font-style: normal;
margin-top: 5px;
}
.pricing-tables-helight-s-widodo-com .cont-list {
float: left;
width: 100%;
padding: 15px 0;
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
background-color: #f9f9f9;
text-align: center;
color: #727272;
}
.pricing-tables-helight-s-widodo-com .cont-list ul {
margin: 0;
padding: 0;
}
.pricing-tables-helight-s-widodo-com .cont-list li {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 30px;
border-bottom: 1px solid #fff;
}
.pricing-tables-helight-s-widodo-com .cont-list li.last {
border: none;
}
.pricing-tables-helight-s-widodo-com .ordernow {
float: left;
width: 100%;
padding: 30px 0 35px 0;
background-color: #eee;
text-align: center;
color: #fff;
}


3. Sekarang anda tinggan membuat code HTML nya seperti contoh dibawah ini

<div class="pricing-tables-s-widodo-com">
<div class="title">Litle</div>
<div class="price">$3.99 <i>/ per month</i></div>
<div class="cont-list">
<ul>
<li>Unlimited Bandwidth</li>
<li>100 GB Space</li>
<li>10 Databases</li>
<li>Ad Credits</li>
<li>1 Free Domain</li>
<li>24/7 Unlimited Support</li>
<li class="last">100 Email Addresses</li>
</ul>
</div>
<div class="ordernow"><a href="#"><button class="btn btn-primary">Order Now</button></a></div>
</div><!-- end section -->


<div class="pricing-tables-helight-s-widodo-com">
<div class="title">Standard</div>
<div class="price">$9.99 <i>/ per month</i></div>
<div class="cont-list">
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimit Space</li>
<li>100 Database</li>
<li>Ad Credits</li>
<li>2 Free Domains </li>
<li>&nbsp; 24/7 Unlimited Support &nbsp;</li>
<li class="last">1000 Email Addresses</li>
</ul>
</div>
<div class="ordernow"><a href="#"><button class="btn btn-primary">Order Now</button></a></div>
</div><!-- end section -->


<div class="pricing-tables-s-widodo-com">
<div class="title">Professional</div>
<div class="price">$18.99 <i>/ per month</i></div>
<div class="cont-list">
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimit Space</li>
<li>1000 Database</li>
<li>Ad Credits</li>
<li>5 Free Domain</li>
<li>24/7 Unlimited Support</li>
<li class="last">Unlimited &nbsp; Emails</li>
</ul>
</div>
<div class="ordernow"><a href="#"><button class="btn btn-primary">Order Now</button></a></div>
</div><!-- end section -->


4. Selesai
Untuk demonya anda bisa liat browser kalian masing-masing, atau bisa lihat di bwah ini

Terimakash semoga tutorial ini sangat bermanfaat bagi kalian
Salam dari saya
Founder
s-widodo.com



Artikel Terkait

0 Komentar