This commit is contained in:
brookee
parent
7d1df2100e
commit
d47e621e67
5 changed files with 144 additions and 16 deletions
28
hugo.toml
28
hugo.toml
|
|
@ -85,4 +85,30 @@ theme = "agnes-hugo-theme"
|
|||
[[params.pricing.Features]]
|
||||
Description = "Etiam faucibus finibus"
|
||||
[[params.pricing.Features]]
|
||||
Description = "Etiam sit amet mi sapien"
|
||||
Description = "Etiam sit amet mi sapien"
|
||||
|
||||
|
||||
[[params.buttons]]
|
||||
label = "Button 1"
|
||||
url = "#"
|
||||
icon = "fa-brands fa-square-whatsapp"
|
||||
|
||||
[[params.buttons]]
|
||||
label = "Button 2"
|
||||
url = "#"
|
||||
icon = "fa-brands fa-skype"
|
||||
|
||||
[[params.buttons]]
|
||||
label = "Button 3"
|
||||
url = "#"
|
||||
icon = "fa-solid fa-envelope-open-text"
|
||||
|
||||
|
||||
[[params.contact_forms]]
|
||||
name = "contact_form"
|
||||
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" }
|
||||
]
|
||||
|
|
|
|||
|
|
@ -48,19 +48,20 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="features section">
|
||||
<div class="container has-top-divider">
|
||||
<div class="features-inner section-inner">
|
||||
<div class="features-wrap">
|
||||
{{ range site.Params.feature }}
|
||||
<div class="feature is-revealing feature-inner">
|
||||
<div class="feature-description">
|
||||
<h4 class="feature-title h3-mobile">{{ .FeatureTitle }}</h4>
|
||||
<p class="text-sm">{{ .FeatureDescription }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<section class="section">
|
||||
<div class="contact container has-top-divider">
|
||||
<h2 class="section-title mt-0 text-center">Contact</h2>
|
||||
<div class="contact-flex">
|
||||
<div class="contact-inner">
|
||||
{{ range .Site.Params.buttons }}
|
||||
<a href="{{ .url }}" class="button"
|
||||
><i class="{{ .icon }}"></i>{{ .label }}</a
|
||||
>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="contact-table">
|
||||
{{ partial "contact_form.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -83,7 +84,7 @@
|
|||
<a
|
||||
href="{{ .ButtonURL }}"
|
||||
style="margin-top:15px;"
|
||||
class="button button-primary-dark"
|
||||
class="button button-primary-dark button-pricing"
|
||||
>{{ .ButtonText }}</a
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
18
themes/agnes-hugo-theme/layouts/partials/contact_form.html
Normal file
18
themes/agnes-hugo-theme/layouts/partials/contact_form.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{{ $form := index .Site.Params.contact_forms 0 }}
|
||||
<form class="contact-form" action="{{ $form.submit_url }}" method="post">
|
||||
<div class="form-grid">
|
||||
{{ range $field := $form.fields }}
|
||||
<div class="form-group {{ if $field.class }}{{ $field.class }}{{ end }}">
|
||||
<label for="{{ $field.name }}">{{ $field.name }}</label>
|
||||
{{ if eq $field.type "textarea" }}
|
||||
<textarea id="{{ $field.name }}" name="{{ $field.name }}" rows="5"{{ if $field.required }} required{{ end }}></textarea>
|
||||
{{ else }}
|
||||
<input type="{{ $field.type }}" id="{{ $field.name }}" name="{{ $field.name }}"{{ if $field.required }} required{{ end }}>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<button class="button" type="submit">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -21,4 +21,5 @@
|
|||
{{ end }}
|
||||
<link rel="stylesheet" type="text/css" href="/css/style.css" />
|
||||
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
:root {
|
||||
--background-color: #0D161E;
|
||||
--accent-1: linear-gradient(45deg, #0559B0, #BE528A);
|
||||
--accent-2: #52B8BD;
|
||||
--accent-2: linear-gradient(25deg, rgb(45, 85, 125), #0B2D4F);
|
||||
--accent-3: linear-gradient(45deg, #BE528A, #762a51);
|
||||
--font-color: #d2d2d2;
|
||||
--font-color-dark: #1f1f1f
|
||||
}
|
||||
|
|
@ -240,6 +241,56 @@ p {
|
|||
padding-right: 16px
|
||||
}
|
||||
|
||||
.contact {
|
||||
padding-top: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group input, textarea {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color:#1f2b35
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (min-width:481px) {
|
||||
.container {
|
||||
padding-left: 24px;
|
||||
|
|
@ -341,8 +392,8 @@ p {
|
|||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
text-decoration: none !important;
|
||||
background-color: #fff;
|
||||
color: #0081f6 !important;
|
||||
background: var(--accent-2);
|
||||
color: #efefef !important;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
|
@ -353,6 +404,11 @@ p {
|
|||
white-space: nowrap
|
||||
}
|
||||
|
||||
.button i {
|
||||
transform: scale(1.5);
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
outline: 0
|
||||
}
|
||||
|
|
@ -367,6 +423,10 @@ p {
|
|||
transition: .3s ease
|
||||
}
|
||||
|
||||
.button-pricing {
|
||||
background: var(--accent-3) !important
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
box-shadow: 2px 4px 10px rgba(255, 255, 255, .25);
|
||||
transition: .3s ease
|
||||
|
|
@ -465,6 +525,18 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
.contact-inner {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1.5rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.contact-inner a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
|
|
@ -550,6 +622,16 @@ p {
|
|||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.contact-table {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #fff;
|
||||
padding: 25px;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pricing-table-inner {
|
||||
flex-direction: column;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue