contact & feature update
All checks were successful
Hugo / build (push) Successful in 20s

This commit is contained in:
brookee 2024-03-01 19:55:49 -05:00
parent d47e621e67
commit 375a6f2129
3 changed files with 508 additions and 508 deletions

View file

@ -38,24 +38,24 @@ theme = "agnes-hugo-theme"
[[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"
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"
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"
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"
FeatureIcon = "fas fa-chart-pie"
################### Quote ####################
################### Sold Brands ####################
[[params.sold]]
[[params.sold.Icon]]
@ -77,7 +77,7 @@ theme = "agnes-hugo-theme"
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/"
ButtonURL = "#"
[[params.pricing.Features]]
Description = "Lorem ipsum dolor sit amet"
[[params.pricing.Features]]
@ -87,6 +87,7 @@ theme = "agnes-hugo-theme"
[[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" },
]

View file

@ -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>

View file

@ -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) {
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) {
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) {
.h2,
h2 {
font-size: 42px;
line-height: 52px;
letter-spacing: -.1px
letter-spacing: -0.1px;
}
}
@ -169,16 +168,15 @@ h2 {
h4 {
font-size: 20px;
line-height: 30px;
letter-spacing: -.1px
letter-spacing: -0.1px;
}
@media (min-width: 641px) {
.h4,
h4 {
font-size: 24px;
line-height: 34px;
letter-spacing: -.1px
letter-spacing: -0.1px;
}
}
@ -186,59 +184,59 @@ h4 {
.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;
@ -283,7 +282,7 @@ p {
.form-group label {
font-size: 16px;
font-weight: 700;
color:#1f2b35
color: #1f2b35;
}
.form-group {
@ -294,12 +293,12 @@ p {
@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) {
.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) {
.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) {
.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 {
@ -641,12 +639,12 @@ p {
.pricing-table-inner > * {
position: relative;
width: 100%
width: 100%;
}
@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) {
.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) {
.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,7 +778,7 @@ p {
.footer-brand,
.footer-links,
.footer-social-links {
margin-bottom: 24px
margin-bottom: 24px;
}
.footer-links {
@ -788,41 +786,41 @@ p {
}
.footer-social-links li + li {
margin-left: 16px
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) {
.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;
}
}