Choose your plan

Lorem ipsum is a pseudo-Latin text used in web design in place of English.

Standard

Lorem ipsum is a pseudo-Latin text used in place of English.

$ 8. 99 / Month

Developer

Lorem ipsum is a pseudo-Latin text used in place of English.

$ 19. 99 / Month

Enterprise

Lorem ipsum is a pseudo-Latin text used in place of English.

$ 42. 00 / Month

Pricing Plans 01

Description: Pricing plans example with morph LivIcon. This examples uses additional JavaScript code for animations. Replace javascript:void(0); with your action handler for the form.

Requires: Bootstrap 3.X for basic grid, buttons, text, etc. styles.

WordPress Note: This example may require theme files customization or using a page builder (composer) at your own. See on it as a starting point.

Important: LivIcons data-options are set to different from these defaults only! If you have another set of the default options please use a full notation of them which you can get from the Configuration tool

<!-- Pricing Plans 01 -->
<div class="container-fluid pricing-01">
    <div class="row">
        <div class="col-xs-12">
            <h2 class="text-center">Choose your plan</h2>
            <h4 class="text-center">Lorem ipsum is a pseudo-Latin text used in web design in place of English.</h4>
        </div>
    </div>
    <div class="row">
        <form action="javascript:void(0);">
            <div class="col-sm-4 col-xs-12">
                <div class="price-box">
                    <div class="price-elem-wrapper">
                        <div class="livicon-evo" data-options="
                            name: morph-radio-1.svg; 
                            style: solid; 
                            size: 90px; 
                            strokeWidth: 0; 
                            solidColor: #009B90; 
                            solidColorBg: #4c5a69; 
                            eventType: none
                        "></div>
                        <h3 class="price-title text-center">Standard</h3>
                        <p class="price-text text-center">Lorem ipsum is a pseudo-Latin text used in place of English.</p>
                        <p class="price-value text-center">
                            <span class="price-sign">$</span>
                            <span class="price-main">8.</span>
                            <span class="price-subprice">99</span>
                            <span class="price-info">/ Month</span>
                        </p>
                        <p class="price-btn text-center">
                            <button type="submit" class="btn-submit" name="plan" value="standard">Purchase</button>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-xs-12">
                <div class="price-box">
                    <div class="price-elem-wrapper">
                        <div class="livicon-evo" data-options="
                            name: morph-radio-1.svg; 
                            style: solid; 
                            size: 90px; 
                            strokeWidth: 0; 
                            solidColor: #009B90; 
                            solidColorBg: #4c5a69; 
                            eventType: none;
                            morphState: end
                        "></div>
                        <h3 class="price-title text-center">Developer</h3>
                        <p class="price-text text-center">Lorem ipsum is a pseudo-Latin text used in place of English.</p>
                        <p class="price-value text-center">
                            <span class="price-sign">$</span>
                            <span class="price-main">19.</span>
                            <span class="price-subprice">99</span>
                            <span class="price-info">/ Month</span>
                        </p>
                        <p class="price-btn text-center active">
                            <button type="submit" class="btn-submit" name="plan" value="developer">Purchase</button>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-xs-12">
                <div class="price-box">
                    <div class="price-elem-wrapper">
                        <div class="livicon-evo" data-options="
                            name: morph-radio-1.svg; 
                            style: solid; 
                            size: 90px; 
                            strokeWidth: 0; 
                            solidColor: #009B90; 
                            solidColorBg: #4c5a69; 
                            eventType: none
                        "></div>
                        <h3 class="price-title text-center">Enterprise</h3>
                        <p class="price-text text-center">Lorem ipsum is a pseudo-Latin text used in place of English.</p>
                        <p class="price-value text-center">
                            <span class="price-sign">$</span>
                            <span class="price-main">42.</span>
                            <span class="price-subprice">00</span>
                            <span class="price-info">/ Month</span>
                        </p>
                        <p class="price-btn text-center">
                            <button type="submit" class="btn-submit" name="plan" value="enterprise">Purchase</button>
                        </p>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
/********* Pricing Plans 01 *********/
.pricing-01 {
  padding: 80px 60px;
  background-color: #4C5A69;
}
.pricing-01 .text-center {
  text-align: center;
}
.pricing-01 h2,
.pricing-01 h3,
.pricing-01 h4,
.pricing-01 p {
  color: #ffffff;
  font-weight: 300;
}
.pricing-01 h2 {
  font-size: 36px;
  margin-top: 0;
  margin-bottom: 20px;
}
.pricing-01 h4 {
  font-size: 18px;
  margin-bottom: 10px;
}
.pricing-01 .price-box {
  background-color: #3C4A59;
  margin: 40px 0 0;
  padding: 20px;
  border-radius: 6px;
}
.price-elem-wrapper {
  height: auto!important;
}
.pricing-01 .livicon-evo {
  margin: 0 auto 15px;
}
.pricing-01 .price-title {
  font-size: 26px;
}
.pricing-01 .price-text {
  font-size: 16px;
  opacity: 0.7;
}
.pricing-01 .price-value {
  margin-top: 15px;
}
.pricing-01 .price-sign {
  font-size: 20px;
}
.pricing-01 .price-main {
  font-size: 48px;
  font-weight: bolder;
}
.pricing-01 .price-subprice {
  font-size: 32px;
}
.pricing-01 .price-info {
  font-size: 16px;
}
.pricing-01 .price-btn {
  margin-top: 25px;
  margin-bottom: 30px;
  display: block;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s, opacity 0.25s;
  -moz-transition: visibility 0s, opacity 0.25s;
  -o-transition: visibility 0s, opacity 0.25s;
  transition: visibility 0s, opacity 0.25s;
}
.pricing-01 .price-btn.active {
  visibility: visible;
  opacity: 1;
}
.pricing-01 .btn-submit {
  display: inline-block;
  position: relative;
  font-size: 14px;
  font-weight: 300;
  padding: 10px 20px;
  line-height: inherit;
  color: #fff;
  text-align: center;
  background: #009B90;
  border: 1px solid transparent;
  border-radius: 40px;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: 0.25s all;
  -moz-transition: 0.25s all;
  -o-transition: 0.25s all;
  transition: 0.25s all;
}
.pricing-01 .btn-submit:hover,
.pricing-01 .btn-submit:focus {
  color: #fff;
  background: #07ABA0;
  text-decoration: none;
}
.pricing-01 .btn-submit:active,
.pricing-01 .btn-submit:focus,
.pricing-01 .btn-submit:active:focus {
  outline: 0;
}
//Pricing Plans 01 animation controls
$(document).ajaxStop(function() {
    $('.pricing-01 .price-box').on('click', function () {
        var that = $(this),
            others = $('.pricing-01 .price-box').not(this);
        that.find('.livicon-evo').each(function () {
            var icon = $(this);
            if (icon.liviconEvoState() === 'start') {
                icon.playLiviconEvo();
            }
        });
        that.find('.price-btn').each(function () {
            var btn = $(this);
            if ( ! btn.hasClass('active') ) {
                btn.addClass('active');
            }
        });
        others.find('.livicon-evo').each(function () {
            var icon = $(this);
            if (icon.liviconEvoState() === 'end') {
                icon.playLiviconEvo();
            }
        });
        others.find('.price-btn').each(function () {
            var btn = $(this);
            if ( btn.hasClass('active') ) {
                btn.removeClass('active');
            }
        });
    });
});

Categories

Miscellaneous

Share