JonasFranzDEV
/
portio-hugo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor contact form typography

Browse Source
master
Aaron N. Brock 4 years ago
parent 72749ac6e8
commit dd5cf88bca
2 changed files with 102 additions and 214 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 120
      assets/scss/components/_contact.scss
  2. 196
      layouts/contact/list.html

120
assets/scss/components/_contact.scss
Unescape View File

@ -20,135 +20,17 @@
z-index: 1;
}
}
h4 {
margin: 0 0 30px 0;
font-family: $primary-font;
font-size: 25px;
color: $secondary-color;
}
p {
margin: 0;
font-size: 16px;
line-height: 34px;
color: #7e7e8a;
font-family: $secondary-font;
}
a {
color: #7e7e8a;
color: $body-color;
text-decoration: underline;
font-size: 16px;
line-height: 34px;
font-family: $secondary-font;
display: block;
}
}
}
.contact-form {
padding: 50px 0 100px 0;
&-title {
h4 {
font-family: $primary-font;
color: $secondary-color;
margin: 0 0 30px 0;
font-size: 35px;
}
}
&-input {
.form-group {
margin-bottom: 30px;
.form-control {
border: 1px solid #aeb8be;
border-radius: 7px;
padding: 10px 30px;
font-size: 14px;
font-family: $secondary-font;
color: #282f49;
&::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #282f49;
}
&:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #282f49;
}
&::-ms-input-placeholder {
/* Microsoft Edge */
color: #282f49;
}
&:focus {
outline: 0;
box-shadow: none;
}
}
input.form-control {
height: 55px;
border: 1px solid #aeb8be;
}
}
.form-check {
padding: 0;
margin-bottom: 30px;
margin-top: -10px;
&-input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
// display: none;
cursor: pointer;
width: 1px;
height: 1px;
opacity: 0;
margin-left: 10px;
margin-top: 23px;
}
&-label {
position: relative;
cursor: pointer;
&::before {
content: "";
-webkit-appearance: none;
background-color: transparent;
border: 1px solid #aeb8be;
height: 20px;
width: 20px;
border-radius: 4px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 8px;
}
}
input:checked + label:after {
content: "";
display: block;
position: absolute;
top: 6px;
left: 7px;
width: 6px;
height: 12px;
border: solid #0079bf;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
}
.contact-form-btn {
padding: 20px 45px;
display: inline-block;
font-size: 16px;
font-family: $secondary-font;
background: $primary-color;
border-radius: 7px;
color: #fff;
transition: all 0.3s ease;
&:hover {
background: #425fee;
box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
transform: scale(1.03);
text-decoration: none;
}
}
}
#map {

196
layouts/contact/list.html
Unescape View File

