rocknrolla83

scheme-orange.php

Aug 10th, 2021
88
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>João Queirós - Formulário - Design Logo</title>
  5.  
  6. <meta charset="utf-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
  8.  
  9. <link rel="stylesheet" href="css/demo.css" />
  10. <link rel="stylesheet" href="css/sky-forms.css" />
  11. <link rel="stylesheet" href="css/sky-forms-orange.css" />
  12. <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
  13. <link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css">
  14. <!--[if lt IE 9]>
  15. <link rel="stylesheet" href="css/sky-forms-ie8.css">
  16. <![endif]-->
  17.  
  18. <!--[if lt IE 10]>
  19. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  20. <script src="js/jquery.placeholder.min.js"></script>
  21. <![endif]-->
  22. <!--[if lt IE 9]>
  23. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  24. <script src="js/sky-forms-ie8.js"></script>
  25. <![endif]-->
  26. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  27. <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
  28. <script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
  29. </head>
  30. <body>
  31. <div class="body">
  32.  
  33.  
  34.  
  35. <?
  36. if( $_GET["sucesso"] == "email")
  37. {
  38. ?>
  39. <p style="color: green;">Thank you! I will initiate the creative process of your brand! Until now!</p>
  40. <?
  41. }
  42. else
  43. {
  44. ?>
  45.  
  46. <!-- Orange color scheme -->
  47. <form id="form_588606" class="sky-form" action="send_form_email.php" method="post"/>
  48. <img src="logo_jq.png" width="600">
  49.  
  50.  
  51. <header><font color="#FFFFFF">Client data</font></br>
  52. <font size="-1" color="#FFFFFF">Required fields</font>
  53. </header>
  54.  
  55. <fieldset>
  56. <section>
  57. <label class="label">Full Name</label>
  58. <span id="sprytextfield3">
  59. <label class="input">
  60. <input type="text" name="nomecompleto"/>
  61. </label>
  62. <span class="textfieldRequiredMsg">Escreva o seu Nome completo.</span></span></section>
  63.  
  64. <section>
  65. <label class="label">E-mail</label>
  66. <span id="sprytextfield4">
  67. <label class="input">
  68. <input type="text" name="email"/>
  69. </label>
  70. <span class="textfieldRequiredMsg">Write your e-mail.</span><span class="textfieldInvalidFormatMsg">Invalid Format.</span></span></section>
  71.  
  72.  
  73. <!-- <section>
  74. <label class="label">Idade</label>
  75. <label class="input">
  76. <input type="text" name="idade"/>
  77. </label>
  78. </section>--
  79.  
  80. <!--
  81. <section>
  82. <label class="label">Sexo</label>
  83. <label class="select">
  84. <select name="sexo">
  85. <option value="Masculino" />Masculino
  86. <option value="Feminino" />Feminino
  87.  
  88. </select>
  89. <i></i>
  90. </label>
  91. </section>-->
  92.  
  93.  
  94. <!-- <section>
  95. <label class="label">Telefone:</label>
  96. <label class="input">
  97. <input type="text" name="telefone"/>
  98. </label>
  99. </section>-->
  100.  
  101.  
  102. <!-- <section>
  103. <label class="label">Observações (campo não obrigatório)</label>
  104. <label class="textarea">
  105. <textarea rows="3" name="observacoes"></textarea>
  106. </label>
  107. <!--<div class="note"><strong>Ex:</strong> raparigas dos 25 - 35, que gostam de.. </div>-->
  108. </section>
  109.  
  110.  
  111. </fieldset>
  112.  
  113.  
  114. <header><font color="#FFFFFF"> Brief Logo</font>
  115. </br>
  116. <font size="-1" color="#FFFFFF">Campos de preenchimento obrigatório</font>
  117. </header>
  118.  
  119. <fieldset>
  120. <section>
  121. <label class="label">Company Name</label>
  122. <span id="sprytextfield1">
  123. <label class="input">
  124. <input type="text" name="nome"/>
  125. </label>
  126. <span class="textfieldRequiredMsg">Write your company name.</span></span></section>
  127.  
  128. <section>
  129. <label class="label">Slogan:</label>
  130. <span id="sprytextfield2">
  131. <label class="input">
  132. <input type="text" name="slogan"/>
  133. </label>
  134. <span class="textfieldRequiredMsg">Write your slogan.</span></span></section>
  135.  
  136. <section>
  137. <label class="label">What We Do:</label>
  138. <span id="sprytextarea1">
  139. <label class="textarea textarea-resizable">
  140. <textarea rows="3" name="oqfazemos"></textarea>
  141. </label>
  142. <span class="textareaRequiredMsg">Write what your company do.</span></span>
  143. <!-- <div class="note"><strong>Example:</strong> We train dogs for mili</div>-->
  144. </section>
  145.  
  146. <section>
  147. <label class="label">Our Industry:</label>
  148. <span id="sprytextarea2">
  149. <label class="textarea textarea-expandable">
  150. <textarea rows="3" name="areanegocios"></textarea>
  151. </label>
  152. <span class="textareaRequiredMsg">Write your industry.</span></span>
  153. <!--<div class="note"><strong>Ex:</strong> Marketing. Vendas. Design.</div>-->
  154. </section>
  155.  
  156. <section>
  157. <label class="label">Top Three Things to Communicate through our Logo:
  158. </label>
  159. <span id="sprytextarea3">
  160. <label class="textarea textarea-expandable">
  161. <textarea rows="3" name="items"></textarea>
  162. </label>
  163. <span class="textareaRequiredMsg">Write your top 3 things.</span></span>
  164. <!--<div class="note"><strong>Exemplo:</strong> 1. Experiência e dedicação | 2. Simple, mensagem direta, fácil, classico | 3. Seguro e Confiável</div>-->
  165. </section>
  166.  
  167.  
  168. <section>
  169. <label class="label">Our Target Audience: </label>
  170. <span id="sprytextarea4">
  171. <label class="textarea">
  172. <textarea rows="3" name="publicoalvo"></textarea>
  173. </label>
  174. <span class="textareaRequiredMsg">Write your target Audience.</span></span>
  175. <!--<div class="note"><strong>Ex:</strong> raparigas dos 25 - 35, que gostam de.. </div>-->
  176. </section>
  177.  
  178.  
  179. </fieldset>
  180.  
  181.  
  182. <fieldset>
  183. <section>
  184. <div class="row">
  185.  
  186.  
  187.  
  188. <section class="col col-5">
  189. <label class="label">Styles that we are interested in:
  190. :</label>
  191.  
  192.  
  193. <table width="500" border="0" cellpadding="3" cellspacing="3">
  194. <tr>
  195. <td width="402" bgcolor="#FFFFFF"><span class="col col-5"><img src="tipos_logos/wordmark.gif" width="336" height="40"></span></td>
  196. <td width="82" bgcolor="#FFFFFF">
  197. <label class="toggle">
  198. <input type="checkbox" name="wordmark" checked="" />
  199. <i></i>Wordmark</br></br>
  200.  
  201. </label></td>
  202. </tr>
  203. <tr>
  204. <td bgcolor="#FFFFFF"><span class="col col-5"><img src="tipos_logos/letterform.gif" width="336" height="40"></span></td>
  205.  
  206.  
  207.  
  208. <td bgcolor="#FFFFFF"> <label class="toggle">
  209. <input type="checkbox" name="letterform" checked="" />
  210. <i></i>Letterform Mark</br></br></label></td>
  211. </tr>
  212. <tr>
  213. <td bgcolor="#FFFFFF"><span class="col col-5"><img src="tipos_logos/abstract.gif" width="336" height="40"></span></td>
  214. <td bgcolor="#FFFFFF">
  215. <label class="toggle">
  216. <input type="checkbox" name="abstracto" checked="" />
  217. <i></i>Abstract Mark</br></br></label>
  218.  
  219. </td>
  220. </tr>
  221. <tr>
  222. <td bgcolor="#FFFFFF"><span class="col col-5"><img src="tipos_logos/pictoral.gif" width="336" height="40"></span></td>
  223. <td bgcolor="#FFFFFF">
  224.  
  225. <label class="toggle">
  226. <input type="checkbox" name="figurativo" checked="" />
  227. <i></i>Pictorial Mark</br></br></label>
  228.  
  229. </td>
  230. </tr>
  231. <tr>
  232. <td bgcolor="#FFFFFF"><span class="col col-5"><img src="tipos_logos/emblem.gif" width="336" height="40"></span></td>
  233. <td bgcolor="#FFFFFF">
  234.  
  235. <label class="toggle">
  236. <input type="checkbox" name="emblemas" checked="" />
  237. <i></i>Emblem</br></br></label>
  238.  
  239. </td>
  240. </tr>
  241. <tr>
  242. <td bgcolor="#FFFFFF"><span class="col col-5"><img src="tipos_logos/character.gif" width="336" height="40"></span></td>
  243. <td bgcolor="#FFFFFF">
  244.  
  245. <label class="toggle"><input type="checkbox" name="mascote" />
  246. <i></i>Character</br></br></label>
  247.  
  248. </td>
  249. </tr>
  250. <tr>
  251. <td bgcolor="#FFFFFF"><span class="col col-5"><img src="tipos_logos/web2.gif" width="336" height="40"></span></td>
  252. <td bgcolor="#FFFFFF">
  253.  
  254. <label class="toggle"><input type="checkbox" name="web2" />
  255. <i></i>Web 2.0</br></br></label>
  256.  
  257. </td>
  258. </tr>
  259. </table>
  260.  
  261.  
  262.  
  263.  
  264.  
  265. </section>
  266. </div>
  267.  
  268. </section>
  269.  
  270.  
  271.  
  272.  
  273. <section>
  274. <label class="label">
  275. Color Preferences:
  276. </label>
  277. <span id="sprytextarea5">
  278. <label class="textarea textarea-expandable">
  279. <textarea rows="3" name="cor"></textarea>
  280. </label>
  281. <span class="textareaRequiredMsg">Write your color preferences.</span></span>
  282. <!--<div class="note"><strong>Example:</strong> Gosto de Preto, Dourado, Vermelho | Não gosto de Amarelo, Roxo, Cores florescentes, néons...</div>-->
  283. </section>
  284.  
  285.  
  286. </fieldset>
  287.  
  288.  
  289.  
  290.  
  291.  
  292.  
  293.  
  294.  
  295. <fieldset>
  296. <!-- <section>
  297. <label class="label">Compile os seus ficheiro num *.rar ou *.zip e anexe as suas ideias</label>
  298. <label for="file" class="input input-file">
  299. <div class="button"><input type="file" id="file" onchange="this.parentNode.nextSibling.value = this.value" / name="ficheiro">Procurar</div><input type="text" readonly />
  300. </label>
  301. </section>-->
  302.  
  303. </fieldset>
  304.  
  305. <fieldset>
  306.  
  307. <section>
  308. <label class="label">Our Ideas and Additional Information:</label>
  309. <span id="sprytextarea6">
  310. <label class="textarea textarea-resizable">
  311. <textarea rows="3" name="ideias"></textarea>
  312. </label>
  313. <span class="textareaRequiredMsg">Write your ideias.</span></span>
  314. <!-- <div class="note"><strong>Ex:</strong> Ando a procura de algo icónico que as pessoas possam reconhecer sem o texto. Tradicional. Que identifique a nossa cidade. Que transpareça seriedade respeito, feito para um público chique.</div>-->
  315.  
  316. </section>
  317.  
  318.  
  319. <section>
  320. <label class="label">Where we will use the Logo:</label>
  321. <span id="sprytextarea7">
  322. <label class="textarea textarea-expandable">
  323. <textarea rows="3" name="ondeeusado"></textarea>
  324. </label>
  325. <span class="textareaRequiredMsg">Write where your logo will be used.</span></span>
  326. <!--<div class="note"><strong>Exemplo:</strong> Impressão, Tshirts, Canecas, Televisão, Sinalética, Veículos... </div>-->
  327. </section>
  328. </fieldset>
  329.  
  330.  
  331.  
  332.  
  333. <fieldset>
  334. <label class="label">Logo Styles:</label>
  335. <table width="415" border="0" cellpadding="11" cellspacing="11">
  336. <tr>
  337. <td width="101">&nbsp;</td>
  338. <td width="13" bgcolor="#FFFFFF" align="center">1</td>
  339. <td width="13" bgcolor="#FFFFFF" align="center">2</td>
  340. <td width="14" bgcolor="#FFFFFF" align="center">3</td>
  341. <td width="13" bgcolor="#FFFFFF" align="center">4</td>
  342. <td width="13" bgcolor="#FFFFFF" align="center">5</td>
  343. <td width="112">&nbsp;</td>
  344. <td width="102">&nbsp;</td>
  345. </tr>
  346. <tr>
  347. <td align="center"><font>Feminine</font></td>
  348. <td bgcolor="#EC8A00">&nbsp;</td>
  349. <td bgcolor="#ED7D09">&nbsp;</td>
  350. <td bgcolor="#EE7012">&nbsp;</td>
  351. <td bgcolor="#EF631A">&nbsp;</td>
  352. <td bgcolor="#F05623">&nbsp;</td>
  353. <td align="center">Masculine</td>
  354. <td><section>
  355. <label class="label">Select</label>
  356. <label class="select">
  357. <select name="1">
  358. <option value="1" />1
  359. <option value="2" />2
  360. <option value="3" />3
  361. <option value="4" />4
  362. <option value="5" />5
  363. </select>
  364. <i></i>
  365. </label>
  366. </section></td>
  367. </tr>
  368. <tr>
  369. <td align="center">Modern</td>
  370. <td bgcolor="#EC8A00">&nbsp;</td>
  371. <td bgcolor="#ED7D09">&nbsp;</td>
  372. <td bgcolor="#EE7012">&nbsp;</td>
  373. <td bgcolor="#EF631A">&nbsp;</td>
  374. <td bgcolor="#F05623">&nbsp;</td>
  375. <td align="center">Classic</td>
  376. <td><section>
  377. <label class="label">Select</label>
  378. <label class="select">
  379. <select name="2">
  380. <option value="1" />1
  381. <option value="2" />2
  382. <option value="3" />3
  383. <option value="4" />4
  384. <option value="5" />5
  385. </select>
  386. <i></i>
  387. </label>
  388. </section></td>
  389. </tr>
  390. <tr>
  391. <td align="center">Exotic</td>
  392. <td bgcolor="#EC8A00">&nbsp;</td>
  393. <td bgcolor="#ED7D09">&nbsp;</td>
  394. <td bgcolor="#EE7012">&nbsp;</td>
  395. <td bgcolor="#EF631A">&nbsp;</td>
  396. <td bgcolor="#F05623">&nbsp;</td>
  397. <td align="center">Commonplace</td>
  398. <td><section>
  399. <label class="label">Select</label>
  400. <label class="select">
  401. <select name="3">
  402. <option value="1" />1
  403. <option value="2" />2
  404. <option value="3" />3
  405. <option value="4" />4
  406. <option value="5" />5
  407. </select>
  408. <i></i>
  409. </label>
  410. </section></td>
  411. </tr>
  412. <tr>
  413. <td align="center">Sporty</td>
  414. <td bgcolor="#EC8A00">&nbsp;</td>
  415. <td bgcolor="#ED7D09">&nbsp;</td>
  416. <td bgcolor="#EE7012">&nbsp;</td>
  417. <td bgcolor="#EF631A">&nbsp;</td>
  418. <td bgcolor="#F05623">&nbsp;</td>
  419. <td align="center">Elegante</td>
  420. <td><section>
  421. <label class="label">Select</label>
  422. <label class="select">
  423. <select name="4">
  424. <option value="1" />1
  425. <option value="2" />2
  426. <option value="3" />3
  427. <option value="4" />4
  428. <option value="5" />5
  429. </select>
  430. <i></i>
  431. </label>
  432. </section></td>
  433. </tr>
  434. <tr>
  435. <td align="center">Aventure</td>
  436. <td bgcolor="#EC8A00">&nbsp;</td>
  437. <td bgcolor="#ED7D09">&nbsp;</td>
  438. <td bgcolor="#EE7012">&nbsp;</td>
  439. <td bgcolor="#EF631A">&nbsp;</td>
  440. <td bgcolor="#F05623">&nbsp;</td>
  441. <td align="center">Secure</td>
  442. <td><section>
  443. <label class="label">Select</label>
  444. <label class="select">
  445. <select name="5">
  446. <option value="1" />1
  447. <option value="2" />2
  448. <option value="3" />3
  449. <option value="4" />4
  450. <option value="5" />5
  451. </select>
  452. <i></i>
  453. </label>
  454. </section></td>
  455. </tr>
  456. <tr>
  457. <td align="center">Quiet</td>
  458. <td bgcolor="#EC8A00">&nbsp;</td>
  459. <td bgcolor="#ED7D09">&nbsp;</td>
  460. <td bgcolor="#EE7012">&nbsp;</td>
  461. <td bgcolor="#EF631A">&nbsp;</td>
  462. <td bgcolor="#F05623">&nbsp;</td>
  463. <td align="center">Loud</td>
  464. <td><section>
  465. <label class="label">Select</label>
  466. <label class="select">
  467. <select name="6">
  468. <option value="1" />1
  469. <option value="2" />2
  470. <option value="3" />3
  471. <option value="4" />4
  472. <option value="5" />5
  473. </select>
  474. <i></i>
  475. </label>
  476. </section></td>
  477. </tr>
  478. <tr>
  479. <td align="center">Subtle</td>
  480. <td bgcolor="#EC8A00">&nbsp;</td>
  481. <td bgcolor="#ED7D09">&nbsp;</td>
  482. <td bgcolor="#EE7012">&nbsp;</td>
  483. <td bgcolor="#EF631A">&nbsp;</td>
  484. <td bgcolor="#F05623">&nbsp;</td>
  485. <td align="center">Bright</td>
  486. <td><section>
  487. <label class="label">Select</label>
  488. <label class="select">
  489. <select name="7">
  490. <option value="1" />1
  491. <option value="2" />2
  492. <option value="3" />3
  493. <option value="4" />4
  494. <option value="5" />5
  495. </select>
  496. <i></i>
  497. </label>
  498. </section></td>
  499. </tr>
  500. <tr>
  501. <td align="center">Gray</td>
  502. <td bgcolor="#EC8A00">&nbsp;</td>
  503. <td bgcolor="#ED7D09">&nbsp;</td>
  504. <td bgcolor="#EE7012">&nbsp;</td>
  505. <td bgcolor="#EF631A">&nbsp;</td>
  506. <td bgcolor="#F05623">&nbsp;</td>
  507. <td align="center">Colorful</td>
  508. <td><section>
  509. <label class="label">Select</label>
  510. <label class="select">
  511. <select name="8">
  512. <option value="1" />1
  513. <option value="2" />2
  514. <option value="3" />3
  515. <option value="4" />4
  516. <option value="5" />5
  517. </select>
  518. <i></i>
  519. </label>
  520. </section></td>
  521. </tr>
  522. <tr>
  523. <td align="center">Subtle</td>
  524. <td bgcolor="#EC8A00">&nbsp;</td>
  525. <td bgcolor="#ED7D09">&nbsp;</td>
  526. <td bgcolor="#EE7012">&nbsp;</td>
  527. <td bgcolor="#EF631A">&nbsp;</td>
  528. <td bgcolor="#F05623">&nbsp;</td>
  529. <td align="center">Bright</td>
  530. <td><section>
  531. <label class="label">Select</label>
  532. <label class="select">
  533. <select name="9">
  534. <option value="1" />1
  535. <option value="2" />2
  536. <option value="3" />3
  537. <option value="4" />4
  538. <option value="5" />5
  539. </select>
  540. <i></i>
  541. </label>
  542. </section></td>
  543. </tr>
  544. <tr>
  545. <td align="center">Raw</td>
  546. <td bgcolor="#EC8A00">&nbsp;</td>
  547. <td bgcolor="#ED7D09">&nbsp;</td>
  548. <td bgcolor="#EE7012">&nbsp;</td>
  549. <td bgcolor="#EF631A">&nbsp;</td>
  550. <td bgcolor="#F05623">&nbsp;</td>
  551. <td align="center">Refined</td>
  552. <td><section>
  553. <label class="label">Select</label>
  554. <label class="select">
  555. <select name="10">
  556. <option value="1" />1
  557. <option value="2" />2
  558. <option value="3" />3
  559. <option value="4" />4
  560. <option value="5" />5
  561. </select>
  562. <i></i>
  563. </label>
  564. </section></td>
  565. </tr>
  566. <tr>
  567. <td align="center">Playful</td>
  568. <td bgcolor="#EC8A00">&nbsp;</td>
  569. <td bgcolor="#ED7D09">&nbsp;</td>
  570. <td bgcolor="#EE7012">&nbsp;</td>
  571. <td bgcolor="#EF631A">&nbsp;</td>
  572. <td bgcolor="#F05623">&nbsp;</td>
  573. <td align="center">Serious</td>
  574. <td><section>
  575. <label class="label">Select</label>
  576. <label class="select">
  577. <select name="11">
  578. <option value="1" />1
  579. <option value="2" />2
  580. <option value="3" />3
  581. <option value="4" />4
  582. <option value="5" />5
  583. </select>
  584. <i></i>
  585. </label>
  586. </section></td>
  587. </tr>
  588. <tr>
  589. <td align="center">Necessity</td>
  590. <td bgcolor="#EC8A00">&nbsp;</td>
  591. <td bgcolor="#ED7D09">&nbsp;</td>
  592. <td bgcolor="#EE7012">&nbsp;</td>
  593. <td bgcolor="#EF631A">&nbsp;</td>
  594. <td bgcolor="#F05623">&nbsp;</td>
  595. <td align="center">Luxury</td>
  596. <td><section>
  597. <label class="label">Select</label>
  598. <label class="select">
  599. <select name="12">
  600. <option value="1" />1
  601. <option value="2" />2
  602. <option value="3" />3
  603. <option value="4" />4
  604. <option value="5" />5
  605. </select>
  606. <i></i>
  607. </label>
  608. </section></td>
  609. </tr>
  610. </table>
  611.  
  612.  
  613. <!--
  614. <section>
  615. <label class="label">Select</label>
  616. <label class="select">
  617. <select>
  618. <option value="0" />1
  619. <option value="1" />2
  620. <option value="2" />3
  621. <option value="3" />4
  622. <option value="4" />5
  623. </select>
  624. <i></i>
  625. </label>
  626. </section>
  627.  
  628. <section>
  629. <label class="label">Multiple select</label>
  630. <label class="select select-multiple">
  631. <select multiple="">
  632. <option value="1" />Alexandra
  633. <option value="2" />Alice
  634. <option value="3" />Anastasia
  635. <option value="4" />Avelina
  636. <option value="5" />Basilia
  637. <option value="6" />Beatrice
  638. <option value="7" />Cassandra
  639. <option value="8" />Clemencia
  640. <option value="9" />Desiderata
  641. </select>
  642. </label>
  643. <div class="note"><strong>Note:</strong> hold down the ctrl/cmd button to select multiple options.</div>
  644. </section>-->
  645. </fieldset>
  646. <!--
  647. <fieldset>
  648. <section>
  649. <label class="label">Textarea</label>
  650. <label class="textarea">
  651. <textarea rows="3"></textarea>
  652. </label>
  653. <div class="note"><strong>Note:</strong> height of the textarea depends on the rows attribute.</div>
  654. </section>
  655.  
  656. <section>
  657. <label class="label">Textarea resizable</label>
  658. <label class="textarea textarea-resizable">
  659. <textarea rows="3"></textarea>
  660. </label>
  661. </section>
  662.  
  663. <section>
  664. <label class="label">Textarea expandable</label>
  665. <label class="textarea textarea-expandable">
  666. <textarea rows="3"></textarea>
  667. </label>
  668. <div class="note"><strong>Note:</strong> expands on focus.</div>
  669. </section>
  670. </fieldset>
  671.  
  672. <fieldset>
  673. <section>
  674. <label class="label">Columned radios</label>
  675. <div class="row">
  676. <div class="col col-4">
  677. <label class="radio"><input type="radio" name="radio" checked="" /><i></i>Alexandra</label>
  678. <label class="radio"><input type="radio" name="radio" /><i></i>Alice</label>
  679. <label class="radio"><input type="radio" name="radio" /><i></i>Anastasia</label>
  680. </div>
  681. <div class="col col-4">
  682. <label class="radio"><input type="radio" name="radio" /><i></i>Avelina</label>
  683. <label class="radio"><input type="radio" name="radio" /><i></i>Basilia</label>
  684. <label class="radio"><input type="radio" name="radio" /><i></i>Beatrice</label>
  685. </div>
  686. <div class="col col-4">
  687. <label class="radio"><input type="radio" name="radio" /><i></i>Cassandra</label>
  688. <label class="radio"><input type="radio" name="radio" /><i></i>Clemencia</label>
  689. <label class="radio"><input type="radio" name="radio" /><i></i>Desiderata</label>
  690. </div>
  691. </div>
  692. </section>
  693.  
  694. <section>
  695. <label class="label">Inline radios</label>
  696. <div class="inline-group">
  697. <label class="radio"><input type="radio" name="radio-inline" checked="" /><i></i>Alexandra</label>
  698. <label class="radio"><input type="radio" name="radio-inline" /><i></i>Alice</label>
  699. <label class="radio"><input type="radio" name="radio-inline" /><i></i>Anastasia</label>
  700. <label class="radio"><input type="radio" name="radio-inline" /><i></i>Avelina</label>
  701. <label class="radio"><input type="radio" name="radio-inline" /><i></i>Beatrice</label>
  702. </div>
  703. </section>
  704. </fieldset>
  705.  
  706. <fieldset>
  707. <section>
  708. <label class="label">Columned checkboxes</label>
  709. <div class="row">
  710. <div class="col col-4">
  711. <label class="checkbox"><input type="checkbox" name="checkbox" checked="" /><i></i>Alexandra</label>
  712. <label class="checkbox"><input type="checkbox" name="checkbox" /><i></i>Alice</label>
  713. <label class="checkbox"><input type="checkbox" name="checkbox" /><i></i>Anastasia</label>
  714. </div>
  715. <div class="col col-4">
  716. <label class="checkbox"><input type="checkbox" name="checkbox" /><i></i>Avelina</label>
  717. <label class="checkbox"><input type="checkbox" name="checkbox" /><i></i>Basilia</label>
  718. <label class="checkbox"><input type="checkbox" name="checkbox" /><i></i>Beatrice</label>
  719. </div>
  720. <div class="col col-4">
  721. <label class="checkbox"><input type="checkbox" name="checkbox" /><i></i>Cassandra</label>
  722. <label class="checkbox"><input type="checkbox" name="checkbox" /><i></i>Clemencia</label>
  723. <label class="checkbox"><input type="checkbox" name="checkbox" /><i></i>Desiderata</label>
  724. </div>
  725. </div>
  726. </section>
  727.  
  728. <section>
  729. <label class="label">Inline checkboxes</label>
  730. <div class="inline-group">
  731. <label class="checkbox"><input type="checkbox" name="checkbox-inline" checked="" /><i></i>Alexandra</label>
  732. <label class="checkbox"><input type="checkbox" name="checkbox-inline" /><i></i>Alice</label>
  733. <label class="checkbox"><input type="checkbox" name="checkbox-inline" /><i></i>Anastasia</label>
  734. <label class="checkbox"><input type="checkbox" name="checkbox-inline" /><i></i>Avelina</label>
  735. <label class="checkbox"><input type="checkbox" name="checkbox-inline" /><i></i>Beatrice</label>
  736. </div>
  737. </section>
  738. </fieldset>
  739.  
  740. <fieldset>
  741. <div class="row">
  742. <section class="col col-5">
  743. <label class="label">Toggles based on radios</label>
  744. <label class="toggle"><input type="radio" name="radio-toggle" checked="" /><i></i>Alexandra</label>
  745. <label class="toggle"><input type="radio" name="radio-toggle" /><i></i>Anastasia</label>
  746. <label class="toggle"><input type="radio" name="radio-toggle" /><i></i>Avelina</label>
  747. </section>
  748.  
  749. <div class="col col-2"></div>
  750.  
  751. <section class="col col-5">
  752. <label class="label">Toggles based on checkboxes</label>
  753. <label class="toggle"><input type="checkbox" name="checkbox-toggle" checked="" /><i></i>Cassandra</label>
  754. <label class="toggle"><input type="checkbox" name="checkbox-toggle" /><i></i>Clemencia</label>
  755. <label class="toggle"><input type="checkbox" name="checkbox-toggle" /><i></i>Desiderata</label>
  756. </section>
  757. </div>
  758. </fieldset>
  759.  
  760. <fieldset>
  761. <section>
  762. <label class="label">Ratings with different icons</label>
  763. <div class="rating">
  764. <input type="radio" name="stars-rating" id="stars-rating-5" />
  765. <label for="stars-rating-5"><i class="icon-star"></i></label>
  766. <input type="radio" name="stars-rating" id="stars-rating-4" />
  767. <label for="stars-rating-4"><i class="icon-star"></i></label>
  768. <input type="radio" name="stars-rating" id="stars-rating-3" />
  769. <label for="stars-rating-3"><i class="icon-star"></i></label>
  770. <input type="radio" name="stars-rating" id="stars-rating-2" />
  771. <label for="stars-rating-2"><i class="icon-star"></i></label>
  772. <input type="radio" name="stars-rating" id="stars-rating-1" />
  773. <label for="stars-rating-1"><i class="icon-star"></i></label>
  774. Stars
  775. </div>
  776.  
  777. <div class="rating">
  778. <input type="radio" name="trophies-rating" id="trophies-rating-7" />
  779. <label for="trophies-rating-7"><i class="icon-trophy"></i></label>
  780. <input type="radio" name="trophies-rating" id="trophies-rating-6" />
  781. <label for="trophies-rating-6"><i class="icon-trophy"></i></label>
  782. <input type="radio" name="trophies-rating" id="trophies-rating-5" />
  783. <label for="trophies-rating-5"><i class="icon-trophy"></i></label>
  784. <input type="radio" name="trophies-rating" id="trophies-rating-4" />
  785. <label for="trophies-rating-4"><i class="icon-trophy"></i></label>
  786. <input type="radio" name="trophies-rating" id="trophies-rating-3" />
  787. <label for="trophies-rating-3"><i class="icon-trophy"></i></label>
  788. <input type="radio" name="trophies-rating" id="trophies-rating-2" />
  789. <label for="trophies-rating-2"><i class="icon-trophy"></i></label>
  790. <input type="radio" name="trophies-rating" id="trophies-rating-1" />
  791. <label for="trophies-rating-1"><i class="icon-trophy"></i></label>
  792. Trophies
  793. </div>
  794.  
  795. <div class="rating">
  796. <input type="radio" name="asterisks-rating" id="asterisks-rating-10" />
  797. <label for="asterisks-rating-10"><i class="icon-asterisk"></i></label>
  798. <input type="radio" name="asterisks-rating" id="asterisks-rating-9" />
  799. <label for="asterisks-rating-9"><i class="icon-asterisk"></i></label>
  800. <input type="radio" name="asterisks-rating" id="asterisks-rating-8" />
  801. <label for="asterisks-rating-8"><i class="icon-asterisk"></i></label>
  802. <input type="radio" name="asterisks-rating" id="asterisks-rating-7" />
  803. <label for="asterisks-rating-7"><i class="icon-asterisk"></i></label>
  804. <input type="radio" name="asterisks-rating" id="asterisks-rating-6" />
  805. <label for="asterisks-rating-6"><i class="icon-asterisk"></i></label>
  806. <input type="radio" name="asterisks-rating" id="asterisks-rating-5" />
  807. <label for="asterisks-rating-5"><i class="icon-asterisk"></i></label>
  808. <input type="radio" name="asterisks-rating" id="asterisks-rating-4" />
  809. <label for="asterisks-rating-4"><i class="icon-asterisk"></i></label>
  810. <input type="radio" name="asterisks-rating" id="asterisks-rating-3" />
  811. <label for="asterisks-rating-3"><i class="icon-asterisk"></i></label>
  812. <input type="radio" name="asterisks-rating" id="asterisks-rating-2" />
  813. <label for="asterisks-rating-2"><i class="icon-asterisk"></i></label>
  814. <input type="radio" name="asterisks-rating" id="asterisks-rating-1" />
  815. <label for="asterisks-rating-1"><i class="icon-asterisk"></i></label>
  816. Asterisks
  817. </div>
  818. <div class="note"><strong>Note:</strong> you can use more than 300 vector icons for rating.</div>
  819. </section>
  820. </fieldset>
  821. -->
  822. <header><font size="-1" color="#FFFFFF">note: complete all required information in order to send the form.</font></header>
  823. <footer>
  824. <button type="submit" class="button">Send</button>
  825. <button type="button" class="button button-secondary" onclick="window.history.back();">Clean</button>
  826. </footer>
  827. </form>
  828.  
  829.  
  830. <br/>
  831.  
  832. <table width="500" border="0" align="center">
  833. <tr>
  834. <td align="center"> <font size="-1" color="#666666"> João Queirós 2014</font></td>
  835. <td align="center"> <a href="http://www.joaoqueiros.com" style="text-decoration:none"><font size="-1" color="#666666">www.joaoqueiros.com</font></a></td>
  836. <!-- <td align="center"> <a href="https://www.facebook.com/borangemarketing" target="_blank" style="text-decoration:none"><font size="-1" color="#666666">facebook</font></a></td> -->
  837. </tr>
  838. </table>
  839.  
  840. <? } ?>
  841.  
  842.  
  843.  
  844. <!--/ Orange color scheme -->
  845. </div>
  846. <script type="text/javascript">
  847. var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
  848. var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2");
  849. var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1");
  850. var sprytextarea2 = new Spry.Widget.ValidationTextarea("sprytextarea2");
  851. var sprytextarea3 = new Spry.Widget.ValidationTextarea("sprytextarea3");
  852. var sprytextarea4 = new Spry.Widget.ValidationTextarea("sprytextarea4");
  853. var sprytextarea5 = new Spry.Widget.ValidationTextarea("sprytextarea5");
  854. var sprytextarea6 = new Spry.Widget.ValidationTextarea("sprytextarea6");
  855. var sprytextarea7 = new Spry.Widget.ValidationTextarea("sprytextarea7");
  856. var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3");
  857. var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "email");
  858. </script>
  859. </body>
  860. </html>
RAW Paste Data