Das Freebie im April-11
Hier kommt das monatliche freebie. Eine HTML/CSS Tabelle für die perfeckte Preisgestaltung. Download als PSD und HTML.
Pricing Table Download
Das monatliche freebie im April ist eine Preistabelle, die ich bei themefuse als PSD zum Free Download gefunden habe. Da die Preistabelle nur eine Photoshop Datei war, habe ich diese in HTML und CSS umgesetzt. Sie wurde nicht genauso, aber ähnlich gebaut. Dieser Download ist Free für jeden der eine Preistabelle möchte. Die Tabelle darf nicht für kommerzielle Zwecke verwendet werden. Als Urheber steht ganz klar themefuse fest! An dieser Stelle möchte ich mich herzlich bedanken für die PSD Datei.
//
//
//
<body>
<div id="container"><!-- container -->
<h1>HTML Preistabelle</h1>
<h2>Free Download April von combosa.com</h2>
<div id="table"><!-- table -->
<div id="table-top"><!-- table-top -->
<ul class="table-top"><!-- table-top for font -->
<li class="art1">Basic</li>
<li class="art2">Advanced</li>
<li class="bestseller">Bestseller </li>
<li class="art3">Professional</li>
</ul><!-- end table-top for font -->
</div><!-- end table-top -->
<div class="col1">
</div><!-- end col1 -->
<div class="col2"><p>€</p>6,99<br /><p>im Monat</p>
</div><!-- end col2 -->
<div class="col3"><p>€</p>10,99<br /><p>im Monat</p>
</div><!-- end col3 -->
<div class="col4"><p>€</p>15,50<br /><p>im Monat</p>
</div><!-- end col4 -->
<div class="col5"><p>€</p>20,00<br /><p>im Monat</p>
</div><!-- end col5 -->
<div class="clear"></div>
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="service_table">
<tbody>
<tr>
<td class="blank">Domain</td>
<td class="row1">1x</td>
<td class="row1">5x</td>
<td class="row2">7x</td>
<td class="row1">10x</td>
</tr>
<tr>
<td class="blank">FTP</td>
<td class="row1">5x</td>
<td class="row1">3x</td>
<td class="row2">4x</td>
<td class="row1">10x</td>
</tr>
<tr>
<td class="blank">Datenbank</td>
<td class="row1">1x</td>
<td class="row1">5x</td>
<td class="row2">15x</td>
<td class="row1">20x</td>
</tr>
<tr>
<td class="blank">Email</td>
<td class="row1">1x</td>
<td class="row1">5x</td>
<td class="row2">unlimited</td>
<td class="row1">unlimited</td>
</tr>
<tr>
<td class="blank">CMS</td>
<td class="row1"><img src="images/icon_9.png" alt="Yes" /></td>
<td class="row1"><img src="images/icon_9.png" alt="Yes" /></td>
<td class="row2"><img src="images/icon_9.png" alt="Yes" /></td>
<td class="row1"><img src="images/icon_9.png" alt="Yes" /></td>
</tr>
<tr>
<td class="blank">24h Service</td>
<td class="row1"><img src="images/icon_20.png" alt="Yes" /></td>
<td class="row1"><img src="images/icon_9.png" alt="Yes" /></td>
<td class="row2"><img src="images/icon_9.png" alt="Yes" /></td>
<td class="row1"><img src="images/icon_9.png" alt="Yes" /></td>
</tr>
</tbody>
</table>
<div class="col1">
</div><!-- end col1 -->
<div class="col2"><a class="button-table" href="#">Bestellen</a>
</div><!-- end col2 -->
<div class="col3"><a class="button-table" href="#">Bestellen</a>
</div><!-- end col3 -->
<div class="col4"><a class="button-table" href="#">Bestellen</a>
</div><!-- end col4 -->
<div class="col5"><a class="button-table" href="#">Bestellen</a>
</div><!-- end col5 -->
</div><!-- end table -->
<div class="clear"></div>
</div><!-- end container -->
</body>
</html>
Die CSS
*{
margin:0;
padding:0;
}
body {
background: #f9f9f9;
line-height:1;
color:#333;
font-family:"Verdana", Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:normal;
margin: 0;
padding: 0;
}
h1 {
color: #555;
font-size: 55px;
margin-bottom: 20px;
margin-top:50px;
text-shadow: 1px 1px 0 #FFFFFF;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
}
h2 {
color: #999;
font-size: 25px;
margin-bottom: 20px;
text-shadow: 1px 1px 0 #FFFFFF;
text-align:center;
font-family:"Arial Black", Gadget, sans-serif;
font-weight:inherit;
}
.zentriert {text-align: center;}
#container {
width:978px;
margin:0 auto;
padding:0;
}
#table {
width:980px;
height:699px;
padding:0;
}
#table-top {
background: url("../images/price-top.png") no-repeat scroll 0 0 transparent;
height: 93px;
margin-left: 197px;
margin-top: 30px;
width: 978px;
}
.table-top {
color: #FFFFFF;
float: left;
font-size: 14px;
margin: 14px;
text-shadow: 1px 1px 1px #000;
}
.table-top li {
float: left;
height: 30px;
}
.bestseller {
font-size:20px;
padding: 14px 46px;
}
.art1 {
font-size: 15px;
padding: 14px 67px;
}
.art2 {
font-size: 15px;
padding: 14px 65px;
}
.art3 {
font-size: 15px;
padding: 14px 46px;
}
.table-top li a:hover, .table-top li.current a {color:#fff;}
.col1 {
float: left;
height: 122px;
padding-left: 2px;
width: 196px;
}
.col2 {
background: url("../images/background-price.png") no-repeat scroll 0 0 transparent;
float: left;
height: 122px;
padding: 0;
width: 195px;
border-left:1px solid #dfe0e0;
}
.col3 {
background: url("../images/background-price.png") no-repeat scroll 0 0 transparent;
float: left;
height: 122px;
padding: 0;
width: 194px;
}
.col4 {
background: url("../images/background-price-bestseller-top.png") no-repeat scroll 0 0 transparent;
float: left;
height: 122px;
padding: 0;
width: 196px;
}
.col5 {
background: url("../images/background-price.png") no-repeat scroll 0 0 transparent;
float: left;
height: 122px;
padding: 0;
width: 195px;
border-right: 1px solid #DFE0E0;
}
.co1, .col2, .col3, .col4, .col5 {
color:#333;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:30px;
}
.co1 p, .col2 p, .col3 p, .col4 p, .col5 p {
color:#000;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:20px;
padding-top: 10px;
}
.service_table {
margin-top: 0px;
}
td {
border-right: 1px solid #DFE0E0;
color: #333;
font-weight: bold;
height: 57px;
text-align: center;
}
.row1 {
background: url("../images/background-price-col1.png") repeat scroll 0 0 transparent;
width: 193px;
border-left: 2px solid #FFFFFF;
}
.row2 {
background: url("../images/background-price-bestseller.png") repeat scroll 0 0 transparent;
width: 192px;
}
.blank {
border-bottom:1px solid #DFE0E0;
}
ul {list-style:none;}
a img {border:none;}
.clear{clear:both; height:1px; background:transparent;}
a.button-table{
-moz-border-radius: 8px 8px 8px 8px;
background-color: #BC0000;
border: 1px solid #5F171B;
color: #FFFFFF;
float: left;
font-family: 'Arial',Helvetica,sans-serif;
font-size: 15px;
font-weight: normal;
letter-spacing: 0;
margin: 25px 54px;
padding: 10px;
text-decoration: none;
}
a.button-table:hover{
background-color: #DB0606;
text-decoration:none;
background-image: -moz-linear-gradient(#DB0606, ##BC0000);
-webkit-box-shadow: 3px 2px 5px #aaa;
-moz-box-shadow: 3px 2px 5px #aaa;
}
Danke, super Tabelle, auch mal eine ganz andere Art eine Tabelle zu bauen. Kann man die auch für Website Baker nutzen?
Vorab schon mal Danke für die Nachricht
Mike
Klar, wieso nicht?
Jürgen