mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-18 14:22:35 +00:00
321 lines
13 KiB
HTML
321 lines
13 KiB
HTML
<div id="price-tables" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
|
|
|
<!-- HEADER -->
|
|
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
|
<div fxLayout="column" fxLayoutAlign="center start">
|
|
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
|
<md-icon class="secondary-text s-16">home</md-icon>
|
|
<md-icon class="secondary-text s-16">chevron_right</md-icon>
|
|
<span class="secondary-text">Components</span>
|
|
</div>
|
|
<div class="h2 mt-16">Price Tables</div>
|
|
</div>
|
|
</div>
|
|
<!-- / HEADER -->
|
|
|
|
<!-- CONTENT -->
|
|
<div class="content p-24" fxLayout="column">
|
|
|
|
<!-- STYLE 1 -->
|
|
<div fxLayout="column" fxFlex="1 0 auto">
|
|
|
|
<div class="mat-title">Style 1</div>
|
|
|
|
<div class="price-tables" fxLayout="row" fxLayoutWrap>
|
|
<div class="price-table style-1 mat-elevation-z1" fxLayout="column">
|
|
<div class="package-type md-primary-bg">
|
|
<span>BASIC</span>
|
|
</div>
|
|
|
|
<div class="price" fxLayout="row" fxLayoutAlign="center start">
|
|
<div class="currency">$</div>
|
|
<div fxLayout="row" fxLayoutAlign="center end">
|
|
<div class="value">4</div>
|
|
<div class="period">/ month</div>
|
|
</div>
|
|
</div>
|
|
|
|
<md-divider></md-divider>
|
|
|
|
<div class="terms" fxLayout="column">
|
|
<div class="term">
|
|
<span class="text-bold">10</span>
|
|
Projects
|
|
</div>
|
|
<div class="term">
|
|
<span class="text-bold">10</span>
|
|
Pages
|
|
</div>
|
|
<div class="term">
|
|
<span class="text-bold">100</span>
|
|
Mb Disk Space
|
|
</div>
|
|
</div>
|
|
|
|
<button md-raised-button class="cta-button" color="accent">BUY NOW</button>
|
|
</div>
|
|
|
|
<div class="price-table style-1 mat-elevation-z8" fxLayout="column">
|
|
<div class="package-type md-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
|
|
<span>STANDARD</span>
|
|
<span class="sale md-accent-color md-hue-1">Save 15%</span>
|
|
</div>
|
|
|
|
<div class="price" fxLayout="row" fxLayoutAlign="center start">
|
|
<div class="currency">$</div>
|
|
<div fxLayout="row" fxLayoutAlign="center end">
|
|
<div class="value">8</div>
|
|
<div class="period">/ month</div>
|
|
</div>
|
|
</div>
|
|
|
|
<md-divider></md-divider>
|
|
|
|
<div class="terms" fxLayout="column">
|
|
<div class="term">
|
|
<span class="text-bold">20</span>
|
|
Projects
|
|
</div>
|
|
<div class="term">
|
|
<span class="text-bold">20</span>
|
|
Pages
|
|
</div>
|
|
<div class="term">
|
|
<span class="text-bold">200</span>
|
|
Mb Disk Space
|
|
</div>
|
|
</div>
|
|
|
|
<button md-raised-button class="cta-button" color="accent">BUY NOW</button>
|
|
</div>
|
|
|
|
<div class="price-table style-1 mat-elevation-z1" fxLayout="column">
|
|
<div class="package-type md-primary-bg" fxLayout="row">
|
|
<span>ADVANCED</span>
|
|
</div>
|
|
|
|
<div class="price" fxLayout="row" fxLayoutAlign="center start">
|
|
<div class="currency">$</div>
|
|
<div fxLayout="row" fxLayoutAlign="center end">
|
|
<div class="value">12</div>
|
|
<div class="period">/ month</div>
|
|
</div>
|
|
</div>
|
|
|
|
<md-divider></md-divider>
|
|
|
|
<div class="terms" fxLayout="column">
|
|
<div class="term">
|
|
<span class="text-bold">40</span>
|
|
Projects
|
|
</div>
|
|
<div class="term">
|
|
<span class="text-bold">40</span>
|
|
Pages
|
|
</div>
|
|
<div class="term">
|
|
<span class="text-bold">500</span>
|
|
Mb Disk Space
|
|
</div>
|
|
</div>
|
|
|
|
<button md-raised-button class="cta-button" color="accent">BUY NOW</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / STYLE 1 -->
|
|
|
|
<!-- STYLE 2 -->
|
|
<div fxLayout="column" fxFlex="1 0 auto" class="mt-48">
|
|
|
|
<div class="mat-title">Style 2</div>
|
|
|
|
<div class="price-tables" fxLayout="row" fxLayoutWrap>
|
|
<div class="price-table style-2 mat-elevation-z1" fxLayout="column">
|
|
<div class="package-type md-accent-fg">SILVER PACKAGE</div>
|
|
|
|
<div class="price" fxLayout="row" fxLayoutAlign="center start">
|
|
<div class="currency">$</div>
|
|
<div class="value">99</div>
|
|
</div>
|
|
|
|
<div class="period">PER MONTH</div>
|
|
|
|
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
|
|
<div class="term">
|
|
<span class="text-bold">10</span>
|
|
Projects
|
|
</div>
|
|
<div class="term">
|
|
<span class="text-bold">10</span>
|
|
Pages
|
|
</div>
|
|
<div class="term">
|
|
<span class="text-bold">100</span>
|
|
Mb Disk Space
|
|
</div>
|
|
</div>
|
|
|
|
<button md-raised-button class="cta-button" color="accent">GET STARTED</button>
|
|
</div>
|
|
|
|
<div class="price-table style-2 mat-elevation-z8" fxLayout="column">
|
|
<div class="badge md-warn-bg">BEST VALUE</div>
|
|
|
|
<div class="package-type md-accent-fg">GOLD PACKAGE</div>
|
|
|
|
<div class="price" fxLayout="row" fxLayoutAlign="center start">
|
|
<div class="currency">$</div>
|
|
<div class="value">299</div>
|
|
</div>
|
|
|
|
<div class="period">PER MONTH</div>
|
|
|
|
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
|
|
<div class="term">
|
|
<span class="text-bold">20</span>
|
|
Projects
|
|
</div>
|
|
<div class="term">
|
|
<span class="text-bold">20</span>
|
|
Pages
|
|
</div>
|
|
<div class="term">
|
|
<span class="text-bold">200</span>
|
|
Mb Disk Space
|
|
</div>
|
|
</div>
|
|
|
|
<button md-raised-button class="cta-button" color="accent">GET STARTED</button>
|
|
</div>
|
|
|
|
<div class="price-table style-2 mat-elevation-z1" fxLayout="column">
|
|
<div class="package-type md-accent-fg">PLATINUM PACKAGE</div>
|
|
|
|
<div class="price" fxLayout="row" fxLayoutAlign="center start">
|
|
<div class="currency">$</div>
|
|
<div class="value">499</div>
|
|
</div>
|
|
|
|
<div class="period">PER MONTH</div>
|
|
|
|
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
|
|
<div class="term">
|
|
<span class="text-bold">40</span>
|
|
Projects
|
|
</div>
|
|
<div class="term">
|
|
<span class="text-bold">40</span>
|
|
Pages
|
|
</div>
|
|
<div class="term">
|
|
<span class="text-bold">500</span>
|
|
Mb Disk Space
|
|
</div>
|
|
</div>
|
|
|
|
<button md-raised-button class="cta-button" color="accent">GET STARTED</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / STYLE 2 -->
|
|
|
|
<!-- STYLE 3 -->
|
|
<div fxLayout="column" fxFlex="1 0 auto" class="mt-48">
|
|
|
|
<div class="mat-title">Style 3</div>
|
|
|
|
<div class="price-tables" fxLayout="row" fxLayoutAlign="start start" fxLayoutWrap>
|
|
<div class="price-table style-3 mat-elevation-z1" fxLayout="column">
|
|
<div class="package-type">
|
|
<div class="title">Starter</div>
|
|
<div class="subtitle">For small teams</div>
|
|
</div>
|
|
|
|
<div class="price md-primary-300-bg" fxLayout="row" fxLayoutAlign="center start">
|
|
<div class="currency">$</div>
|
|
<div fxLayout="row" fxLayoutAlign="center end">
|
|
<div class="value">29</div>
|
|
<div class="period">monthly per user</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
|
|
<div class="term">Unlimited projects</div>
|
|
<div class="term">Unlimited pages</div>
|
|
<div class="term">Unlimited disk space</div>
|
|
<div class="term">24 / 7 Free support</div>
|
|
</div>
|
|
|
|
<button md-raised-button class="cta-button" color="accent">GET STARTED FREE</button>
|
|
|
|
<div class="note">7 day free trial to start</div>
|
|
</div>
|
|
|
|
<div class="price-table style-3 mat-elevation-z8" fxLayout="column">
|
|
<div class="package-type">
|
|
<div class="title">Pro</div>
|
|
<div class="subtitle">For larger teams</div>
|
|
</div>
|
|
|
|
<div class="price md-primary-bg" fxLayout="row" fxLayoutAlign="center start">
|
|
<div class="currency">$</div>
|
|
<div fxLayout="row" fxLayoutAlign="center end">
|
|
<div class="value">59</div>
|
|
<div class="period">monthly per user</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
|
|
<div class="term">Unlimited projects</div>
|
|
<div class="term">Unlimited pages</div>
|
|
<div class="term">Unlimited disk space</div>
|
|
<div class="term">24 / 7 Free support</div>
|
|
<div class="term md-warn-fg">Advanced reporting</div>
|
|
<div class="term md-warn-fg">Customizable interface</div>
|
|
<div class="term md-warn-fg">CRM Integration</div>
|
|
</div>
|
|
|
|
<button md-raised-button class="cta-button" color="accent">GET STARTED FREE</button>
|
|
|
|
<div class="note">30 day free trial to start</div>
|
|
</div>
|
|
|
|
<div class="price-table style-3 mat-elevation-z1" fxLayout="column">
|
|
<div class="package-type">
|
|
<div class="title">Enterprise</div>
|
|
<div class="subtitle">For big teams</div>
|
|
</div>
|
|
|
|
<div class="price md-primary-300-bg" fxLayout="row" fxLayoutAlign="center start">
|
|
<div class="currency">$</div>
|
|
<div fxLayout="row" fxLayoutAlign="center end">
|
|
<div class="value">99</div>
|
|
<div class="period">monthly per user</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
|
|
<div class="term">Unlimited projects</div>
|
|
<div class="term">Unlimited pages</div>
|
|
<div class="term">Unlimited disk space</div>
|
|
<div class="term">For full feature list, call us</div>
|
|
</div>
|
|
|
|
<button md-raised-button class="cta-button" color="accent">CALL US</button>
|
|
|
|
<div class="note">90 day free trial to start</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / STYLE 3 -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|