<svg class="spirites" style="display: none;"><defs>
<g id="check" fill="currentcolor"><path d="M505.943 79.594c-8.077-8.077-21.172-8.077-29.249 0l-308.939 308.938-132.449-132.449c-8.076-8.077-21.172-8.077-29.248 0-8.077 8.077-8.077 21.172 0 29.249l147.074 147.074c4.038 4.039 9.332 6.058 14.625 6.058 5.293 0 10.587-2.019 14.625-6.059l323.562-323.562c8.075-8.076 8.075-21.171-.001-29.249z"/></g>
<g id="disk" fill="currentcolor"><circle cx="256" cy="256" r="215"/></g>
</defs></svg>
<main class="system w-100 no-clutter ma0 pa0 h-100">
<article class="bg-deep-petrol near-white cf pt7 w-100 pv5 pv6-l" id="prototype-questionnaire">
<div class="w-90 ml-auto mr-auto w-80-ns ml1-ns mr1-ns w-two-thirds-m ml4-m mr4-m w-75-l ml5-l mr5-l">
<header>
<h1 class="tc tl-ns f2 fw7 ttu tracked lh-title mt0 mb3 avenir text-shadow">Rate your experience</span></h1>
<h2 class="tc tl-ns f3 fw4 i lh-title mt0 baskerville silver">Feedback helps us to improve</h2>
</header><!-- /questionnaire -->
<form accept-charset="utf-8" action="" class="f5 f4-ns avenir measure" method="POST">
<input name="_subject" type="hidden" value="questionnaire"><!-- plausible spam -->
<!--
<fieldset class="pa4 mh0 ba b--transparent">
<legend class="ph2 dn">Please rate your planning experience</legend>
-->
<ul class="list pl0">
<li id="#"
lang="en"
class="mb5">
<p>When <strong>planning your trip</strong>, how would you rate our website?</p>
<div class="flex items-end flex-row w-100 " lang="en">
<div class="flex flex-column w-third ">
<div class="">
<label for="answer1"
class="pointer">Poor</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer1"
name="question1">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-center w-third ">
<div class="">
<label for="answer2"
class="pointer">Satisfactory</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer2"
name="question1">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-end w-third ">
<div class="">
<label for="answer3"
class="pointer">Good</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer3"
name="question1">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
</div>
</li><!-- /question1 -->
<li id="##"
lang="en"
class="mb5">
<p>How was the <strong>booking process</strong>?</p>
<div class="flex items-end flex-row w-100 " lang="en">
<div class="flex flex-column w-third ">
<div class="">
<label for="answer4"
class="pointer">Poor</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer4"
name="question2">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-center w-third ">
<div class="">
<label for="answer5"
class="pointer">Satisfactory</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer5"
name="question2">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-end w-third ">
<div class="">
<label for="answer6"
class="pointer">Good</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer6"
name="question2">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
</div>
</li><!-- /question2 -->
<li id="###"
lang="en"
class="mb5">
<p>How was the <strong>after-booking support</strong>?</p>
<div class="flex items-end flex-row w-100 " lang="en">
<div class="flex flex-column w-third ">
<div class="">
<label for="answer7"
class="pointer">Poor</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer7"
name="question3">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-center w-third ">
<div class="">
<label for="answer8"
class="pointer">Satisfactory</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer8"
name="question3">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-end w-third ">
<div class="">
<label for="answer9"
class="pointer">Good</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer9"
name="question3">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
</div>
</li><!-- /question3 -->
<!--
<fieldset class="pa4 mh0 ba b--transparent">
<legend class="ph2 dn">Please rate your your trip</legend>
-->
<li id="####"
lang="en"
class="mb5">
<p>How <strong>well organised</strong> was your trip?</p>
<div class="flex items-end flex-row w-100 " lang="en">
<div class="flex flex-column w-third ">
<div class="">
<label for="answer10"
class="pointer">Poor</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer10"
name="question4">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-center w-third ">
<div class="">
<label for="answer11"
class="pointer">Satisfactory</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer11"
name="question4">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-end w-third ">
<div class="">
<label for="answer12"
class="pointer">Good</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer12"
name="question4">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
</div>
</li><!-- /question4 -->
<li id="#####"
lang="en"
class="mb5">
<p>How was the <strong>accommodation</strong> (such as hotel, lodging, etc)?</p>
<div class="flex items-end flex-row w-100 " lang="en">
<div class="flex flex-column w-third ">
<div class="">
<label for="answer13"
class="pointer">Poor</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer13"
name="question5">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-center w-third ">
<div class="">
<label for="answer14"
class="pointer">Satisfactory</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer14"
name="question5">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-end w-third ">
<div class="">
<label for="answer15"
class="pointer">Good</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer15"
name="question5">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
</div>
</li><!-- /question5 -->
<li id="######"
lang="en"
class="mb5">
<p>How were the <strong>included meals</strong>?</p>
<div class="flex items-end flex-row w-100 " lang="en">
<div class="flex flex-column w-third ">
<div class="">
<label for="answer16"
class="pointer">Poor</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer16"
name="question6">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-center w-third ">
<div class="">
<label for="answer17"
class="pointer">Satisfactory</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer17"
name="question6">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-end w-third ">
<div class="">
<label for="answer18"
class="pointer">Good</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer18"
name="question6">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
</div>
</li><!-- /question6 -->
<!--
<fieldset class="pa4 mh0 ba b--transparent">
<legend class="ph2 dn">Please rate your your travel itinerary</legend>
-->
<li id="########"
lang="en"
class="mb5">
<p>How was the <strong>overall experience</strong> of your trip?</p>
<div class="flex items-end flex-row w-100 " lang="en">
<div class="flex flex-column w-third ">
<div class="">
<label for="answer22"
class="pointer">Poor</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer22"
name="question8">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-center w-third ">
<div class="">
<label for="answer23"
class="pointer">Satisfactory</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer23"
name="question8">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-end w-third ">
<div class="">
<label for="answer24"
class="pointer">Good</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer24"
name="question8">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
</div>
</li><!-- /question8 -->
<li id="#########"
lang="en"
class="mb5">
<p>How was the accompanying <strong>tour guide</strong>?</p>
<div class="flex items-end flex-row w-100 " lang="en">
<div class="flex flex-column w-third ">
<div class="">
<label for="answer25"
class="pointer">Poor</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer25"
name="question9">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-center w-third ">
<div class="">
<label for="answer26"
class="pointer">Satisfactory</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer26"
name="question9">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-end w-third ">
<div class="">
<label for="answer27"
class="pointer">Good</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer27"
name="question9">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
</div>
</li><!-- /question9 -->
<!--
<fieldset class="pa4 mh0 ba b--transparent">
<legend class="ph2 dn">Please rate the price, to quality ratio</legend>
-->
<li id="##########"
lang="en"
class="mb5">
<p>Please rate the trip in terms of <strong>value for money</strong>?<p>
<div class="flex items-end flex-row w-100 " lang="en">
<div class="flex flex-column w-third ">
<div class="">
<label for="answer28"
class="pointer">Poor</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer28"
name="question10">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-center w-third ">
<div class="">
<label for="answer29"
class="pointer">Satisfactory</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer29"
name="question10">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
<div class="flex flex-column items-end w-third ">
<div class="">
<label for="answer30"
class="pointer">Good</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer30"
name="question10">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- flex-column w-third -->
</div>
</li><!-- /question10 -->
<li id="###########"
lang="en"
class="mb5">
<p>On a scale of 1 to 10, <strong>will you travel with us again</strong>?</p>
<div class="flex
flex-column flex-row-ns
justify-around
pa0 mb3">
<label for="answer105"
class="pointer flex flex-column w-50 fw6 ">Unlikely, no</label>
<label for="answer110"
class="pointer flex flex-column w-50 fw6 tr">Definitely, yes</label>
</div>
<div class="flex items-center
flex-column flex-row-ns
justify-around
pa0">
<div class="flex
items-center
flex-row
w-100
ttn
ttu-ns ttn-m ttn-l">
<div class="flex flex-column items-center w-10 " >
<div class="">
<label for="answer101"
class="pointer">
<span class="dn dn-ns dn-m dib-l f5-m f4-l">One</span>
<span class="dib dib-ns dib-m dn-l f2 f3-ns fw3 fw6-ns">1</span>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer101"
name="question11">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- /flex-column w-10 -->
<div class="flex flex-column items-center w-10 ">
<div class="">
<label for="answer102"
class="pointer">
<span class="dn dn-ns dn-m dib-l f5-m f4-l">Two</span>
<span class="dib dib-ns dib-m dn-l f2 f3-ns fw3 fw6-ns">2</span>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer102"
name="question11">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- /flex-column w-10 -->
<div class="flex flex-column items-center w-10 ">
<div class="">
<label for="answer103"
class="pointer">
<span class="dn dn-ns dn-m dib-l f5-m f4-l">Three</span>
<span class="dib dib-ns dib-m dn-l f2 f3-ns fw3 fw6-ns">3</span>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer103"
name="question11">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- /flex-column w-10 -->
<div class="flex flex-column items-center w-10 ">
<div class="">
<label for="answer104"
class="pointer">
<span class="dn dn-ns dn-m dib-l f5-m f4-l">Four</span>
<span class="dib dib-ns dib-m dn-l f2 f3-ns fw3 fw6-ns">4</span>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer104"
name="question11">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- /flex-column w-10 -->
<div class="flex flex-column items-center w-10 ">
<div class="">
<label for="answer105"
class="pointer">
<span class="dn dn-ns dn-m dib-l f5-m f4-l">Five</span>
<span class="dib dib-ns dib-m dn-l f2 f3-ns fw3 fw6-ns">5</span>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer105"
name="question11">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- /flex-column w-10 -->
<div class="flex flex-column items-center w-10 ">
<div class="">
<label for="answer106"
class="pointer">
<span class="dn dn-ns dn-m dib-l f5-m f4-l">Six</span>
<span class="dib dib-ns dib-m dn-l f2 f3-ns fw3 fw6-ns">6</span>
</label>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer106"
name="question11">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- /flex-column w-10 -->
<div class="flex flex-column items-center w-10 ">
<div class="">
<label for="answer107"
class="pointer">
<span class="dn dn-ns dn-m dib-l f5-m f4-l">Seven</span>
<span class="dib dib-ns dib-m dn-l f2 f3-ns fw3 fw6-ns">7</span>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer107"
name="question11">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- /flex-column w-10 -->
<div class="flex flex-column items-center w-10 ">
<div class="">
<label for="answer108"
class="pointer">
<span class="dn dn-ns dn-m dib-l f5-m f4-l">Eight</span>
<span class="dib dib-ns dib-m dn-l f2 f3-ns fw3 fw6-ns">8</span>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer108"
name="question11">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- /flex-column w-10 -->
<div class="flex flex-column items-center w-10 ">
<div class="">
<label for="answer109"
class="pointer">
<span class="dn dn-ns dn-m dib-l f5-m f4-l">Nine</span>
<span class="dib dib-ns dib-m dn-l f2 f3-ns fw3 fw6-ns">9</span>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer109"
name="question11">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- /flex-column w-10 -->
<div class="flex flex-column items-center w-10 ">
<div class="">
<label for="answer110"
class="pointer">
<span class="dn dn-ns dn-m dib-l f5-m f4-l">Ten</span>
<span class="dib dib-ns dib-m dn-l f2 f3-ns fw3 fw6-ns">10</span>
</div>
<div class="">
<label class="pointer">
<input class="visually-hidden"
type="radio"
id="answer110"
name="question11">
<svg class="radio-animation h2 w2 absolute pa0 ml0 white" viewBox="0 0 512 512" alt="disk">
<use xlink:href="#disk"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns br-100 pa0 bg-transparent"></aside>
</label>
</div>
</div><!-- /flex-column w-10 -->
</div>
</div><!-- / -->
</li><!-- /question11 -->
</ul>
<label for="a" required lang="it" onblur="retry(this.id);"
class="flex items-center
flex-column flex-row-ns
justify-between
pa0
pointer
">
<div class="">
<input type="checkbox" id="a" class="visually-hidden" >
<svg class="checkbox-animation h2 w2 absolute pa0 ml0 white " viewBox="0 0 512 512" alt="check">
<use xlink:href="#check"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns pa0 bg-transparent"></aside>
</div>
<div class="flex items-end flex-row w-100">
<div class="flex flex-column w-100">
<div class="">
<p class="pa0 ma0 mb3 ml0 ml3-ns ml3-m ml3-l f5 f5-ns white-70 fw4 lh-copy tracked dim">Accept prototype. Avocado tortilla chicken. Ground beef taco spicy jalapeno sauce sour cream. Chimichanga avocado empanadas tortilla jalapenos. Red pepper guacamole spicy corn.</p>
<!-- //web.archive.org/web/20150627180158/http://avocadoipsum.com/ -->
</div>
</div><!-- flex-column -->
</div>
</label>
<!--</fieldset>-->
<div class="mt2 fr cb cf">
<input class="input-reset pointer br0 f5 f5-ns b ph4 pv3 ba bw2-ns b--white white bg-black grow ttu tracked-mega" type="submit" value="send" lang="en">
</div>
</form>
</div><!-- w-90 ml-auto mr-auto w-80-ns ml1-ns mr1-ns w-two-thirds-m ml4-m mr4-m w-75-l ml5-l mr5-l -->
</article><!-- /prototype-questionnaire -->
</main>
<section class="bg-black white">
Coffee break…
</section>
<section class="system w-100 no-clutter ma0 pa0 h-100">
<article class="bg-dark-gray near-white cf pt7 w-100 pv5 pv6-l" id="subscribe-dark">
<!-- pv5 pv6-l -->
<div class="w-90 ml-auto mr-auto w-80-ns ml1-ns mr1-ns w-two-thirds-m ml4-m mr4-m w-75-l ml5-l mr5-l">
<header>
<h1 class="tc tl-ns f2 fw7 ttu tracked lh-title mt0 mb3 avenir text-shadow">Iscriviti <span class="dn dib-ns">alla newsletter</span></h1>
<!-- Alt: https://css-tricks.com/css-media-queries/ -->
<h2 class="tc tl-ns f3 fw4 i lh-title mt0 baskerville silver">Kel 12, Cultura del viaggio</h2>
</header><!-- /subscribe -->
<form accept-charset="utf-8" action="" class="f5 f4-ns avenir measure" method="POST">
<input name="_subject" type="hidden" value="Iscriviti"><!-- plausible spam -->
<!--
<fieldset class="pa4 mh0 ba b--transparent">
<legend class="ph2 dn">Terms and conditions</legend>
-->
<div class="mt4 mb5">
<label class="db relative h3 w-100 f5 f5-ns white-70 fw4 lh-copy ttu tracked-mega placeholder-animation">
<input required type="text" name="text-2" id="text-2" onblur="retry(this.id);" class="absolute fw4 input-reset br0 bn pa3 w-100 bg-white-90" placeholder="Nome completo" />
<span class="absolute fw4 ml3 silver">Nome completo</span>
</label>
</div>
<div class="mt4 mb5">
<label lang="it" for="email-2" class="db relative h3 w-100 f5 f5-ns white-70 fw4 lh-copy ttu tracked-mega placeholder-animation">
<input required type="email" name="email-2" id="email-2" onblur="retry(this.id);" class="absolute fw4 input-reset br0 bn pa3 w-100 bg-white-90" placeholder="Email" pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" />
<span class="absolute fw4 ml3 silver">Email</span>
</label>
</div>
<label for="d" required lang="it" onblur="retry(this.id);"
class="flex items-center
flex-column flex-row-ns
justify-between
pa0
pointer
">
<div class="">
<input type="checkbox" id="d" class="visually-hidden" >
<svg class="checkbox-animation h2 w2 absolute pa0 ml0 white " viewBox="0 0 512 512" alt="check">
<use xlink:href="#check"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns pa0 bg-transparent"></aside>
</div>
<div class="flex items-end flex-row w-100">
<div class="flex flex-column w-100">
<div class="">
<p class="pa0 ma0 mb3 ml0 ml3-ns ml3-m ml3-l f5 f5-ns white-70 fw4 lh-copy tracked dim">Ho preso visione dell’ informativa sulla privacy e presto il consenso a Kel 12 Tour Operator S.r.l. per il trattamento dei miei dati personali.</p>
</div>
</div><!-- flex-column -->
</div>
</label>
<label for="c" required lang="it" onblur="retry(this.id);"
class="flex items-center
flex-column flex-row-ns
justify-between
pa0
pointer
">
<div class="">
<input type="checkbox" id="c" class="visually-hidden" >
<svg class="checkbox-animation h2 w2 absolute pa0 ml0 white " viewBox="0 0 512 512" alt="check">
<use xlink:href="#check"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns pa0 bg-transparent"></aside>
</div>
<div class="flex items-end flex-row w-100">
<div class="flex flex-column w-100">
<div class="">
<p class="pa0 ma0 mb3 ml0 ml3-ns ml3-m ml3-l f5 f5-ns white-70 fw4 lh-copy tracked dim">Presto il consenso al trattamento dei miei dati personali per l’invio tramite sms e/o e-mail di comunicazioni informative e promozionali.</p>
</div>
</div><!-- flex-column -->
</div>
</label>
<label for="b" required lang="it" onblur="retry(this.id);"
class="flex items-center
flex-column flex-row-ns
justify-between
pa0
pointer
">
<div class="">
<input type="checkbox" id="b" class="visually-hidden" >
<svg class="checkbox-animation h2 w2 absolute pa0 ml0 white " viewBox="0 0 512 512" alt="check">
<use xlink:href="#check"></use>
</svg>
<aside class="h2 w2 b--silver ba bw1-ns pa0 bg-transparent"></aside>
</div>
<div class="flex items-end flex-row w-100">
<div class="flex flex-column w-100">
<div class="">
<p class="pa0 ma0 mb3 ml0 ml3-ns ml3-m ml3-l f5 f5-ns white-70 fw4 lh-copy tracked dim">Presto il consenso al trattamento dei miei dati personali per l’iscrizione al servizio di invio newsletter in relazione alle iniziative proprie e/o di società controllate e/o collegate, nonché del nostro partner ufficiale National Geographic Partners LLC.</p>
</div>
</div><!-- flex-column -->
</div>
</label>
<!--</fieldset>-->
<div class="mt2 fr cb cf">
<input class="input-reset pointer br0 f5 f5-ns b ph4 pv3 ba bw2-ns b--white white bg-black grow ttu tracked-mega" type="submit" value="Iscriviti" lang="it">
<input name="_next" type="hidden" value="//done/">
<!-- onblur="showUI();" onfocus="closeUI();" -->
<!-- css-tricks.com/almanac/selectors/r/required -->
</div>
</form>
</div><!-- w-90 ml-auto mr-auto w-80-ns ml1-ns mr1-ns w-two-thirds-m ml4-m mr4-m w-75-l ml5-l mr5-l -->
</article><!-- /subscribe-dark -->
</section>
input::placeholder {
color: transparent;
}
/* Webkit BUG! */
input::-webkit-input-placeholder {
/*padding-left: 0;*/
}
input:focus::placeholder {
color: transparent;
/* active */
}
/* Animated labels */
.select-reset {
border-bottom: 2px solid transparent;
}
/* stackoverflow.com/questions/36926830/how-do-you-make-placeholder-and-label-transitions */
.placeholder-animation input {
top: 2rem;
border-bottom: 2px solid transparent;
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
/* https://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform */
transition: border-bottom 1s .666s ease;
}
.placeholder-animation input ~ span{
/* Check focus delay animation on mobile! */
/* property name | duration | delay */
transition: top .6s .666s ease-in-out;
top: 3rem;
}
.placeholder-animation input:focus {
border-bottom: 2px solid black;
}
.placeholder-animation input:focus ~ span{
top: 0rem;
}
/* Prompt:
//stackoverflow.com/questions/15726000/css-animation-similar-to-mac-os-x-10-8-invalid-password-shake
*/
.retry {
animation: retry .5s linear;
-webkit-animation: retry .5s linear;
}
/* keyframes */
@-webkit-keyframes retry {
8%,
41% {
-webkit-transform: translateX(-10px);
}
25%,
58% {
-webkit-transform: translateX(10px);
}
75% {
-webkit-transform: translateX(-5px);
}
92% {
-webkit-transform: translateX(5px);
}
0%,
100% {
-webkit-transform: translateX(0);
}
}
/* -moz-keyframes */
@-moz-keyframes retry {
8%,
41% {
transform: translateX(-10px);
}
25%,
58% {
transform: translateX(10px);
}
75% {
transform: translateX(-5px);
}
92% {
transform: translateX(5px);
}
0%,
100% {
transform: translateX(0);
}
}
/* //ColeBemis.com feather collection: https://inspiredlabs.co.uk/j/feather/ in SVG defs `.spirites` */
.radio-animation,
.checkbox-animation {
fill:currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
-ms-transition: all .3s ease;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.visually-hidden:checked ~ .checkbox-animation,
.visually-hidden:checked ~ .radio-animation {
-ms-transform: scale(.55);
-webkit-transform: scale(.55);
transform: scale(.55);
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
/****** Checkbox/Radio hint ******/
input[type="checkbox"] ~ aside,
input[type="radio"] ~ aside {
transition: all .25s ease;
}
input[type="checkbox"]:active ~ aside,
input[type="checkbox"]:focus ~ aside,
input[type="radio"]:active ~ aside,
input[type="radio"]:focus ~ aside {
border-color: white;
background-color:black;
}
input[type="checkbox"]:hover ~ aside,
input[type="radio"]:hover ~ aside {
border-color: white;
background-color:transparent;
}
/* CSS basics: //w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_radio */
/* `.class` declarations: https://codepen.io/tutsplus/pen/MPBVGd?editors=1100 */
/* WebKit native focus styles
@media (-webkit-min-device-pixel-ratio:0) {
.focus-style {
outline-color: -webkit-focus-ring-color;
outline-style: auto;
}
}
*/ /*
console.log(event.target.type);
https://stackoverflow.com/questions/19994495/by-event-target-how-i-know-that-it-is-checkbox-or-it-is-radio
*/
// invalid fields
function retry(id) {
if ( ! document.getElementById(id).classList.contains('retry') ) {
document.getElementById(id).classList.add('retry');
}
else {document.getElementById(id).classList.remove('retry');}
}
/************************ RM *************************/
// stackoverflow.com/questions/4688373/ondragstart-not-equivalent-to-addeventlistenerdragstart
// Prevent accidental drags
function ondragstartReturnFalse() {
var href = document.getElementsByTagName('a');
//var drag = document.getElementsByClassName('no-drag');
for(var i = 0; i < href.length; i++) {
href[i].ondragstart = function () {
return false;
}//href[i].ondragstart
}//for
}//ondragstartReturnFalse()
// call on load
window.onload = function() {
ondragstartReturnFalse();
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.