# Mentor - Responsive Pricing Table

- Created: 24/03/2023
- Latest Update: 24/03/2023
- Author Name: TwinkleTheme
- Support: Click here

#### Thanks you for Purchasing.

## Installation

- Log In your hosting cPanel.
- Find File Manager and Open it.
- Open public_html folder.
- Now create an folder what you want.
- Now upload your html template zip file
- Just unzip and delete the zip file
- Type your folder path in the browser and see your html site is ready.
- Now upload image and content

## File Structure:

            Mentor - Responsive Pricing Table
            |-- assets
            |   |-- css
            |   |-- |-- font-awesome.min.css
            |   |-- |-- mentor-pricing-table.css
            |   |-- |-- reset.css
            |   |-- fonts
            |-- |-- js
            |-- |-- |-- mentor-pricing-table.js
            |-- vendor
            |   |-- bootstrap
            |   |-- |-- bootstrap.bundle.min.js
            |   |-- |-- bootstrap.min.css
            |   |-- cmk-hover-effect
            |   |-- |-- cmk-hover.css
            |   |-- jquery
            |   |-- |-- jquery-1.12.4.min.js
            |   |-- magnific-popup
            |   |-- |-- jquery.magnific-popup.min.js
            |   |-- |-- magnific-popup.css
            |-- index.html

## HTML Structure

                            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 mb-30">
                                <div class="pricing-style-1 mentor-pricing transition bg-1">
                                    <span class="media-icon"><i class="fa fa-star"></i></span>
                                    <h5 class="price transition">
                                        <span class="currency"><i class="fa fa-dollar"><span class="count">39<span class="duration">Per Month</span>
                                    </h5>
                                    <h4 class="trial transition">Free Trial for 1 Month</h4>
                                    <a href="#" class="cmk-button sm cmk-rotate-right">Click here</a>
                                    <div class="special-note">10% Discount</div>
                                    <h2 class="heading transition">Platinum</h2>
                                    <h3 class="subheading transition fs-16">Perfect for Small to Medium Business</h3>
                                    <div class="features-list">
                                        <ul>
                                            <li><span style="color: green"><i class="fa fa-check"></i></span>10 GB SSD Hosting</li>
                                            <li><span style="color: green"><i class="fa fa-check"></i></span>250 GB Bandwidth</li>
                                            <li><span style="color: green"><i class="fa fa-check"></i></span>2 Websites</li>
                                            <li class="del"><span style="color: red"><i class="fa fa-close"></i></span>cPanel</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

