Pricing Table Using HTML And CSS

In this article we can discuss about Pricing Table Using HTML And CSS

Many price comparing websites or also in web service websites when you compare different products with details in one page and all of them having a select button.

Creative Design

Creative designers implement their own ideas or build on ideas generated by clients, creative directors or marketing and advertising managers. Commercial creative designers make graphic design art for businesses that need design elements for logos, product packages, or marketing materials.

A creative design is basically a design that fulfils the objective it was created for.

Some features can be identified on a creative design:

  • generates feelings: people should be moved some way by the design, if people are indifferent(unless indifference as a social experiment is the objective) then that is not a creative design
  • Sense of success more than 70%:If the creator feels that the piece is ready and feels that is a good piece on a 70% of its own satisfaction(most of the time creative people thinks that their work lacks something that could be achieved later)
  • Inspiration: the consumers/users of the design should feel inspired somehow, to copy, improve modify, adapt your design.
Pricing Table Using HTML And CSS

HTML

<html>
<head>

</head>
<body>
<div id="wrapper">

<div id="price_columns">
 <div class="columns">
  <li class="price_name">BASIC</li>
  <li class="price"><small>$</small><big>9.99</big><small>/year</small></li>
  <li class="detail">10GB Storage</li>
  <li class="detail">10 Emails</li>
  <li class="detail">10 Domains</li>
  <li class="detail">1GB Bandwidth</li>
  <li class="select_button"><input type="button" class="select_price" value="SELECT"></li>
 </div>

 <div class="columns" id="second_col">
  <li class="price_name">STANDARD</li>
  <li class="price"><small>$</small><big>14.99</big><small>/year</small></li>
  <li class="detail">20GB Storage</li>
  <li class="detail">20 Emails</li>
  <li class="detail">15 Domains</li>
  <li class="detail">2GB Bandwidth</li>
  <li class="select_button"><input type="button" class="select_price" value="SELECT"></li>
 </div>

 <div class="columns">
  <li class="price_name">PREMIUM</li>
  <li class="price"><small>$</small><big>24.99</big><small>/year</small></li>
  <li class="detail">50GB Storage</li>
  <li class="detail">50 Emails</li>
  <li class="detail">25 Domains</li>
  <li class="detail">10GB Bandwidth</li>
  <li class="select_button"><input type="button" class="select_price" value="SELECT"></li>
 </div>
</div>

</div>
</body>
</html>

we create three columns for different service price basic, standard and premium with different service details and create a button to select the service for each this button is just a dummy. We also add price_style.css file which we were going to create in next step.

CSS

body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#fff;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}
#price_columns
{
 float:left;
 margin-left:45px;
}
.columns 
{
 float: left;
 width: 300px;
 box-sizing:border-box;
 background-color:white;
 font-family: Verdana,sans-serif;
}
#second_col
{
 border-left:2px solid #d10014;
 border-right:2px solid #d10014;
}
.columns .price_name 
{
 background-color: #d10014;
 color: white;
 font-size: 35px;
 border:none;
 font-weight:bold;
}
.columns .price
{
 background-color: #d10014;
 color: #0B2F3A;
 font-size: 25px;
 border: none;
}
.columns li 
{
 list-style-type:none;
 border-bottom: 1px dashed #d10014;
 height:70px;
 line-height:70px;
 text-align: center;
}

.columns .grey 
{
 background-color: #eee;
 font-size: 20px;
}

.columns .select_price 
{
 background-color: #d10014;
 border:none;
 border-bottom: 5px solid #d10014;
 color: white;
 width:120px;
 height:45px;
 font-size: 17px;
 border-radius:2px;
}

this is how to create simple pricing table using HTML and CSS.

Output

Pricing Table Using HTML And CSS

Also Check out: HTML Text Formatting Elements

If you interested in Entertainment genre please check this alsothebiographys.com

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *