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

refactor contact form typography

Browse Source
master
Aaron N. Brock 5 years ago
parent 72749ac6e8
commit dd5cf88bca
2 changed files with 102 additions and 214 deletions
  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; 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 { a {
color: #7e7e8a; color: $body-color;
text-decoration: underline; text-decoration: underline;
font-size: 16px;
line-height: 34px;
font-family: $secondary-font;
display: block;
} }
} }
} }
.contact-form { .contact-form {
padding: 50px 0 100px 0; padding: 50px 0 100px 0;
&-title {
h4 {
font-family: $primary-font;
color: $secondary-color;
margin: 0 0 30px 0;
font-size: 35px;
}
}
&-input { &-input {
.form-group { .form-group {
margin-bottom: 30px; 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 { #map {

196
layouts/contact/list.html
Unescape View File

@ -1,39 +1,39 @@
{{ define "main" }} {{ define "main" }}
<header class="breadCrumb"> <header class="breadCrumb">
<div class="svg-img"> <div class="svg-img">
<img src="{{ "images/hero/figure-svg.svg" | absURL }}" alt="bg"> <img src="{{ "images/hero/figure-svg.svg" | absURL }}" alt="bg">
</div> </div>
<div class="animate-shape"> <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"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
<defs> <defs>
<linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox"> <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="0" stop-color="#f1f6f9" />
<stop offset="1" stop-color="#f1f6f9" stop-opacity="0" /> <stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
</linearGradient> </linearGradient>
</defs> </defs>
<g data-name="blob-shape (3)"> <g data-name="blob-shape (3)">
<path class="blob" fill="url(#d)" <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" /> 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> </g>
</svg> </svg>
</div> </div>
<div class="animate-pattern"> <div class="animate-pattern">
<img src="{{ "images/service/background-pattern.svg" | absURL }}" alt="background-shape"> <img src="{{ "images/service/background-pattern.svg" | absURL }}" alt="background-shape">
</div> </div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12 text-center"> <div class="col-12 text-center">
<h3 class="breadCrumb__title">{{ .Title }}</h3> <h3 class="breadCrumb__title">{{ .Title }}</h3>
<nav aria-label="breadcrumb" class="d-flex justify-content-center"> <nav aria-label="breadcrumb" class="d-flex justify-content-center">
<ol class="breadcrumb align-items-center"> <ol class="breadcrumb align-items-center">
<li class="breadcrumb-item"><a href="{{ .Site.BaseURL }}">Home</a></li> <li class="breadcrumb-item"><a href="{{ .Site.BaseURL }}">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ .Params.breadcrumb }}</li> <li class="breadcrumb-item active" aria-current="page">{{ .Params.breadcrumb }}</li>
</ol> </ol>
</nav> </nav>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
{{ $address := .Site.Params.address }} {{ $address := .Site.Params.address }}
@ -44,17 +44,10 @@
<div class="contact__info_item"> <div class="contact__info_item">
<div class="contact__info_item-icon"> <div class="contact__info_item-icon">
<div class="icon-background"> <div class="icon-background">
<svg <svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702">
xmlns="http://www.w3.org/2000/svg" <path fill="#f1f6f9"
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" 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> </svg>
</div> </div>
<div class="icon"> <div class="icon">
@ -71,17 +64,10 @@
<div class="contact__info_item"> <div class="contact__info_item">
<div class="contact__info_item-icon"> <div class="contact__info_item-icon">
<div class="icon-background"> <div class="icon-background">
<svg <svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702">
xmlns="http://www.w3.org/2000/svg" <path fill="#f1f6f9"
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" 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> </svg>
</div> </div>
<div class="icon"> <div class="icon">
@ -89,25 +75,20 @@
</div> </div>
</div> </div>
<h4>Phone & Email</h4> <h4>Phone & Email</h4>
<p>{{ $address.phone }}</p> <p>{{ $address.phone }}<br>
<a href="mailto:{{ $address.email }}">{{ $address.email }}</a> <a href="mailto:{{ $address.email }}">{{ $address.email }}</a>
</p>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<div class="contact__info_item"> <div class="contact__info_item">
<div class="contact__info_item-icon"> <div class="contact__info_item-icon">
<div class="icon-background"> <div class="icon-background">
<svg <svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702">
xmlns="http://www.w3.org/2000/svg" <path fill="#f1f6f9"
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" 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> </svg>
</div> </div>
<div class="icon"> <div class="icon">
@ -123,59 +104,84 @@
</div> </div>
</div> </div>
</section> </section>
<section class="contact-form"> <section class="contact-form">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<div class="contact-form-title"> <div class="contact-form-title">
<h4>Contact Form</h4> <h3>Contact Form</h3>
</div> </div>
<div class="contact-form-input"> <div class="contact-form-input">
<form id="contact-form" action="{{ .Site.Params.formspreeURL }}" method="POST"> <form id="contact-form" action="{{ .Site.Params.formspreeURL }}" method="POST">
<div class="form-row"> <div class="form-row">
<div class="form-group col-md-6 pr-3"> <div class="form-group col-md-6 pr-3">
<input <input type="text" class="form-control" name="Name" placeholder="Name" required />
type="text"
class="form-control"
name="Name"
placeholder="Name"
required
/>
</div> </div>
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<input <input type="email" class="form-control" name="email" placeholder="Email" required />
type="email"
class="form-control"
name="email"
placeholder="Email"
required
/>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<textarea <textarea class="form-control" id="message" rows="6" name="message" placeholder="Message"></textarea>
class="form-control"
id="exampleFormControlTextarea1"
rows="6"
name="message"
placeholder="Message"
></textarea>
</div> </div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="agreement" id="aggrement" required /> <div class="form-group">
<label class="form-check-label" for="aggrement"> <div class="form-check small">
I agree that my submitted data is being collected and <input type="checkbox" class="form-check-input" name="agreement" id="aggrement" required />
stored.</label <label class="form-check-label" for="aggrement">
> I agree that my submitted data is being collected and
stored.</label>
</div>
</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> <p id="contact-form-status" class="mt-3"></p>
</form> </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> </div>
<div class="col-lg-6"> <div class="col-lg-6">
{{ $map := .Site.Params.map }} {{ $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> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save