API tools faq
paste
Advertisement
rocknrolla83

scheme-orange.php

rocknrolla83
Aug 10th, 2021
240
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.69 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!