CodePen Embed - Colourful form. w. required field invalid-entry shake prompt animation

<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&hellip;
</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;
}

/* //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;
}

/* WebKit native focus styles 
@media (-webkit-min-device-pixel-ratio:0) {
  .focus-style {
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
  }
}
*/

// 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();
}

This Pen is owned by Inspired Labs - London, United Kingdom on CodePen.

See more by @inspiredlabs on CodePen

External CSS

https://inspiredlabs.co.uk/kel12/css/tachyon.shower.css

External JavaScript

This Pen doesn't use any external JavaScript resources.