86 lines
6.0 KiB
HTML
86 lines
6.0 KiB
HTML
<div class="container">
|
|
<div class="wrapper">
|
|
<div class="py-3 px-6 flex flex-column align-items-center justify-content-between relative">
|
|
<a routerLink="/home"><img src="../../../assets/images/header-logo.png" alt="Image" height="50" ></a>
|
|
<div class="px-4 py-8 md:px-6 lg:px-8 bg-no-repeat bg-cover" >
|
|
<div class="flex flex-wrap">
|
|
<div class="w-full lg:w-6 lg:pr-8">
|
|
<div class="text-900 font-bold text-6xl text-blue-900 mb-4">Pricing</div>
|
|
<div class="text-700 text-xl text-blue-600 line-height-3 mb-4 lg:mb-0">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velitnumquam eligendi quos.</div>
|
|
</div>
|
|
<div class="w-full md:w-6 lg:w-3">
|
|
<ul class="list-none p-0 m-0">
|
|
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
|
<i class="pi pi-check text-green-500 mr-3"></i>
|
|
<span>Arcu vitae elementum</span>
|
|
</li>
|
|
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
|
<i class="pi pi-check text-green-500 mr-3"></i>
|
|
<span>Dui faucibus in ornare</span>
|
|
</li>
|
|
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
|
<i class="pi pi-check text-green-500 mr-3"></i>
|
|
<span>Morbi tincidunt augue</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="w-full md:w-6 lg:w-3 md:pl-5">
|
|
<ul class="list-none p-0 m-0">
|
|
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
|
<i class="pi pi-check text-green-500 mr-3"></i>
|
|
<span>Duis ultricies lacus sed</span>
|
|
</li>
|
|
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
|
<i class="pi pi-check text-green-500 mr-3"></i>
|
|
<span>Imperdiet proin</span>
|
|
</li>
|
|
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
|
<i class="pi pi-check text-green-500 mr-3"></i>
|
|
<span>Nisi scelerisque</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap mt-5 -mx-3">
|
|
<div class="w-full lg:w-4 p-3">
|
|
<div class="shadow-2 p-3 h-full bg-primary" style="border-radius: 6px">
|
|
<div class="font-medium text-xl mb-5">Free Forever</div>
|
|
<div class="font-bold text-5xl mb-5">Free</div>
|
|
<button (click)="register()" type="button" pRipple class="font-medium appearance-none border-none p-2 surface-0 text-primary hover:surface-100 p-component lg:w-full border-rounded cursor-pointer transition-colors transition-duration-150" style="border-radius: 6px">
|
|
<span>Create Account</span>
|
|
</button>
|
|
<p class="text-sm line-height-3 mb-0 mt-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-4 p-3">
|
|
<div class="shadow-2 p-3 h-full surface-card" style="border-radius: 6px">
|
|
<div class="font-medium text-xl mb-5 text-900 ">Monthly</div>
|
|
<div class="flex align-items-center mb-5">
|
|
<span class="text-900 font-bold text-5xl">$29</span>
|
|
<span class="font-medium text-500 ml-2">per month</span>
|
|
</div>
|
|
<button (click)="register()" pButton pRipple label="Proceed Monthly" icon="pi pi-arrow-right" iconPos="right" class="lg:w-full font-medium p-2" style="border-radius: 6px"></button>
|
|
<p class="text-sm line-height-3 mb-0 mt-5">Nec ultrices dui sapien eget. Amet nulla facilisi morbi tempus.</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-4 p-3">
|
|
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
|
|
<div class="flex flex-row justify-content-between mb-5 align-items-center">
|
|
<div class="text-900 text-xl font-medium">Yearly</div>
|
|
<span class="bg-orange-100 500 text-orange-500 font-semibold px-2 py-1 border-round">🎉 Save 20%</span>
|
|
</div>
|
|
<div class="flex align-items-center mb-5">
|
|
<span class="text-900 font-bold text-5xl">$275</span>
|
|
<span class="font-medium text-500 ml-2">per year</span>
|
|
</div>
|
|
<button (click)="register()" pButton pRipple label="Proceed Yearly" icon="pi pi-arrow-right" iconPos="right" class="lg:w-full font-medium p-2" style="border-radius: 6px"></button>
|
|
<p class="text-sm line-height-3 mb-0 mt-5">Placerat in egestas erat imperdiet sed euismod nisi porta.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|