Tabla de precio html responsive para web..

Hoy nos gustaría compartir una tabla de precio html responsive para web. Las Tablas de precios son un componente esencial en las páginas web donde se ofrecen servicios digitales. Mientras que parece que hay un patrón común, hay infinitas posibilidades de estilo. Esta demo muestra algunas ideas puede hacer uso de la que mas le convenga.

Hay que tener en  cuenta que las propiedades CSS utilizadas en esta tabla de precio html responsive para web que citamos en esta publicación sólo funcionan en los navegadores modernos y actualizados.

tabla de precios responsive html

Aqui citamos la siguiente estructura para la mayoría de los diseños utilizados tenga en cuenta que se está utiizando flexbox y aún no está soportado por todos los navegadores véase una referencia aquí:

<div class="pricing pricing--sonam">
    <div class="pricing__item">
        <h3 class="pricing__title">Express PHP</h3>
        <div class="pricing__price"><span class="pricing__currency">$</span>27.99</div>
        <p class="pricing__sentence">Para pequeños negocios</p>
        <ul class="pricing__feature-list">
            <li class="pricing__feature">Almacenamiento HD 4GB</li>
            <li class="pricing__feature">Transfercencia mensual 10000MB</li>
            <li class="pricing__feature">Subdominios 10</li>
        </ul>
        <button class="pricing__action">Escoja plan</button>
    </div>
    <div class="pricing__item">
        <h3 class="pricing__title">Junior PHP</h3>
        <div class="pricing__price"><span class="pricing__currency">$</span>32,99</div>
        <p class="pricing__sentence">Para medianos negocios</p>
        <ul class="pricing__feature-list">
            <li class="pricing__feature">Almacenamiento 10GB</li>
            <li class="pricing__feature">Transferencia mensual 15000MB</li>
            <li class="pricing__feature">Subdominios 15</li>
            <li class="pricing__feature">Velocidad de servidor 12200 Mhz</li>
            <li class="pricing__feature">Memoria 32GB</li>
        </ul>
        <button class="pricing__action">Escoja plan</button>
    </div>
    <div class="pricing__item">
        <h3 class="pricing__title">Basico PHP</h3>
        <div class="pricing__price"><span class="pricing__currency">$</span>39,99</div>
        <p class="pricing__sentence">Para grandes negocios</p>
        <ul class="pricing__feature-list">
            <li class="pricing__feature">Almacenamiento 12GB</li>
            <li class="pricing__feature">Transferencia mensual Ilimitado</li>
            <li class="pricing__feature">Subdominios Ilimitado</li>
            <li class="pricing__feature">Soporte 24/7</li>
            <li class="pricing__feature">Integración de analitica</li>
            <li class="pricing__feature">Sistema Operativo Centos</li>
        </ul>
        <button class="pricing__action">Escoja plan</button>
    </div>
</div>

El diseño css es el siguiente:

.pricing {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0 auto 3em;
}

.pricing__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    flex: 0 1 330px;
}

.pricing__feature-list {
    text-align: left;
}

.pricing__action {
    color: inherit;
    border: none;
    background: none;
}

.pricing__action:focus {
    outline: none;
}

El estilo para un grupo de plan es el siguiente :

.pricing--sonam .pricing__item {
    margin: 1.5em;
    padding: 2em;
    cursor: default;
    border-radius: 10px;
    background: #1F1F1F;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05), 0 15px 30px -10px rgba(0,0,0,0.3);
    transition: background 0.3s;
}

.pricing--sonam .pricing__item:hover {
    background: #141315;
}

.pricing--sonam .pricing__title {
    font-size: 2em;
    width: 100%;
    margin: 0 0 0.25em;
    padding: 0 0 0.5em;
    border-bottom: 3px solid rgb(27, 26, 28);
}

.pricing--sonam .pricing__price {
    color: #E06060;
    font-size: 1.75em;
    padding: 1em 0 0.75em;
}

.pricing--sonam .pricing__sentence {
    font-weight: bold;
}

.pricing--sonam .pricing__feature-list {
    margin: 0;
    padding: 1em 1.25em 2em;
}

.pricing--sonam .pricing__action {
    font-weight: bold;
    margin-top: auto;
    padding: 0.75em 2em;
    border-radius: 5px;
    background: #E06060;
    transition: background 0.3s;
}

.pricing--sonam .pricing__action:hover,
.pricing--sonam .pricing__action:focus {
    background: #BD3C3C;
}

Como ya se dijo anteriormente las propiedades están siendo soportado solo para los navegadores modernos ya que se está utilizando la propiedad flexbox.

Demostración

Relacionado