@ -1,39 +1,39 @@
{{ define "main" }}
<header class="breadCrumb">
<div class="svg-img">
<img src="{{ "images/hero/figure-svg.svg" | absURL }}" alt="bg">
</div>
<div class="animate-shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
<defs>
<linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#f1f6f9" />
<stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
</linearGradient>
</defs>
<g data-name="blob-shape (3)">
<path class="blob" fill="url(#d)"
d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" />
</g>
</svg>
</div>
<div class="animate-pattern">
<img src="{{ "images/service/background-pattern.svg" | absURL }}" alt="background-shape">
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h3 class="breadCrumb__title">{{ .Title }}</h3>
<nav aria-label="breadcrumb" class="d-flex justify-content-center">
<ol class="breadcrumb align-items-center">
<li class="breadcrumb-item"><a href="{{ .Site.BaseURL }}">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ .Params.breadcrumb }}</li>
</ol>
</nav>
</div>
</div>
</div>
<div class="svg-img">
<img src="{{ "images/hero/figure-svg.svg" | absURL }}" alt="bg">
</div>
<div class="animate-shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
<defs>
<linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#f1f6f9" />
<stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
</linearGradient>
</defs>
<g data-name="blob-shape (3)">
<path class="blob" fill="url(#d)"
d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" />
</g>
</svg>
</div>
<div class="animate-pattern">
<img src="{{ "images/service/background-pattern.svg" | absURL }}" alt="background-shape">
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h3 class="breadCrumb__title">{{ .Title }}</h3>
<nav aria-label="breadcrumb" class="d-flex justify-content-center">
<ol class="breadcrumb align-items-center">
<li class="breadcrumb-item"><a href="{{ .Site.BaseURL }}">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ .Params.breadcrumb }}</li>
</ol>
</nav>
</div>
</div>
</div>
</header>
{{ $address := .Site.Params.address }}
@ -44,17 +44,10 @@
<div class="contact__info_item">
<div class="contact__info_item-icon">
<div class="icon-background">
<svg
xmlns="http://www.w3.org/2000/svg"
width="122.457"
height="109.702"
viewBox="0 0 122.457 109.702"
>
<path
fill="#f1f6f9"
<svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702">
<path fill="#f1f6f9"
d="M49.855527 9.984102c-4.337424-.815024-8.766002-1.633779-13.152776-1.113889-8.196034.975107-15.344329 6.696991-19.41555 13.879649s-5.363288 15.655094-5.187042 23.907191c.156996 7.385448 1.479849 14.875357 4.972905 21.38465s9.337384 11.961229 16.458344 13.922244c4.833752 1.331211 10.056683 1.044827 14.74081 2.829827 7.560693 2.881382 12.209757 10.489626 19.01235 14.870016a25.650039 25.650039 0 0024.16316 1.698928c8.342551-3.846451 14.03857-12.107291 16.641338-20.918947s2.471077-18.187687 1.756125-27.346305c-.843101-10.912846-3.01686-22.783019-11.354287-29.869462-6.037066-5.130853-14.208558-6.772976-21.995428-8.235353z"
data-name="Path 1354"
/>
data-name="Path 1354" />
</svg>
</div>
<div class="icon">
@ -71,17 +64,10 @@
<div class="contact__info_item">
<div class="contact__info_item-icon">
<div class="icon-background">
<svg
xmlns="http://www.w3.org/2000/svg"
width="122.457"
height="109.702"
viewBox="0 0 122.457 109.702"
>
<path
fill="#f1f6f9"
<svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702">
<path fill="#f1f6f9"
d="M49.855527 9.984102c-4.337424-.815024-8.766002-1.633779-13.152776-1.113889-8.196034.975107-15.344329 6.696991-19.41555 13.879649s-5.363288 15.655094-5.187042 23.907191c.156996 7.385448 1.479849 14.875357 4.972905 21.38465s9.337384 11.961229 16.458344 13.922244c4.833752 1.331211 10.056683 1.044827 14.74081 2.829827 7.560693 2.881382 12.209757 10.489626 19.01235 14.870016a25.650039 25.650039 0 0024.16316 1.698928c8.342551-3.846451 14.03857-12.107291 16.641338-20.918947s2.471077-18.187687 1.756125-27.346305c-.843101-10.912846-3.01686-22.783019-11.354287-29.869462-6.037066-5.130853-14.208558-6.772976-21.995428-8.235353z"
data-name="Path 1354"
/>
data-name="Path 1354" />
</svg>
</div>
<div class="icon">
@ -89,25 +75,20 @@
</div>
</div>
<h4>Phone & Email</h4>
<p>{{ $address.phone }}</p>
<a href="mailto:{{ $address.email }}">{{ $address.email }}</a>
<p>{{ $address.phone }}<br>
<a href="mailto:{{ $address.email }}">{{ $address.email }}</a>
</p>
</div>
</div>
<div class="col-lg-4">
<div class="contact__info_item">
<div class="contact__info_item-icon">
<div class="icon-background">
<svg
xmlns="http://www.w3.org/2000/svg"
width="122.457"
height="109.702"
viewBox="0 0 122.457 109.702"
>
<path
fill="#f1f6f9"
<svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702">
<path fill="#f1f6f9"
d="M49.855527 9.984102c-4.337424-.815024-8.766002-1.633779-13.152776-1.113889-8.196034.975107-15.344329 6.696991-19.41555 13.879649s-5.363288 15.655094-5.187042 23.907191c.156996 7.385448 1.479849 14.875357 4.972905 21.38465s9.337384 11.961229 16.458344 13.922244c4.833752 1.331211 10.056683 1.044827 14.74081 2.829827 7.560693 2.881382 12.209757 10.489626 19.01235 14.870016a25.650039 25.650039 0 0024.16316 1.698928c8.342551-3.846451 14.03857-12.107291 16.641338-20.918947s2.471077-18.187687 1.756125-27.346305c-.843101-10.912846-3.01686-22.783019-11.354287-29.869462-6.037066-5.130853-14.208558-6.772976-21.995428-8.235353z"
data-name="Path 1354"
/>
data-name="Path 1354" />
</svg>
</div>
<div class="icon">
@ -123,59 +104,84 @@
</div>
</div>
</section>
<section class="contact-form">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="contact-form-title">
<h4>Contact Form</h4>
<h3>Contact Form</h3>
</div>
<div class="contact-form-input">
<form id="contact-form" action="{{ .Site.Params.formspreeURL }}" method="POST">
<div class="form-row">
<div class="form-group col-md-6 pr-3">
<input
type="text"
class="form-control"
name="Name"
placeholder="Name"
required
/>
<input type="text" class="form-control" name="Name" placeholder="Name" required />
</div>
<div class="form-group col-md-6">
<input
type="email"
class="form-control"
name="email"
placeholder="Email"
required
/>
<input type="email" class="form-control" name="email" placeholder="Email" required />
</div>
</div>
<div class="form-group">
<textarea
class="form-control"
id="exampleFormControlTextarea1"
rows="6"
name="message"
placeholder="Message"
></textarea>
<textarea class="form-control" id="message" rows="6" name="message" placeholder="Message"></textarea>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="agreement" id="aggrement" required />
<label class="form-check-label" for="aggrement">
I agree that my submitted data is being collected and
stored.</label
>
<div class="form-group">
<div class="form-check small">
<input type="checkbox" class="form-check-input" name="agreement" id="aggrement" required />
<label class="form-check-label" for="aggrement">
I agree that my submitted data is being collected and
stored.</label>
</div>
</div>
<button type="submit" class="btn contact-form-btn" id="contact-form-button">Send Message</button>
<button type="submit" class="btn btn-primary btn-zoom" id="contact-form-button">Send Message</button>
<p id="contact-form-status" class="mt-3"></p>
</form>
<!-- <form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
I agree that my submitted data is being collected and
stored.
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form> -->
</div>
</div>
<div class="col-lg-6">
{{ $map := .Site.Params.map }}
<div id="map" data-lat={{ $map.latitude }} data-long={{ $map.longitude }} data-pin={{ $map.pinImage | absURL }}></div>
<div id="map" data-lat={{ $map.latitude }} data-long={{ $map.longitude }} data-pin={{ $map.pinImage | absURL }}>
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save