## CSS Structure

                            body {
                                margin: 0;
                                padding: 0;
                            }

                            h1,
                            h2,
                            h3,
                            h4,
                            h5,
                            h6 {
                                margin: 0;
                                font-weight: 700;
                            }

                            h1 {
                                font-size: 36px;
                            }

                            h2 {
                                font-size: 30px;
                            }

                            h3 {
                                font-size: 24px;
                            }

                            h4 {
                                font-size: 20px;
                            }

                            h5 {
                                font-size: 18px;
                            }

                            h6 {
                                font-size: 16px;
                            }

                            p {
                                font-family: "Roboto", sans-serif;
                                font-size: 14px;
                            }

                            img {
                                width: 100%;
                                height: 200px;
                                display: inherit;
                            }

                            a {
                                text-decoration: none;
                                color: #222;
                            }

                            a:hover {
                                text-decoration: none;
                                color: #222;
                            }

                            a:focus,
                            input:focus,
                            button:focus {
                                outline: none;
                                text-decoration: none;
                            }

                            ul {
                                margin: 0;
                                padding: 0;
                                list-style: none;
                            }

                            [type=button]:focus,
                            [type=button]:hover,
                            [type=submit]:focus,
                            [type=submit]:hover,
                            button:focus,
                            button:hover {
                                color: #fff;
                                background-color: transparent;
                                text-decoration: none;
                            }

                            .bg-0 {
                                background-color: #DBE3E9;
                            }

                            .media-icon i,
                            .b-1 i {
                                font-size: 40px;
                            }

                            .b-1 i {
                                border: 2px solid #fff;
                                width: 120px;
                                height: 120px;
                                background-color: transparent;
                                color: #fff;
                                border-radius: 100%;
                                text-align: center;
                                line-height: 120px;
                            }

                            .fs-16 {
                                font-size: 16px!important;
                            }

                            .border-1 {
                                border-bottom: 1px solid;
                            }

                            .bg-1 {
                                color: #fff;
                                background-color: #F44336;
                            }

                            .bg-2 {
                                color: #fff;
                                background-color: #E91E63;
                            }

                            .bg-3 {
                                color: #fff;
                                background-color: #9C27B0;
                            }

                            .bg-4 {
                                color: #fff;
                                background-color: #673AB7;
                            }

                            .bg-5 {
                                color: #fff;
                                background-color: #3F51B5;
                            }

                            .bg-6 {
                                color: #fff;
                                background-color: #2196F3;
                            }

                            .bg-7 {
                                color: #fff;
                                background-color: #00BCD4;
                            }

                            .bg-8 {
                                color: #fff;
                                background-color: #009688;
                            }

                            .bg-9 {
                                color: #fff;
                                background-color: #4CAF50;
                            }

                            .bg-10 {
                                color: #fff;
                                background-color: #CDDC39;
                            }

                            .bg-11 {
                                color: #222;
                                background-color: #FFEB3B;
                            }

                            .block {
                                display: block;
                                padding-top: 10px;
                            }

                            .black {
                                color: #fff;
                                background-color: #222;
                            }

                            /*Button*/

                            .cmk-button {
                                background-color: #fff;
                                display: inline-block;
                                text-decoration: none!important;
                                color: #000;
                                z-index: 5;
                            }

                            .transparent {
                                background-color: transparent;
                            }

                            .cmk-button .before-button-icon i {
                                float: left;
                                padding: 5px 0;
                                padding-right: 10px;
                            }

                            .cmk-button .after-button-icon i {
                                float: right;
                                padding: 5px 0;
                                padding-left: 10px;
                            }

                            .cmk-button.xs {
                                font-size: 13px;
                                padding: 8px 20px;
                            }

                            .cmk-button.sm {
                                font-size: 15px;
                                padding: 8px 24px;
                            }

                            .cmk-button.md {
                                font-size: 15px;
                                padding: 12px 32px;
                            }

                            .cmk-button.lg {
                                font-size: 18px;
                                padding: 15px 40px;
                            }

                            .cmk-button.xl {
                                font-size: 20px;
                                padding: 20px 50px;
                            }

                            .cmk-button:hover {
                                color: #fff!important;
                            }

                            .cmk-button:before,
                            .cmk-button:after {
                                background-color: #000;
                            }

                            .cmk-button {
                                margin: 30px 30px 0px 30px;
                            }

                            .play-btn {
                                line-height: 45px;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                width: 45px;
                                height: 45px;
                                margin: -22px 0 0 -22px;
                                text-align: center;
                                border-radius: 50%;
                                background: #fff;
                            }

                            .position-relative {
                                position: relative;
                            }

                            /*Ribbon*/

                            .overflow {
                                overflow: hidden;
                            }

                            .ribbon-style {
                                position: relative;
                            }

                            .ribbon-position-left {
                                left: -75;
                            }

                            .ribbon-position-right {
                                right: -75;
                            }

                            .ribbon-style-1::before {
                                background: #4CAF50;
                                color: #fff;
                                content: "Best Value";
                                position: absolute;
                                padding-top: 2px;
                                height: 30px;
                                width: 220px;
                                top: 25px;
                                left: -72px;
                                transform: rotate(313deg);
                                font-size: 15px;
                                text-align: center;
                            }

                            .ribbon-style-2::before {
                                background: #4CAF50;
                                color: #fff;
                                content: "Best Value";
                                position: absolute;
                                padding-top: 2px;
                                height: 30px;
                                width: 220px;
                                top: 25px;
                                right: -72px;
                                transform: rotate(42deg);
                                font-size: 15px;
                                text-align: center;
                            }

                            .ribbon-style-3::before {
                                background: #4CAF50;
                                color: #fff;
                                content: "Best Value";
                                position: absolute;
                                padding-top: 2px;
                                height: 30px;
                                width: 180px;
                                top: 75px;
                                left: -75px;
                                transform: rotate(-90deg);
                                font-size: 15px;
                                text-align: center;
                            }

                            .ribbon-style-4::before {
                                background: #4CAF50;
                                color: #fff;
                                content: "Best Value";
                                position: absolute;
                                padding-top: 2px;
                                height: 30px;
                                width: 180px;
                                top: 75px;
                                right: -75px;
                                transform: rotate( 90deg);
                                font-size: 15px;
                                text-align: center;
                            }

                            .ribbon-style-5:before {
                                background: #4CAF50;
                                content: "";
                                position: absolute;
                                height: 4px;
                                width: 100%;
                                top: 0px;
                                left: 0;
                            }

                            /*Transform Effect*/

                            .transform-effect-1:hover {
                                transform: scale(1.126);
                                transition: 0.5s;
                            }

                            .transform-effect-2:hover {
                                -webkit-box-shadow: 0 20px 30px 0px rgba(0, 0, 0, 0.1);
                                box-shadow: 0 20px 30px 0px rgba(0, 0, 0, 0.1);
                                transition: 0.5s;
                            }

                            .heading {
                                padding: 20px 30px;
                            }

                            .subheading {
                                display: block;
                                padding: 0 30px;
                                margin-bottom: 20px;
                                font-size: 20px;
                            }

                            h5.price {
                                padding: 20px 30px;
                            }

                            h6.duration {
                                padding: 0px 30px;
                            }

                            .count {
                                font-size: 40px;
                                padding-right: 5px;
                            }

                            .trial {
                                padding: 0px 30px 10px 30px;
                            }

                            .duration {
                                font-size: 14px;
                                font-weight: 400;
                            }

                            h6.duration-top {
                                padding: 0 30px;
                            }

                            .special-note {
                                padding: 30px;
                            }

                            .features-list {
                                padding: 20px 0;
                            }

                            .features-list ul li {
                                line-height: 2.2;
                            }

                            .features-list ul li i {
                                padding-right: 15px;
                            }

                            .features-list li:last-child {
                                border-style: none!important;
                                border-width: 0!important;
                                border-color: transparent!important;
                                border-radius: 0!important;
                            }

                            .before-currency-icon i {
                                float: left;
                                padding: 5px 0;
                                padding-right: 10px;
                            }

                            .after-currency-icon i {
                                float: right;
                                padding: 5px 0;
                                padding-left: 10px;
                            }

                            .features-list li {
                                padding: 0 30px;
                                line-height: 1.9;
                            }

                            .del {
                                text-decoration: line-through;
                            }

                            .media-icon i {
                                width: 120px;
                                height: 120px;
                                background-color: #222;
                                color: #fff;
                                border-radius: 100%;
                                text-align: center;
                                line-height: 120px;
                            }

                            .media-icon i,
                            .b-1 i {
                                margin: 30px;
                            }

                            .pricing-header-1 {
                                position: relative;
                                z-index: 1;
                                color: #fff;
                                margin: 30px 0;
                                text-align: center;
                            }

                            .pricing-header-1:after {
                                position: absolute;
                                left: 0;
                                right: 0;
                                top: 0;
                                bottom: 0;
                                content: "";
                                background: #fc5f45;
                                height: 130px;
                                width: 130px;
                                margin: auto;
                                border-radius: 50%;
                                z-index: -1;
                            }

                            .pricing-header-1 .duration {
                                display: block;
                            }

                            .pricing-style-1 .price {
                                padding: 0px 30px;
                                padding-bottom: 30px;
                            }

                            .pricing-style-10.bg-10 .duration-top {
                                padding-top: 30px;
                            }

                            .fl-1 {
                                color: #222;
                                background-color: #fff;
                            }

                            .fl-2 {
                                color: #222;
                                background-color: #F5F4FB;
                            }

                            iframe {
                                margin-bottom: -6px;
                                width: 100%;
                            }

