Cara Membuat Tabel Harga v0.1

[ridzuantechno.blogspot.com] - Kali ini Ridzuan Techno akan share "Cara Membuat Tabel Harga v0.1". Biasanya tabel harga ini biasa di pasang di web penyedia layanan hosting, domain, dll.

Oke langsung saja ambil kode HTML, Script dan CSS yang telah digabungkan :

HTML & Script :

<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>
  <!-- Active/Hover styles -->
  <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>
<script src="https://sites.google.com/site/seocips/seocips-script/prefixfree.js" type="text/javascript"></script>

CSS :

@import url(http://fonts.googleapis.com/css?family=Ubuntu);* {  margin: 0;  padding: 0;}.pricing_table {  width: 600px;  color: #fff;  font-size: 12px;  font-family: Ubuntu, arial, verdana;  line-height: 150%;  text-align: center;  margin: 20px auto 0 auto;}.pricing_table>li {  background: linear-gradient(#666, #333);  width: 33.33%;  float: left;  list-style-type: none;  transition: all 0.2s;}.pricing_table>li.active {  background: linear-gradient(#F9B84A, #DB7224);  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;  font-size: 14px;  font-weight: bold;}.pricing_table .price_body {  width: 125px;  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);}.pricing_table li.active .footer .action_button {  background: linear-gradient(#F9B84A, #DB7224);}.clr {  clear: both;

}

GOOD LUCK

JANGAN LUPA TINGGALKAN KOMENTAR!!! 

Posted in: Sosial Media,Tips And Trick