Website XXL

Crearea unui tabel pentru stabilirea preturilor (Pricing Table)

Tabel pentru stabilirea preturilor (Pricing Table)

Un tabel eficient pentru stabilirea preturilor (Pricing Table) va poate ajuta sa vinde-ti produsele de pe site mult mai usor. Acesta stabileste continutul pachetului care este pus la vanzare si pretul acestuia. Cumparatorii la randul lor pot lua o decizie mult mai buna asupra pachetului pe care il doreste fara ca pe viitor sa regrete sau sa cumpere din greseala un pachet care nu se incadreaza cu cerintele sale. Majoritatea cumparatorilor evita cumpararea pachetelor fara prea multe detalii, din cauza lipsei de informatie. Acest tabel pentru stabilirea preturilor se poate adauga atat pe un templante HTML cat si pe templantele create pe platforma unor CMS-uri precum WordPress.

 

 

 

In continuare se va prezenta Tabelul pentru stabilirea preturilor (Pricing Table)

Tabel pentru stabilirea preturilor (Pricing Table)2

 

Cod HTML

<div id=”pricing-table”>
<div class=”plan plan1″>
<div class=”header”>Basic</div>
<div class=”price”>$8</div>
<div class=”monthly”>per month</div>
<ul>
<li><b>1GB</b> Disk Space</li>
<li><b>10GB</b> Monthly Bandwidth</li>
<li><b>2</b> Email Accounts</li>
<li><b>Unlimited</b> subdomains</li>
</ul>
<a class=”signup” href=”#“>Sign up</a>
</div>
<div class=”plan plan2″>
<div class=”header”>Standard</div>
<div class=”price”>$18</div>
<div class=”monthly”>per month</div>
<ul>
<li><b>3GB</b> Disk Space</li>
<li><b>20GB</b> Monthly Bandwidth</li>
<li><b>5</b> Email Accounts</li>
<li><b>Unlimited</b> subdomains</li>
</ul>
<a class=”signup” href=”#“>Sign up</a>
</div>

<div class=”plan plan3 popular-plan”>
<div class=”header”>Professional</div>
<div class=”price”>$39</div>
<div class=”monthly”>per month</div>
<ul>
<li><b>5GB</b> Disk Space</li>
<li><b>50GB</b> Monthly Bandwidth</li>
<li><b>10</b> Email Accounts</li>
<li><b>Unlimited</b> subdomains</li>
</ul>
<a class=”signup” href=”#“>Sign up</a>
</div>

<div class=”plan plan4″>
<div class=”header”>Enterprise</div>
<div class=”price”>$59</div>
<div class=”monthly”>per month</div>
<ul>
<li><b>10GB</b> Disk Space</li>
<li><b>100GB</b> Monthly Bandwidth</li>
<li><b>20</b> Email Accounts</li>
<li><b>Unlimited</b> subdomains</li>
</ul>
<a class=”signup” href=”#“>Sign up</a>
</div>

</div>

Toale cuvintele si cifrele scrise cu rosu pot fi modificate fara sa afecteze codul HTML pentru obtinerea unui tabel pentru stabilirea preturilor in functie de preferintele dvs. In cazul in care dori-ti sa obtine-ti toate casutele egale va trebui sa elimina-ti codul (popular-plan) care se afla la plan 3.

 

Cod CSS

 

#pricing-table {
margin: 100px auto;
text-align: center;
width: 928px; /* total computed width */
zoom: 1;
}

#pricing-table:before, #pricing-table:after {
content: “”;
display: table
}

#pricing-table:after {
clear: both
}

#pricing-table .plan {
font: 13px ‘Lucida Sans’, ‘trebuchet MS’, Arial, Helvetica;
background: #fff;
border: 1px solid #ddd;
color: #333;
padding: 20px;
width: 180px;
float: left;
_display: inline; /* IE6 double margin fix */
position: relative;
margin: 0 5px;
box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);

}

#pricing-table .plan:after {
z-index: -1;
position: absolute;
content: “”;
bottom: 10px;
right: 4px;
width: 80%;
top: 80%;
box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
transform: rotate(3deg);
}
#pricing-table .popular-plan {
top: -20px;
padding: 40px 20px;
}

#pricing-table .header {
position: relative;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
padding: 40px;
margin: -20px -20px 20px -20px;
border-bottom: 8px solid;
background-color: #eee;
background-image: linear-gradient(#fff, #eee);
}

#pricing-table .header:after {
position: absolute;
bottom: -8px; left: 0;
height: 3px; width: 100%;
content: ”;
}

#pricing-table .popular-plan .header {
margin-top: -40px;
padding-top: 60px;
}

#pricing-table .plan1 .header {
border-bottom-color: #B3E03F;
}

#pricing-table .plan2 .header {
border-bottom-color: #7BD553;
}

#pricing-table .plan3 .header {
border-bottom-color: #3AD5A0;
}

#pricing-table .plan4 .header {
border-bottom-color: #45D0DA;
}

#pricing-table .price{
font-size: 45px;
}

#pricing-table .monthly{
font-size: 13px;
margin-bottom: 20px;
text-transform: uppercase;
color: #999;
}

/* ————— */

#pricing-table ul {
margin: 20px 0;
padding: 0;
list-style: none;
}

#pricing-table li {
padding: 10px 0;
}

/* ————— */

#pricing-table .signup {
position: relative;
padding: 10px 20px;
color: #fff;
font: bold 14px Arial, Helvetica;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
background-color: #72ce3f;
border-radius: 3px;
text-shadow: 0 -1px 0 rgba(0,0,0,.15);
opacity: .9;
}

#pricing-table .signup:hover {
opacity: 1;
}

#pricing-table .signup:active {
box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
}

#pricing-table .plan1 .signup{
background: #B3E03F;
}

#pricing-table .plan2 .signup{
background: #7BD553;
}

#pricing-table .plan3 .signup{
background: #3AD5A0;
}

#pricing-table .plan4 .signup{
background: #45D0DA;
}

 

Rezultatul (Vezi Demo)

 

Leave a Reply