Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 00:49:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 106

Update pricing page styles (#2600)

Browse source 
* adjust pricing columns and padding

* Update pricing.ejs
This commit is contained in:
eashaw 2021-10-21 23:46:44 -05:00 committed by GitHub
parent c84cbb1679
commit 80454f19c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 88 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

176
website/views/pages/pricing.ejs vendored
View file

@ -2,16 +2,16 @@
<div class="pb-5">
<div
style="max-width: 1260px"
class="container-fluid pt-5 px-4 mx-auto"
class="container-fluid pt-5 px-2 px-sm-4 mx-auto"
>
<section id="pricing-section" class="container-fluid d-flex flex-column justify-content-center pt-5 mx-auto">
<section id="pricing-section" class="container-fluid px-1 d-flex flex-column justify-content-center pt-5 mx-auto">
<h1 class="text-center">Choose your plan</h1>
<p class="text-center mb-5">
Choose the right plan for where your organization is at today.
</p>
<div class="d-flex justify-content-center p-0">
<div class="container-fluid d-flex flex-wrap justify-content-center p-0">
<div style="max-width: 384px; min-width: 330px;" class="w-100 mx-3">
<div style="max-width: 384px;" class="w-100 mx-md-3 mx-0">
<div style="border-radius: 15px" class="card mb-4">
<div class="card-body">
<div style="min-height: 125px" class="text-center mt-4">
@ -71,7 +71,7 @@
</div>
</div>
</div>
<div style="max-width: 384px; min-width: 330px;" class="w-100 mx-3">
<div style="max-width: 384px;" class="w-100 mx-0 mx-md-3">
<div style="border-radius: 15px" class="card mb-4">
<div class="card-body">
<div style="min-height: 125px" class="text-center mt-4">
@ -142,24 +142,24 @@
<div class="container-fluid d-flex flex-column flex-sm-row flex-wrap justify-content-center p-0">
<div style="max-width: 810px" class="w-100 px-1" >
<div style="border-radius: 15px" class="card mb-4">
<div class="card-body py-md-5 pl-4 px-md-5">
<div class="card-body py-md-5 pl-3 pr-2 px-md-5">
<div class="row mb-4">
<div class="col-8">
<div class="col-7">
<p class="m-0" style="color: #8b8fa2">SUPPORT</p>
</div>
<div class="col-2 m-0 px-0 px-sm-1 px-md-2">
<div class="col-2 m-0 px-0 px-md-2">
<p class="text-center" style="font-weight: bold; font-size: 15px">
<span class="d-none d-md-inline">Fleet </span>Free
</p>
</div>
<div class="col-2 m-0 px-0 px-sm-1 px-md-2 ">
<div class="col-3 m-0 pr-2 px-0 px-md-2 ">
<p class="text-center" style="font-weight: bold; font-size: 15px">
<span class="d-none d-md-inline">Fleet </span>Premium
</p>
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -175,7 +175,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -185,7 +185,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -201,7 +201,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -211,7 +211,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -220,7 +220,7 @@
<p class="ml-2 my-0">Unlimited email support (confidential)</p>
</div>
<div class="col-2"></div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -230,7 +230,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -239,7 +239,7 @@
<p class="ml-2 my-0">Phone and video call support</p>
</div>
<div class="col-2"></div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -249,16 +249,16 @@
</div>
</div>
<div class="row mb-4 mt-5">
<div class="col-8">
<div class="col-10 col-sm-8">
<p class="m-0" style="color: #8b8fa2">
INVENTORY MANAGEMENT
</p>
</div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-1 col-sm-2"></div>
<div class="col-1 col-sm-2"></div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -274,7 +274,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -284,7 +284,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -300,7 +300,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -310,7 +310,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -326,7 +326,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -336,7 +336,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -352,7 +352,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -362,7 +362,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -380,7 +380,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -390,7 +390,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -401,7 +401,7 @@
</p>
</div>
<div class="col-2"></div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -411,7 +411,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -422,7 +422,7 @@
</p>
</div>
<div class="col-2"></div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -436,10 +436,10 @@
<p class="m-0" style="color: #8b8fa2">COLLABORATION</p>
</div>
<div class="col-1 col-sm-2"></div>
<div class="col-1 col-sm-2"></div>
<div class="col-1 col-sm-3"></div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -455,7 +455,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -465,7 +465,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -481,7 +481,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -491,7 +491,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -507,7 +507,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -517,7 +517,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -533,7 +533,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -543,7 +543,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -552,7 +552,7 @@
<p class="ml-2 my-0">Multiple teams</p>
</div>
<div class="col-2"></div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -562,7 +562,7 @@
</div>
</div>
<div class="row mb-4 mt-5">
<div class="col-8 pr-0 pr-md-2">
<div class="col-7 pr-0 pr-md-2">
<p class="m-0" style="color: #8b8fa2">
SECURITY AND COMPLIANCE
</p>
@ -571,7 +571,7 @@
<div class="col-2"></div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -587,7 +587,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -597,7 +597,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -613,7 +613,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -623,7 +623,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -641,7 +641,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -651,7 +651,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -667,7 +667,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -677,14 +677,14 @@
</div>
</div>
<div class="row mb-4 mt-5">
<div class="col-8 pr-0 pr-md-2">
<div class="col-7 pr-0 pr-md-2">
<p class="m-0" style="color: #8b8fa2">MONITORING</p>
</div>
<div class="col-2"></div>
<div class="col-2"></div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -700,7 +700,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -710,7 +710,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -728,7 +728,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -738,7 +738,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -754,7 +754,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -764,7 +764,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -780,7 +780,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -790,7 +790,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -808,7 +808,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -818,7 +818,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -827,7 +827,7 @@
<p class="ml-2 my-0">Self-remediation*†</p>
</div>
<div class="col-2"></div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -837,14 +837,14 @@
</div>
</div>
<div class="row mb-4 mt-5">
<div class="col-8">
<div class="col-7">
<p class="m-0" style="color: #8b8fa2">DATA OUTPUTS</p>
</div>
<div class="col-2"></div>
<div class="col-2"></div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -862,7 +862,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -872,7 +872,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -888,7 +888,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -898,7 +898,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -914,7 +914,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -924,14 +924,14 @@
</div>
</div>
<div class="row mb-4 mt-5">
<div class="col-8">
<div class="col-7">
<p class="m-0" style="color: #8b8fa2">DEPLOYMENT</p>
</div>
<div class="col-2"></div>
<div class="col-2"></div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -947,7 +947,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -957,7 +957,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -975,7 +975,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -985,7 +985,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -1001,7 +1001,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -1011,7 +1011,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -1027,7 +1027,7 @@
style="width: 16px; height: 16px"
/>
</div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -1037,7 +1037,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -1046,7 +1046,7 @@
<p class="ml-2 my-0">Self-hosted autoupdate registry†</p>
</div>
<div class="col-2"></div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -1056,7 +1056,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -1067,7 +1067,7 @@
</p>
</div>
<div class="col-2"></div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"
@ -1077,7 +1077,7 @@
</div>
</div>
<div class="row mb-3">
<div class="col-8 d-flex">
<div class="col-7 d-flex">
<img
alt="a bullet point ellipse"
src="/images/ellipse-6x6@2x.png"
@ -1088,7 +1088,7 @@
</p>
</div>
<div class="col-2"></div>
<div class="col-2">
<div class="col-3">
<img
alt="a check mark"
class="mx-auto"