<center><h3>Pricing table</h3></center>
<center><p>
Accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident...</p> </center>
<table>
<tr>
<td class="table-head">Basic</td>
<td class="table-head">Standart</td>
<td class="table-head">Premium</td>
<td class="table-head">Professional</td>
</tr>
<tr>
<td class="bg-blue">
<div id="circle" class="circle"><div class="price">$19</div>/mo</div>
</td>
<td class="bg-green">
<div id="circle" class="circle"><div class="price">$49</div>/mo</div>
</td>
<td class="bg-red">
<div id="circle" class="circle"><div class="price">$69</div>/mo</div>
</td>
<td class="bg-orange">
<div id="circle" class="circle"><div class="price">$99</div>/mo</div>
</td>
</tr>
<tr class="bg-white">
<td>1 website<hr/>1GB storage<hr/>bla-bla</td>
<td>3 website<hr/>5GB storage<hr/>bla-bla</td>
<td>10 website<hr/>20 GB storage<hr/>bla-bla</td>
<td>Unlim website<hr/>100GB storage<hr/>bla-bla</td>
</tr>
<tr>
<td class="bg-blue">Buy now</td>
<td class="bg-green">Buy now</td>
<td class="bg-red">Buy now</td>
<td class="bg-orange">Buy now</td>
</tr>
</table>body{
background-color:#34495E;
color:#9DAFC0;
Font-family:arial;
}
table{
width:800px;
border-spacing:11px 0;
float:center;
}
td{
text-align:center;
}
h3{font-weight:normal;}
.table-head{
background-color:#283B4C;
color:#9DAFC0;
padding:10px;
width:800px;
text-align:center;
}
.bg-blue{background-color:#4797CC;color:#fff;}
.bg-green{background-color:#2E9F9D;color:#fff;}
.bg-red{background-color:#9C5D7A;color:#fff;}
.bg-orange{background-color:#F4B251;color:#fff;}
.bg-white{background-color:#fff;color:#999;}
#circle {
width: 80px;
height: 80px;
font-size:14px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border:3px solid #fff;
text-align:center;
}
.circle{margin:0 55px;}
.price{font-size:24px;padding-top:15px;}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<style type="text/css">
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
width: 90%;
margin: 0 auto;
}
.container .cols {
float: left;
margin: 0 0 1em 0;
padding: 0 1em;
text-align: center;
}
.container .cols.col-1 {width: 8.3333%;}
.container .cols.col-2 {width: 16.6666%;}
.container .cols.col-3 {width: 25%;}
.container .cols.col-4 {width: 33.3333%;}
.container .cols.col-5 {width: 41.6666%;}
.container .cols.col-6 {width: 50%;}
.container .cols.col-7 {width: 58.33333%;}
.container .cols.col-8 {width: 66.66667%;}
.container .cols.col-9 {width: 75%;}
.container .cols.col-10 {width: 83.33333%;}
.container .cols.col-11 {width: 91.6666666%;}
.container .cols.col-12 {width: 100%;}
.container:before,
.container:after,
.row:after,
.row:before,
.clear:before,
.clear:after {
content: " ";
display: table;
}
.container:after,
.row:after,
.clear:after {
clear: both;
}
#first {
background-color: rgb(241, 36, 91);
height: 250px;
}
</style>
<body>
<div class='container'>
<div class='row'>
<div class='cols col-3'>
<div id='first'></div>
</div>
<div class='cols col-3'>
<div id='first'></div>
</div>
<div class='cols col-3'>
<div id='first'></div>
</div>
<div class='cols col-3'>
<div id='first'></div>
</div>
</div>
</div>
</body>
</html>
Простой
Простой
