Pricing Tables in HTML and CSS

Question:

Create a three column pricing table as shown in the image below. 

The columns must be created using <div> with id values 1,2 and 3. Each column must have an <li> tag with column headings Basic, Pro and Premium.

Each <ul> within the <div> must have a class with value price. The Sign Up button must have a css class of value button.

The web page should have the following CSS

Script tagConstraints
.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;
.button    background-color: #4CAF50;    border: none;    color: white;    padding: 10px 25px;    text-align: center;    text-decoration: none;    font-size: 18px;

Sample Pricing Tables

Quiz for Exam - Pricing Tables
Quiz for Exam – Pricing Tables

Code:

pricetable.html

<html>
<head>
<style>
*{ 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.color{ 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;
}
</style>
</head>
<body>

<h2 style="text-align:center">Pricing Tables</h2>

<div class="columns" id="1">
  <ul class="price">
    <li class="header">Basic</li>
    <li class="colour">$ 9.99 / year</li>
    <li>10GB Storage</li>
    <li>10 Emails</li>
    <li>10 Domains</li>
    <li>1GB Bandwidth</li>
    <li class="colour"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns" id="2">
  <ul class="price">
    <li class="header" style="background-color:#4CAF50">Pro</li>
    <li class="colour">$ 24.99 / year</li>
    <li>25GB Storage</li>
    <li>25 Emails</li>
    <li>25 Domains</li>
    <li>2GB Bandwidth</li>
    <li class="colour"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns" id="3">
  <ul class="price">
    <li class="header">Premium</li>
    <li class="colour">$ 49.99 / year</li>
    <li>50GB Storage</li>
    <li>50 Emails</li>
    <li>50 Domains</li>
    <li>5GB Bandwidth</li>
    <li class="colour"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>
</body>
</html>

Recommended:

1 thought on “Pricing Tables in HTML and CSS”

  1. With havin so much written content do you ever run into any issues of plagorism or copyright infringement?
    My blog has a lot of unique content I’ve either authored myself or outsourced but it appears a lot of it
    is popping it up all over the web without my permission. Do you know any techniques to help
    reduce content from being stolen? I’d genuinely appreciate it.

Leave a Comment

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

x