## JavaScript Structure

                            (function($) {
                                "use strict";

                                $(".popup-video").magnificPopup({
                                    type: 'iframe',
                                });

                            })(jQuery)

### How to customize button

Added listed any class for button size

1. xs
2. sm
3. md
4. lg
5. xl

Added listed any class for button effect

1. cmk-downup
2. cmk-updown
3. cmk-slide-in-vertical
4. cmk-slide-in-horizontal
5. cmk-slide-out-vertical
6. cmk-slide-out-horizontal
7. cmk-slide-left
8. cmk-slide-right
9. cmk-slide-up
10. cmk-slide-down
11. cmk-slideout-horizontal
12. cmk-slideout-vertical
13. cmk-rotate-left
14. cmk-rotate-right
15. cmk-bounce-left
16. cmk-bounce-right
17. cmk-bounce-up
18. cmk-bounce-down
19. cmk-double-slide-left
20. cmk-double-slide-right
21. cmk-double-slide-up
22. cmk-double-slide-down
23. cmk-line-left
24. cmk-line-right
25. cmk-line-in-vertical
26. cmk-line-out-vertical
27. cmk-line-in-horizontal
28. cmk-line-out-horizontal
29. cmk-line-bounce-left
30. cmk-line-bounce-right
31. cmk-double-line-left
32. cmk-double-line-right

                            <a href="#" class="cmk-button sm cmk-updown">
                                <span class="after-button-icon">
                                    <i class="fa fa-arrow-right">
                                </span>
                                Buy Now
                            </a>

### How to customize ribbon

Added listed any class for ribbon

1. ribbon-style-1
2. ribbon-style-2
3. ribbon-style-3
4. ribbon-style-4
5. ribbon-style-5

                            <div class="ribbon-style overflow ribbon-style-5"></div>

##### Fonts:

- Roboto

##### Icons Used:

- Font Awesome

##### Credit:

- jQuery
- Bootstrap
- Magnific Popup

##### Images:

- freepik
- Unsplash

## Support

If you face problem with our file, please contact with us.

https://twinkletheme.com/docs/support/