Набор функциональных прайсов / Прайсы / Сниппеты Bootstrap

Версия: v1.3

Каталог: Сниппеты Bootstrap

Категория: Прайсы

Для Bootstrap: 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Laravel, WHMCS, PHP

Язык: Английский

Вес файла: 2.16 Mb

Уникальный ID: 5878

Количество символов:

Посмотрели: 376 раз

Помощь: установка & настройка

Прикреплён файл №1: /_sf/58/5878.html

Прикреплён файл №2: /stuff/0-0-0-5878-20

Скачали бесплатно: 15 раз

Прокомментировали: 0 раз

Рейтинг: 3.0 / 5 - 12 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: набор прайсов, Price, прайсы, Snippet, сниппет, Pricing, bootstrap 4

Поделился: BootstrapТема

Добавлено: 2023-06-15 в 16:28

Метка: 1686835689

⇄ ⇅

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
 <link rel="icon" href="/snippets/price/2023/f-price/favicon.png">
 
 <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">
 
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
 <link rel="stylesheet" href="/snippets/price/2023/f-price/bootstrap.css">
 
 <link rel="stylesheet" href="/snippets/price/2023/f-price/switcher.css">
 
 <link rel="stylesheet" href="/snippets/price/2023/f-price/pricing-tables.css">
 
 <link rel="stylesheet" href="/snippets/price/2023/f-price/pricing-tables-responsive.css">
 </head>
 <body>
 
 <section class="pp-section">
 <div class="container">
 <div class="row">
 <div class="col-12">
 <div class="section-header text-center">
 <h2 class="title">Design - 1</h2>
 <p>You can choose price which you want easily. <br>You can just click on the below list and set your custom plan price.</p>
 </div>
 </div>
 </div>
 <div class="row plan-tables-1">
 
 <div class="col-lg-4 col-md-6">
 
 <div class="plan-style-1 plan-style-1-bg-blue">
 <form>
 
 <div class="plan-header">
 <h3 class="plan-title">Basic</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span><span class="big-plan-price" id="basic_price"></span><span>/ M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li>
 <label class="checkbox-lable">10gb
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Storage</span>
 <span class="tooltiptext">10gb storage per month</span>
 </span>
 <span class="one_price">$1</span>
 <input type="checkbox" class="checkbox_basic_1" checked="checked" id="storage_1" name="checkbox_basic_1" value="1">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">20GB Bandwidth
 <span class="one_price">$2</span>
 <input type="checkbox" class="checkbox_basic_1" checked="checked" id="bandwidth_1" name="checkbox_basic_1" value="2">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">1 SQL Database
 <span class="one_price">$6</span>
 <input type="checkbox" class="checkbox_basic_1" checked="checked" id="database_1" name="checkbox_basic_1" value="6">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">5 Email Account
 <span class="one_price">$1</span>
 <input type="checkbox" class="checkbox_basic_1" checked="checked" id="email_1" name="checkbox_basic_1" value="1">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">1 Website 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Domain</span>
 <span class="tooltiptext">1 Website Domain Available</span>
 </span>
 <span class="one_price">$2</span>
 <input type="checkbox" class="checkbox_basic_1" id="domain_1" name="checkbox_basic_1" value="2">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">24/7 Support
 <span class="one_price">$1</span>
 <input type="checkbox" class="checkbox_basic_1" id="support_1" name="checkbox_basic_1" value="1">
 <span class="checkmark"></span>
 </label>
 </li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#" id="basicSignup_1">Signup Now</a>
 </div>
 </form>
 </div>
 
 </div>
 
 
 <div class="col-lg-4 col-md-6">
 <div class="plan-style-1 plan-style-1-bg-pink">
 
 <div class="plan-header">
 <h3 class="plan-title">Standard</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span><span class="big-plan-price" id="standard_price"></span><span>/ M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li>
 <label class="checkbox-lable">45GB Storage
 <span class="one_price">$2</span>
 <input type="checkbox" class="checkbox_standerd_1" checked="checked" name="checkbox_standerd_1" value="2">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">40GB Bandwidth
 <span class="one_price">$4</span>
 <input type="checkbox" class="checkbox_standerd_1" checked="checked" name="checkbox_standerd_1" value="4">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">2 SQL Database
 <span class="one_price">$11</span>
 <input type="checkbox" class="checkbox_standerd_1" checked="checked" name="checkbox_standerd_1" value="11">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">10 Email 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Account</span>
 <span class="tooltiptext">10 Email Account Available</span>
 </span>
 <span class="one_price">$2</span>
 <input type="checkbox" class="checkbox_standerd_1" checked="checked" name="checkbox_standerd_1" value="2">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">2 Website Domain
 <span class="one_price">$4</span>
 <input type="checkbox" class="checkbox_standerd_1" checked="checked" name="checkbox_standerd_1" value="4">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">24/7 Support
 <span class="one_price">$1</span>
 <input type="checkbox" class="checkbox_standerd_1" name="checkbox_standerd_1" value="1">
 <span class="checkmark"></span>
 </label>
 </li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#" id="standardSignup_1">Signup Now</a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-4 col-md-6">
 <div class="plan-style-1 plan-style-1-bg-purple">
 
 <div class="plan-header">
 <h3 class="plan-title">Premium</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span><span class="big-plan-price" id="premium_price"></span><span>/ M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li>
 <label class="checkbox-lable">100GB Storage
 <span class="one_price">$3</span>
 <input type="checkbox" class="checkbox_premium_1" checked="checked" name="checkbox_premium_1" value="3">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">60GB
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Bandwidth</span>
 <span class="tooltiptext">60gb Bandwidth per month</span>
 </span>
 <span class="one_price">$6</span>
 <input type="checkbox" class="checkbox_premium_1" checked="checked" name="checkbox_premium_1" value="6">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">3 SQL Database
 <span class="one_price">$16</span>
 <input type="checkbox" class="checkbox_premium_1" checked="checked" name="checkbox_premium_1" value="16">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">15 Email Account
 <span class="one_price">$3</span>
 <input type="checkbox" class="checkbox_premium_1" checked="checked" name="checkbox_premium_1" value="3">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">3 Website Domain
 <span class="one_price">$5</span>
 <input type="checkbox" class="checkbox_premium_1" checked="checked" name="checkbox_premium_1" value="5">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">24/7 Support
 <span class="one_price">$1</span>
 <input type="checkbox" class="checkbox_premium_1" checked="checked" name="checkbox_premium_1" value="1">
 <span class="checkmark"></span>
 </label>
 </li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#" id="premiumSignup_1">Signup Now</a>
 </div>
 </div>
 </div>
 
 </div> 
 </div> 
 </section> 
 
 
 
 <section class="pp-section section-bg">
 <div class="container">
 <div class="row">
 <div class="col-12">
 <div class="section-header text-center">
 <h2 class="title">Design - 2</h2>
 <p>You can choose price which you want easily. <br>You can just click on the below list and set your custom plan price.</p>
 </div>
 </div>
 </div>
 <div class="row plan-tables-2">
 
 <div class="col-lg-4 col-md-6">
 
 <div class="plan-style-2">
 <form>
 
 <div class="plan-header">
 <h3 class="plan-title">Basic</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span><span class="big-plan-price" id="basic_price_2"></span><span>/ M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li>
 <label class="checkbox-lable">10gb
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Storage</span>
 <span class="tooltiptext">10gb storage per month</span>
 </span>
 <span class="one_price">$1</span>
 <input type="checkbox" class="checkbox_basic_2" checked="checked" name="checkbox_basic_2" value="1">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">20GB Bandwidth
 <span class="one_price">$2</span>
 <input type="checkbox" class="checkbox_basic_2" checked="checked" name="checkbox_basic_2" value="2">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">1 SQL Database
 <span class="one_price">$6</span>
 <input type="checkbox" class="checkbox_basic_2" checked="checked" name="checkbox_basic_2" value="6">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">5 Email Account
 <span class="one_price">$1</span>
 <input type="checkbox" class="checkbox_basic_2" checked="checked" name="checkbox_basic_2" value="1">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">1 Website 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Domain</span>
 <span class="tooltiptext">1 Website Domain Available</span>
 </span>
 <span class="one_price">$2</span>
 <input type="checkbox" class="checkbox_basic_2" name="checkbox_basic_2" value="2">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">24/7 Support
 <span class="one_price">$1</span>
 <input type="checkbox" class="checkbox_basic_2" name="checkbox_basic_2" value="1">
 <span class="checkmark"></span>
 </label>
 </li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#" id="basicSignup_2">Signup Now</a>
 </div>
 </form>
 </div>
 
 </div>
 
 
 <div class="col-lg-4 col-md-6">
 <div class="plan-style-2">
 
 <div class="plan-header">
 <h3 class="plan-title">Standard</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span><span class="big-plan-price" id="standard_price_2"></span><span>/ M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li>
 <label class="checkbox-lable">45GB Storage
 <span class="one_price">$2</span>
 <input type="checkbox" class="checkbox_standerd_2" checked="checked" name="checkbox_standerd_2" value="2">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">40GB Bandwidth
 <span class="one_price">$4</span>
 <input type="checkbox" class="checkbox_standerd_2" checked="checked" name="checkbox_standerd_2" value="4">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">2 SQL Database
 <span class="one_price">$11</span>
 <input type="checkbox" class="checkbox_standerd_2" checked="checked" name="checkbox_standerd_2" value="11">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">10 Email 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Account</span>
 <span class="tooltiptext">10 Email Account Available</span>
 </span>
 <span class="one_price">$2</span>
 <input type="checkbox" class="checkbox_standerd_2" checked="checked" name="checkbox_standerd_2" value="2">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">2 Website Domain
 <span class="one_price">$4</span>
 <input type="checkbox" class="checkbox_standerd_2" checked="checked" name="checkbox_standerd_2" value="4">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">24/7 Support
 <span class="one_price">$1</span>
 <input type="checkbox" class="checkbox_standerd_2" name="checkbox_standerd_2" value="1">
 <span class="checkmark"></span>
 </label>
 </li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#" id="standardSignup_2">Signup Now</a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-4 col-md-6">
 <div class="plan-style-2">
 
 <div class="plan-header">
 <h3 class="plan-title">Premium</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span><span class="big-plan-price" id="premium_price_2">49</span><span>/ M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li>
 <label class="checkbox-lable">100GB Storage
 <span class="one_price">$3</span>
 <input type="checkbox" class="checkbox_premium_2" checked="checked" name="checkbox_premium_2" value="3">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">60GB
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Bandwidth</span>
 <span class="tooltiptext">60gb Bandwidth per month</span>
 </span>
 <span class="one_price">$6</span>
 <input type="checkbox" class="checkbox_premium_2" checked="checked" name="checkbox_premium_2" value="6">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">3 SQL Database
 <span class="one_price">$16</span>
 <input type="checkbox" class="checkbox_premium_2" checked="checked" name="checkbox_premium_2" value="16">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">15 Email Account
 <span class="one_price">$3</span>
 <input type="checkbox" class="checkbox_premium_2" checked="checked" name="checkbox_premium_2" value="3">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">3 Website Domain
 <span class="one_price">$5</span>
 <input type="checkbox" class="checkbox_premium_2" checked="checked" name="checkbox_premium_2" value="5">
 <span class="checkmark"></span>
 </label>
 </li>
 <li>
 <label class="checkbox-lable">24/7 Support
 <span class="one_price">$1</span>
 <input type="checkbox" class="checkbox_premium_2" checked="checked" name="checkbox_premium_2" value="1">
 <span class="checkmark"></span>
 </label>
 </li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#" id="premiumSignup_2">Signup Now</a>
 </div>
 </div>
 </div>
 
 </div> 
 </div> 
 </section> 
 
 
 
 <section class="pp-section">
 <div class="container">
 <div class="row">
 <div class="col-12">
 <div class="section-header text-center">
 <h2 class="title global-title-p">Design - 3</h2>
 </div>
 </div>
 </div>
 <div class="row plan-tables-3">
 
 <div class="col-lg-4 col-md-6">
 <div class="plan-style-3 blue-shadow">
 <div class="plan-style-3-bg blue-bg-img"></div>
 
 <div class="plan-header">
 <h3 class="bg-blue">gold</h3>
 <p class="price bg-blue">$<span class="price-digit">9</span>/m</p>
 </div>
 
 <div class="plan-detail">
 <ul>
 <li>10gb Storage</li>
 <li>20GB Super <b>Bandwidth</b></li>
 <li>1 SQL Database for website</li>
 <li>5 Email Account</li>
 <li>1 Domain</li>
 <li>24/7 Technical Support</li>
 </ul>
 </div>
 
 <div class="plan-bottom">
 <a class="plan-button bg-blue-btn" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 <div class="col-lg-4 col-md-6">
 <div class="plan-style-3 orange-shadow active">
 <div class="plan-style-3-bg orange-bg-img"></div>
 <div class="plan-header">
 <h3 class="bg-orange">standard</h3>
 <p class="price bg-orange">$<span class="price-digit">29</span>/m</p>
 </div>
 <div class="plan-detail">
 <ul>
 <li>45gb Storage</li>
 <li>40GB Super <b>Bandwidth</b></li>
 <li>2 SQL Database for website</li>
 <li>10 Email Account</li>
 <li>2 Domain</li>
 <li>24/7 Technical Support</li>
 </ul>
 </div>
 
 <div class="plan-bottom">
 <a class="plan-button bg-orange-btn" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 <div class="col-lg-4 col-md-6">
 <div class="plan-style-3 green-shadow">
 <div class="plan-style-3-bg green-bg-img"></div>
 <div class="plan-header">
 <h3 class="plan-title bg-green">premium</h3>
 <p class="price bg-green">$<span class="price-digit">49</span>/m</p>
 </div>
 <div class="plan-detail">
 <ul>
 <li>100gb Storage</li>
 <li>60GB Super <b>Bandwidth</b></li>
 <li>3 SQL Database for website</li>
 <li>15 Email Account</li>
 <li>3 Domain</li>
 <li>24/7 Technical Support</li>
 </ul>
 </div>
 
 <div class="plan-bottom">
 <a class="plan-button bg-green-btn" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
 
 
 
 <section class="pp-section section-bg-img">
 <div class="container">
 <div class="row">
 <div class="col-12">
 <div class="section-header text-center">
 <h2 class="title global-title">Design - 4</h2>
 </div>
 </div>
 </div>
 <div class="row plan-tables-4">
 
 <div class="col-lg-4 col-md-6">
 <div class="plan-style-4">
 <div class="plan-style-4-bg plan-shadow-4"></div>
 
 <div class="plan-header">
 <h3 class="bg-blue">gold</h3>
 <p class="price bg-blue">$<span class="price-digit">9</span>/m</p>
 </div>
 
 <div class="plan-detail">
 <ul>
 <li>10gb Storage</li>
 <li>20GB Super <b>Bandwidth</b></li>
 <li>1 SQL Database for website</li>
 <li>5 Email Account</li>
 <li>1 Domain</li>
 <li>24/7 Technical Support</li>
 </ul>
 </div>
 
 <div class="plan-bottom">
 <a class="plan-button bg-blue-btn" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 <div class="col-lg-4 col-md-6">
 <div class="plan-style-4">
 <div class="plan-style-4-bg plan-shadow-4"></div>
 <div class="plan-header">
 <h3 class="bg-orange">standard</h3>
 <p class="price bg-orange">$<span class="price-digit">29</span>/m</p>
 </div>
 <div class="plan-detail">
 <ul>
 <li>45gb Storage</li>
 <li>40GB Super <b>Bandwidth</b></li>
 <li>2 SQL Database for website</li>
 <li>10 Email Account</li>
 <li>2 Domain</li>
 <li>24/7 Technical Support</li>
 </ul>
 </div>
 
 <div class="plan-bottom">
 <a class="plan-button bg-orange-btn" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 <div class="col-lg-4 col-md-6">
 <div class="plan-style-4">
 <div class="plan-style-4-bg plan-shadow-4"></div>
 <div class="plan-header">
 <h3 class="plan-title bg-green">premium</h3>
 <p class="price bg-green">$<span class="price-digit">49</span>/m</p>
 </div>
 <div class="plan-detail">
 <ul>
 <li>100gb Storage</li>
 <li>60GB Super <b>Bandwidth</b></li>
 <li>3 SQL Database for website</li>
 <li>15 Email Account</li>
 <li>3 Domain</li>
 <li>24/7 Technical Support</li>
 </ul>
 </div>
 
 <div class="plan-bottom">
 <a class="plan-button bg-green-btn" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
 
 
 
 <section class="pp-section section-bg">
 <div class="container">
 <div class="row">
 <div class="col-12">
 <div class="section-header text-center">
 <h2 class="title">Design - 5</h2>
 </div>
 </div>
 </div>
 <div class="row plan-tables-5">
 
 <div class="col-lg-3 p-0 detail-block plan-margin">
 <div class="plan-detail-style-5">
 
 <div class="plan-header border-cell-bold">
 <h3 class="plan-title">Features</h3>
 </div>
 
 <ul class="plan-detail">
 <li class="border-cell">Cloud Storage</li>
 <li class="border-cell">Super Bandwidth</li>
 <li class="border-cell">SQL Database</li>
 <li class="border-cell">Email Account</li>
 <li class="border-cell">Free Domain</li>
 <li class="border-cell">24/7 Technical Support</li>
 </ul>
 </div>
 </div>
 
 
 <div class="col-lg-2 col-md-3 col-sm-6 plan-padding">
 <div class="plan-style-5">
 
 <div class="plan-header border-cell-bold">
 <h3 class="plan-title">Basic</h3>
 
 
 
 
 </div>
 
 <ul class="plan-list light-skin">
 <li class="border-cell">5GB<p>Cloud Storage</p>
 <span class="tooltip-info">
 <i class="fas fa-info"></i>
 <span class="tooltiptext">5gb storage per month</span>
 </span>
 </li>
 <li class="border-cell">40GB<p>Bandwidth</p>
 <span class="tooltip-info">
 <i class="fas fa-info"></i>
 <span class="tooltiptext">40gb bandwidth per month</span>
 </span>
 </li>
 <li class="border-cell">1<p>SQL Database</p></li>
 <li class="border-cell">5<p>Email Account</p></li>
 <li class="border-cell"><i class="far fa-times-circle"></i><p>Free Domain</p></li>
 <li class="border-cell"><i class="far fa-times-circle"></i><p>24/7 Support</p></li>
 </ul>
 
 <div class="plan-bottom border-cell">
 <p class="price bg-green">$<span class="price-digit">9</span>/m</p>
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-2 col-md-3 col-sm-6 plan-padding">
 <div class="plan-style-5 even">
 
 <div class="plan-header border-cell-bold">
 <h3 class="plan-title">Standard</h3>
 
 
 
 
 </div>
 
 <ul class="plan-list dark-skin">
 <li class="border-cell">10GB<p>Cloud Storage</p></li>
 <li class="border-cell">50GB<p>Bandwidth</p>
 <span class="tooltip-info">
 <i class="fas fa-info"></i>
 <span class="tooltiptext">50gb bandwidth per month</span>
 </span>
 </li>
 <li class="border-cell">2<p>SQL Database</p>
 <span class="tooltip-info">
 <i class="fas fa-info"></i>
 <span class="tooltiptext">2 Database Available</span>
 </span>
 </li>
 <li class="border-cell">10<p>Email Account</p></li>
 <li class="border-cell">5<p>Free Domain</p></li>
 <li class="border-cell"><i class="far fa-times-circle"></i><p>24/7 Support</p></li>
 </ul>
 
 <div class="plan-bottom border-cell">
 <p class="price bg-green">$<span class="price-digit">19</span>/m</p>
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-2 col-md-3 col-sm-6 plan-padding">
 <div class="plan-style-5">
 
 <div class="plan-header border-cell-bold">
 <h3 class="plan-title">Premium</h3>
 
 
 
 
 </div>
 
 <ul class="plan-list light-skin">
 <li class="border-cell">15GB<p>Cloud Storage</p>
 <span class="tooltip-info">
 <i class="fas fa-info"></i>
 <span class="tooltiptext">15gb storage per month</span>
 </span>
 </li>
 <li class="border-cell">60GB<p>Bandwidth</p></li>
 <li class="border-cell">3<p>SQL Database</p></li>
 <li class="border-cell">15<p>Email Account</p></li>
 <li class="border-cell">10<p>Free Domain</p>
 <span class="tooltip-info">
 <i class="fas fa-info"></i>
 <span class="tooltiptext">10 Domain Available</span>
 </span>
 </li>
 <li class="border-cell"><i class="far fa-times-circle"></i><p>24/7 Support</p></li>
 </ul>
 
 <div class="plan-bottom border-cell">
 <p class="price bg-green">$<span class="price-digit">29</span>/m</p>
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-2 col-md-3 col-sm-6 plan-padding">
 <div class="plan-style-5 even">
 
 <div class="plan-header border-cell-bold">
 <h3 class="plan-title">Pro</h3>
 
 
 
 
 </div>
 
 <ul class="plan-list dark-skin">
 <li class="border-cell">20GB<p>Cloud Storage</p></li>
 <li class="border-cell">70GB<p>Bandwidth</p></li>
 <li class="border-cell">4<p>SQL Database</p></li>
 <li class="border-cell">20<p>Email Account</p>
 <span class="tooltip-info">
 <i class="fas fa-info"></i>
 <span class="tooltiptext">20 email accounts</span>
 </span> 
 </li>
 <li class="border-cell">15<p>Free Domain</p></li>
 <li class="border-cell"><i class="far fa-check-circle"></i><p>24/7 Support</p>
 <span class="tooltip-info">
 <i class="fas fa-info"></i>
 <span class="tooltiptext">Support Available</span>
 </span> 
 </li>
 </ul>
 
 <div class="plan-bottom border-cell">
 <p class="price bg-green">$<span class="price-digit">39</span>/m</p>
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 </div> 
 </div> 
 </section>

