Красивые примеры таблицы цен CSS

Таблица цен или еще ее можно назвать ценообразователь (pricing) является своего рода инструментом для коммерческих сайтов. Это те проекты, которые предлагаю пользователям услуги, платные аккаунты (где имеется список преимущества перед обычным аккаунтом) и все в таком духе.

Таблица цен включает в себя самую важную информацию, которая должна быть максимально доступная и понятна любому покупателю. Как раз в этом обзоре мы рассмотрим 5 вариантов оформления таблиц. Они все адаптивные, если конечно, адаптивная ваша верстка, и в некоторых из них требуется подключение иконочного шрифта.

Шаблон таблицы на чистом CSS

Требуется иконочный шрифт SimpleLineIcons

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">

Красивые примеры таблицы цен CSS

Демо Скачать Источник

HTML

<div class="pricingdiv">
    <ul class="theplan">
        <li class="title"><b>Plan 1</b></li>
        <li><b>Dimensions:</b> 24.8W x 47.3H</li>
        <li><b>Material:</b> Nylon w/ Breathable Glass Fiber</li>
        <li><b>Weight:</b> 55 lbs</li>
        <li><b>Max Weight:</b> 330 lbs</li>
        <li><b>Tilt Degrees:</b> 135</li>
        <li><b>Tilt Degrees:</b> 135</li>
        <li><b>Head Rest:</b> Yes</li>
        <li><a class="pricebutton" href="javascript: void 0;"><span class="icon-tag"></span> Check Out</a></li>
    </ul>
    <ul class="theplan">
        <li class="title"><span class="icon-trophy" style="color:yellow"></span> <b>Plan 2</b></li>
        <li><b>Dimensions:</b> 24.8W x 47.3H</li>
        <li><b>Material:</b> Nylon w/ Breathable Glass Fiber</li>
        <li><b>Weight:</b> 55 lbs</li>
        <li><b>Max Weight:</b> 330 lbs</li>
        <li><b>Head Rest:</b> Yes</li>
        <li><b>Arm Rest:</b> <span class="icon-check"></span></li>
        <li><b>Lumbar Support:</b> <span class="icon-check"></span></li>
        <li><b>Warranty:</b> 30 Days Money Back</li>
        <li><a class="pricebutton" href="javascript: void 0;"><span class="icon-tag"></span> Check Out</a></li>
    </ul>
    <ul class="theplan">
        <li class="title"><b>Plan 3</b></li>
        <li class="ethighlight"><b>Dimensions:</b> 24.8W x 47.3H</li>
        <li><b>Material:</b> Nylon w/ Breathable Glass Fiber</li>
        <li><b>Weight:</b> 55 lbs</li>
        <li><b>Max Weight:</b> 330 lbs</li>
        <li><b>Head Rest:</b> Yes</li>
        <li><b>Arm Rest:</b> <span class="icon-close"></span></li>
        <li><b>Lumbar Support:</b> <span class="icon-check"></span></li>
        <li><b>Warranty:</b> 30 Days Money Back</li>
        <li><a class="pricebutton" href="javascript: void 0;"><span class="icon-tag"></span> Check Out</a></li>
    </ul>
</div>

CSS

