ahasani/psp_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update cards

Browse Source
This commit is contained in:
Çetin
2022-01-07 15:42:18 +03:00
parent e20ce76b28
commit 9d3fbd117e
4 changed files with 65 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/landing/landing.component.html
+35 -27
View File
@@ -1,5 +1,5 @@
<div class="surface-card">
<div class="py-5 px-4 mx-0 md:mx-8 md:px-8 flex align-items-center justify-content-between relative lg:static">
<div class="py-4 px-4 mx-0 md:mx-8 md:px-8 flex align-items-center justify-content-between relative lg:static">
<a class="flex align-items-center">
<img src="assets/layout/images/logo-blue.svg" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2"><span class="text-gray-900 text-2xl line-height-3 mr-8">SAKAI</span>
</a>
@@ -54,42 +54,50 @@
</div>
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5">
<div class="shadow-1 p-3 border-round">
<div class="flex align-items-center justify-content-center bg-yellow-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
<div class="box-wrapper border-10 gradient-yellow">
<div class="p-3 border-10 surface-card">
<div class="flex align-items-center justify-content-center bg-yellow-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
</div>
<h5 class="line-height-2">Easy to Use</h5>
<span class="line-height-1 gray-600">Posuere morbi leo urna molestie.</span>
</div>
<h5 class="line-height-2">Easy to Use</h5>
<span class="line-height-1 gray-600">Posuere morbi leo urna molestie.</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5">
<div class="shadow-1 p-3 border-round">
<div class="flex align-items-center justify-content-center bg-cyan-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
<div class="box-wrapper border-10 gradient-blue">
<div class="p-3 border-10 surface-card">
<div class="flex align-items-center justify-content-center bg-cyan-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
</div>
<h5 class="line-height-2 text-gray-900">Fresh Design</h5>
<span class="line-height-1 text-gray-600">Semper risus in hendrerit.</span>
</div>
<h5 class="line-height-1 text-gray-900">Fresh Design</h5>
<span class="line-height-1 text-gray-600">Semper risus in hendrerit.</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-4 p-0 md:pb-5">
<div class="shadow-1 p-3 border-round bg-1">
<div class="flex align-items-center justify-content-center bg-indigo-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
<div class="box-wrapper border-10 gradient-purple">
<div class="p-3 border-10 surface-card">
<div class="flex align-items-center justify-content-center bg-indigo-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
</div>
<h5 class="line-height-2 text-gray-900">Well Documented</h5>
<span class="line-height-1 text-gray-600">Non arcu risus quis varius quam quisque.</span>
</div>
<h5 class="line-height-1 text-gray-900">Well Documented</h5>
<span class="line-height-1 text-gray-600">Non arcu risus quis varius quam quisque.</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5">
<div class="shadow-1 p-3 border-round">
<div class="flex align-items-center justify-content-center bg-bluegray-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
<div class="box-wrapper border-10 gradient-yellow-2">
<div class="p-3 border-10 surface-card">
<div class="flex align-items-center justify-content-center bg-bluegray-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
</div>
<h5 class="line-height-2 text-gray-900">Responsive Layout</h5>
<span class="line-height-1 text-gray-600">Nulla malesuada pellentesque elit.</span>
</div>
<h5 class="line-height-1 text-gray-900">Responsive Layout</h5>
<span class="line-height-1 text-gray-600">Nulla malesuada pellentesque elit.</span>
</div>
</div>
@@ -167,9 +175,9 @@
<span class="text-gray-600 text-2xl">Amet consectetur adipiscing elit...</span>
</div>
<div class="grid mt-8 pb-8 justify-content-evenly">
<div class="flex justify-content-center col-12 sm:col-6 xl:col-4 border-round bg-purple-100 p-0">
<img src="assets/layout/images/mockup.png" alt="mockup mobile">
<div class="grid mt-8 pb-8 justify-content-between">
<div class="flex justify-content-center col-12 sm:col-6 border-round bg-purple-100 p-0">
<img src="assets/layout/images/mockup.png" class="w-11" alt="mockup mobile">
</div>
<div class="col-12 md:col-4 my-auto flex flex-column align-items-end text-right">
@@ -181,7 +189,7 @@
</div>
</div>
<div class="grid my-8 pt-8 justify-content-evenly">
<div class="grid my-8 pt-8 justify-content-between">
<div class="col-12 md:col-4 my-auto flex flex-column align-items-start">
<div class="flex align-items-center justify-content-center bg-yellow-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-desktop text-2xl text-yellow-700"></i>
@@ -190,8 +198,8 @@
<span class="line-height-4 text-gray-700 text-2xl">Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
</div>
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 sm:col-6 xl:col-4 border-round bg-yellow-100 p-0">
<img src="assets/layout/images/mockup-desktop.png" alt="mockup">
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 sm:col-6 border-round bg-yellow-100 p-0">
<img src="assets/layout/images/mockup-desktop.png" class="w-11" alt="mockup">
</div>
</div>
</div>