<section class="pp-section">
 <div class="container">
 <div class="row">
 <div class="col-12">
 <div class="section-header text-center">
 <h2 class="title">Design - 6</h2>
 </div>
 </div>
 </div>
 <div class="selector-switcher">
 
 <p class="selector-field">
 <input type="radio" name="duration-4" value="monthly" id="monthly-4" checked>
 <label for="monthly-4">Monthly</label>
 <input type="radio" name="duration-4" value="yearly" id="yearly-4">
 <label for="yearly-4">Yearly</label>
 <span class="selector-switch"></span>
 </p>
 </div>
 <div class="row">
 
 <div class="col-lg-3 col-md-6">
 <ul class="selector-wrapper">
 <li data-type="monthly" class="is-visible">
 <div class="plan-style-6">
 
 <div class="plan-header">
 <div class="plan-icon">
 <i class="fas fa-paper-plane"></i>
 </div>
 <h3 class="plan-title">Bronze</h3>
 </div>
 
 <ul class="plan-list">
 <li>10GB
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Storage</span>
 <span class="tooltiptext">10GB Storage Per Month</span>
 </span>
 </li>
 <li>40GB
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Bandwidth</span>
 <span class="tooltiptext">40GB Bandwidth Per Month</span>
 </span>
 </li>
 <li>1 SQL Database</li>
 <li>No Free Domain</li>
 <li>No Support</li>
 </ul>
 
 <div class="plan-price">
 <p class="price"><span>$</span>9<span>.99 / M</span></p>
 </div>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </li>
 <li data-type="yearly" class="is-hidden">
 <div class="plan-style-6 plan-style-6-back">
 
 <div class="plan-header">
 <div class="plan-icon">
 <i class="fas fa-paper-plane"></i>
 </div>
 <h3 class="plan-title">Bronze</h3>
 </div>
 
 <ul class="plan-list">
 <li>20GB
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Storage</span>
 <span class="tooltiptext">20GB Storage Per Year</span>
 </span>
 </li>
 <li>50GB
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Bandwidth</span>
 <span class="tooltiptext">50GB Bandwidth Per Year</span>
 </span>
 </li>
 <li>2 SQL Database</li>
 <li>No Free Domain</li>
 <li>No Support</li>
 </ul>
 
 <div class="plan-price">
 <p class="price"><span>$</span>29<span>.99 / Y</span></p>
 </div>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </li>
 </ul>
 </div>
 
 
 <div class="col-lg-3 col-md-6">
 <ul class="selector-wrapper">
 <li data-type="monthly" class="is-visible">
 <div class="plan-style-6">
 
 <div class="plan-header">
 <div class="plan-icon">
 <i class="fas fa-plane-departure"></i>
 </div>
 <h3 class="plan-title">Silver</h3>
 </div>
 
 <ul class="plan-list">
 <li>10GB Storage</li>
 <li>40GB Bandwidth</li>
 <li>1 SQL
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Database</span>
 <span class="tooltiptext">SQL Database Available</span>
 </span>
 </li>
 <li>Free Domain</li>
 <li>1 Year Support</li>
 </ul>
 
 <div class="plan-price">
 <p class="price"><span>$</span>24<span>.99 / M</span></p>
 </div>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </li>
 <li data-type="yearly" class="is-hidden">
 <div class="plan-style-6 plan-style-6-back">
 
 <div class="plan-header">
 <div class="plan-icon">
 <i class="fas fa-plane-departure"></i>
 </div>
 <h3 class="plan-title">Silver</h3>
 </div>
 
 <ul class="plan-list">
 <li>30GB Storage</li>
 <li>60GB Bandwidth</li>
 <li>3 SQL
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Database</span>
 <span class="tooltiptext">SQL Database Available</span>
 </span>
 </li>
 <li>Free Domain</li>
 <li>1 Year Support</li>
 </ul>
 
 <div class="plan-price">
 <p class="price"><span>$</span>46<span>.99 / Y</span></p>
 </div>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </li>
 </ul>
 </div>
 
 
 <div class="col-lg-3 col-md-6 m-auto">
 <ul class="selector-wrapper">
 <li data-type="monthly" class="is-visible">
 <div class="plan-style-6 plan-style-6-active">
 
 <div class="plan-header">
 <span class="plan-label plan-label-front">Popular</span>
 <div class="plan-icon">
 <i class="fas fa-rocket"></i>
 </div>
 <h3 class="plan-title">Gold</h3>
 </div>
 
 <ul class="plan-list">
 <li>10GB Storage</li>
 <li>40GB Bandwidth</li>
 <li>1 SQL Database</li>
 <li>Free 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Domain</span>
 <span class="tooltiptext">Domain Available</span>
 </span>
 </li>
 <li>Unlimited 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Support</span>
 <span class="tooltiptext">Support Available</span>
 </span>
 </li>
 </ul>
 
 <div class="plan-price">
 <p class="price"><span>$</span>49<span>.99 / M</span></p>
 </div>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </li>
 <li data-type="yearly" class="is-hidden">
 <div class="plan-style-6 plan-style-6-back plan-style-6-back-active">
 
 <div class="plan-header">
 <span class="plan-label plan-label-back">Popular</span>
 <div class="plan-icon">
 <i class="fas fa-rocket"></i>
 </div>
 <h3 class="plan-title">Gold</h3>
 </div>
 
 <ul class="plan-list">
 <li>40GB Storage</li>
 <li>60GB Bandwidth</li>
 <li>4 SQL Database</li>
 <li>Free 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Domain</span>
 <span class="tooltiptext">Domain Available</span>
 </span>
 </li>
 <li>Unlimited 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Support</span>
 <span class="tooltiptext">Support Available</span>
 </span>
 </li>
 </ul>
 
 <div class="plan-price">
 <p class="price"><span>$</span>69<span>.99 / Y</span></p>
 </div>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </li>
 </ul>
 </div>
 
 
 <div class="col-lg-3 col-md-6 m-auto">
 <ul class="selector-wrapper">
 <li data-type="monthly" class="is-visible">
 <div class="plan-style-6">
 
 <div class="plan-header">
 <div class="plan-icon">
 <i class="fas fa-space-shuttle"></i>
 </div>
 <h3 class="plan-title">Platinium</h3>
 </div>
 
 <ul class="plan-list">
 <li>100GB Storage</li>
 <li>400GB Bandwidth</li>
 <li>5 SQL Database</li>
 <li>Free 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Domain</span>
 <span class="tooltiptext">Domain Available</span>
 </span>
 </li>
 <li>Unlimited 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Support</span>
 <span class="tooltiptext">Support Available</span>
 </span>
 </li>
 </ul>
 
 <div class="plan-price">
 <p class="price"><span>$</span>79<span>.99 / M</span></p>
 </div>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </li>
 <li data-type="yearly" class="is-hidden">
 <div class="plan-style-6 plan-style-6-back">
 
 <div class="plan-header">
 <div class="plan-icon">
 <i class="fas fa-space-shuttle"></i>
 </div>
 <h3 class="plan-title">Platinium</h3>
 </div>
 
 <ul class="plan-list">
 <li>199GB Storage</li>
 <li>499GB Bandwidth</li>
 <li>5 SQL Database</li>
 <li>Free 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Domain</span>
 <span class="tooltiptext">Domain Available</span>
 </span>
 </li>
 <li>Unlimited 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Support</span>
 <span class="tooltiptext">Support Available</span>
 </span>
 </li>
 </ul>
 
 <div class="plan-price">
 <p class="price"><span>$</span>99<span>.99 / Y</span></p>
 </div>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </li>
 </ul>
 </div>
 
 </div> 
 </div> 
 </section>

<script src="/snippets/price/2023/f-price/jquery-3.5.1.min.js"></script>
 
 <script src="/snippets/price/2023/f-price/modernizr.js"></script>
 
 <script src="/snippets/price/2023/f-price/switcher.js"></script>
 
 <script src="/snippets/price/2023/f-price/plan-1-main.js"></script>
 
 <script src="/snippets/price/2023/f-price/plan-2-main.js"></script>
 </body>
</html>

BootstrapTema

Набор функциональных прайсов

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0