You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
6.7 KiB
111 lines
6.7 KiB
{#!
|
|
# Freelancer for Pico v2.0.7 (https://github.com/mayamcdougall/freelancer-pico)
|
|
# Ported by Maya McDougall (https://github.com/mayamcdougall)
|
|
# Based on upstream Freelancer v7.0.4 by Start Bootstrap (https://startbootstrap.com/theme/freelancer)
|
|
# Licensed under MIT (https://github.com/mayamcdougall/freelancer-pico/blob/main/LICENSE)
|
|
#}
|
|
<!-- Contact Section-->
|
|
<section class="page-section" id="contact">
|
|
<div class="container">
|
|
<!-- Contact Section Heading-->
|
|
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">{{ index.contact.title ? index.contact.title : "Contact Me" }}</h2>
|
|
<!-- Icon Divider-->
|
|
<div class="divider-custom">
|
|
<div class="divider-custom-line"></div>
|
|
<div class="divider-custom-icon"><i class="fas fa-{{ index.contact.divider ? index.contact.divider : 'star' }}"></i></div>
|
|
<div class="divider-custom-line"></div>
|
|
</div>
|
|
{% if index.contact.form.enabled %}
|
|
<!-- Contact Section Form-->
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 col-xl-7">
|
|
<form id="contactForm" class="needs-validation" {% if index.contact.form.action %} action="{{ index.contact.form.action|url }}" {% endif %} {% if index.contact.form.method %} method="{{ index.contact.form.method }}" {% endif %} novalidate>
|
|
<!-- Name input-->
|
|
<div class="form-floating mb-3">
|
|
<input class="form-control" id="name" name="name" type="text" placeholder="Enter your name..." required />
|
|
<label for="name">Full name</label>
|
|
<div class="invalid-feedback">A name is required.</div>
|
|
</div>
|
|
<!-- Email address input-->
|
|
<div class="form-floating mb-3">
|
|
<input class="form-control" id="email" name="email" type="email" placeholder="name@example.com" required />
|
|
<label for="email">Email address</label>
|
|
<div class="invalid-feedback">An email is required.</div>
|
|
<div class="invalid-feedback">Email is not valid.</div>
|
|
</div>
|
|
<!-- Phone number input-->
|
|
<div class="form-floating mb-3">
|
|
<input class="form-control" id="phone" name="phone" type="tel" placeholder="(123) 456-7890" required />
|
|
<label for="phone">Phone number</label>
|
|
<div class="invalid-feedback">A phone number is required.</div>
|
|
</div>
|
|
<!-- Message input-->
|
|
<div class="form-floating mb-3">
|
|
<textarea class="form-control" id="message" name="message" placeholder="Enter your message here..." style="height: 10rem" required></textarea>
|
|
<label for="message">Message</label>
|
|
<div class="invalid-feedback">A message is required.</div>
|
|
</div>
|
|
<!-- Submit success message-->
|
|
<!---->
|
|
<!-- This is what your users will see when the form-->
|
|
<!-- has successfully submitted-->
|
|
<div class="d-none" id="submitSuccessMessage">
|
|
<div class="text-center mb-3">
|
|
<div class="fw-bolder">Form submission successful!</div>
|
|
</div>
|
|
</div>
|
|
<!-- Submit error message-->
|
|
<!---->
|
|
<!-- This is what your users will see when there is-->
|
|
<!-- an error submitting the form-->
|
|
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
|
|
<!-- Submit Button-->
|
|
<button class="btn btn-primary btn-xl" id="submitButton" type="submit">Send</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if index.contact.items or not index.contact.form.enabled %}
|
|
{% if index.contact.form.enabled %}
|
|
<!-- Contact Subsection Heading-->
|
|
<h3 class="page-section-heading text-center text-uppercase text-secondary mb-0 mt-5 fs-2">{{ index.contact.subtitle ? index.contact.title : "Or reach me by" }}</h3>
|
|
<!-- Icon Divider-->
|
|
<div class="divider-custom">
|
|
<div class="divider-custom-line"></div>
|
|
<div class="divider-custom-icon"><i class="fas fa-{{ index.contact.subdivider ? index.contact.subdivider : 'star' }}"></i></div>
|
|
<div class="divider-custom-line"></div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Contact Section Content-->
|
|
<div class="row justify-content-center">
|
|
{% for item in index.contact.items ? index.contact.items : config.theme_config.demo.contact.items %}
|
|
{% set classes = ["col-md-6", "col-lg-4"] %}
|
|
{% if not loop.last %}
|
|
{% set classes = classes|merge(["mb-5"]) %}
|
|
{% if loop.revindex <= (loop.length - 1) % 3 + 1 %}
|
|
{% if loop.revindex == 3 %}
|
|
{% set classes = classes|merge(["mb-lg-0"]) %}
|
|
{% elseif loop.revindex == 2 %}
|
|
{% if loop.index == 2 %}
|
|
{% set classes = classes|merge(["mb-lg-0"]) %}
|
|
{% else %}
|
|
{% set classes = classes|merge(["mb-md-0"]) %}
|
|
{% endif %}
|
|
{% endif %}
|
|
{% elseif loop.revindex == 2 and loop.index == 3 %}
|
|
{% set classes = classes|merge(["mb-md-0","mb-lg-5"]) %}
|
|
{% endif %}
|
|
{% endif %}
|
|
<div class="{{ classes|join(" ") }}">
|
|
<div class="d-flex flex-column align-items-center">
|
|
<div class="icon-contact mb-3"><i class="{{ item.brands ? "fab" : "fas" }} fa-{{ item.icon }}"></i></div>
|
|
<div class="text-muted">{{ item.title }}</div>
|
|
{% if item.link %}<a href="{{ item.link|url }}"{% else %}<div{% endif %} class="lead font-weight-bold">{{ item.content }}{{ item.link ? "</a>" : "</div>" }}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
|