.pricingdiv{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

.pricingdiv ul.theplan{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  color: white;
  background: #7c3ac9;
  position: relative;
  width: 250px; /* width of each table */
  margin-right: 10px; /* spacing between tables */
  margin-bottom: 1em;
  transition: all .5s;
}

.pricingdiv ul.theplan:hover{ /* when mouse hover over pricing table */
  transform: scale(1.05);
  transition: all .5s;
  z-index: 100;
  box-shadow: 0 0 10px gray;
}

.pricingdiv ul.theplan li{
  margin: 10px 20px;
  position: relative;
}

.pricingdiv ul.theplan li.title{
  font-size: 150%;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
  text-transform: uppercase;
  border-bottom: 5px solid white;
}

.pricingdiv ul.theplan:nth-of-type(2){
  background: #e53499;
}

.pricingdiv ul.theplan:nth-of-type(3){
  background: #2a2cc8;
}

.pricingdiv ul.theplan:last-of-type{ /* remove right margin in very last table */
  margin-right: 0;
}

/*very last LI within each pricing UL */
.pricingdiv ul.theplan li:last-of-type{
  text-align: center;
  margin-top: auto; /*align last LI (price botton li) to the very bottom of UL */
}  

.pricingdiv a.pricebutton{
  background: white;
  text-decoration: none;
  padding: 10px;
  display: inline-block;
  margin: 10px auto;
  border-radius: 5px;
  color: navy;
  text-transform: uppercase;
}

@media only screen and (max-width: 500px) {
  .pricingdiv ul.theplan{
    border-radius: 0;
    width: 100%;
    margin-right: 0;
  }

  .pricingdiv ul.theplan:hover{
    transform: none;
    box-shadow: none;
  }

  .pricingdiv a.pricebutton{
    display: block;
  }
}

Шестиугольная таблица

Требуется подключение шрифта Font Awesome

таблица цен

Демо Скачать Источник

HTML

<section class="section-padding">
    <div class="container xpt-center">
        <!-- Pricing Table structure -->
        <div class="xpt">
            <div class="xpt-hex xpt-cw">
                <div class="xpt-ihex">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex">
                <div class="xpt-ihex  xpt_inner-lb">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-acw">
                <div class="xpt-ihex xpt_inner-b">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i><span> <i> SSD Hard Drive</i> 400GB </span> Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-zoom">
                <div class="xpt-ihex xpt_inner-db">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-zoom-out">
                <div class="xpt-ihex xpt_inner-ld">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-inr-cw">
                <div class="xpt-ihex xpt_inner-lg">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-inr-acw">
                <div class="xpt-ihex xpt_inner-lg">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-inr-acw xpt-zoom-out">
                <div class="xpt-ihex xpt_inner-g">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-inr-cw xpt-zoom-out">
                <div class="xpt-ihex xpt_inner-lr">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-acw xpt-zoom">
                <div class="xpt-ihex xpt_inner-r">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-cw xpt-zoom">
                <div class="xpt-ihex xpt_inner-o">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-clr-cng">
                <div class="xpt-ihex">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-flip">
                <div class="xpt-ihex xpt_inner-p">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-flip xpt-frl">
                <div class="xpt-ihex xpt_inner-lp">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-flip xpt-ftb">
                <div class="xpt-ihex xpt_inner-ld">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-flip xpt-fbt">
                <div class="xpt-ihex xpt_inner-lr">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
            <div class="xpt-hex xpt-zoom-in-out">
                <div class="xpt-ihex xpt_inner-r">
                    <div class="xpt-box-inr">
                        <div class="xpt-box-1 xpt-center">
                            <h3 class="xpt-title"> Starter </h3>
                            <p class="xpt-price-box">
                                <span class="xpt-currency">$</span>
                                <span class="xpt-price">30<span>00</span></span>
                                <span class="xpt-duration">monthly</span>
                            </p>
                        </div>
                        <div class="xpt-box-2">
                            <ul class="xpt-body">
                                <li><i class="fa fa-clock-o"></i>24/7 Tech Support</li>
                                <li><i class="fa fa-cog"></i>Advanced Options</li>
                                <li><i class="fa fa-star"></i>400GB Storage</li>
                                <li><i class="fa fa-heart"></i>4TB Bandwidth </li>
                            </ul>
                            <!-- /.xpt-body -->
                            <div class="xpt-footer">
                                <a href="#" class="xpt-btn"><i class="fa fa-long-arrow-right"></i>Choose Plan</a>
                            </div>
                            <!-- /.xpt-footer -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.xpt-hex -->
        </div>
        <!-- /.xpt -->
        <!-- Pricing Table structure End -->
    </div>
    <!-- /.container -->
</section>

CSS

a.btn {
text-decoration: none;
color:#2980b9;
text-transform: uppercase;
display:inline-block;
position: relative;
font-weight:700;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
a.btn:after{
content:"";
position: absolute;
bottom:-5px;
left: 51%;
right:51%;
height:2px;
background:#16a085;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
a.btn:hover {
color:#16a085;
}
a.btn:hover:after {
left: 0%;
right:0%;
}
.section-padding {
padding: 50px 0;
}
.section-title {
font-family: 'Josefin Sans', sans-serif;
text-align: center;
position: relative;
margin-top: 0;
padding-bottom: 20px;
}
.section-title:after {
content: "";
position: absolute;
left: 50%;
width: 160px;
margin-left: -80px;
bottom: 10px;
height: 3px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
.page-title {
color: #696868;
font-family: 'Josefin Sans', sans-serif;
text-align: center;
padding-top: 40px;
margin: 0;
}
.container {
max-width: 1140px;
margin: auto;
padding: 0 15px;
}
.main-menu-continer {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
border-bottom:1px solid #eee;
background: #fff;
}
.navbar-toggle {
display: none;
}
.navbar ul,
.navbar li {
list-style: none;
margin:0;
padding: 0;
text-align: center;
}
.navbar>ul>li {
float: none;
display: inline-block;
}
.navbar>ul>li>a {
display: inline-block;
line-height: 40px;
font-weight: 700;
text-decoration: none;
color: #5d5d5d;
font-size: 16px;
font-family: 'Josefin Sans', sans-serif;
padding: 0 15px;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.navbar>ul>li>a:hover ,
.navbar>ul>li.active>a{
background:rgba(74, 112, 119, 0.69);
color: #fff;
}
/* 1 - Google Font
---------------------------------------------------------------------- */
/* 1 - Google Font End
---------------------------------------------------------------------- */
/* 2 - General Styles
---------------------------------------------------------------------- */
.xpt-container {
text-align: center;
}
.xpt-center {
text-align: center;
}
.xpt *,
.xpt *:after,
.xpt *:before {
-webkit-transition: all .25s  linear;
-moz-transition: all .25s  linear;
-ms-transition: all .25s  linear;
-o-transition: all .25s  linear;
transition: all .25s  linear;
}
/* 2 - General Styles End
---------------------------------------------------------------------- */
/* 3 - Hexagon Styles
---------------------------------------------------------------------- */
.xpt-hex {
font-family: 'Lato', sans-serif;
position: relative;
z-index: 0;
color: #fff;
display: inline-block;
margin: 80px 5px 75px 5px;
}
.xpt-hex:after {
content: "";
position: absolute;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.xpt-hex:before {
content: "";
position: absolute;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.xpt-hex,
.xpt-hex:after,
.xpt-hex:before {
width: 250px;
height: 143px;
background: #fff;
text-align: justify;
}
/* 3.1 - Inner Hexagon
--------------------------------------*/
.xpt-ihex {
position: absolute;
z-index: 1;
left: 12px;
right: 12px;
top: 6px;
bottom: 6px;
}
.xpt-ihex:after {
content: "";
position: absolute;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.xpt-ihex:before {
content: "";
position: absolute;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.xpt-ihex,
.xpt-ihex:after,
.xpt-ihex:before {
background: #adcf24;
}
.xpt-ihex:after,
.xpt-ihex:before {
width: 100%;
height: 100%;
}
.xpt-box-inr {
z-index: 2;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
/* 3.1 - Inner Hexagon End
--------------------------------------*/
/* 3.2 - Price Component
--------------------------------------*/
.xpt-box-1 {
font-weight: 300;
}
.xpt-title {
font-size: 24px!important;
font-family: 'Lato', sans-serif;
margin: 0;
padding: 0;
font-weight: 300!important;
text-transform: uppercase;
margin-top: -15px!important;
}
.xpt-price-box {
font-weight: 300!important;
display: inline-block;
position: relative;
}
.xpt-price {
font-size: 90px;
line-height: 60px;
}
.xpt-price span {
position: absolute;
left: 100%;
font-size: 40px;
top: -14px;
}
.xpt-currency {
position: absolute;
left: -20px;
top: -8px;
font-size: 40px;
}
.xpt-duration {
position: absolute;
font-size: 20px;
bottom: -30px;
left: 0;
right: 0;
}
.xpt-box-2 {
position: absolute;
left: 0;
right: 0;
top: 50px;
opacity: 0;
padding: 0 45px;
margin-top: -10px;
}
.xpt-fleft{
text-align: left;
}
.xpt-fcenter{
text-align: center;
}
.xpt-fright {
text-align: right;
}
.xpt-body,
.xpt-body li {
list-style: none;
margin: 0!important;
padding: 0;
}
.xpt-body li {
line-height: 19px;
font-size: 12px;
padding: 4px 0;
position: relative;
}
/* Tool-tip */
.xpt-body li span {
display: inline-block;
cursor: help;
border-bottom: dotted 2px #fff;
}
.xpt-body li span:before {
content: "";
position: absolute;
top: -15px;
width: 12px;
height: 12px;
left: 50%;
margin-left: -6px;
}
.xpt-body li span i {
margin:0;
margin-bottom: 15px;
position: absolute;
bottom: 100%;
display: inline-block;
padding: 0 5px;
border-radius: 3px;
text-align: center;
background: #adcf24;
left: 0px;
right: 0px;
}
.xpt-body li span:before,
.xpt-body li span i {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
border:0;
}
.xpt-body li span:hover:before,
.xpt-body li span:hover i {
opacity: 1;
width: auto;
height: auto;
overflow: visible;
}
.xpt-body li span:hover:before {
top: 0;
border-width:6px;
border-style: solid;
border-color:#fff transparent transparent transparent;
}
.xpt-body li span:hover i {
margin-bottom: 0;
padding: 4px;
border: 2px solid #fff;
}
/* Button */
.xpt-btn {
font-size: 13px;
display: inline-block;
color: #fff!important;
padding-top: 25px;
text-decoration: none;
box-shadow: none!important;
text-transform: uppercase;
}
.xpt-body li i,
.xpt-btn i {
margin-right: 15px;
}
/* 3.2 - Price Component End
--------------------------------------*/
/* 3.3 - Hover Effects
--------------------------------------*/
.xpt-hex:hover .xpt-box-1 {
opacity: 0;
}
.xpt-hex:hover .xpt-box-2 {
opacity: 1;
top: 0;
}
.xpt-hex.xpt-cw:hover,
.xpt-hex.xpt-acw:hover .xpt-ihex {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.xpt-hex.xpt-cw:hover .xpt-ihex,
.xpt-hex.xpt-acw:hover {
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.xpt-hex.xpt-zoom:hover .xpt-ihex {
-webkit-transform: scale(1.105,1.105);
-moz-transform: scale(1.105,1.105);
-ms-transform: scale(1.105,1.105);
-o-transform: scale(1.105,1.105);
transform: scale(1.105,1.105);
}
.xpt-hex.xpt-zoom-out .xpt-ihex {
-webkit-transform: scale(1.105,1.105);
-moz-transform: scale(1.105,1.105);
-ms-transform: scale(1.105,1.105);
-o-transform: scale(1.105,1.105);
transform: scale(1.105,1.105);
}
.xpt-hex.xpt-zoom-out:hover .xpt-ihex {
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
.xpt-hex.xpt-inr-cw:hover .xpt-ihex .xpt-box-inr,
.xpt-hex.xpt-inr-acw:hover .xpt-ihex,
.xpt-hex.xpt-acw.xpt-zoom:hover .xpt-box-inr{
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.xpt-hex.xpt-inr-cw:hover .xpt-ihex,
.xpt-hex.xpt-inr-acw:hover .xpt-ihex .xpt-box-inr,
.xpt-hex.xpt-cw.xpt-zoom:hover .xpt-box-inr {
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.xpt-hex.xpt-clr-cng:hover,
.xpt-hex.xpt-clr-cng:hover:after,
.xpt-hex.xpt-clr-cng:hover:before {
background:  #adcf24;
}
.xpt-hex.xpt-flip {
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
perspective: 1000;
}
.xpt-hex.xpt-flip .xpt-box-2,
.xpt-hex.xpt-zoom-in-out .xpt-box-2  {
top: 0;
}
.xpt-hex.xpt-flip:hover .xpt-ihex ,
.xpt-hex.xpt-flip:hover .xpt-box-inr {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.xpt-hex.xpt-flip.xpt-frl:hover .xpt-ihex ,
.xpt-hex.xpt-flip.xpt-frl:hover .xpt-box-inr {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.xpt-hex.xpt-flip.xpt-ftb:hover .xpt-ihex ,
.xpt-hex.xpt-flip.xpt-ftb:hover .xpt-box-inr {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.xpt-hex.xpt-flip.xpt-fbt:hover .xpt-ihex ,
.xpt-hex.xpt-flip.xpt-fbt:hover .xpt-box-inr {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.xpt-hex.xpt-zoom-in-out:hover .xpt-ihex  {
-webkit-animation: xptzoom-in-out .5s;
animation: xptzoom-in-out .5s;
}
@keyframes xptzoom-in-out {
0% {
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
50% {
-webkit-transform: scale(.4,.4);
-moz-transform: scale(.4,.4);
-ms-transform: scale(.4,.4);
-o-transform: scale(.4,.4);
transform: scale(.4,.4);
}
100% {
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
}
/* 3.3 - Hover Effects End
--------------------------------------*/
/* 3 - Hexagon Styles  End
---------------------------------------------------------------------- */
/* 4 - Hexagon Color Variation
---------------------------------------------------------------------- */
/* Front Hexagon BG Color */
.xpt_inner-lb,
.xpt_inner-lb:after,
.xpt_inner-lb:before,
.xpt_inner-lb li span i{
background: #0FB9DB;
}
.xpt_inner-b,
.xpt_inner-b:after,
.xpt_inner-b:before,
.xpt_inner-b li span i{
background: #3498db;
}
.xpt_inner-db,
.xpt_inner-db:after,
.xpt_inner-db:before,
.xpt_inner-db li span i{
background: #2980b9;
}
.xpt_inner-ld,
.xpt_inner-ld:after,
.xpt_inner-ld:before,
.xpt_inner-ld li span i{
background: #2c3e50;
}
.xpt_inner-lg,
.xpt_inner-lg:after,
.xpt_inner-lg:before,
.xpt_inner-lg li span i{
background: #1abc9c;
}
.xpt_inner-lg,
.xpt_inner-lg:after,
.xpt_inner-lg:before,
.xpt_inner-lg li span i{
background: #1abc9c;
}
.xpt_inner-g,
.xpt_inner-g:after,
.xpt_inner-g:before,
.xpt_inner-g li span i{
background: #16a085;
}
.xpt_inner-lr,
.xpt_inner-lr:after,
.xpt_inner-lr:before,
.xpt_inner-lr li span i{
background: #f15b5d;
}
.xpt_inner-r,
.xpt_inner-r:after,
.xpt_inner-r:before,
.xpt_inner-r li span i{
background: #dc2a0b;
}
.xpt_inner-o,
.xpt_inner-o:after,
.xpt_inner-o:before,
.xpt_inner-o li span i{
background: #f39c12;
}
.xpt_inner-lp,
.xpt_inner-lp:after,
.xpt_inner-lp:before,
.xpt_inner-lp li span i{
background: #d368e8;
}
.xpt_inner-lp,
.xpt_inner-lp:after,
.xpt_inner-lp:before,
.xpt_inner-lp li span i{
background: #d368e8;
}
.xpt_inner-p,
.xpt_inner-p:after,
.xpt_inner-p:before,
.xpt_inner-p li span i{
background: #de2e8c;
}
.xpt_inner-dp,
.xpt_inner-dp:after,
.xpt_inner-dp:before,
.xpt_inner-dp li span i{
background: #F305C7;
}
/* Front Hexagon BG Color End */
/* Back Hexagon BG Color */
.bhex_white,
.bhex_white:after,
.bhex_white:before{
background: #ffffff;
}
.bhex_GhostWhite,
.bhex_GhostWhite:after,
.bhex_GhostWhite:before{
background: #F8F8FF;
}
.bhex_WhiteSmoke,
.bhex_WhiteSmoke:after,
.bhex_WhiteSmoke:before{
background: #F5F5F5;
}
.bhex_Snow,
.bhex_Snow:after,
.bhex_Snow:before{
background: #FFFAFA;
}
.bhex_Silver,
.bhex_Silverl:after,
.bhex_Silver:before {
background: #C0C0C0;
}
.bhex_Gray,
.bhex_Gray:after,
.bhex_Gray:before{
background: #808080;
}
.bhex_LightGray,
.bhex_LightGray:after,
.bhex_LightGray"before {
background: #D3D3D3;
}
.bhex_SlateGray,
.bhex_SlateGray:after,
.bhex_SlateGray:before{
background:#708090
}
.bhex_LightSlateGray,
.bhex_LightSlateGray:after,
.bhex_LightSlateGray:before {
background:#778899
}
.bhex_DimGray,
.bhex_DimGray:after,
.bhex_DimGray:before {
background:#696969;
}
.bhex_DarkGray,
.bhex_DarkGray:after,
.bhex_DarkGray:before {
background:#A9A9A9;
}
/* Back Hexagon BG Color End */
/* 4 - Hexagon Color Variation End
---------------------------------------------------------------------- */

Таблица и Bootstrap

Нужно подключение Bootstrap grid

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap-grid.min.css" />

Таблица и Bootstrap

Демо Скачать

HTML

<div class="container">
   <div class="row">
      <div class="col-md-3 col-sm-6">
         <div class="pricingTable">
            <div class="pricingTable-header">
               <i class="fa fa-adjust"></i>
               <div class="price-value"> $10.00 <span class="month">per month</span> </div>
            </div>
            <h3 class="heading">Standard</h3>
            <div class="pricing-content">
               <ul>
                  <li><b>50GB</b> Disk Space</li>
                  <li><b>50</b> Email Accounts</li>
                  <li><b>50GB</b> Monthly Bandwidth</li>
                  <li><b>10</b> subdomains</li>
                  <li><b>15</b> Domains</li>
               </ul>
            </div>
            <div class="pricingTable-signup">
               <a href="#">sign up</a>
            </div>
         </div>
      </div>
      <div class="col-md-3 col-sm-6">
         <div class="pricingTable green">
            <div class="pricingTable-header">
               <i class="fa fa-briefcase"></i>
               <div class="price-value"> $20.00 <span class="month">per month</span> </div>
            </div>
            <h3 class="heading">Business</h3>
            <div class="pricing-content">
               <ul>
                  <li><b>60GB</b> Disk Space</li>
                  <li><b>60</b> Email Accounts</li>
                  <li><b>60GB</b> Monthly Bandwidth</li>
                  <li><b>15</b> subdomains</li>
                  <li><b>20</b> Domains</li>
               </ul>
            </div>
            <div class="pricingTable-signup">
               <a href="#">sign up</a>
            </div>
         </div>
      </div>
      <div class="col-md-3 col-sm-6">
         <div class="pricingTable blue">
            <div class="pricingTable-header">
               <i class="fa fa-diamond"></i>
               <div class="price-value"> $30.00 <span class="month">per month</span> </div>
            </div>
            <h3 class="heading">Premium</h3>
            <div class="pricing-content">
               <ul>
                  <li><b>70GB</b> Disk Space</li>
                  <li><b>70</b> Email Accounts</li>
                  <li><b>70GB</b> Monthly Bandwidth</li>
                  <li><b>20</b> subdomains</li>
                  <li><b>25</b> Domains</li>
               </ul>
            </div>
            <div class="pricingTable-signup">
               <a href="#">sign up</a>
            </div>
         </div>
      </div>
      <div class="col-md-3 col-sm-6">
         <div class="pricingTable red">
            <div class="pricingTable-header">
               <i class="fa fa-cube"></i>
               <div class="price-value"> $40.00 <span class="month">per month</span> </div>
            </div>
            <h3 class="heading">Extra</h3>
            <div class="pricing-content">
               <ul>
                  <li><b>80GB</b> Disk Space</li>
                  <li><b>80</b> Email Accounts</li>
                  <li><b>80GB</b> Monthly Bandwidth</li>
                  <li><b>25</b> subdomains</li>
                  <li><b>30</b> Domains</li>
               </ul>
            </div>
            <div class="pricingTable-signup">
               <a href="#">sign up</a>
            </div>
         </div>
      </div>
   </div>
</div>

CSS

.pricingTable{
text-align: center;
background: #fff;
margin: 0 -15px;
box-shadow: 0 0 10px #ababab;
padding-bottom: 40px;
border-radius: 10px;
color: #cad0de;
transform: scale(1);
transition: all 0.5s ease 0s;
}
.pricingTable:hover{
transform: scale(1.05);
z-index: 1;
}
.pricingTable .pricingTable-header{
padding: 40px 0;
background: #f5f6f9;
border-radius: 10px 10px 50% 50%;
transition: all 0.5s ease 0s;
}
.pricingTable:hover .pricingTable-header{
background: #ff9624;
}
.pricingTable .pricingTable-header i{
font-size: 50px;
color: #858c9a;
margin-bottom: 10px;
transition: all 0.5s ease 0s;
}
.pricingTable .price-value{
font-size: 35px;
color: #ff9624;
transition: all 0.5s ease 0s;
}
.pricingTable .month{
display: block;
font-size: 14px;
color: #cad0de;
}
.pricingTable:hover .pricingTable-header i,
.pricingTable:hover .price-value,
.pricingTable:hover .month{
color: #fff;
}
.pricingTable .heading{
font-size: 24px;
color: #ff9624;
margin-bottom: 20px;
text-transform: uppercase;
}
.pricingTable .pricing-content ul{
list-style: none;
padding: 0;
margin-bottom: 30px;
}
.pricingTable .pricing-content ul li{
line-height: 30px;
color: #a7a8aa;
}
.pricingTable .pricingTable-signup a{
display: inline-block;
font-size: 15px;
color: #fff;
padding: 10px 35px;
border-radius: 20px;
background: #ffa442;
text-transform: uppercase;
transition: all 0.3s ease 0s;
}
.pricingTable .pricingTable-signup a:hover{
box-shadow: 0 0 10px #ffa442;
}
.pricingTable.blue .price-value,
.pricingTable.blue .heading{
color: #4b64ff;
}
.pricingTable.blue:hover .pricingTable-header,
.pricingTable.blue .pricingTable-signup a{
background: #4b64ff;
}
.pricingTable.blue .pricingTable-signup a:hover{
box-shadow: 0 0 10px #4b64ff;
}
.pricingTable.red .price-value,
.pricingTable.red .heading{
color: #ff4b4b;
}
.pricingTable.red:hover .pricingTable-header,
.pricingTable.red .pricingTable-signup a{
background: #ff4b4b;
}
.pricingTable.red .pricingTable-signup a:hover{
box-shadow: 0 0 10px #ff4b4b;
}
.pricingTable.green .price-value,
.pricingTable.green .heading{
color: #40c952;
}
.pricingTable.green:hover .pricingTable-header,
.pricingTable.green .pricingTable-signup a{
background: #40c952;
}
.pricingTable.green .pricingTable-signup a:hover{
box-shadow: 0 0 10px #40c952;
}
.pricingTable.blue:hover .price-value,
.pricingTable.red:hover .price-value,
.pricingTable.green:hover .price-value{
color: #fff;
}
@media screen and (max-width: 990px){
.pricingTable{ margin: 0 0 20px 0; }
}

Таблица цен

Нужно подключение Bootstrap grid

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap-grid.min.css" />

Таблица цен

Демо Скачать

HTML

<div class="container">
   <div class="row">
      <div class="col-md-3 col-sm-6">
         <div class="pricingTable">
            <div class="pricingTable-header">
               <h3 class="heading">Standard</h3>
               <span class="price-value">
               <span class="currency">$</span> 10
               <span class="month">/mo</span>
               </span>
            </div>
            <div class="pricing-content">
               <ul>
                  <li>50GB Disk Space</li>
                  <li>50 Email Accounts</li>
                  <li>50GB Monthly Bandwidth</li>
                  <li>10 Subdomains</li>
                  <li>15 Domains</li>
               </ul>
               <a href="#" class="read">sign up</a>
            </div>
         </div>
      </div>
      <div class="col-md-3 col-sm-6">
         <div class="pricingTable">
            <div class="pricingTable-header">
               <h3 class="heading">Business</h3>
               <span class="price-value">
               <span class="currency">$</span> 20
               <span class="month">/mo</span>
               </span>
            </div>
            <div class="pricing-content">
               <ul>
                  <li>60GB Disk Space</li>
                  <li>60 Email Accounts</li>
                  <li>60GB Monthly Bandwidth</li>
                  <li>15 Subdomains</li>
                  <li>20 Domains</li>
               </ul>
               <a href="#" class="read">sign up</a>
            </div>
         </div>
      </div>
      <div class="col-md-3 col-sm-6">
         <div class="pricingTable">
            <div class="pricingTable-header">
               <h3 class="heading">Premium</h3>
               <span class="price-value">
               <span class="currency">$</span> 30
               <span class="month">/mo</span>
               </span>
            </div>
            <div class="pricing-content">
               <ul>
                  <li>70GB Disk Space</li>
                  <li>70 Email Accounts</li>
                  <li>70GB Monthly Bandwidth</li>
                  <li>20 Subdomains</li>
                  <li>25 Domains</li>
               </ul>
               <a href="#" class="read">sign up</a>
            </div>
         </div>
      </div>
      <div class="col-md-3 col-sm-6">
         <div class="pricingTable">
            <div class="pricingTable-header">
               <h3 class="heading">Extra</h3>
               <span class="price-value">
               <span class="currency">$</span> 40
               <span class="month">/mo</span>
               </span>
            </div>
            <div class="pricing-content">
               <ul>
                  <li>80GB Disk Space</li>
                  <li>80 Email Accounts</li>
                  <li>80GB Monthly Bandwidth</li>
                  <li>25 Subdomains</li>
                  <li>30 Domains</li>
               </ul>
               <a href="#" class="read">sign up</a>
            </div>
         </div>
      </div>
   </div>
</div>

CSS

.pricingTable{
text-align: center;
}
.pricingTable .pricingTable-header{
padding: 30px 0;
background: #4d4d4d;
position: relative;
transition: all 0.3s ease 0s;
}
.pricingTable:hover .pricingTable-header{
background: #09b2c6;
}
.pricingTable .pricingTable-header:before,
.pricingTable .pricingTable-header:after{
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #d9d9d8;
position: absolute;
bottom: 12px;
}
.pricingTable .pricingTable-header:before{
left: 40px;
}
.pricingTable .pricingTable-header:after{
right: 40px;
}
.pricingTable .heading{
font-size: 20px;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 0;
}
.pricingTable .price-value{
display: inline-block;
position: relative;
font-size: 55px;
font-weight: bold;
color: #09b1c5;
transition: all 0.3s ease 0s;
}
.pricingTable:hover .price-value{
color: #fff;
}
.pricingTable .currency{
font-size: 30px;
font-weight: bold;
position: absolute;
top: 6px;
left: -19px;
}
.pricingTable .month{
font-size: 16px;
color: #fff;
position: absolute;
bottom: 15px;
right: -30px;
text-transform: uppercase;
}
.pricingTable .pricing-content{
padding-top: 50px;
background: #fff;
position: relative;
}
.pricingTable .pricing-content:before,
.pricingTable .pricing-content:after{
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #7c7c7c;
position: absolute;
top: 12px;
}
.pricingTable .pricing-content:before{
left: 40px;
}
.pricingTable .pricing-content:after{
right: 40px;
}
.pricingTable .pricing-content ul{
padding: 0 20px;
margin: 0;
list-style: none;
}
.pricingTable .pricing-content ul:before,
.pricingTable .pricing-content ul:after{
content: "";
width: 8px;
height: 46px;
border-radius: 3px;
background: linear-gradient(to bottom,#818282 50%,#727373 50%);
position: absolute;
top: -22px;
z-index: 1;
box-shadow: 0 0 5px #707070;
transition: all 0.3s ease 0s;
}
.pricingTable:hover .pricing-content ul:before,
.pricingTable:hover .pricing-content ul:after{
background: linear-gradient(to bottom, #40c4db 50%, #34bacc 50%);
}
.pricingTable .pricing-content ul:before{
left: 44px;
}
.pricingTable .pricing-content ul:after{
right: 44px;
}
.pricingTable .pricing-content ul li{
font-size: 15px;
font-weight: bold;
color: #777473;
padding: 10px 0;
border-bottom: 1px solid #d9d9d8;
}
.pricingTable .pricing-content ul li:last-child{
border-bottom: none;
}
.pricingTable .read{
display: inline-block;
font-size: 16px;
color: #fff;
text-transform: uppercase;
background: #d9d9d8;
padding: 8px 25px;
margin: 30px 0;
transition: all 0.3s ease 0s;
}
.pricingTable .read:hover{
text-decoration: none;
}
.pricingTable:hover .read{
background: #09b1c5;
}
@media screen and (max-width: 990px){
.pricingTable{ margin-bottom: 25px; }
}

Простенькая таблица цен

Нужно подключение Bootstrap grid

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap-grid.min.css" />

Простенькая таблица цен

Демо Скачать

HTML

<div class="container">
   <div class="row">
      <div class="col-md-4 col-sm-6">
         <div class="pricingTable">
            <h3 class="title">Standard</h3>
            <div class="price-value">
               <span class="month">per month</span>
               <span class="amount">
               <span class="currency">$</span>
               10
               <span class="value">99</span>
               </span>
            </div>
            <ul class="pricing-content">
               <li>50GB Disk Space</li>
               <li>50 Email Accounts</li>
               <li>50GB Monthly Bandwidth</li>
               <li>10 Subdomains</li>
               <li>15 Domains</li>
            </ul>
            <a href="#" class="pricingTable-signup">sign up</a>
         </div>
      </div>
      <div class="col-md-4 col-sm-6">
         <div class="pricingTable">
            <h3 class="title">Business</h3>
            <div class="price-value">
               <span class="month">per month</span>
               <span class="amount">
               <span class="currency">$</span>
               20
               <span class="value">99</span>
               </span>
            </div>
            <ul class="pricing-content">
               <li>60GB Disk Space</li>
               <li>60 Email Accounts</li>
               <li>60GB Monthly Bandwidth</li>
               <li>15 Subdomains</li>
               <li>20 Domains</li>
            </ul>
            <a href="#" class="pricingTable-signup">sign up</a>
         </div>
      </div>
      <div class="col-md-4 col-sm-6">
         <div class="pricingTable">
            <h3 class="title">Premium</h3>
            <div class="price-value">
               <span class="month">per month</span>
               <span class="amount">
               <span class="currency">$</span>
               30
               <span class="value">99</span>
               </span>
            </div>
            <ul class="pricing-content">
               <li>70GB Disk Space</li>
               <li>70 Email Accounts</li>
               <li>70GB Monthly Bandwidth</li>
               <li>20 Subdomains</li>
               <li>25 Domains</li>
            </ul>
            <a href="#" class="pricingTable-signup">sign up</a>
         </div>
      </div>
   </div>
</div>

CSS

.pricingTable{
text-align: center;
background: #fff;
padding: 30px 0;
}
.pricingTable .title{
font-size: 22px;
font-weight: 600;
color: #2e282a;
text-transform: uppercase;
margin: 0 0 30px 0;
}
.pricingTable .price-value{
padding: 30px 0;
background: #ba5289;
margin-bottom: 30px;
position: relative;
}
.pricingTable .price-value:before{
content: "";
border-top: 15px solid #fff;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: absolute;
top: 0;
left: 46%;
}
.pricingTable .month{
display: block;
font-size: 15px;
font-weight: 900;
color: #fff;
text-transform: uppercase;
}
.pricingTable .amount{
display: inline-block;
font-size: 50px;
color: #fff;
position: relative;
}
.pricingTable .currency{
position: absolute;
top: -1px;
left: -35px;
}
.pricingTable .value{
font-size: 20px;
position: absolute;
top: 21px;
right: -27px;
}
.pricingTable .pricing-content{
padding: 0;
margin: 0 0 30px 0;
list-style: none;
}
.pricingTable .pricing-content li{
font-size: 16px;
color: #868686;
line-height: 35px;
}
.pricingTable .pricingTable-signup{
display: inline-block;
padding: 8px 40px;
background: #fca4a7;
font-size: 15px;
font-weight: 600;
color: #fff;
text-transform: capitalize;
border: 2px solid #fca4a7;
border-radius: 30px;
transition: all 0.5s ease 0s;
}
.pricingTable .pricingTable-signup:hover{
background: #fff;
color: #fca4a7;
}
@media only screen and (max-width: 990px){
.pricingTable{ margin-bottom: 30px; }
}
Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *