[CSS + HTML] Cajas de precios
¡Hola amigos! En este post les voy a enseñar a añadir las siguientes
cajas de precios a su página. Es muy simple y rápido así que espero que les sirva y puedan entender. Ya saben que en caso de problemas, no duden en preguntarme.
VISTA PREVIA
CÓDIGO CSS
Copiar y pegar el siguiente código entre las etiquetas
<style> en algunos de los boxes que se encuentran en la configuración avanzada de los 'Ajustes de Diseño'. Si usted usa el diseño "CSS-Design" que ofrece el servicio, el código debe pegarlo en "CSS-Design sin Style Tags" ubicado también en la configuración avanzada de 'Ajustes de Diseño'.
Cita: .one-half.column {
width: 48%;
margin-left: 0;
}
.price-table {
background: url("../images/bg/tab-price-gradient.png") repeat-x scroll 0 0 #FFFFFF;
margin:0 auto;
max-width: 280px;
border-radius:5px;
}
.price-table .head {
height: 100px;
text-align: center;
}
.price-table .head p {
font-size: 13px;
line-height: 4em;
margin: 0 !important;
padding: 0 !important;
}
.price-table .head h2.price {
font-size: 3em;
line-height: 0.4em;
margin: 0 !important;
padding: 0;
text-align: center;
}
.price-table .body {
padding: 20px 25px;
font-size:12px;
}
.price-table .body ul {
list-style: none outside none;
margin: 0 0 20px;
}
.price-table .body li {
background: url("http://img.webme.com/pic/d/design-adri/tick20.png") no-repeat scroll left center transparent;
line-height: 20px;
padding: 10px 0 10px 35px;
}
.price-table .body .more {
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
.price-table .body .more a {
background: none repeat scroll 0 0 #3e3e3e;
color: #d1d1d1;
display: inline-block;
font-size: 110%;
height: 16px;
line-height: 16px;
padding: 5px 10px;
text-align: center;
text-transform: uppercase;
width: auto;
}
.price-table .body .more a:hover {
background: none repeat scroll 0 0 #535353;
color: #fff;
text-decoration: none;
}
.price-table .special *, .price-table .grey * {
color: #FFFFFF;
}
.price-table .grey {
background: none repeat scroll 0 0 #4B4A4A;
}
.price-table .special {
background: none repeat scroll 0 0 #e64a3e;
}
