Pricing Tables Shortcodes
You can configure your pricing table using the grid system in order to make it responsive for small devices.
You can build with Porto Price Boxes, Porto Price Box Shortcodes.
*/ /*.pricetable .pricetable-header .pricetable-fld-name:after { content: ''; display: block; position: absolute; border-top: 15px solid #4f4f4f; border-left: 50px solid transparent; border-right: 50px solid transparent; }*/ .pricingtable2754 .pricetable-column .pricetable-button-container a { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) ); background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); background-color:#ededed; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border:1px solid #dcdcdc; display:inline-block; color:#777777; font-family:arial; font-size:12px; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:1px 1px 0px #ffffff; } .pricingtable2754 .pricetable-column .pricetable-button-container a:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) ); background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); background-color:#dfdfdf; color:#777777 !important; } .pricingtable2754 .pricetable-column .pricetable-button-container a:active { position:relative; top:1px; color:#777777; } .pricingtable2754 .highlight .pricetable-button-container a { -moz-box-shadow:inset 0px 1px 0px 0px #f5978e; -webkit-box-shadow:inset 0px 1px 0px 0px #f5978e; box-shadow:inset 0px 1px 0px 0px #f5978e; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f24437), color-stop(1, #c62d1f) ); background:-moz-linear-gradient( center top, #f24437 5%, #c62d1f 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24437', endColorstr='#c62d1f'); background-color:#f24437; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border:1px solid #d02718; display:inline-block; color:#ffffff; font-family:arial; font-weight:bold; text-decoration:none; text-shadow:1px 1px 0px #810d05; } .pricingtable2754 .highlight .pricetable-button-container a:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24437) ); background:-moz-linear-gradient( center top, #c62d1f 5%, #f24437 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24437'); background-color:#c62d1f; color:#ffffff !important; } .pricingtable2754 .highlight .pricetable-button-container a:active { position:relative; top:1px; color:#ffffff; } .pricingtable2754 .yn_basic{ position: absolute; height: 24px; width: 24px; background-image: url(/wp-content/plugins/pricetable/styling/../images/yes_no_10.png); background-repeat: no-repeat; top: 50%; margin-top: -12px; left: 50%; margin-left: -12px; background-position: left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pricingtable2754 .yi{background-position: left;} .pricingtable2754 .ni{ background-position: right; } .pricingtable2754 .ribbon-green { background-image: -webkit-gradient(linear, left top, left bottom, from(#f0cb11), to(#f2ab1e)); background-image: -webkit-linear-gradient(top, #f0cb11, #f2ab1e); background-image: -moz-linear-gradient(top, #f0cb11, #f2ab1e); background-image: -ms-linear-gradient(top, #f0cb11, #f2ab1e); background-image: -o-linear-gradient(top, #f0cb11, #f2ab1e); background-color:#f0cb11; color:#c92200; font-size:10px; text-shadow:1px 1px 0px #ded17c; min-height:12px; z-index:9999; } .pricingtable2754 .ribbon-green:before, .pricingtable2754 .ribbon-green:after { border-top: 3px solid #000000; } .pricingtable2754 .features li small{ font-weight:normal !important; -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #feffc2), color-stop(1, #f6f6f6) ); background:-moz-linear-gradient( center top, #feffc2 5%, #f6f6f6 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feffc2', endColorstr='#f6f6f6'); background-color:#feffc2; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border:1px solid #dcdcdc; color:#666666; font-family:arial; font-size:11px; padding:5px 5px; text-shadow:1px 1px 0px #ffffff; } .pricingtable2754 .features li small:after{ border-top: solid #f6f6f6 10px; } .pricingtable2754 .hasToolTip:after{ border-top: solid #878787 10px; } .pricingtable2754 .features li span{ /*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.5))); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 100%); background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80ffffff',GradientType=0 );*/ margin-bottom: 10px; border-bottom-style: solid !important; border-bottom-color: #b5b5b5 !important; } .pricingtable2754 .features li span:after{ border-top: solid #b5b5b5 5px; } @media (max-width:767px) { .pricingtable2754 .yn_basic{ top: auto; bottom: 5px !important; } .pricingtable2754 .highlight{ -moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); z-index:99999 !important; } .pricingtable2754 .pricetable-column .pricetable-column-wall{ -webkit-border-radius: 20px 20px 20px 20px !important; border-radius: 20px 20px 20px 20px !important; border-top-left-radius:20px !important; border-bottom-left-radius:20px !important; border-top-right-radius:20px !important; border-bottom-right-radius:20px !important; } .pricingtable2754 .pricetable-column .pricetable-header{ -webkit-border-radius: 20px 20px 0px 0px !important; border-radius: 20px 20px 0px 0px !important; } .pricingtable2754 .pricetable-column{ padding-top:0px; padding-bottom:0px; } .pricingtable2754 .pricetable-column:first-child{ padding-top:0px; } .pricingtable2754 .pricetable-column:last-child{ padding-bottom:0px; } } @media (min-width:768px) { .pricingtable2754 .zcol{ width:33.3333333333%; }}
Colum1
$12
3231321
BEST PRICE
- title
- title
HOT
Colum2
$
HOT
Colum3
$
HOT
Four Plans
With the “Most Popular” price box.