f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix alignment, placement and responsive

Browse Source
This commit is contained in:
Çetin 2022-01-10 21:32:44 +03:00
parent fc77e15f52
commit b56e23ca7a
2 changed files with 91 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/app/components/landing/landing.component.html
View File

@ -1,4 +1,4 @@
<div class="surface-card"> <div class="surface-card overflow-hidden">
<div class="py-4 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"> <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 font-medium text-2xl line-height-3 mr-8">SAKAI</span> <img src="assets/layout/images/logo-blue.svg" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2"><span class="text-gray-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span>
@ -37,29 +37,29 @@
</div> </div>
<div class="grid py-4 px-4 lg:px-8 relative" id="hero"> <div class="grid py-4 px-4 lg:px-8 relative" id="hero">
<div class="w-100 md:w-5 mx-4 md:mx-8 mt-0 md:mt-4"> <div class="mx-4 md:mx-8 mt-0 md:mt-4">
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1> <h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700" style="max-width:450px;">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat... </p> <p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat... </p>
<button pButton pRipple type="button" label="Get Started" class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal line-height-3 px-3"></button> <button pButton pRipple type="button" label="Get Started" class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal line-height-3 px-3"></button>
</div> </div>
<img src="assets/layout/images/screen-1.png" alt="" class="static sm:mt-5 md:mt-0 md:absolute" style="right:10%;"> <img src="assets/layout/images/screen-1.png" alt="" class="sm:mt-5 md:mt-0" style="right:10%;">
</div> </div>
<div class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8"> <div class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
<div class="grid justify-content-center"> <div class="grid justify-content-center">
<div class="col-12 text-center mt-8 mb-4"> <div class="col-12 text-center mt-8 mb-4">
<h2 class="text-gray-900">Marvelous Features</h2> <h2 class="text-gray-900 font-normal mb-2">Marvelous Features</h2>
<span class="text-gray-600 text-2xl">Placerat in egestas erat...</span> <span class="text-gray-600 text-2xl">Placerat in egestas erat...</span>
</div> </div>
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5 mt-4 md:mt-0"> <div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5 mt-4 md:mt-0">
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2));"> <div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2));">
<div class="p-3 surface-card" style="border-radius:8px;"> <div class="p-3 surface-card" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-yellow-200" style="width:3.5rem;height:3.5rem; border-radius:10px;"> <div class="flex align-items-center justify-content-center bg-yellow-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i> <i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
</div> </div>
<h5 class="line-height-2">Easy to Use</h5> <h5 class="mb-2 text-gray-900">Easy to Use</h5>
<span class="line-height-1 gray-600">Posuere morbi leo urna molestie.</span> <span class="text-gray-600">Posuere morbi leo urna molestie.</span>
</div> </div>
</div> </div>
</div> </div>
@ -67,11 +67,11 @@
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5 mt-4 md:mt-0"> <div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5 mt-4 md:mt-0">
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145,226,237,0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2));"> <div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145,226,237,0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2));">
<div class="p-3 surface-card" style="border-radius:8px;"> <div class="p-3 surface-card" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-cyan-200" style="width:3.5rem;height:3.5rem; border-radius:10px;"> <div class="flex align-items-center justify-content-center bg-cyan-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i> <i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
</div> </div>
<h5 class="line-height-2 text-gray-900">Fresh Design</h5> <h5 class="mb-2 text-gray-900">Fresh Design</h5>
<span class="line-height-1 text-gray-600">Semper risus in hendrerit.</span> <span class="text-gray-600">Semper risus in hendrerit.</span>
</div> </div>
</div> </div>
</div> </div>
@ -82,8 +82,8 @@
<div class="flex align-items-center justify-content-center bg-indigo-200" style="width:3.5rem;height:3.5rem; border-radius:10px;"> <div class="flex align-items-center justify-content-center bg-indigo-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i> <i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
</div> </div>
<h5 class="line-height-2 text-gray-900">Well Documented</h5> <h5 class="mb-2 text-gray-900">Well Documented</h5>
<span class="line-height-1 text-gray-600">Non arcu risus quis varius quam quisque.</span> <span class="text-gray-600">Non arcu risus quis varius quam quisque.</span>
</div> </div>
</div> </div>
</div> </div>
@ -91,11 +91,11 @@
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5 mt-4 md:mt-0"> <div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5 mt-4 md:mt-0">
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(145, 210, 204, 0.2));"> <div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(145, 210, 204, 0.2));">
<div class="p-3 surface-card" style="border-radius:8px;"> <div class="p-3 surface-card" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-bluegray-200" style="width:3.5rem;height:3.5rem; border-radius:10px;"> <div class="flex align-items-center justify-content-center bg-bluegray-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i> <i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
</div> </div>
<h5 class="line-height-2 text-gray-900">Responsive Layout</h5> <h5 class="mb-2 text-gray-900">Responsive Layout</h5>
<span class="line-height-1 text-gray-600">Nulla malesuada pellentesque elit.</span> <span class="text-gray-600">Nulla malesuada pellentesque elit.</span>
</div> </div>
</div> </div>
</div> </div>
@ -103,11 +103,11 @@
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5 mt-4 md:mt-0"> <div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5 mt-4 md:mt-0">
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2),rgba(160, 210, 250, 0.2));"> <div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2),rgba(160, 210, 250, 0.2));">
<div class="p-3 surface-card" style="border-radius:8px;"> <div class="p-3 surface-card" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-orange-200" style="width:3.5rem;height:3.5rem; border-radius:10px;"> <div class="flex align-items-center justify-content-center bg-orange-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i> <i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
</div> </div>
<h5 class="line-height-2 text-gray-900">Clean Code</h5> <h5 class="mb-2 text-gray-900">Clean Code</h5>
<span class="line-height-1 text-gray-600">Condimentum lacinia quis vel eros.</span> <span class="text-gray-600">Condimentum lacinia quis vel eros.</span>
</div> </div>
</div> </div>
</div> </div>
@ -115,11 +115,11 @@
<div class="col-12 md:col-6 lg:col-4 p-0 md:pb-5 mt-4 md:mt-0"> <div class="col-12 md:col-6 lg:col-4 p-0 md:pb-5 mt-4 md:mt-0">
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2));"> <div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2));">
<div class="p-3 surface-card" style="border-radius:8px;"> <div class="p-3 surface-card" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-pink-200" style="width:3.5rem;height:3.5rem; border-radius:10px;"> <div class="flex align-items-center justify-content-center bg-pink-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i> <i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
</div> </div>
<h5 class="line-height-2 text-gray-900">Dark Mode</h5> <h5 class="mb-2 text-gray-900">Dark Mode</h5>
<span class="line-height-1 text-gray-600">Convallis tellus id interdum velit laoreet.</span> <span class="text-gray-600">Convallis tellus id interdum velit laoreet.</span>
</div> </div>
</div> </div>
</div> </div>
@ -127,11 +127,11 @@
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 mt-4 md:mt-0"> <div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 mt-4 md:mt-0">
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2));"> <div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2));">
<div class="p-3 surface-card" style="border-radius:8px;"> <div class="p-3 surface-card" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-teal-200" style="width:3.5rem;height:3.5rem; border-radius:10px;"> <div class="flex align-items-center justify-content-center bg-teal-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i> <i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
</div> </div>
<h5 class="line-height-2 text-gray-900">Ready to Use</h5> <h5 class="mb-2 text-gray-900">Ready to Use</h5>
<span class="line-height-1 text-gray-600">Mauris sit amet massa vitae.</span> <span class="text-gray-600">Mauris sit amet massa vitae.</span>
</div> </div>
</div> </div>
</div> </div>
@ -139,11 +139,11 @@
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 mt-4 md:mt-0"> <div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 mt-4 md:mt-0">
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2));"> <div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2));">
<div class="p-3 surface-card" style="border-radius:8px;"> <div class="p-3 surface-card" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-blue-200" style="width:3.5rem;height:3.5rem; border-radius:10px;"> <div class="flex align-items-center justify-content-center bg-blue-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i> <i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
</div> </div>
<h5 class="line-height-2 text-gray-900">Modern Practices</h5> <h5 class="mb-2 text-gray-900">Modern Practices</h5>
<span class="line-height-1 text-gray-600">Elementum nibh tellus molestie nunc non.</span> <span class="text-gray-600">Elementum nibh tellus molestie nunc non.</span>
</div> </div>
</div> </div>
</div> </div>
@ -151,20 +151,20 @@
<div class="col-12 md:col-6 lg:col-4 p-0 mt-4 md:mt-0"> <div class="col-12 md:col-6 lg:col-4 p-0 mt-4 md:mt-0">
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2));"> <div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2));">
<div class="p-3 surface-card" style="border-radius:8px;"> <div class="p-3 surface-card" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-purple-200" style="width:3.5rem;height:3.5rem; border-radius:10px;"> <div class="flex align-items-center justify-content-center bg-purple-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i> <i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
</div> </div>
<h5 class="line-height-2 text-gray-900">Privacy</h5> <h5 class="mb-2 text-gray-900">Privacy</h5>
<span class="line-height-1 text-gray-600">Neque egestas congue quisque.</span> <span class="text-gray-600">Neque egestas congue quisque.</span>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 mt-8 mb-8 p-2 md:p-8" style="border-radius:20px; background:linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EFE1AF 0%, #C3DCFA 100%);"> <div class="col-12 mt-8 mb-8 p-2 md:p-8" style="border-radius:20px; background:linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EFE1AF 0%, #C3DCFA 100%);">
<div class="flex flex-column justify-content-center align-items-center text-center py-3 px-3"> <div class="flex flex-column justify-content-center align-items-center text-center px-3 py-3 md:py-0">
<h3 class="text-gray-900">Joséphine Miller</h3> <h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
<span class="text-gray-600 text-2xl">Peak Interactive</span> <span class="text-gray-600 text-2xl">Peak Interactive</span>
<p class="text-gray-900 line-height-2 md:line-height-4 text-2xl mt-4" style="max-width:800px;">“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”</p> <p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4" style="max-width:800px;">“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”</p>
<img src="assets/layout/images/peak-logo.svg" class="mt-4" alt=""> <img src="assets/layout/images/peak-logo.svg" class="mt-4" alt="">
</div> </div>
@ -174,31 +174,31 @@
<div class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8"> <div class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
<div class="text-center"> <div class="text-center">
<h2 class="text-gray-900">Powerful Everywhere</h2> <h2 class="text-gray-900 font-normal mb-2">Powerful Everywhere</h2>
<span class="text-gray-600 text-2xl">Amet consectetur adipiscing elit...</span> <span class="text-gray-600 text-2xl">Amet consectetur adipiscing elit...</span>
</div> </div>
<div class="grid mt-8 pb-2 md:pb-8 justify-content-between"> <div class="grid mt-8 pb-2 md:pb-8">
<div class="flex justify-content-center flex-order-1 sm:flex-order-2 col-12 sm:col-6 bg-purple-100 p-0" style="border-radius:8px;"> <div class="flex justify-content-center col-12 sm:col-6 bg-purple-100 p-0 flex-order-1 md:flex-order-0" style="border-radius:8px;">
<img src="assets/layout/images/mockup.png" class="w-11" alt="mockup mobile"> <img src="assets/layout/images/mockup.png" class="w-11" alt="mockup mobile">
</div> </div>
<div class="col-12 md:col-4 my-auto flex flex-column md:align-items-end md:text-right"> <div class="col-12 md:col-6 my-auto flex flex-column md:align-items-end md:text-right ">
<div class="flex align-items-center justify-content-center bg-purple-200" style="width:3.5rem; height:3.5rem; border-radius: 10px;"> <div class="flex align-items-center justify-content-center bg-purple-200" style="width:4.2rem; height:4.2rem; border-radius: 10px;">
<i class="pi pi-fw pi-mobile text-2xl text-purple-700"></i> <i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
</div> </div>
<h2 class="line-height-1 text-gray-900 text-4xl">Congue Quisque Egestas</h2> <h2 class="line-height-1 text-gray-900 text-4xl font-normal">Congue Quisque Egestas</h2>
<span class="text-gray-700 text-2xl line-height-3">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> <span class="text-gray-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width:650px;">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>
</div> </div>
<div class="grid my-8 pt-2 md:pt-8 justify-content-between"> <div class="grid my-8 pt-2 md:pt-8">
<div class="col-12 md:col-4 my-auto flex flex-column align-items-start"> <div class="col-12 md:col-6 my-auto flex flex-column align-items-start">
<div class="flex align-items-center justify-content-center bg-yellow-200" style="width:3.5rem; height:3.5rem; border-radius:10px;"> <div class="flex align-items-center justify-content-center bg-yellow-200" style="width:4.2rem; height:4.2rem; border-radius:10px;">
<i class="pi pi-fw pi-desktop text-2xl text-yellow-700"></i> <i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
</div> </div>
<h2 class="line-height-1 text-gray-900 text-4xl">Congue Quisque Egestas</h2> <h2 class="line-height-1 text-gray-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
<span class="text-gray-700 line-height-3 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> <span class="text-gray-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width:650px;">Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span>
</div> </div>
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 sm:col-6 bg-yellow-100 p-0" style="border-radius:8px;"> <div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 sm:col-6 bg-yellow-100 p-0" style="border-radius:8px;">
@ -207,9 +207,9 @@
</div> </div>
</div> </div>
<div class="py-4 px-4 lg:px-8 my-2 md:my-8"> <div class="py-4 px-4 lg:px-8 my-2 md:my-4">
<div class="text-center mb-6"> <div class="text-center mb-3">
<h2 class="text-gray-900">Matchless Pricing</h2> <h2 class="text-gray-900 font-normal mb-2">Matchless Pricing</h2>
<span class="text-gray-600 text-2xl">Amet consectetur adipiscing elit...</span> <span class="text-gray-600 text-2xl">Amet consectetur adipiscing elit...</span>
</div> </div>
@ -278,11 +278,11 @@
</div> </div>
<div class="col-12 md:col-6 lg:col-4 p-0 md:p-5 mt-4 md:mt-0"> <div class="col-12 md:col-6 lg:col-4 p-0 md:p-5 mt-4 md:mt-0">
<div class="p-3 flex flex-column border-200" style="border:2px solid; border-radius:10px;"> <div class="p-3 flex flex-column border-cyan-200" style="border:2px solid; border-radius:10px;">
<h3 class="text-gray-900 text-center">Free</h3> <h3 class="text-gray-900 text-center">Free</h3>
<img src="assets/layout/images/free.png" class="w-10 h-10 mx-auto" alt=""> <img src="assets/layout/images/free.png" class="w-10 h-10 mx-auto" alt="">
<div class="my-5 text-center"> <div class="my-5 text-center">
<span class="text-5xl font-bold mr-2 text-gray-900">$0</span> <span class="text-5xl font-bold mr-2 text-gray-900">$999</span>
<span class="text-gray-600">per month</span> <span class="text-gray-600">per month</span>
<button pButton pRipple label="Get a Quote" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500"></button> <button pButton pRipple label="Get a Quote" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500"></button>
</div> </div>

39
src/app/components/landing/landing.component.ts
View File

@ -9,13 +9,50 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
overflow:hidden; overflow:hidden;
} }
@media (min-width: 768px) { @media screen and (min-width: 768px) {
#hero{ #hero{
-webkit-clip-path: ellipse(150% 87% at 93% 13%); -webkit-clip-path: ellipse(150% 87% at 93% 13%);
clip-path: ellipse(150% 87% at 93% 13%); clip-path: ellipse(150% 87% at 93% 13%);
height: 430px; height: 430px;
} }
} }
@media screen and (max-width: 1300px){
#hero > img {
transform: scale(0.85);
top:10%;
}
}
@media screen and (min-width: 1260px){
#hero > img {
position: absolute;
}
#hero > div > p {
max-width: 450px;
}
}
@media screen and (max-width: 1260px){
#hero {
height: 600px;
}
#hero > img {
position:static;
transform: scale(1);
margin-left: auto;
}
#hero > div {
width: 100%;
}
#hero > div > p {
width: 100%;
}
}
`] `]
}) })
export class LandingComponent implements OnInit { export class LandingComponent implements OnInit {