templates/pricing/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Pricing</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">Pages</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">Pricing</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                             <!-- ROW OPEN -->
  20.                             <div class="row d-flex align-items-center justify-content-center">
  21.                                 <div class="col-lg-8 col-xl-3 col-md-8 col-sm-12">
  22.                                     <div class="card p-3 pricing-card">
  23.                                         <div class="card-header d-block text-justified pt-2">
  24.                                             <p class="text-18 font-weight-semibold mb-1">Basic</p>
  25.                                             <p class="text-justify font-weight-semibold mb-1"> <span class="text-30 me-2">$</span><span class="text-30 me-1">0</span><span class="text-24"><span class="op-0-5 text-muted text-20">/</span> month</span></p>
  26.                                             <p class="text-13 mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos debitis aliquam .</p>
  27.                                             <p class="text-13 mb-1 text-warning font-weight-">Billed monthly on regular basis!</p>
  28.                                         </div>
  29.                                         <div class="card-body pt-2">
  30.                                             <ul class="text-justify pricing-body ps-0">
  31.                                                 <li class="mb-4"><span class="text-warning me-2 p-1 bg-warning-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span>  <strong> 2 Free</strong> Domain Name</li>
  32.                                                 <li class="mb-4"><span class="text-warning me-2 p-1 bg-warning-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong>3 </strong> One-Click Apps</li>
  33.                                                 <li class="mb-4 text-muted"><span class="text-gray me-2 p-1 bg-light-transparent rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> 1 </strong> Databases</li>
  34.                                                 <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Unlimited </strong> Cloud Storage</li>
  35.                                                 <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Money </strong> BackGuarantee</li>
  36.                                                 <li class="mb-6 text-muted"><span class="text-gray me-2 p-1 bg-light-transparent rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> 24/7</strong> support</li>
  37.                                             </ul>
  38.                                         </div>
  39.                                         <div class="card-footer text-center border-top-0 pt-1">
  40.                                             <button class="btn btn-lg btn-outline-warning btn-block">
  41.                                                 <span class="ms-4 me-4">Select</span>
  42.                                             </button>
  43.                                         </div>
  44.                                     </div>
  45.                                 </div>
  46.                                 <div class="col-lg-8 col-xl-3 col-md-8 col-sm-12">
  47.                                     <div class="card p-3 pricing-card">
  48.                                         <div class="card-header d-block text-justified pt-2">
  49.                                             <p class="text-18 font-weight-semibold mb-1">Regular</p>
  50.                                             <p class="text-justify font-weight-semibold mb-1"> <span class="text-30 me-2">$</span><span class="text-30 me-1">79.9</span><span class="text-24"><span class="op-0-5 text-muted text-20">/</span> month</span></p>
  51.                                             <p class="text-13 mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos debitis aliquam .</p>
  52.                                             <p class="text-13 mb-1 text-info font-weight-">Billed monthly on regular basis!</p>
  53.                                         </div>
  54.                                         <div class="card-body pt-2">
  55.                                             <ul class="text-justify pricing-body ps-0">
  56.                                                 <li class="mb-4"><span class="text-info me-2 p-1 bg-info-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span>  <strong> 1 Free</strong> Domain Name</li>
  57.                                                 <li class="mb-4"><span class="text-info me-2 p-1 bg-info-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong>4 </strong> One-Click Apps</li>
  58.                                                 <li class="mb-4"><span class="text-info me-2 p-1 bg-info-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> 2 </strong> Databases</li>
  59.                                                 <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Unlimited </strong> Cloud Storage</li>
  60.                                                 <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Money </strong> BackGuarantee</li>
  61.                                                 <li class="mb-6 text-muted"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> 24/7</strong> support</li>
  62.                                             </ul>
  63.                                         </div>
  64.                                         <div class="card-footer text-center border-top-0 pt-1">
  65.                                             <button class="btn btn-lg btn-outline-info btn-block">
  66.                                                 <span class="ms-4 me-4">Select</span>
  67.                                             </button>
  68.                                         </div>
  69.                                     </div>
  70.                                 </div>
  71.                                 <div class="col-lg-8 col-xl-3 col-md-8 col-sm-12">
  72.                                     <div class="card p-3 pricing-card">
  73.                                         <div class="card-header d-block text-justified pt-2">
  74.                                             <p class="text-18 font-weight-semibold mb-1">Premium</p>
  75.                                             <p class="text-justify font-weight-semibold mb-1"> <span class="text-30 me-2">$</span><span class="text-30 me-1">579.9</span><span class="text-24"><span class="op-0-5 text-muted text-20">/</span> month</span></p>
  76.                                             <p class="text-13 mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos debitis aliquam .</p>
  77.                                             <p class="text-13 mb-1 text-secondary font-weight-">Billed monthly on regular basis!</p>
  78.                                         </div>
  79.                                         <div class="card-body pt-2">
  80.                                             <ul class="text-justify pricing-body ps-0">
  81.                                                 <li class="mb-4"><span class="text-secondary me-2 p-1 bg-secondary-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span>  <strong> 1 Free</strong> Domain Name</li>
  82.                                                 <li class="mb-4"><span class="text-secondary me-2 p-1 bg-secondary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong>5 </strong> One-Click Apps</li>
  83.                                                 <li class="mb-4"><span class="text-secondary me-2 p-1 bg-secondary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> 3 </strong> Databases</li>
  84.                                                 <li class="mb-4 text-wrap"><span class="text-secondary me-2 p-1 bg-secondary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> Unlimited </strong> Cloud Storage</li>
  85.                                                 <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Money </strong> BackGuarantee</li>
  86.                                                 <li class="mb-6 text-muted"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> 24/7</strong> support</li>
  87.                                             </ul>
  88.                                         </div>
  89.                                         <div class="card-footer text-center border-top-0 pt-1">
  90.                                             <button class="btn btn-lg btn-outline-secondary btn-block">
  91.                                                 <span class="ms-4 me-4">Select</span>
  92.                                             </button>
  93.                                         </div>
  94.                                     </div>
  95.                                 </div>
  96.                                 <div class="col-lg-8 col-xl-3 col-md-8 col-sm-12">
  97.                                     <div class="card p-3 border-primary pricing-card advanced">
  98.                                         <div class="card-header d-block text-justified pt-2">
  99.                                             <p class="text-18 font-weight-semibold mb-1 pe-0">Advanced<span class=" text-11-f float-end badge bg-primary text-white px-3 py-3 mt-2">Limited Deal</span></p>
  100.                                             <p class="text-justify font-weight-semibold mb-1"> <span class="text-30 me-2">$</span><span class="text-30 me-1">1,299</span><span class="text-24"><span class="op-0-5 text-muted text-20">/</span> month</span></p>
  101.                                             <p class="text-13 mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos debitis aliquam .</p>
  102.                                             <p class="text-13 mb-1 text-primary font-weight-">Billed monthly on regular basis!</p>
  103.                                         </div>
  104.                                         <div class="card-body pt-2">
  105.                                             <ul class="text-justify pricing-body ps-0">
  106.                                                 <li class="mb-4"><span class="text-primary me-2 p-1 bg-primary-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span>  <strong> 5 Free</strong> Domain Name</li>
  107.                                                 <li class="mb-4"><span class="text-primary me-2 p-1 bg-primary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong>5 </strong> One-Click Apps</li>
  108.                                                 <li class="mb-4"><span class="text-primary me-2 p-1 bg-primary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> 3 </strong> Databases</li>
  109.                                                 <li class="mb-4 text-wrap"><span class="text-primary me-2 p-1 bg-primary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> Unlimited </strong> Cloud Storage</li>
  110.                                                 <li class="mb-4 text-wrap"><span class="text-primary me-2 p-1 bg-primary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> Money </strong> BackGuarantee</li>
  111.                                                 <li class="mb-6"><span class="text-primary me-2 p-1 bg-primary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> 24/7</strong> support</li>
  112.                                             </ul>
  113.                                         </div>
  114.                                         <div class="card-footer text-center border-top-0 pt-1">
  115.                                             <button class="btn btn-lg btn-primary-gradient text-white btn-block">
  116.                                                 <span class="ms-4 me-4">Select</span>
  117.                                             </button>
  118.                                         </div>
  119.                                     </div>
  120.                                 </div>
  121.                             </div>
  122.                             <!-- END ROW -->
  124.                             <!-- ROW OPEN -->
  125.                             <div class="pricing-tabs">
  126.                                 <div class="pri-tabs-heading text-center">
  127.                                     <ul class="nav nav-price">
  128.                                         <li><a data-bs-toggle="tab" href="#month">Monthly</a></li>
  129.                                         <li><a class="active show" data-bs-toggle="tab" href="#year">Annual</a></li>
  130.                                     </ul>
  131.                                 </div>
  132.                                 <div class="tab-content">
  133.                                     <div class="tab-pane pb-0 active show" id="year">
  134.                                         <div class="row d-flex align-items-center justify-content-center">
  135.                                             <div class="col-lg-8 col-xl-3 col-md-8 col-sm-12">
  136.                                                 <div class="card p-3 pricing-card">
  137.                                                     <div class="card-header d-block text-justified pt-2">
  138.                                                         <p class="text-18 font-weight-semibold mb-1">Basic</p>
  139.                                                         <p class="text-justify font-weight-semibold mb-1"> <span class="text-30 me-2">$</span><span class="text-30 me-1">0</span><span class="text-24"><span class="op-0-5 text-muted text-20">/</span> month</span></p>
  140.                                                         <p class="text-13 mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos debitis aliquam .</p>
  141.                                                         <p class="text-13 mb-1 text-warning font-weight-">Billed monthly on regular basis!</p>
  142.                                                     </div>
  143.                                                     <div class="card-body pt-2">
  144.                                                         <ul class="text-justify pricing-body ps-0">
  145.                                                             <li class="mb-4"><span class="text-warning me-2 p-1 bg-warning-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span>  <strong> 2 Free</strong> Domain Name</li>
  146.                                                             <li class="mb-4"><span class="text-warning me-2 p-1 bg-warning-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong>3 </strong> One-Click Apps</li>
  147.                                                             <li class="mb-4 text-muted"><span class="text-gray me-2 p-1 bg-light-transparent rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> 1 </strong> Databases</li>
  148.                                                             <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Unlimited </strong> Cloud Storage</li>
  149.                                                             <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Money </strong> BackGuarantee</li>
  150.                                                             <li class="mb-6 text-muted"><span class="text-gray me-2 p-1 bg-light-transparent rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> 24/7</strong> support</li>
  151.                                                         </ul>
  152.                                                     </div>
  153.                                                     <div class="card-footer text-center border-top-0 pt-1">
  154.                                                         <button class="btn btn-lg btn-outline-warning btn-block">
  155.                                                             <span class="ms-4 me-4">Select</span>
  156.                                                         </button>
  157.                                                     </div>
  158.                                                 </div>
  159.                                             </div>
  160.                                             <div class="col-lg-8 col-xl-3 col-md-8 col-sm-12">
  161.                                                 <div class="card p-3 pricing-card">
  162.                                                     <div class="card-header d-block text-justified pt-2">
  163.                                                         <p class="text-18 font-weight-semibold mb-1">Regular</p>
  164.                                                         <p class="text-justify font-weight-semibold mb-1"> <span class="text-30 me-2">$</span><span class="text-30 me-1">699</span><span class="text-24"><span class="op-0-5 text-muted text-20">/</span> month</span></p>
  165.                                                         <p class="text-13 mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos debitis aliquam .</p>
  166.                                                         <p class="text-13 mb-1 text-info font-weight-">Billed monthly on regular basis!</p>
  167.                                                     </div>
  168.                                                     <div class="card-body pt-2">
  169.                                                         <ul class="text-justify pricing-body ps-0">
  170.                                                             <li class="mb-4"><span class="text-info me-2 p-1 bg-info-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span>  <strong> 1 Free</strong> Domain Name</li>
  171.                                                             <li class="mb-4"><span class="text-info me-2 p-1 bg-info-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong>4 </strong> One-Click Apps</li>
  172.                                                             <li class="mb-4"><span class="text-info me-2 p-1 bg-info-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> 2 </strong> Databases</li>
  173.                                                             <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Unlimited </strong> Cloud Storage</li>
  174.                                                             <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Money </strong> BackGuarantee</li>
  175.                                                             <li class="mb-6 text-muted"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> 24/7</strong> support</li>
  176.                                                         </ul>
  177.                                                     </div>
  178.                                                     <div class="card-footer text-center border-top-0 pt-1">
  179.                                                         <button class="btn btn-lg btn-outline-info btn-block">
  180.                                                             <span class="ms-4 me-4">Select</span>
  181.                                                         </button>
  182.                                                     </div>
  183.                                                 </div>
  184.                                             </div>
  185.                                             <div class="col-lg-8 col-xl-3 col-md-8 col-sm-12">
  186.                                                 <div class="card p-3 pricing-card">
  187.                                                     <div class="card-header d-block text-justified pt-2">
  188.                                                         <p class="text-18 font-weight-semibold mb-1">Premium</p>
  189.                                                         <p class="text-justify font-weight-semibold mb-1"> <span class="text-30 me-2">$</span><span class="text-30 me-1">899</span><span class="text-24"><span class="op-0-5 text-muted text-20">/</span> month</span></p>
  190.                                                         <p class="text-13 mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos debitis aliquam .</p>
  191.                                                         <p class="text-13 mb-1 text-secondary font-weight-">Billed monthly on regular basis!</p>
  192.                                                     </div>
  193.                                                     <div class="card-body pt-2">
  194.                                                         <ul class="text-justify pricing-body ps-0">
  195.                                                             <li class="mb-4"><span class="text-secondary me-2 p-1 bg-secondary-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span>  <strong> 1 Free</strong> Domain Name</li>
  196.                                                             <li class="mb-4"><span class="text-secondary me-2 p-1 bg-secondary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong>5 </strong> One-Click Apps</li>
  197.                                                             <li class="mb-4"><span class="text-secondary me-2 p-1 bg-secondary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> 3 </strong> Databases</li>
  198.                                                             <li class="mb-4 text-wrap"><span class="text-secondary me-2 p-1 bg-secondary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> Unlimited </strong> Cloud Storage</li>
  199.                                                             <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Money </strong> BackGuarantee</li>
  200.                                                             <li class="mb-6 text-muted"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> 24/7</strong> support</li>
  201.                                                         </ul>
  202.                                                     </div>
  203.                                                     <div class="card-footer text-center border-top-0 pt-1">
  204.                                                         <button class="btn btn-lg btn-outline-secondary btn-block">
  205.                                                             <span class="ms-4 me-4">Select</span>
  206.                                                         </button>
  207.                                                     </div>
  208.                                                 </div>
  209.                                             </div>
  210.                                             <div class="col-lg-8 col-xl-3 col-md-8 col-sm-12">
  211.                                                 <div class="card p-3 border-primary pricing-card advanced">
  212.                                                     <div class="card-header d-block text-justified pt-2">
  213.                                                         <p class="text-18 font-weight-semibold mb-1 pe-0">Advanced<span class=" text-11-f float-end badge bg-primary text-white px-3 py-3 mt-2">Limited Deal</span></p>
  214.                                                         <p class="text-justify font-weight-semibold mb-1"> <span class="text-30 me-2">$</span><span class="text-30 me-1">1,299</span><span class="text-24"><span class="op-0-5 text-muted text-20">/</span> month</span></p>
  215.                                                         <p class="text-13 mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos debitis aliquam .</p>
  216.                                                         <p class="text-13 mb-1 text-primary font-weight-">Billed monthly on regular basis!</p>
  217.                                                     </div>
  218.                                                     <div class="card-body pt-2">
  219.                                                         <ul class="text-justify pricing-body ps-0">
  220.                                                             <li class="mb-4"><span class="text-primary me-2 p-1 bg-primary-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span>  <strong> 5 Free</strong> Domain Name</li>
  221.                                                             <li class="mb-4"><span class="text-primary me-2 p-1 bg-primary-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong>5 </strong> One-Click Apps</li>
  222.                                                             <li class="mb-4"><span class="text-primary me-2 p-1 bg-primary-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> 3 </strong> Databases</li>
  223.                                                             <li class="mb-4 text-wrap"><span class="text-primary me-2 p-1 bg-primary-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> Unlimited </strong> Cloud Storage</li>
  224.                                                             <li class="mb-4 text-wrap"><span class="text-primary me-2 p-1 bg-primary-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> Money </strong> BackGuarantee</li>
  225.                                                             <li class="mb-6"><span class="text-primary me-2 p-1 bg-primary-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> 24/7</strong> support</li>
  226.                                                         </ul>
  227.                                                     </div>
  228.                                                     <div class="card-footer text-center border-top-0 pt-1">
  229.                                                         <button class="btn btn-lg btn-primary-gradient text-white btn-block">
  230.                                                             <span class="ms-4 me-4">Select</span>
  231.                                                         </button>
  232.                                                     </div>
  233.                                                 </div>
  234.                                             </div>
  235.                                         </div>
  236.                                     </div>
  237.                                     <div class="tab-pane" id="month">
  238.                                         <div class="row d-flex align-items-center justify-content-center">
  239.                                             <div class="col-lg-8 col-xl-3 col-md-8 col-sm-12">
  240.                                                 <div class="card p-3 pricing-card">
  241.                                                     <div class="card-header d-block text-justified pt-2">
  242.                                                         <p class="text-18 font-weight-semibold mb-1">Basic</p>
  243.                                                         <p class="text-justify font-weight-semibold mb-1"> <span class="text-30 me-2">$</span><span class="text-30 me-1">0</span><span class="text-24"><span class="op-0-5 text-muted text-20">/</span> month</span></p>
  244.                                                         <p class="text-13 mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos debitis aliquam .</p>
  245.                                                         <p class="text-13 mb-1 text-warning font-weight-">Billed monthly on regular basis!</p>
  246.                                                     </div>
  247.                                                     <div class="card-body pt-2">
  248.                                                         <ul class="text-justify pricing-body ps-0">
  249.                                                             <li class="mb-4"><span class="text-warning me-2 p-1 bg-warning-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span>  <strong> 2 Free</strong> Domain Name</li>
  250.                                                             <li class="mb-4"><span class="text-warning me-2 p-1 bg-warning-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong>3 </strong> One-Click Apps</li>
  251.                                                             <li class="mb-4 text-muted"><span class="text-gray me-2 p-1 bg-light-transparent rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> 1 </strong> Databases</li>
  252.                                                             <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Unlimited </strong> Cloud Storage</li>
  253.                                                             <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Money </strong> BackGuarantee</li>
  254.                                                             <li class="mb-6 text-muted"><span class="text-gray me-2 p-1 bg-light-transparent rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> 24/7</strong> support</li>
  255.                                                         </ul>
  256.                                                     </div>
  257.                                                     <div class="card-footer text-center border-top-0 pt-1">
  258.                                                         <button class="btn btn-lg btn-outline-warning btn-block">
  259.                                                             <span class="ms-4 me-4">Select</span>
  260.                                                         </button>
  261.                                                     </div>
  262.                                                 </div>
  263.                                             </div>
  264.                                             <div class="col-lg-8 col-xl-3 col-md-8 col-sm-12">
  265.                                                 <div class="card p-3 pricing-card">
  266.                                                     <div class="card-header d-block text-justified pt-2">
  267.                                                         <p class="text-18 font-weight-semibold mb-1">Regular</p>
  268.                                                         <p class="text-justify font-weight-semibold mb-1"> <span class="text-30 me-2">$</span><span class="text-30 me-1">79</span><span class="text-24"><span class="op-0-5 text-muted text-20">/</span> month</span></p>
  269.                                                         <p class="text-13 mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos debitis aliquam .</p>
  270.                                                         <p class="text-13 mb-1 text-info font-weight-">Billed monthly on regular basis!</p>
  271.                                                     </div>
  272.                                                     <div class="card-body pt-2">
  273.                                                         <ul class="text-justify pricing-body ps-0">
  274.                                                             <li class="mb-4"><span class="text-info me-2 p-1 bg-info-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span>  <strong> 1 Free</strong> Domain Name</li>
  275.                                                             <li class="mb-4"><span class="text-info me-2 p-1 bg-info-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong>4 </strong> One-Click Apps</li>
  276.                                                             <li class="mb-4"><span class="text-info me-2 p-1 bg-info-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> 2 </strong> Databases</li>
  277.                                                             <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Unlimited </strong> Cloud Storage</li>
  278.                                                             <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Money </strong> BackGuarantee</li>
  279.                                                             <li class="mb-6 text-muted"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> 24/7</strong> support</li>
  280.                                                         </ul>
  281.                                                     </div>
  282.                                                     <div class="card-footer text-center border-top-0 pt-1">
  283.                                                         <button class="btn btn-lg btn-outline-info btn-block">
  284.                                                             <span class="ms-4 me-4">Select</span>
  285.                                                         </button>
  286.                                                     </div>
  287.                                                 </div>
  288.                                             </div>
  289.                                             <div class="col-lg-8 col-xl-3 col-md-8 col-sm-12">
  290.                                                 <div class="card p-3 pricing-card">
  291.                                                     <div class="card-header d-block text-justified pt-2">
  292.                                                         <p class="text-18 font-weight-semibold mb-1">Premium</p>
  293.                                                         <p class="text-justify font-weight-semibold mb-1"> <span class="text-30 me-2">$</span><span class="text-30 me-1">59</span><span class="text-24"><span class="op-0-5 text-muted text-20">/</span> month</span></p>
  294.                                                         <p class="text-13 mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos debitis aliquam .</p>
  295.                                                         <p class="text-13 mb-1 text-secondary font-weight-">Billed monthly on regular basis!</p>
  296.                                                     </div>
  297.                                                     <div class="card-body pt-2">
  298.                                                         <ul class="text-justify pricing-body ps-0">
  299.                                                             <li class="mb-4"><span class="text-secondary me-2 p-1 bg-secondary-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span>  <strong> 1 Free</strong> Domain Name</li>
  300.                                                             <li class="mb-4"><span class="text-secondary me-2 p-1 bg-secondary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong>5 </strong> One-Click Apps</li>
  301.                                                             <li class="mb-4"><span class="text-secondary me-2 p-1 bg-secondary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> 3 </strong> Databases</li>
  302.                                                             <li class="mb-4 text-wrap"><span class="text-secondary me-2 p-1 bg-secondary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> Unlimited </strong> Cloud Storage</li>
  303.                                                             <li class="mb-4 text-muted text-wrap"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> Money </strong> BackGuarantee</li>
  304.                                                             <li class="mb-6 text-muted"><span class="text-gray me-2 p-1 bg-light-transparent  rounded-pill text-10-f"><i class="fa fa-times"></i></span> <strong> 24/7</strong> support</li>
  305.                                                         </ul>
  306.                                                     </div>
  307.                                                     <div class="card-footer text-center border-top-0 pt-1">
  308.                                                         <button class="btn btn-lg btn-outline-secondary btn-block">
  309.                                                             <span class="ms-4 me-4">Select</span>
  310.                                                         </button>
  311.                                                     </div>
  312.                                                 </div>
  313.                                             </div>
  314.                                             <div class="col-lg-8 col-xl-3 col-md-8 col-sm-12">
  315.                                                 <div class="card p-3 border-primary pricing-card advanced">
  316.                                                     <div class="card-header d-block text-justified pt-2">
  317.                                                         <p class="text-18 font-weight-semibold mb-1 pe-0">Advanced<span class=" text-11-f float-end badge bg-primary text-white px-3 py-3 mt-2">Limited Deal</span></p>
  318.                                                         <p class="text-justify font-weight-semibold mb-1"> <span class="text-30 me-2">$</span><span class="text-30 me-1">129</span><span class="text-24"><span class="op-0-5 text-muted text-20">/</span> month</span></p>
  319.                                                         <p class="text-13 mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos debitis aliquam .</p>
  320.                                                         <p class="text-13 mb-1 text-primary font-weight-">Billed monthly on regular basis!</p>
  321.                                                     </div>
  322.                                                     <div class="card-body pt-2">
  323.                                                         <ul class="text-justify pricing-body ps-0">
  324.                                                             <li class="mb-4"><span class="text-primary me-2 p-1 bg-primary-transparent rounded-pill text-10-f"><i class="fa fa-check"></i></span>  <strong> 5 Free</strong> Domain Name</li>
  325.                                                             <li class="mb-4"><span class="text-primary me-2 p-1 bg-primary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong>5 </strong> One-Click Apps</li>
  326.                                                             <li class="mb-4"><span class="text-primary me-2 p-1 bg-primary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> 3 </strong> Databases</li>
  327.                                                             <li class="mb-4 text-wrap"><span class="text-primary me-2 p-1 bg-primary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> Unlimited </strong> Cloud Storage</li>
  328.                                                             <li class="mb-4 text-wrap"><span class="text-primary me-2 p-1 bg-primary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> Money </strong> BackGuarantee</li>
  329.                                                             <li class="mb-6"><span class="text-primary me-2 p-1 bg-primary-transparent  rounded-pill text-10-f"><i class="fa fa-check"></i></span> <strong> 24/7</strong> support</li>
  330.                                                         </ul>
  331.                                                     </div>
  332.                                                     <div class="card-footer text-center border-top-0 pt-1">
  333.                                                         <button class="btn btn-lg btn-primary-gradient text-white btn-block">
  334.                                                             <span class="ms-4 me-4">Select</span>
  335.                                                         </button>
  336.                                                     </div>
  337.                                                 </div>
  338.                                             </div>
  339.                                         </div>
  340.                                     </div>
  341.                                 </div>
  342.                             </div>
  343.                             <!-- END ROW -->
  344. {% endblock %}