Таблицы прайсов 6 в 1 + 6 цветов / Прайсы / Сниппеты Bootstrap

Таблицы прайсов 6 в 1 + 6 цветов

Набор креативных таблиц прайсов для добавления цены на страницах сайта, 6 готовых типов разметки и шесть готовых цветов для оформления в комплекте, адаптивные таблички с использованием Bootstrap 5.

* Bootstrap v5.1.2, HTML Files, CSS Files, JS Files, IMG Files, SCSS Files, Download File.

Версия: v1.2

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

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

Bootstrap: 5

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

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

Вес файла: 1.05 Mb

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

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

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

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

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

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

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

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

Рейтинг: 3.3 / 5 - 6 голосов

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

Авторство: https://codecanyon.net/item/sava-creative-pricing-tables/23797378

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

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

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

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

Добавлено: 2023-05-03 в 10:21

Метка: 1683098492

⇄ ⇅

<!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/6in1/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/6in1/bootstrap.css">
 
 <link rel="stylesheet" href="/snippets/price/2023/6in1/pricing-tables-bootstraptema.css">
 
 <link rel="stylesheet" href="/snippets/price/2023/6in1/pricing-tables-responsive.css">
 
 <link id="color" rel="stylesheet" href="/snippets/price/2023/6in1/color-1.css" media="screen">
 </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>
 </div>
 </div>
 </div>
 <div class="row">
 
 <div class="col-lg-3 col-md-6">
 <div class="plan-style-1">
 
 <div class="plan-header">
 <h3 class="plan-title">Bronze</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>9<span>/ M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li><i class="far fa-check-circle"></i>5gb
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Storage</span>
 <span class="tooltiptext">5gb storage per month</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>40GB Bandwidth</li>
 <li><i class="far fa-check-circle"></i>1 SQL Database</li>
 <li><i class="far fa-check-circle"></i>5 Email Account</li>
 <li><i class="far fa-times-circle"></i>Free 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Domain</span>
 <span class="tooltiptext">Free Domain Not Available</span>
 </span>
 </li>
 <li><i class="far fa-times-circle"></i>24/7 Support</li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-6">
 <div class="plan-style-1">
 
 <div class="plan-header">
 <h3 class="plan-title">Silver</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>24<span>/ M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li><i class="far fa-check-circle"></i>10GB Storage</li>
 <li><i class="far fa-check-circle"></i>40GB Bandwidth</li>
 <li><i class="far fa-check-circle"></i>1 SQL Database</li>
 <li><i class="far fa-check-circle"></i>5 Email 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Account</span>
 <span class="tooltiptext">5 Email Account Available</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>Free Domain</li>
 <li><i class="far fa-times-circle"></i>24/7 Support</li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-6 m-auto">
 <div class="plan-style-1">
 
 <div class="plan-header">
 <h3 class="plan-title">Gold</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>49<span>/ M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li><i class="far fa-check-circle"></i>10GB Storage</li>
 <li><i class="far fa-check-circle"></i>40GB
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Bandwidth</span>
 <span class="tooltiptext">40gb Bandwidth per month</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>1 SQL Database</li>
 <li><i class="far fa-check-circle"></i>5 Email Account</li>
 <li><i class="far fa-check-circle"></i>Free Domain</li>
 <li><i class="far fa-check-circle"></i>24/7 Support</li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-6 m-auto">
 <div class="plan-style-1">
 
 <div class="plan-header">
 <h3 class="plan-title">Platinium</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>99<span>/ M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li><i class="far fa-check-circle"></i>100GB Storage</li>
 <li><i class="far fa-check-circle"></i>400GB
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Bandwidth</span>
 <span class="tooltiptext">400gb Bandwidth per month</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>5 SQL 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Database</span>
 <span class="tooltiptext">Database Available</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>10 Email Account</li>
 <li><i class="far fa-check-circle"></i>5 Free Domain</li>
 <li><i class="far fa-check-circle"></i>24/7 Support</li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" 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 - 2</h2>
 </div>
 </div>
 </div>
 <div class="row">
 
 <div class="col-lg-3 col-md-6">
 <div class="plan-style-2">
 
 <div class="plan-header">
 <h3 class="plan-title">Bronze</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>9<span>/ M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li>10GB Storage</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>5 Email Account</li>
 <li>No Free Domain</li>
 <li>No Support</li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-6">
 <div class="plan-style-2">
 
 <div class="plan-header">
 <h3 class="plan-title">Silver</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>24<span>/ M</span></p>
 </div>
 </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 Bandwidth</li>
 <li>1 SQL Database</li>
 <li>5 Email Account</li>
 <li>1 Free Domain</li>
 <li>1 Year 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Support</span>
 <span class="tooltiptext">Support Available</span>
 </span>
 </li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-6 m-auto">
 <div class="plan-style-2">
 
 <div class="plan-header">
 <h3 class="plan-title">Gold</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>49<span>/ M</span></p>
 </div>
 </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">Database Available</span>
 </span>
 </li>
 <li>5 Email 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Account</span>
 <span class="tooltiptext">Account Available</span>
 </span>
 </li>
 <li>5 Free Domain</li>
 <li>Unlimited Support</li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-6 m-auto">
 <div class="plan-style-2">
 
 <div class="plan-header">
 <h3 class="plan-title">Platinium</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>99<span>/ M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li>100GB Storage</li>
 <li>400GB Bandwidth</li>
 <li>5 SQL
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Database</span>
 <span class="tooltiptext">Database Available</span>
 </span>
 </li>
 <li>10 Email 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Account</span>
 <span class="tooltiptext">Account Available</span>
 </span>
 </li>
 <li>10 Free Domain</li>
 <li>Unlimited Support</li>
 </ul>
 
 <div class="plan-bottom">
 <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 - 3</h2>
 </div>
 </div>
 </div>
 <div class="row">
 
 <div class="col-lg-3 col-md-6">
 <div class="plan-style-3">
 
 <div class="plan-header">
 <h3 class="plan-title">Bronze</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>9<span> / M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li><i class="far fa-check-circle"></i>10GB
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Storage</span>
 <span class="tooltiptext">10GB Storage Per Month</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>40GB Bandwidth</li>
 <li><i class="far fa-check-circle"></i>1 SQL Database</li>
 <li><i class="far fa-check-circle"></i>5 Email Account</li>
 <li><i class="far fa-times-circle"></i>No Free Domain</li>
 <li><i class="far fa-times-circle"></i>No 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Support</span>
 <span class="tooltiptext">Support Not Available</span>
 </span>
 </li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-6">
 <div class="plan-style-3">
 
 <div class="plan-header">
 <h3 class="plan-title">Silver</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>24<span> / M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li><i class="far fa-check-circle"></i>10GB Storage</li>
 <li><i class="far fa-check-circle"></i>40GB 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Bandwidth</span>
 <span class="tooltiptext">40GB Bandwidth Per Month</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>SQL Database</li>
 <li><i class="far fa-check-circle"></i>5 Email Account</li>
 <li><i class="far fa-check-circle"></i>Free Domain</li>
 <li><i class="far fa-times-circle"></i>No Support</li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-6 m-auto">
 <div class="plan-style-3">
 
 <div class="plan-header">
 <h3 class="plan-title">Gold</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>49<span> / M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li><i class="far fa-check-circle"></i>10GB Storage</li>
 <li><i class="far fa-check-circle"></i>40GB Bandwidth</li>
 <li><i class="far fa-check-circle"></i>1 SQL
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Database</span>
 <span class="tooltiptext">Database Available</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>5 Email 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Account</span>
 <span class="tooltiptext">5 Email Account Available</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>Free Domain</li>
 <li><i class="far fa-check-circle"></i>Unlimited Support</li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now</a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-6 m-auto">
 <div class="plan-style-3">
 
 <div class="plan-header">
 <h3 class="plan-title">Platinium</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>99<span> / M</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li><i class="far fa-check-circle"></i>100GB Storage</li>
 <li><i class="far fa-check-circle"></i>400GB Bandwidth</li>
 <li><i class="far fa-check-circle"></i>5 SQL
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Database</span>
 <span class="tooltiptext">Database Available</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>10 Email 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Account</span>
 <span class="tooltiptext">10 Email Account Available</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>Free Domain</li>
 <li><i class="far fa-check-circle"></i>Unlimited Support</li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" 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 - 4</h2>
 </div>
 </div>
 </div>
 <div class="row">
 
 <div class="col-lg-3 col-md-6">
 <div class="plan-style-4">
 
 <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>
 </div>
 
 
 <div class="col-lg-3 col-md-6">
 <div class="plan-style-4">
 
 <div class="plan-header">
 <span class="plan-label">Popular</span>
 <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>
 </div>
 
 
 <div class="col-lg-3 col-md-6 m-auto">
 <div class="plan-style-4">
 
 <div class="plan-header">
 <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>
 </div>
 
 
 <div class="col-lg-3 col-md-6 m-auto">
 <div class="plan-style-4">
 
 <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>99<span>.99 / M</span></p>
 </div>
 
 <div class="plan-bottom">
 <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 - 5</h2>
 </div>
 </div>
 </div>
 <div class="row">
 
 <div class="col-lg-3 col-md-6">
 <div class="plan-style-5">
 
 <div class="plan-header">
 <div class="plan-icon">
 <i class="fas fa-motorcycle"></i>
 </div>
 <h3 class="plan-title">Bronze</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>9<span>/ Year</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li><i class="far fa-check-circle"></i>10GB Storage</li>
 <li><i class="far fa-check-circle"></i>40GB
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Bandwidth</span>
 <span class="tooltiptext">40GB Bandwidth Per Year</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>1 SQL Database</li>
 <li><i class="far fa-times-circle"></i>Free Domain</li>
 <li><i class="far fa-times-circle"></i>24/7 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Support</span>
 <span class="tooltiptext">Support Not Available</span>
 </span>
 </li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now<i class="fas fa-arrow-right"></i></a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-6">
 <div class="plan-style-5">
 
 <div class="plan-header">
 <span class="lable">Best</span>
 <div class="plan-icon">
 <i class="fas fa-car-side"></i>
 </div>
 <h3 class="plan-title">Silver</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>24<span>/ Year</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li><i class="far fa-check-circle"></i>10GB Storage</li>
 <li><i class="far fa-check-circle"></i>40GB Bandwidth</li>
 <li><i class="far fa-check-circle"></i>1 SQL
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Database</span>
 <span class="tooltiptext">SQL Database Available</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>Free Domain</li>
 <li><i class="far fa-times-circle"></i>24/7 Support</li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now<i class="fas fa-arrow-right"></i></a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-6">
 <div class="plan-style-5">
 
 <div class="plan-header">
 <div class="plan-icon">
 <i class="fas fa-shuttle-van"></i>
 </div>
 <h3 class="plan-title">Gold</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>49<span>/ Year</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li><i class="far fa-check-circle"></i>10GB 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Storage</span>
 <span class="tooltiptext">10GB Storage Per Year</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>40GB Bandwidth</li>
 <li><i class="far fa-check-circle"></i>1 SQL Database</li>
 <li><i class="far fa-check-circle"></i>Free 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Domain</span>
 <span class="tooltiptext">Domain Available</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>24/7 Support</li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now<i class="fas fa-arrow-right"></i></a>
 </div>
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-6">
 <div class="plan-style-5">
 
 <div class="plan-header">
 <div class="plan-icon">
 <i class="fas fa-truck-monster"></i>
 </div>
 <h3 class="plan-title">Platinium</h3>
 
 <div class="plan-price">
 <p class="price"><span>$</span>99<span>/ Year</span></p>
 </div>
 </div>
 
 <ul class="plan-list">
 <li><i class="far fa-check-circle"></i>100GB 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Storage</span>
 <span class="tooltiptext">100GB Storage Per Year</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>400GB Bandwidth</li>
 <li><i class="far fa-check-circle"></i>5 SQL Database</li>
 <li><i class="far fa-check-circle"></i>Free 
 <span class="tooltip-info">
 <span class="tooltip-hover-text">Domain</span>
 <span class="tooltiptext">Domain Available</span>
 </span>
 </li>
 <li><i class="far fa-check-circle"></i>24/7 Support</li>
 </ul>
 
 <div class="plan-bottom">
 <a class="plan-button" href="#">Signup Now<i class="fas fa-arrow-right"></i></a>
 </div>
 </div>
 </div>
 
 </div> 
 </div> 
 </section> 
 
 <script src="/snippets/price/2023/6in1/jquery.min.js"></script>
 <script src="/snippets/price/2023/6in1/Pricing-tables.js"></script>
 </body>
</html>

BootstrapTema

Таблицы прайсов 6 в 1 + 6 цветов

Скриншот

Подробнее

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

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

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