Pricing Tables in HTML and CSS ~ Multiplex Coder

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 tag	Constraints
.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

CODE:–

<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>

<li class="header">Basic</li>

<li>10GB Storage</li>

<li>10 Emails</li>

<li>10 Domains</li>

<li>1GB Bandwidth</li>

</ul>

</div>

<li>25GB Storage</li>

<li>25 Emails</li>

<li>25 Domains</li>

<li>2GB Bandwidth</li>

</ul>

</div>

<li class="header">Premium</li>

<li>50GB Storage</li>

<li>50 Emails</li>

<li>50 Domains</li>

<li>5GB Bandwidth</li>

</ul>

</div>

</body>

</html>

Tags:

Pricing Tables in HTML and CSS

Question:

CODE:–

Related Post