Advertisement
Guest User

form.html

a guest
Mar 20th, 2017
219
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html class="no-js">
  3. <head>
  4.  
  5. <style>
  6. /*custom font*/
  7. @import url(http://fonts.googleapis.com/css?family=Montserrat);
  8.  
  9. /*basic reset*/
  10. * {margin: 0; padding: 0;}
  11.  
  12. html {
  13.     height: 100%;
  14.     /*Image only BG fallback*/
  15.    
  16.     /*background = gradient + image pattern combo*/
  17.     background:
  18.         linear-gradient(rgba(153, 0, 102, 0.7), rgba(102, 0, 153, 0.7));
  19. }
  20.  
  21. body {
  22.     font-family: montserrat, arial, verdana;
  23. }
  24. /*form styles*/
  25. #msform {
  26.     width: 400px;
  27.     margin: 50px auto;
  28.     text-align: center;
  29.     position: relative;
  30. }
  31. #msform fieldset {
  32.     background: white;
  33.     border: 0 none;
  34.     border-radius: 3px;
  35.     box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  36.     padding: 20px 30px;
  37.     box-sizing: border-box;
  38.     width: 80%;
  39.     margin: 0 10%;
  40.    
  41.     /*stacking fieldsets above each other*/
  42.     position: relative;
  43. }
  44. /*Hide all except first fieldset*/
  45. #msform fieldset:not(:first-of-type) {
  46.     display: none;
  47. }
  48. /*inputs*/
  49. #msform input, #msform textarea , #msform select{
  50.     padding: 15px;
  51.     border: 1px solid #ccc;
  52.     border-radius: 3px;
  53.     margin-bottom: 10px;
  54.     width: 100%;
  55.     box-sizing: border-box;
  56.     font-family: montserrat;
  57.     color: #2C3E50;
  58.     font-size: 13px;
  59. }
  60. /*buttons*/
  61. #msform .action-button {
  62.     width: 100px;
  63.     background: #2C3E50;
  64.     font-weight: bold;
  65.     color: white;
  66.     border: 0 none;
  67.     border-radius: 1px;
  68.     cursor: pointer;
  69.     padding: 10px 5px;
  70.     margin: 10px 5px;
  71. }
  72. #msform .action-button:hover, #msform .action-button:focus {
  73.     box-shadow: 0 0 0 2px white, 0 0 0 3px #56799c;
  74. }
  75.  
  76.  
  77. #msform p{
  78.     text-align: left;
  79.     font-size: 15px;
  80.     font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  81. }
  82.  
  83.  
  84. /*headings*/
  85. .fs-title {
  86.     font-size: 15px;
  87.     text-transform: uppercase;
  88.     color: #2C3E50;
  89.     margin-bottom: 10px;
  90. }
  91. .fs-subtitle {
  92.     font-weight: normal;
  93.     font-size: 13px;
  94.     color: #666;
  95.     margin-bottom: 20px;
  96. }
  97. /*progressbar*/
  98. #progressbar {
  99.     margin-bottom: 30px;
  100.     overflow: hidden;
  101.     /*CSS counters to number the steps*/
  102.     counter-reset: step;
  103. }
  104. #progressbar li {
  105.     list-style-type: none;
  106.     color: white;
  107.     text-transform: uppercase;
  108.     font-size: 9px;
  109.     width: 33.33%;
  110.     float: left;
  111.     position: relative;
  112. }
  113. #progressbar li:before {
  114.     content: counter(step);
  115.     counter-increment: step;
  116.     width: 20px;
  117.     line-height: 20px;
  118.     display: block;
  119.     font-size: 10px;
  120.     color: #333;
  121.     background: white;
  122.     border-radius: 3px;
  123.     margin: 0 auto 5px auto;
  124. }
  125. /*progressbar connectors*/
  126. #progressbar li:after {
  127.     content: '';
  128.     width: 100%;
  129.     height: 2px;
  130.     background: white;
  131.     position: absolute;
  132.     left: -50%;
  133.     top: 9px;
  134.     z-index: -1; /*put it behind the numbers*/
  135. }
  136. #progressbar li:first-child:after {
  137.     /*connector not needed before the first step*/
  138.     content: none;
  139. }
  140. /*marking active/completed steps green*/
  141. /*The number of the step and the connector before it = green*/
  142. #progressbar li.active:before,  #progressbar li.active:after{
  143.     background: #2C3E50;
  144.     color: white;
  145. }
  146.  
  147. .exceeded {
  148.     color: red;
  149. }
  150.  
  151. textarea {
  152.     width: 400px;
  153.     height: 200px;
  154. }
  155.  
  156. .coutdown  {
  157.     text-align: center;
  158.     font-size: 15;
  159. }
  160.  
  161.  
  162. /* Bottone upload */
  163.  
  164. *,
  165. *:after,
  166. *:before {
  167.     -webkit-box-sizing: border-box;
  168.     box-sizing: border-box;
  169. }
  170.  
  171. .clearfix:before,
  172. .clearfix:after {
  173.     display: table;
  174.     content: '';
  175. }
  176.  
  177. .clearfix:after {
  178.     clear: both;
  179. }
  180.  
  181. body {
  182.  
  183.     -webkit-font-smoothing: antialiased;
  184.     -moz-osx-font-smoothing: grayscale;
  185. }
  186.  
  187.  
  188.  
  189. .hidden {
  190.     position: absolute;
  191.     overflow: hidden;
  192.     width: 0;
  193.     height: 0;
  194.     pointer-events: none;
  195. }
  196.  
  197.  
  198.  
  199.  
  200. .js .inputfile {
  201.     width: 0.1px;
  202.     height: 0.1px;
  203.     opacity: 0;
  204.     overflow: hidden;
  205.     position: absolute;
  206.     z-index: -1;
  207. }
  208.  
  209. .inputfile + label {
  210.     max-width: 100%;
  211.     font-size: 18px;
  212.     /* 20px */
  213.     font-weight: 700;
  214.     text-overflow: ellipsis;
  215.     white-space: nowrap;
  216.     cursor: pointer;
  217.     display: inline-block;
  218.     overflow: hidden;
  219.     padding: 0.625rem 1.25rem;
  220.     /* 10px 20px */
  221. }
  222.  
  223. .no-js .inputfile + label {
  224.     display: none;
  225. }
  226.  
  227. .inputfile:focus + label,
  228. .inputfile.has-focus + label {
  229.     outline: 1px dotted #000;
  230.     outline: -webkit-focus-ring-color auto 5px;
  231. }
  232.  
  233. .inputfile + label * {
  234.     /* pointer-events: none; */
  235.     /* in case of FastClick lib use */
  236. }
  237.  
  238. .inputfile + label svg {
  239.     width: 1em;
  240.     height: 1em;
  241.     vertical-align: middle;
  242.     fill: currentColor;
  243.     margin-top: -0.25em;
  244.     /* 4px */
  245.     margin-right: 0.25em;
  246.     /* 4px */
  247. }
  248.  
  249.  
  250. /* style 2 */
  251.  
  252. .inputfile-2 + label {
  253.     color: #2C3E50;
  254.     border: 2px solid currentColor;
  255.     padding: 15px;
  256.     border: 1px solid #ccc;
  257.     border-radius: 3px;
  258.     margin-bottom: 10px;
  259.     width: 100%;
  260.     box-sizing: border-box;
  261.     font-family: montserrat;
  262.     font-size: 13px;
  263.    
  264. }
  265.  
  266. .inputfile-2:focus + label,
  267. .inputfile-2.has-focus + label,
  268. .inputfile-2 + label:hover {
  269.     color: #56799c;
  270. }
  271.  
  272.  
  273.  
  274.  
  275.  
  276.  
  277.  
  278.  
  279.  
  280.  
  281.  
  282. </style>
  283.   <meta charset="UTF-8">
  284.   <title>Workin - Application</title>
  285.  
  286.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  287.  
  288.  
  289.  
  290. <!-- Script per contare il numero dei caratteri 1 -->
  291. <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
  292.  
  293. </head>
  294.  
  295. <body>
  296.  
  297. <!-- Inizio FORM -->
  298. <form id="msform" enctype="multipart/form-data" method = "POST">
  299.  
  300. <!-- La progressbar in alto -->
  301.   <ul id="progressbar">
  302.     <li class="active">Dati Personali</li>
  303.     <li>Presentazione</li>
  304.     <li>Immagini</li>
  305.   </ul>
  306. <!-- Fieldset 1 -->
  307. <fieldset>
  308.     <h2 class="fs-title">Dati Personali</h2>
  309.     <h3 class="fs-subtitle">Inserisci i tuoi dati</h3>
  310.    
  311.     <p>Lavoro:</p></br>
  312.     <select>
  313.     <option>Seleziona un lavoro</option>
  314.     <option>Imbianchino</option>
  315.     <option>Idraulico</option>
  316.     <option>Elettricista</option>
  317.     <option>Ripetizioni</option>
  318.     <option>Dottore</option>
  319.     <option>Insegnante musica</option>
  320.     <option>Babysitter</option>
  321.     <option>Giardiniere</option>
  322.     </select>
  323.     <p>Indirizzo Email:</p></br>
  324.     <input type="email" name="email" placeholder="Email" />
  325.     <p>Nome:</p></br>
  326.     <input type="text" name="nome" placeholder="Nome" />
  327.     <p>Cognome:</p></br>
  328.     <input type="text" name="cognome " placeholder="Cognome" />
  329.     <p>Data di nascita:</p></br>
  330.     <input type="date" name="nascita"/>
  331.    
  332.     <input type="button" name="next" class="next action-button" value="Prossimo" />
  333. </fieldset>
  334.  
  335. <!-- Fieldset 2 -->
  336. <fieldset>
  337.     <h2 class="fs-title">Presentazione</h2>
  338.     <h3 class="fs-subtitle">Forniscici una tua presentazione</h3>
  339.    
  340.     <p>Video di presentazione:</p></br>
  341.     <p>
  342.         <input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" />
  343.         <label for="file-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Inserisci un video&hellip;</span></label>
  344.     </p>
  345.     <p>Biografia & Competenze:</p></br>
  346.     <div class = "countdown"><textarea name ="bio" id="bio" placeholder="Biografia & Competenze"></textarea></div>
  347.    
  348.    <input type="button" name="previous" class="previous action-button" value="Indietro" />
  349.    <input type="button" name="next" class="next action-button" value="Prossimo" />
  350.  </fieldset>
  351.  
  352.  
  353. <!-- Fieldset 3 -->
  354. <fieldset>
  355.    <h2 class="fs-title">Immagini</h2>
  356.    <h3 class="fs-subtitle">Le immagini dei documenti non verranno divulgate</h3>
  357.    
  358.    <p>Immagine del profilo:</p></br>
  359.     <p>
  360.         <input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" />
  361.         <label for="file-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Immagine del profilo&hellip;</span></label>
  362.     </p>
  363.     <p>Fronte documento:</p></br>
  364.     <p>
  365.         <input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" />
  366.         <label for="file-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>ID front&hellip;</span></label>
  367.     </p>
  368.     <p>Retro documento:</p></br>
  369.     <p>
  370.         <input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" />
  371.         <label for="file-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>ID retro&hellip;</span></label>
  372.     </p>
  373.     <input type="button" name="previous" class="previous action-button" value="Indietro" />
  374.     <input type="submit" name="submit" class="submit action-button" value="Invia!" />
  375. </fieldset>
  376.  
  377. </form>
  378.  
  379.  
  380.  
  381.  
  382. <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  383. <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
  384. <script src="js/index.js"></script>
  385.  
  386.  
  387. <!-- Funzione per l'upload dei file personalizzato -->
  388. <script src="js/custom-file-input.js"></script>
  389.  
  390. <!-- Funzione per contare il numero dei caratteri 2 -->
  391. <script type="text/javascript" src="jquery.charactercounter.js"></script>
  392. <script>
  393.         $(function(){
  394.             $("#bio").characterCounter();
  395.         });
  396. </script>
  397.  
  398.  
  399.  
  400.  
  401.  
  402. </body>
  403. </html>
Advertisement
RAW Paste Data Copied
Advertisement