This commit is contained in:
brookee
parent
d47e621e67
commit
375a6f2129
3 changed files with 508 additions and 508 deletions
122
hugo.toml
122
hugo.toml
|
|
@ -4,89 +4,90 @@ title = "Bellas Keys"
|
|||
theme = "agnes-hugo-theme"
|
||||
|
||||
[params]
|
||||
dateFormat = "Jan 2, 2023"
|
||||
authorName = "Bella"
|
||||
Title = "Bellas Keys"
|
||||
Description = "Your Website Description"
|
||||
Image = "https://example.com/image.jpg"
|
||||
Favicon = "https://example.com/favicon.png"
|
||||
dateFormat = "Jan 2, 2023"
|
||||
authorName = "Bella"
|
||||
Title = "Bellas Keys"
|
||||
Description = "Your Website Description"
|
||||
Image = "https://example.com/image.jpg"
|
||||
Favicon = "https://example.com/favicon.png"
|
||||
|
||||
[menu]
|
||||
[[menu.external]]
|
||||
name = "Contact"
|
||||
url = "#"
|
||||
weight = 1
|
||||
[[menu.external]]
|
||||
name = "Contact"
|
||||
url = "#"
|
||||
weight = 1
|
||||
|
||||
[[menu.external]]
|
||||
name = "About us"
|
||||
url = "#"
|
||||
weight = 2
|
||||
[[menu.external]]
|
||||
name = "About us"
|
||||
url = "#"
|
||||
weight = 2
|
||||
|
||||
[params.social]
|
||||
TwitterURL = "http://google.com"
|
||||
GoogleURL = "http://google.com"
|
||||
FacebookURL = "http://google.com"
|
||||
TwitterURL = "http://google.com"
|
||||
GoogleURL = "http://google.com"
|
||||
FacebookURL = "http://google.com"
|
||||
|
||||
[params.content]
|
||||
LeadTitle = "Bellas Keys"
|
||||
LeadDescription = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet lacus et felis porttitor ultrices ut nec urna. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis."
|
||||
ButtonCaption = "Pricing & Plans"
|
||||
ButtonURL = "#pricing"
|
||||
LeadTitle = "Bellas Keys"
|
||||
LeadDescription = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet lacus et felis porttitor ultrices ut nec urna. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis."
|
||||
ButtonCaption = "Pricing & Plans"
|
||||
ButtonURL = "#pricing"
|
||||
|
||||
################### Feature Columns ####################
|
||||
|
||||
[[params.feature]]
|
||||
FeatureTitle = "Feature 1"
|
||||
FeatureDescription = "Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis."
|
||||
FeatureImage = "images/feature-1.png"
|
||||
FeatureTitle = "Feature 1"
|
||||
FeatureDescription = "Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis."
|
||||
FeatureIcon = "fas fa-code"
|
||||
|
||||
[[params.feature]]
|
||||
FeatureTitle = "Feature 2"
|
||||
FeatureDescription = "Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis."
|
||||
FeatureImage = "images/feature-2.png"
|
||||
FeatureTitle = "Feature 2"
|
||||
FeatureDescription = "Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis."
|
||||
FeatureIcon = "fas fa-chart-line"
|
||||
|
||||
[[params.feature]]
|
||||
FeatureTitle = "Feature 3"
|
||||
FeatureDescription = "Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis."
|
||||
FeatureImage = "images/feature-3.png"
|
||||
FeatureTitle = "Feature 3"
|
||||
FeatureDescription = "Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis."
|
||||
FeatureIcon = "fas fa-cog"
|
||||
|
||||
[[params.feature]]
|
||||
FeatureTitle = "Feature 4"
|
||||
FeatureDescription = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis."
|
||||
FeatureImage = "images/feature-4.png"
|
||||
FeatureTitle = "Feature 4"
|
||||
FeatureDescription = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis."
|
||||
FeatureIcon = "fas fa-chart-pie"
|
||||
|
||||
################### Quote ####################
|
||||
################### Sold Brands ####################
|
||||
|
||||
[[params.sold]]
|
||||
[[params.sold.Icon]]
|
||||
LogoURL = "https://seeklogo.com/images/X/xbox-logo-30362ED98F-seeklogo.com.png"
|
||||
CSS = ""
|
||||
[[params.sold.Icon]]
|
||||
LogoURL = "https://seeklogo.com/images/G/gamestop-logo-AB1F19187B-seeklogo.com.png"
|
||||
CSS = "inverted"
|
||||
[[params.sold.Icon]]
|
||||
LogoURL = "https://seeklogo.com/images/P/playstation-logo-6D0C7C9B30-seeklogo.com.png"
|
||||
CSS = "inverted"
|
||||
[[params.sold.Icon]]
|
||||
LogoURL = "https://seeklogo.com/images/G/google-play-logo-E0550702F1-seeklogo.com.png"
|
||||
CSS = ""
|
||||
[[params.sold.Icon]]
|
||||
LogoURL = "https://seeklogo.com/images/X/xbox-logo-30362ED98F-seeklogo.com.png"
|
||||
CSS = ""
|
||||
[[params.sold.Icon]]
|
||||
LogoURL = "https://seeklogo.com/images/G/gamestop-logo-AB1F19187B-seeklogo.com.png"
|
||||
CSS = "inverted"
|
||||
[[params.sold.Icon]]
|
||||
LogoURL = "https://seeklogo.com/images/P/playstation-logo-6D0C7C9B30-seeklogo.com.png"
|
||||
CSS = "inverted"
|
||||
[[params.sold.Icon]]
|
||||
LogoURL = "https://seeklogo.com/images/G/google-play-logo-E0550702F1-seeklogo.com.png"
|
||||
CSS = ""
|
||||
|
||||
################### Pricing Columns ####################
|
||||
|
||||
[[params.pricing]]
|
||||
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 dolor sit amet"
|
||||
[[params.pricing.Features]]
|
||||
Description = "consectetur adipiscing elit"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Etiam faucibus finibus"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Etiam sit amet mi sapien"
|
||||
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 = "#"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Lorem ipsum dolor sit amet"
|
||||
[[params.pricing.Features]]
|
||||
Description = "consectetur adipiscing elit"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Etiam faucibus finibus"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Etiam sit amet mi sapien"
|
||||
|
||||
################### Contact Buttons ####################
|
||||
|
||||
[[params.buttons]]
|
||||
label = "Button 1"
|
||||
|
|
@ -101,8 +102,9 @@ icon = "fa-brands fa-skype"
|
|||
[[params.buttons]]
|
||||
label = "Button 3"
|
||||
url = "#"
|
||||
icon = "fa-solid fa-envelope-open-text"
|
||||
icon = "fa-solid fa-envelope"
|
||||
|
||||
################### Contact Form ####################
|
||||
|
||||
[[params.contact_forms]]
|
||||
name = "contact_form"
|
||||
|
|
@ -110,5 +112,5 @@ fields = [
|
|||
{ name = "Name", type = "text", required = true },
|
||||
{ name = "Email", type = "email", required = true },
|
||||
{ name = "Phone #", type = "tel", required = false, class = "full-width" },
|
||||
{ name = "Message", type = "textarea", required = true, class = "full-width" }
|
||||
{ name = "Message", type = "textarea", required = true, class = "full-width" },
|
||||
]
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
<div class="features-wrap">
|
||||
{{ range site.Params.feature }}
|
||||
<div class="feature is-revealing feature-inner">
|
||||
<img class="feature-icon" src="{{ .FeatureImage }}" />
|
||||
<i class="feature-icon {{ .FeatureIcon }}"></i>
|
||||
<div class="feature-description">
|
||||
<h4 class="feature-title h3-mobile">{{ .FeatureTitle }}</h4>
|
||||
<p class="text-sm">{{ .FeatureDescription }}</p>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
:root {
|
||||
--background-color: #0D161E;
|
||||
--accent-1: linear-gradient(45deg, #0559B0, #BE528A);
|
||||
--accent-2: linear-gradient(25deg, rgb(45, 85, 125), #0B2D4F);
|
||||
--accent-3: linear-gradient(45deg, #BE528A, #762a51);
|
||||
--background-color: #0d161e;
|
||||
--accent-1: linear-gradient(45deg, #0559b0, #be528a);
|
||||
--accent-2: linear-gradient(25deg, rgb(45, 85, 125), #0b2d4f);
|
||||
--accent-3: linear-gradient(45deg, #be528a, #762a51);
|
||||
--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 {
|
||||
|
|
@ -16,8 +16,8 @@ html {
|
|||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
scroll-behavior: smooth;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
transform: scale(0.90);
|
||||
font-family: "Open Sans", sans-serif;
|
||||
transform: scale(0.9);
|
||||
transform-origin: 0 0;
|
||||
width: 111%;
|
||||
}
|
||||
|
|
@ -33,46 +33,46 @@ body {
|
|||
footer,
|
||||
header,
|
||||
section {
|
||||
display: block
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: .67em 0
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
:after,
|
||||
:before {
|
||||
box-sizing: inherit
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -81,47 +81,47 @@ ul {
|
|||
}
|
||||
|
||||
ul {
|
||||
list-style: disc
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
vertical-align: middle
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
display: block
|
||||
display: block;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 18px;
|
||||
line-height: 27px
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
@media (min-width:641px) {
|
||||
@media (min-width: 641px) {
|
||||
html {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
letter-spacing: -.1px
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--font-color);
|
||||
font-size: 1rem
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: underline
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
text-decoration: none
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.h2,
|
||||
|
|
@ -131,20 +131,20 @@ h2,
|
|||
h4 {
|
||||
clear: both;
|
||||
color: var(--font-color);
|
||||
font-weight: 500
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
line-height: 52px;
|
||||
letter-spacing: -.1px
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
|
||||
@media (min-width:641px) {
|
||||
@media (min-width: 641px) {
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
line-height: 66px;
|
||||
letter-spacing: -.1px
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -152,16 +152,15 @@ h1 {
|
|||
h2 {
|
||||
font-size: 36px;
|
||||
line-height: 46px;
|
||||
letter-spacing: -.1px
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
|
||||
@media (min-width:641px) {
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.h2,
|
||||
h2 {
|
||||
font-size: 42px;
|
||||
line-height: 52px;
|
||||
letter-spacing: -.1px
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -169,76 +168,75 @@ h2 {
|
|||
h4 {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
letter-spacing: -.1px
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
|
||||
@media (min-width:641px) {
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.h4,
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
letter-spacing: -.1px
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:640px) {
|
||||
@media (max-width: 640px) {
|
||||
.h2-mobile {
|
||||
font-size: 36px;
|
||||
line-height: 46px;
|
||||
letter-spacing: -.1px
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
|
||||
.h3-mobile {
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
letter-spacing: -.1px
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-light {
|
||||
color: var(--font-color)
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
.text-light a {
|
||||
color: var(--font-color)
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
letter-spacing: -.1px
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -.1px
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
|
||||
.h2,
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: 48px;
|
||||
margin-bottom: 16px
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.h4,
|
||||
h4 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 4px
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 24px
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.contact {
|
||||
|
|
@ -264,7 +262,8 @@ p {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group input, textarea {
|
||||
.form-group input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
|
|
@ -278,12 +277,12 @@ p {
|
|||
|
||||
.full-width {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color:#1f2b35
|
||||
color: #1f2b35;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
|
@ -291,15 +290,15 @@ p {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (min-width:481px) {
|
||||
@media (min-width: 481px) {
|
||||
.container {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1128px
|
||||
max-width: 1128px;
|
||||
}
|
||||
|
||||
.screen-reader-text {
|
||||
|
|
@ -308,16 +307,16 @@ p {
|
|||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
word-wrap: normal !important
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
|
||||
.screen-reader-text:focus {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
letter-spacing: -.1px;
|
||||
letter-spacing: -0.1px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -330,65 +329,65 @@ p {
|
|||
padding: 16px 32px;
|
||||
top: 8px;
|
||||
width: auto;
|
||||
z-index: 100000
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
.list-reset {
|
||||
list-style: none;
|
||||
padding: 0
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.has-top-divider {
|
||||
position: relative
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.has-top-divider::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: #e2e8ed
|
||||
background: #e2e8ed;
|
||||
}
|
||||
|
||||
.m-0 {
|
||||
margin: 0
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mt-0 {
|
||||
margin-top: 0
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 8px
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mt-24 {
|
||||
margin-top: 24px
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.mb-24 {
|
||||
margin-bottom: 24px
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.mb-32 {
|
||||
margin-bottom: 32px
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.pb-24 {
|
||||
padding-bottom: 24px
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
font-size: 16px;
|
||||
letter-spacing: -.1px;
|
||||
letter-spacing: -0.1px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
text-decoration: none !important;
|
||||
|
|
@ -401,7 +400,7 @@ p {
|
|||
padding: 16px 32px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
white-space: nowrap
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.button i {
|
||||
|
|
@ -410,84 +409,85 @@ p {
|
|||
}
|
||||
|
||||
.button:active {
|
||||
outline: 0
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.button::before {
|
||||
border-radius: 4px
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.button-primary, .button-primary-dark {
|
||||
.button-primary,
|
||||
.button-primary-dark {
|
||||
background: var(--accent-1);
|
||||
color: #fff !important;
|
||||
transition: .3s ease
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.button-pricing {
|
||||
background: var(--accent-3) !important
|
||||
background: var(--accent-3) !important;
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
box-shadow: 2px 4px 10px rgba(255, 255, 255, .25);
|
||||
transition: .3s ease
|
||||
box-shadow: 2px 4px 10px rgba(255, 255, 255, 0.25);
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.button-primary-dark:hover {
|
||||
box-shadow: 2px 4px 10px rgba(0, 0, 0, .45);
|
||||
transition: .3s ease
|
||||
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.45);
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: relative;
|
||||
padding: 24px 0
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.site-header-inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding-top: 40px
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
position: relative
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-weight: 700
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero-paragraph {
|
||||
margin-bottom: 32px
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
@media (min-width:641px) {
|
||||
@media (min-width: 641px) {
|
||||
.hero {
|
||||
text-align: left;
|
||||
padding-top: 92px;
|
||||
padding-bottom: 80px
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
display: flex
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
padding-right: 48px;
|
||||
min-width: 512px
|
||||
min-width: 512px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1025px) {
|
||||
@media (min-width: 1025px) {
|
||||
.hero-copy {
|
||||
padding-right: 88px;
|
||||
min-width: 552px
|
||||
min-width: 552px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -497,26 +497,25 @@ p {
|
|||
gap: 24px;
|
||||
justify-content: center;
|
||||
margin-right: -12px;
|
||||
margin-left: -12px
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.features-wrap:first-child {
|
||||
margin-top: -12px
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
.features-wrap:last-child {
|
||||
margin-bottom: -12px
|
||||
margin-bottom: -12px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
padding: 12px;
|
||||
flex-grow: 1
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.feature-inner {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
gap: 1.5rem
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -538,26 +537,26 @@ p {
|
|||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #fff
|
||||
margin: 0.6rem;
|
||||
margin-right: 1.2rem;
|
||||
font-size: 2.8rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 8px
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@media (min-width:641px) {
|
||||
@media (min-width: 641px) {
|
||||
.features {
|
||||
position: relative
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-description {
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sold-section {
|
||||
|
|
@ -587,29 +586,28 @@ p {
|
|||
filter: invert(100%) grayscale(100%) brightness(250%) !important;
|
||||
}
|
||||
|
||||
|
||||
.pricing {
|
||||
position: relative;
|
||||
overflow: hidden
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pricing::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(100% - 200px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: #1f2b35;
|
||||
overflow: hidden
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pricing .section-title {
|
||||
margin-bottom: 48px
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.pricing-tables-wrap:last-child {
|
||||
margin-bottom: -12px
|
||||
margin-bottom: -12px;
|
||||
}
|
||||
|
||||
.pricing-table-inner {
|
||||
|
|
@ -639,14 +637,14 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
.pricing-table-inner>* {
|
||||
.pricing-table-inner > * {
|
||||
position: relative;
|
||||
width: 100%
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@supports (-ms-ime-align:auto) {
|
||||
@supports (-ms-ime-align: auto) {
|
||||
.pricing-table-inner::before {
|
||||
box-shadow: 0 16px 48px rgba(31, 43, 53, .12)
|
||||
box-shadow: 0 16px 48px rgba(31, 43, 53, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -664,14 +662,14 @@ p {
|
|||
}
|
||||
|
||||
.pricing-table-header::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 1.2rem;
|
||||
height: 100%;
|
||||
display: block;
|
||||
width: 2px;
|
||||
background: #e2e8ed
|
||||
background: #e2e8ed;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -717,25 +715,25 @@ p {
|
|||
display: inline-flex;
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
margin-right: 12px
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
@media (min-width:641px) {
|
||||
@media (min-width: 641px) {
|
||||
.pricing .section-title {
|
||||
margin-bottom: 64px
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-inner {
|
||||
position: relative;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
@media (min-width:641px) {
|
||||
@media (min-width: 641px) {
|
||||
.section-inner {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -743,17 +741,17 @@ p {
|
|||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0;
|
||||
background: #1f2b35
|
||||
background: #1f2b35;
|
||||
}
|
||||
|
||||
.site-footer a {
|
||||
text-decoration: none
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-footer a:active,
|
||||
.site-footer a:hover {
|
||||
color: #6f8394;
|
||||
text-decoration: underline
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.site-footer-inner {
|
||||
|
|
@ -761,11 +759,11 @@ p {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.site-footer-inner.has-top-divider::before {
|
||||
background: rgba(255, 255, 255, .08)
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
|
|
@ -780,49 +778,49 @@ p {
|
|||
.footer-brand,
|
||||
.footer-links,
|
||||
.footer-social-links {
|
||||
margin-bottom: 24px
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.footer-social-links li+li {
|
||||
margin-left: 16px
|
||||
.footer-social-links li + li {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.footer-social-links li {
|
||||
display: inline-flex
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.footer-social-links li a {
|
||||
padding: 8px
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
@media (min-width:641px) {
|
||||
@media (min-width: 641px) {
|
||||
.site-footer-inner {
|
||||
justify-content: space-between
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
.footer-copyright,
|
||||
.footer-links,
|
||||
.footer-social-links {
|
||||
flex: 50%
|
||||
flex: 50%;
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
.footer-copyright {
|
||||
justify-content: flex-start
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.footer-links,
|
||||
.footer-social-links {
|
||||
justify-content: flex-end
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
order: 1;
|
||||
margin-bottom: 0
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue