update
This commit is contained in:
brookee
parent
f47791c4d4
commit
f2fd13cd41
5 changed files with 261 additions and 327 deletions
38
hugo.toml
38
hugo.toml
|
|
@ -72,37 +72,15 @@ theme = "agnes-hugo-theme"
|
|||
################### Pricing Columns ####################
|
||||
|
||||
[[params.pricing]]
|
||||
PricingTitle = "Starter"
|
||||
PricingRate = "27"
|
||||
PricingTitle = "Etiam sit amet"
|
||||
PricingDesc = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus finibus quam ac gravida. Etiam sit amet mi sapien. Nam viverra congue quam nec condimentum."
|
||||
ButtonText = "Download"
|
||||
ButtonURL = "https://example.com/"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Lorem ipsum is common text"
|
||||
Description = "Lorem ipsum dolor sit amet"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Lorem ipsum is common text"
|
||||
Description = "consectetur adipiscing elit"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Lorem ipsum is common text"
|
||||
Description = "Etiam faucibus finibus"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Lorem ipsum is common text"
|
||||
|
||||
[[params.pricing]]
|
||||
PricingTitle = "Professional"
|
||||
PricingRate = "97"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Lorem ipsum is common text"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Lorem ipsum is common text"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Lorem ipsum is common text"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Lorem ipsum is common text"
|
||||
|
||||
[[params.pricing]]
|
||||
PricingTitle = "Business"
|
||||
PricingRate = "147"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Lorem ipsum is common text"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Lorem ipsum is common text"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Lorem ipsum is common text"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Lorem ipsum is common text"
|
||||
Description = "Etiam sit amet mi sapien"
|
||||
|
|
@ -1,78 +1,76 @@
|
|||
{{ define "main" }}
|
||||
<section class="hero">
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-inner">
|
||||
<div class="hero-copy">
|
||||
<h1 class="hero-title h2-mobile mt-0 is-revealing">{{ .Site.Params.Content.LeadTitle | markdownify }}</h1>
|
||||
<h1 class="hero-title h2-mobile mt-0 is-revealing">{{ .Site.Params.Content.LeadTitle | markdownify }}
|
||||
</h1>
|
||||
<p class="hero-paragraph is-revealing">{{ .Site.Params.Content.LeadDescription | markdownify }}</p>
|
||||
<p class="hero-cta is-revealing"><a class="button button-primary button-shadow" href="{{ .Site.Params.Content.ButtonURL}}">{{ .Site.Params.Content.ButtonCaption | markdownify }}</a></p>
|
||||
<p class="hero-cta is-revealing"><a class="button button-primary button-shadow"
|
||||
href="{{ .Site.Params.Content.ButtonURL}}">{{ .Site.Params.Content.ButtonCaption | markdownify
|
||||
}}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ with .Site.Params.quote }}
|
||||
<section class="quote-section">
|
||||
</section>
|
||||
{{ with .Site.Params.quote }}
|
||||
<section class="quote-section">
|
||||
{{ range . }}
|
||||
<blockquote>
|
||||
<h3>{{ .quoteText }}</h3>
|
||||
<p>- {{ .quoteBy }}</p>
|
||||
</blockquote>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
<section class="features section text-center">
|
||||
</section>
|
||||
{{ end }}
|
||||
<section class="features section">
|
||||
<div class="container">
|
||||
<div class="features-inner section-inner">
|
||||
<div class="features-wrap">
|
||||
{{ range site.Params.feature }}
|
||||
<div class="feature is-revealing">
|
||||
<div class="feature-inner">
|
||||
<div class="feature-icon">
|
||||
<img src="{{ .FeatureImage }}">
|
||||
</div>
|
||||
<h4 class="font-color-dark feature-title h3-mobile">{{ .FeatureTitle }}</h4>
|
||||
<p class="font-color-dark text-sm">{{ .FeatureDescription }}</p>
|
||||
<div class="feature is-revealing feature-inner">
|
||||
<img class="feature-icon" src="{{ .FeatureImage }}">
|
||||
<div class="feature-description">
|
||||
<h4 class="feature-title h3-mobile">{{ .FeatureTitle }}</h4>
|
||||
<p class="text-sm">{{ .FeatureDescription }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pricing section">
|
||||
</section>
|
||||
<section class="pricing section">
|
||||
<div class="container">
|
||||
<div class="pricing-inner section-inner has-top-divider">
|
||||
<h2 id="pricing" class="section-title mt-0 text-center">Pricing</h2>
|
||||
<div class="pricing-tables-wrap">
|
||||
{{ range site.Params.pricing }}
|
||||
<div class="pricing-table">
|
||||
{{ with index site.Params.pricing 0 }}
|
||||
<div class="pricing-table-inner">
|
||||
<div class="pricing-table-main">
|
||||
<div class="font-color-dark pricing-table-header is-revealing">
|
||||
<div class="pricing-table-title mt-12 mb-8">{{ .PricingTitle }}</div>
|
||||
<div class="pricing-table-price mb-32 pb-24"><span class="font-color-dark pricing-table-price-currency h4">$</span><span class="font-color-dark pricing-table-price-amount h2">{{ .PricingRate }}</span>/mo</div>
|
||||
<div class="pricing-table-collection">
|
||||
<div class="pricing-table-price"><span style="font-size: 16px;"
|
||||
class="font-color-dark">{{.PricingDesc}}</span>
|
||||
</div>
|
||||
<ul class="pricing-table-features list-reset text-xs mt-24">
|
||||
<a href="{{ .ButtonURL }}" style="margin-top:15px;" class="button button-primary button-shadow">{{ .ButtonText }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="pricing-table-features list-reset text-xs">
|
||||
{{ range .Features }}
|
||||
<li class="is-revealing">
|
||||
<span class="list-icon">
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#5FFAD0" fill-rule="nonzero" d="M5.6 8.4L1.6 6 0 7.6 5.6 14 16 3.6 14.4 2z"/>
|
||||
<path fill="#5FFAD0" fill-rule="nonzero"
|
||||
d="M5.6 8.4L1.6 6 0 7.6 5.6 14 16 3.6 14.4 2z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="font-color-dark">{{ .Description }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div class="pricing-table-cta is-revealing">
|
||||
<a class="button button-primary button-shadow button-block" href="#">{{ .ButtonCaption }}</a>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
|
@ -3,20 +3,10 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{{ with .Site.Params}}
|
||||
{{ "<!-- google analytics tag (gtag.js)-->" | safeHTML }}
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id={{ .google_analytics_id }}"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', '{{ .google_analytics_id }}');
|
||||
</script>
|
||||
{{ end }}
|
||||
{{ $title := print .Site.Title " | " .Title }}
|
||||
{{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
|
||||
<title>{{ $title }}</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Hind+Vadodara:400,700|Mukta:500,700" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="/css/style.css">
|
||||
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
|
||||
</head>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<header class="site-header">
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand header-brand">
|
||||
|
|
@ -8,17 +8,17 @@
|
|||
<title>{{ .Site.Title }}</title>
|
||||
<defs>
|
||||
<linearGradient x1="0%" y1="100%" y2="0%" id="logo-a">
|
||||
<stop stop-color="#007CFE" stop-opacity="0" offset="0%"/>
|
||||
<stop stop-color="#007DFF" offset="100%"/>
|
||||
<stop stop-color="#0559B0" stop-opacity="0" offset="0%" />
|
||||
<stop stop-color="#0559B0" offset="100%" />
|
||||
</linearGradient>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="logo-b">
|
||||
<stop stop-color="#FF4F7A" stop-opacity="0" offset="0%"/>
|
||||
<stop stop-color="#FF4F7A" offset="100%"/>
|
||||
<stop stop-color="#BE5476" stop-opacity="0" offset="0%" />
|
||||
<stop stop-color="#BE5476" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<rect fill="url(#logo-a)" width="32" height="32" rx="16"/>
|
||||
<rect fill="url(#logo-b)" x="16" width="32" height="32" rx="16"/>
|
||||
<rect fill="url(#logo-a)" width="32" height="32" rx="16" />
|
||||
<rect fill="url(#logo-b)" x="16" width="32" height="32" rx="16" />
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
|
|
@ -26,4 +26,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
|
@ -3,18 +3,18 @@
|
|||
--accent-1: linear-gradient(45deg, #0559B0, #BE528A);
|
||||
--accent-2: #52B8BD;
|
||||
--font-color: #d2d2d2;
|
||||
--font-color-dark: #1f1f1f;
|
||||
--font-color-dark: #1f1f1f
|
||||
}
|
||||
|
||||
.font-color-dark {
|
||||
color: var(--font-color-dark) !important;
|
||||
color: var(--font-color-dark) !important
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.15;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
scroll-behavior: smooth;
|
||||
scroll-behavior: smooth
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -25,7 +25,6 @@ body {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
|
||||
footer,
|
||||
header,
|
||||
section {
|
||||
|
|
@ -34,7 +33,7 @@ section {
|
|||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0
|
||||
margin: .67em 0
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -60,8 +59,8 @@ html {
|
|||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
:after,
|
||||
:before {
|
||||
box-sizing: inherit
|
||||
}
|
||||
|
||||
|
|
@ -73,8 +72,7 @@ body {
|
|||
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 24px;
|
||||
padding-left: 24px
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -97,11 +95,11 @@ html {
|
|||
line-height: 27px
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
@media (min-width:641px) {
|
||||
html {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
letter-spacing: -0.1px
|
||||
letter-spacing: -.1px
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -119,84 +117,82 @@ a {
|
|||
text-decoration: underline
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.h2,
|
||||
.h4,
|
||||
h1,
|
||||
h2,
|
||||
h4,
|
||||
.h2,
|
||||
.h4 {
|
||||
h4 {
|
||||
clear: both;
|
||||
color: var(--font-color);
|
||||
font-family: "Mukta", sans-serif;
|
||||
font-family: Mukta, sans-serif;
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
line-height: 52px;
|
||||
letter-spacing: -0.1px
|
||||
letter-spacing: -.1px
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
|
||||
@media (min-width:641px) {
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
line-height: 66px;
|
||||
letter-spacing: -0.1px
|
||||
letter-spacing: -.1px
|
||||
}
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
.h2,
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
line-height: 46px;
|
||||
letter-spacing: -0.1px
|
||||
letter-spacing: -.1px
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
@media (min-width:641px) {
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
.h2,
|
||||
h2 {
|
||||
font-size: 42px;
|
||||
line-height: 52px;
|
||||
letter-spacing: -0.1px
|
||||
letter-spacing: -.1px
|
||||
}
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
.h4,
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
letter-spacing: -0.1px
|
||||
letter-spacing: -.1px
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
@media (min-width:641px) {
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
.h4,
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
letter-spacing: -0.1px
|
||||
letter-spacing: -.1px
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
@media (max-width:640px) {
|
||||
.h2-mobile {
|
||||
font-size: 36px;
|
||||
line-height: 46px;
|
||||
letter-spacing: -0.1px
|
||||
letter-spacing: -.1px
|
||||
}
|
||||
|
||||
.h3-mobile {
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
letter-spacing: -0.1px
|
||||
letter-spacing: -.1px
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -211,24 +207,24 @@ h4,
|
|||
.text-sm {
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
letter-spacing: -0.1px
|
||||
letter-spacing: -.1px
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.1px
|
||||
letter-spacing: -.1px
|
||||
}
|
||||
|
||||
.h2,
|
||||
h1,
|
||||
h2,
|
||||
.h2 {
|
||||
h2 {
|
||||
margin-top: 48px;
|
||||
margin-bottom: 16px
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
.h4,
|
||||
h4 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 4px
|
||||
}
|
||||
|
|
@ -245,8 +241,7 @@ p {
|
|||
padding-right: 16px
|
||||
}
|
||||
|
||||
@media (min-width: 481px) {
|
||||
|
||||
@media (min-width:481px) {
|
||||
.container {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px
|
||||
|
|
@ -268,17 +263,17 @@ p {
|
|||
|
||||
.screen-reader-text:focus {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
|
||||
clip: auto !important;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.1px;
|
||||
letter-spacing: -.1px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #0081F6 !important;
|
||||
color: #0081f6 !important;
|
||||
border: none;
|
||||
height: auto;
|
||||
left: 8px;
|
||||
|
|
@ -309,7 +304,7 @@ p {
|
|||
width: 100%;
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: #E2E8ED
|
||||
background: #e2e8ed
|
||||
}
|
||||
|
||||
.m-0 {
|
||||
|
|
@ -342,14 +337,14 @@ p {
|
|||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
font-family: "Mukta", sans-serif;
|
||||
font-family: Mukta, sans-serif;
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.1px;
|
||||
letter-spacing: -.1px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
text-decoration: none !important;
|
||||
background-color: #fff;
|
||||
color: #0081F6 !important;
|
||||
color: #0081f6 !important;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
|
@ -368,35 +363,15 @@ p {
|
|||
border-radius: 4px
|
||||
}
|
||||
|
||||
.button-shadow {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.button-shadow::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-shadow: 0 8px 16px rgba(31, 43, 53, 0.12);
|
||||
mix-blend-mode: multiply;
|
||||
transition: box-shadow .15s ease
|
||||
}
|
||||
|
||||
.button-shadow:hover::before {
|
||||
box-shadow: 0 8px 16px rgba(31, 43, 53, 0.25)
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: var(--accent-1);
|
||||
color: #fff !important;
|
||||
transition: 0.3s ease;
|
||||
transition: .3s ease
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
box-shadow: var(--accent-1);
|
||||
transition: 0.3s ease;
|
||||
transition: .3s ease
|
||||
}
|
||||
|
||||
.site-header {
|
||||
|
|
@ -429,20 +404,7 @@ p {
|
|||
margin-bottom: 32px
|
||||
}
|
||||
|
||||
.hero-illustration {
|
||||
margin-top: 40px;
|
||||
padding-bottom: 40px
|
||||
}
|
||||
|
||||
.hero-illustration svg {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
@media (min-width:641px) {
|
||||
.hero {
|
||||
text-align: left;
|
||||
padding-top: 92px;
|
||||
|
|
@ -457,20 +419,9 @@ p {
|
|||
padding-right: 48px;
|
||||
min-width: 512px
|
||||
}
|
||||
|
||||
.hero-illustration {
|
||||
margin-top: -68px;
|
||||
padding-bottom: 0
|
||||
}
|
||||
|
||||
.hero-illustration svg {
|
||||
max-width: none;
|
||||
width: 528px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
|
||||
@media (min-width:1025px) {
|
||||
.hero-copy {
|
||||
padding-right: 88px;
|
||||
min-width: 552px
|
||||
|
|
@ -478,8 +429,9 @@ p {
|
|||
}
|
||||
|
||||
.features-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
margin-right: -12px;
|
||||
margin-left: -12px
|
||||
|
|
@ -495,21 +447,26 @@ p {
|
|||
|
||||
.feature {
|
||||
padding: 12px;
|
||||
width: 276px;
|
||||
max-width: 276px;
|
||||
flex-grow: 1;
|
||||
flex-grow: 1
|
||||
}
|
||||
|
||||
.feature-inner {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
padding: 40px 24px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
gap: 1.5rem
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.feature-inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
display: flex;
|
||||
justify-content: center
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #fff
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
|
|
@ -517,25 +474,21 @@ p {
|
|||
margin-bottom: 8px
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
@media (min-width:641px) {
|
||||
.features {
|
||||
position: relative
|
||||
}
|
||||
}
|
||||
|
||||
.features .section-square {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 240px;
|
||||
width: 44%;
|
||||
background: #F6F8FA
|
||||
}
|
||||
.feature-description {
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.quote-section {
|
||||
background-color: #1F2B35;
|
||||
background-color: #1f2b35;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.pricing {
|
||||
|
|
@ -550,7 +503,7 @@ p {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: #1F2B35;
|
||||
background: #1f2b35;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
|
|
@ -558,33 +511,26 @@ p {
|
|||
margin-bottom: 48px
|
||||
}
|
||||
|
||||
.pricing-tables-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-right: -12px;
|
||||
margin-left: -12px
|
||||
}
|
||||
|
||||
.pricing-tables-wrap:last-child {
|
||||
margin-bottom: -12px
|
||||
}
|
||||
|
||||
.pricing-table {
|
||||
padding: 12px;
|
||||
width: 344px;
|
||||
max-width: 344px;
|
||||
flex-grow: 1
|
||||
}
|
||||
|
||||
.pricing-table-inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pricing-table-inner {
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-table-inner>* {
|
||||
|
|
@ -599,45 +545,79 @@ p {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-shadow: 0 16px 48px #E2E8ED;
|
||||
box-shadow: 0 16px 48px #e2e8ed;
|
||||
mix-blend-mode: multiply;
|
||||
border-radius: 15px;
|
||||
border-radius: 15px
|
||||
}
|
||||
|
||||
@supports (-ms-ime-align: auto) {
|
||||
@supports (-ms-ime-align:auto) {
|
||||
.pricing-table-inner::before {
|
||||
box-shadow: 0 16px 48px rgba(31, 43, 53, 0.12)
|
||||
box-shadow: 0 16px 48px rgba(31, 43, 53, .12)
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-table-header {
|
||||
position: relative
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pricing-table-header {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-table-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
right: 1rem;
|
||||
height: 100%;
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: #E2E8ED
|
||||
width: 1px;
|
||||
background: #e2e8ed
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pricing-table-header::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-table-title {
|
||||
font-family: "Mukta", sans-serif;
|
||||
color: #1F2B35
|
||||
font-family: Mukta, sans-serif;
|
||||
color: #1f2b35;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pricing-table-price-currency {
|
||||
color: #6F8394
|
||||
.pricing-table-collection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pricing-table-features li {
|
||||
.pricing-table-features {
|
||||
width: 40%;
|
||||
min-width: 13.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pricing-table-features {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-table-features li:not(:last-child) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.pricing-table-features li .list-icon {
|
||||
|
|
@ -647,31 +627,19 @@ p {
|
|||
margin-right: 12px
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.pricing .section-square {
|
||||
position: absolute;
|
||||
top: calc(100% - 440px);
|
||||
right: 0;
|
||||
height: 240px;
|
||||
width: 44%;
|
||||
background: #F6F8FA
|
||||
}
|
||||
|
||||
@media (min-width:641px) {
|
||||
.pricing .section-title {
|
||||
margin-bottom: 64px
|
||||
}
|
||||
}
|
||||
|
||||
@supports (-ms-ime-align: auto) {
|
||||
}
|
||||
|
||||
.section-inner {
|
||||
position: relative;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
@media (min-width:641px) {
|
||||
.section-inner {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px
|
||||
|
|
@ -681,17 +649,17 @@ p {
|
|||
.site-footer {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0px;
|
||||
background: #1F2B35
|
||||
letter-spacing: 0;
|
||||
background: #1f2b35
|
||||
}
|
||||
|
||||
.site-footer a {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.site-footer a:hover,
|
||||
.site-footer a:active {
|
||||
color: #6F8394;
|
||||
.site-footer a:active,
|
||||
.site-footer a:hover {
|
||||
color: #6f8394;
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
|
|
@ -704,13 +672,13 @@ p {
|
|||
}
|
||||
|
||||
.site-footer-inner.has-top-divider::before {
|
||||
background: rgba(255, 255, 255, 0.08)
|
||||
background: rgba(255, 255, 255, .08)
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
.footer-copyright,
|
||||
.footer-links,
|
||||
.footer-social-links,
|
||||
.footer-copyright {
|
||||
.footer-social-links {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
|
|
@ -735,15 +703,15 @@ p {
|
|||
padding: 8px
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
@media (min-width:641px) {
|
||||
.site-footer-inner {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
.footer-copyright,
|
||||
.footer-links,
|
||||
.footer-social-links,
|
||||
.footer-copyright {
|
||||
.footer-social-links {
|
||||
flex: 50%
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue