How to add Pricing Table Structure like in demo?

[keonthemes]

First of all, create a page for Pricing Table. To create a page follow the steps below:

1. Hover over the “Pages” menu
2. You will see “Add New” under “All Pages”
3. Click “Add New”
4. You will be redirected to new page from.
5. Add title on title section.
6. Copy below Pricing table Structure and paste in content editor.
7. You can edit the content as per your requirements.
8. Click Publish button to save changes.

<div class="masonry-grid">
	<article class="post-content">
		<div class="post-content-inner">
			<header class="post-title">
				<h3>PROFESSIONAL</h3>
				<div class="package">
					<span class="value">50</span><span class="type">GB</span>
					<p class="par">Ideal for one or several big projects</p>
				</div>
			</header>
			<div class="divider"></div>
			<div class="post-text">
				<div class="items">
					<ul>
						<li>1 Domain Name</li>
						<li>Full Access</li>
						<li>Life Time Licence</li>
						<li>Free Support</li>
					</ul>
				</div>
			</div>
			<div class="divider"></div>
			<div class="price">
				<span class="currency">$</span><span class="value">19</span><span class="type">/ month</span>
			</div>
			<div class="button-container">
				<a href="#" class="button-primary button-round">Sign Up Now</a>
			</div>
		</div>
	</article>
</div>
<div class="masonry-grid">
	<article class="post-content highlighted">
		<div class="post-content-inner">
			<div class="recomended"><span class="kfi kfi-star"><!-- icon --></span></div>
			<header class="post-title">
				<h3>PROFESSIONAL</h3>
				<div class="package">
					<span class="value">250</span><span class="type">GB</span>
					<p class="par">Ideal for one or several big projects</p>
				</div>
			</header>
			<div class="divider"></div>
			<div class="post-text">
				<div class="items">
					<ul>
						<li>5 Domain Name</li>
						<li>Full Access</li>
						<li>Life Time Licence</li>
						<li>Free Support</li>
					</ul>
				</div>
			</div>
			<div class="divider"></div>
			<div class="price">
				<span class="currency">$</span><span class="value">49</span><span class="type">/ month</span>
			</div>
			<div class="button-container">
				<a href="#" class="button-primary button-round">Sign Up Now</a>
			</div>
		</div>
	</article>
</div>
<div class="masonry-grid">
	<article class="post-content">
		<div class="post-content-inner">
			<header class="post-title">
				<h3>PROFESSIONAL</h3>
				<div class="package">
					<span class="value">500</span><span class="type">GB</span>
					<p class="par">Ideal for one or several big projects</p>
				</div>
			</header>
			<div class="divider"></div>
			<div class="post-text">
				<div class="items">
					<ul>
						<li>Unlimited Domain Name</li>
						<li>Full Access</li>
						<li>Life Time Licence</li>
						<li>Free Support</li>
					</ul>
				</div>
			</div>
			<div class="divider"></div>
			<div class="price">
				<span class="currency">$</span><span class="value">49</span><span class="type">/ month</span>
			</div>
			<div class="button-container">
				<a href="#" class="button-primary button-round">Sign Up Now</a>
			</div>
		</div>
	</article>
</div>

• This topic was modified 6 years, 9 months ago by keonthemes.

[Author]

Posts