Elements

These modular elements can be readily used and customized across pages and in different blocks.


	<div class="row ">
		<div class="col-md-4 ">
			<div class="price-item">
				<div class="card" >
					<div class="card-price">
						<h2>$55 <span>Per Hour</span></h2>
					</div>
					<div class="card-body">
						<a href=""><h4 class="card-title">One on One Personal Training</h4></a>
						<p class="card-text">For an individual session at the private Fitguide studio</p>
						<a href="#" class="btn btn-primary btn-rounded">Get Started</a>
					</div>
				</div>
			</div>
		</div>
	</div>
How to use
  • Follow the code example to get the following style. You you want to customize the style you can add classes or modify the existing class property

$55 Per Hour

Single Personal Training

For an individual session at the private Fitguide studio

Get Started

$55 Per Hour

Semi Private Training

For an individual session at the private Fitguide studio

Get Started

$55 Per Hour

Customized group training

For an individual session at the private Fitguide studio

Get Started 

	<div class="row">
		<div class="col-md-4 mb30">
			<div class="price-item-two">
				<div class="card text-center">
					<div class="card-header bg-image" style="background-image: url(../img/page/pricing-img-01.jpg)">
						<a href="">
							<h4>Boot Camp Body Blast</h4>
							<span>February 20, Mon: 7 am - 11 am</span>
						</a>
						<div class="card-price">
						  <a href=""><h2>$55 <span>Per Hour</span></h2></a>
					  </div>
					</div>

				  <div class="card-body">
					<p class="card-text">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud</p>
					<a href="#" class="btn btn-primary btn-rounded">Go somewhere</a>
				  </div>
				</div>
			</div>
		</div>
	</div>
How to use
  • Follow the code example to get the following style. You you want to customize the style you can add classes or modify the existing class property

Boot Camp Body Blast

February 20, Mon: 7 am - 11 am

$55 Per Hour

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud

Go somewhere

Boot Camp Body Blast

February 20, Mon: 7 am - 11 am

$55 Per Hour

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud

Go somewhere

Boot Camp Body Blast

February 20, Mon: 7 am - 11 am

$55 Per Hour

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud

Go somewhere 

	<div class="price-item-three">
		<div class="card pricing text-center">
			<h2>Economy</h2>
			<span>Plan Short Description</span>
			<div class="card-header text-center">
				<span class="price">75</span><span class="currency">USD/Year</span>
			</div>
			<div class="card-block">
				<ul class="list-group no-border text-center">
					<li class="list-group-item"><i class="fa fa-thumbs-up" aria-hidden="true"></i> Unlimited Storage</li>
					<li class="list-group-item"><i class="fa fa-globe" aria-hidden="true"></i> Unlimited Websites</li>
					<li class="list-group-item"><i class="fa fa-signal" aria-hidden="true"></i> Unlimited Bandwidth</li>
					<li class="list-group-item"><i class="fa fa-rocket" aria-hidden="true"></i> 4X Processing Power</li>
					<li class="list-group-item"><i class="fa fa-star" aria-hidden="true"></i> Premium DNS</li>
					<li class="list-group-item"><i class="fa fa-envelope" aria-hidden="true"></i>1000 Email Addresses</li>
				</ul>
				<a href="#" class="btn btn-primary btn-rounded">Get Started</a>
			</div>
		</div>
	</div>
How to use
  • Follow the code example to get the following style. You you want to customize the style you can add classes or modify the existing class property

Economy

Plan Short Description
75USD/Year
  • Unlimited Storage
  • Unlimited Websites
  • Unlimited Bandwidth
  • 4X Processing Power
  • Premium DNS
  • 1000 Email Addresses
Get Started

Deluxe

Plan Short Description
65USD/Year
  • Unlimited Storage
  • Unlimited Websites
  • Unlimited Bandwidth
  • 4X Processing Power
  • Premium DNS
  • 1000 Email Addresses
Get Started

Economy

Plan Short Description
55USD/Year
  • Unlimited Storage
  • Unlimited Websites
  • Unlimited Bandwidth
  • 4X Processing Power
  • Premium DNS
  • 1000 Email Addresses
Get Started 

	<div class="col-md-4 mb30">
		<div class="price-item-four">
			<div class="price-card ">
				<h2>Personal</h2>
				<p>The standard version</p>
				<p class="price"><span>49</span>USD/ Year</p>
				<ul class="pricing-offers">
					<li>6 Domain Names</li>
					<li>8 E-Mail Address</li>
					<li>10GB Disk Space</li>
					<li>Monthly Bandwidth</li>
					<li>Powerful Admin Panel</li>
				</ul>
				<a href="#" class="btn btn-primary btn-rounded">Buy Now</a>
			</div>
		</div>
	</div>
How to use
  • Follow the code example to get the following style. You you want to customize the style you can add classes or modify the existing class property

Personal

The standard version

49USD/ Year

  • 6 Domain Names
  • 8 E-Mail Address
  • 10GB Disk Space
  • Monthly Bandwidth
  • Powerful Admin Panel
Buy Now

Personal

The standard version

49USD/ Year

  • 6 Domain Names
  • 8 E-Mail Address
  • 10GB Disk Space
  • Monthly Bandwidth
  • Powerful Admin Panel
Buy Now

Personal

The standard version

49USD/ Year

  • 6 Domain Names
  • 8 E-Mail Address
  • 10GB Disk Space
  • Monthly Bandwidth
  • Powerful Admin Panel
Buy Now