A ready to use pricing table block for use with websites and landing pages. Dark styled and beautifully designed pricing table with 3 different plans to choose from.

Dependencies

  • Bootstrap 4
  • FontAwesome
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Bootstrap Blocks - Pricing Table 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    
    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="pricing-table-2 bg-dark py-4 py-md-5">
        <div class="container">

            <div class="pricing-intro mx-auto text-center">
                <h1 class="pricing-title text-white mb-3 mb-md-4">Pricing Plans</h1>
                <p class="px-xl-5">You have 3 plans to choose from for using FWR blocks. Basic blocks are FREE forever. Other premium blocks are also free. You can use it for your personal or commercial projects. Just don't forget to share our website or give attribution.</p>
            </div>

            <div class="row pricing-plans mt-4 mt-md-5">
                <div class="col-lg-4 pricing-plan-wrap my-3 my-xl-4">
                    <div class="pricing-plan bg-white text-center mx-auto">
                        <div class="pricing-header p-4">
                            <h4>Small Business</h4>
                            <p class="text-muted mb-0">For small projects</p>
                        </div>
                        <div class="pricing-amount bg-light-primary p-4">
                            <div class="pricing-text"><span>$19</span>/year</div>
                            <div class="pricing-hover"></div>
                        </div>
                        <div class="pricing-features p-4">
                            <ul class="list-unstyled mb-0">
                                <li>Upto 5 uses</li>
                                <li>Max 100 items/month</li>
                                <li>500 queries/month</li>
                                <li>Basic statistics</li>
                                <li>Email Support</li>
                            </ul>

                            <div class="pricing-action mt-4 py-3">
                                <button class="btn btn-primary btn-lg px-xl-4">Get Started</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 pricing-plan-wrap my-3 my-xl-4">
                    <div class="pricing-plan bg-white text-center mx-auto">
                        <div class="pricing-header p-4">
                            <h4>Professional</h4>
                            <p class="text-muted mb-0">For large scale projects</p>
                        </div>
                        <div class="pricing-amount bg-light-primary p-4">
                            <div class="pricing-text"><span>$29</span>/year</div>
                            <div class="pricing-hover"></div>
                        </div>
                        <div class="pricing-features p-4">
                            <ul class="list-unstyled mb-0">
                                <li>Upto 50 uses</li>
                                <li>Max 500 items/month</li>
                                <li>1000 queries/month</li>
                                <li>Full statistics</li>
                                <li>Email Support</li>
                            </ul>

                            <div class="pricing-action mt-4 py-3">
                                <button class="btn btn-primary btn-lg px-xl-4">Get Started</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 pricing-plan-wrap my-3 my-xl-4">
                    <div class="pricing-plan bg-white text-center mx-auto">
                        <div class="pricing-header p-4">
                            <h4>Power User</h4>
                            <p class="text-muted mb-0">For multi large scale projects</p>
                        </div>
                        <div class="pricing-amount bg-light-primary p-4">
                            <div class="pricing-text"><span>$39</span>/year</div>
                            <div class="pricing-hover"></div>
                        </div>
                        <div class="pricing-features p-4">
                            <ul class="list-unstyled mb-0">
                                <li>Unlimited uses</li>
                                <li>Unlimited items/month</li>
                                <li>Unlimited queries/month</li>
                                <li>Full statistics</li>
                                <li>Email &amp; Phone Support</li>
                            </ul>

                            <div class="pricing-action mt-4 py-3">
                                <button class="btn btn-primary btn-lg px-xl-4">Get Started</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- /.pricing-table-2 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
// Bootstrap variables and mixins
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Variables
$primary:         #5863f8;
$pricing-radius:  1rem;

// Custom CSS
.pricing-plan {
  box-shadow: 0 1px 3px rgba($black,.12), 0 1px 2px rgba($black,.24);
  transition: box-shadow .3s;
  max-width: 400px;

  @include hover {
    box-shadow: 0 14px 28px rgba($black,.25), 0 10px 10px rgba($black,0.22);
  }
}

.bg-light-primary {
  background-color: rgba($primary, .1);
}

.pricing-intro {
  p {
    color: $gray-500;
  }
}

.pricing-text {
  span {
    font-size: 40px;
    font-weight: 600;
  }
}

.pricing-features {
  ul li {
    line-height: 2;
  }
}

.btn-primary {
  @include button-variant($primary, $primary);
}


@include media-breakpoint-up(md) {

  .pricing-intro {
    max-width: 800px;
  }

}


@include media-breakpoint-up(xl) {

  .pricing-header {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }

  .pricing-amount {
    position: relative;
    overflow: hidden;
    z-index: 0;

    .pricing-hover {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      background-color: $primary;
      color: $white;
      transition: opacity 0.3s;
      z-index: 0;
    }

    .pricing-text {
      position: relative;
      z-index: 2;
      transition: color .3s;
    }
  }

  .pricing-plan {
    border-top: 5px solid $white;
    transition: border-color .3s, transform .3s;
    cursor: default;
    position: relative;

    &:hover {
      border-color: $primary;
      transform: translateY(-1rem);

      .pricing-hover {
        opacity: 1;
      }

      .pricing-text {
        color: $white;
      }
    }
  }

}
.pricing-plan {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  -webkit-transition: -webkit-box-shadow .3s;
  transition: -webkit-box-shadow .3s;
  transition: box-shadow .3s;
  transition: box-shadow .3s, -webkit-box-shadow .3s;
  max-width: 400px;
}

.pricing-plan:hover {
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
          box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.bg-light-primary {
  background-color: rgba(88, 99, 248, 0.1);
}

.pricing-intro p {
  color: #adb5bd;
}

.pricing-text span {
  font-size: 40px;
  font-weight: 600;
}

.pricing-features ul li {
  line-height: 2;
}

.btn-primary {
  color: #fff;
  background-color: #5863f8;
  border-color: #5863f8;
}

.btn-primary:hover {
  color: #fff;
  background-color: #3341f6;
  border-color: #2735f6;
}

.btn-primary:focus, .btn-primary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #5863f8;
  border-color: #5863f8;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #2735f6;
  border-color: #1b2af5;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
}

@media (min-width: 768px) {
  .pricing-intro {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .pricing-header {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }
  .pricing-amount {
    position: relative;
    overflow: hidden;
    z-index: 0;
  }
  .pricing-amount .pricing-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: #5863f8;
    color: #fff;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    z-index: 0;
  }
  .pricing-amount .pricing-text {
    position: relative;
    z-index: 2;
    -webkit-transition: color .3s;
    transition: color .3s;
  }
  .pricing-plan {
    border-top: 5px solid #fff;
    -webkit-transition: border-color .3s, -webkit-transform .3s;
    transition: border-color .3s, -webkit-transform .3s;
    transition: border-color .3s, transform .3s;
    transition: border-color .3s, transform .3s, -webkit-transform .3s;
    cursor: default;
    position: relative;
  }
  .pricing-plan:hover {
    border-color: #5863f8;
    -webkit-transform: translateY(-1rem);
            transform: translateY(-1rem);
  }
  .pricing-plan:hover .pricing-hover {
    opacity: 1;
  }
  .pricing-plan:hover .pricing-text {
    color: #fff;
  }
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvYm9vdHN0cmFwL3ByaWNpbmctdGFibGUvcHJpY2luZy10YWJsZS0y