Advertisement
here2share

HTML major-demo work-in-progress

Apr 18th, 2015
449
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 33.89 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset='utf-8'>
  4.         <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
  5.  
  6.         <title>CustomForm ShownInTab</title>
  7.         <meta name='description' content='FormDemo'>
  8.         <meta name='author' content='DeveloperName'>
  9.  
  10.         <!-- CommentAreaForCodes -->
  11.  
  12.         <!-- Webfonts -->
  13.         <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
  14.  
  15.         <!-- Additional styles -->
  16.         <link rel='stylesheet' href='css/styles/form.css?v=1'>
  17.         <link rel='stylesheet' href='css/styles/switches.css?v=1'>
  18.  
  19. </head>
  20.  
  21. <body class='clearfix with-menu with-shortcuts'>
  22.  
  23.         <!-- Prompt IE 6 users to install Chrome Frame -->
  24.         <!--[if lt IE 7]><p class='message red-gradient simpler'>Your browser is <em>ancient!</em> <a href='http://browsehappy.com/'>Upgrade to a different browser</a> or <a href='http://www.google.com/chromeframe/?redirect=true'>install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  25.  
  26.         <!-- Title bar -->
  27.         <header role='banner' id='title-bar'>
  28.                 <h2>TitleBar: CustomForm</h2>
  29.         </header>
  30.  
  31. <center>This will center your contents</center><br>
  32.  
  33. This is an <em>Example</em> of using the emphasis tag<br><br>
  34.  
  35. font: <font face='arial black' size=5 color='orange'>Arial Black in Orange</font>
  36. <br>
  37. <form method=post action="/cgi-bin/example.cgi">
  38. <input type="text" style="color: #ffffff; font-family: Verdana; font-size: 12px; background-color: #72a4d2;" size="10" maxlength="30">
  39. <input type="Submit" value="Submit">
  40. </form>
  41. <br>
  42.  
  43. <script src="http://g.tbcdn.cn/kissy/k/1.3.2/seed.js" data-config="{combine:true}"></script>
  44.  
  45.     Textbox:<br>
  46. <textarea id = 'myTextArea'
  47.    rows = '5'
  48.        cols = '80'>Write new text... (-- WIP: to be ghosted when empty)</textarea>
  49.     <style>
  50.     div {
  51.         color: blue;
  52.         font: 16px Helvetica, sans-serif;
  53.         margin: 2px;
  54.     }
  55.     }</style>
  56.     <div id='myOutput'>>>> Entries in the textbox above should actively display here <<< </div>
  57. <script>      
  58.     KISSY.use("node",function(S,Node){
  59.         var $=Node.all;
  60.         $("#myTextArea").on("valuechange",function(e){
  61.             $("#myOutput").html(e.newVal);
  62.         });
  63.     });
  64. </script><br>
  65.  
  66. <fieldset class='fieldset'>
  67.         <legend class='legend'><big>Checkables:</big></legend>
  68.                 <span class='label'>Radios: </span>
  69.                         <label for='button-radio-1'>
  70.                                 <input type='radio' name='button-radio' id='button-radio-1' value='1' checked>
  71.                                 First
  72.                         </label>
  73.                         <label for='button-radio-2'>
  74.                                 <input type='radio' name='button-radio' id='button-radio-2' value='2'>
  75.                                 Second
  76.                         </label>
  77.                         <label for='button-radio-3'>
  78.                                 <input type='radio' name='button-radio' id='button-radio-3' value='3'>
  79.                                 Third
  80.                         </label>
  81.         <p class='button-height inline-label'>
  82.                 <span class='label'>Checkboxes: </span>
  83.                         <label for='button-checkbox-1'>
  84.                                 <input type='checkbox' name='button-checkbox-1' id='button-checkbox-1' value='1'>
  85.                                 First
  86.                         </label>
  87.                         <label for='button-checkbox-2'>
  88.                                 <input type='checkbox' name='button-checkbox-2' id='button-checkbox-2' value='2' checked>
  89.                                 Second
  90.                         </label>
  91.                         <label for='button-checkbox-3'>
  92.                                 <input type='checkbox' name='button-checkbox-3' id='button-checkbox-3' value='3'>
  93.                                 Third
  94.                         </label>
  95.                 </span>
  96.         </p>
  97. </fieldset>
  98.  
  99. <div class='new-row-tablet four-columns six-columns-tablet twelve-columns-mobile'>
  100.  
  101. <h3 class='thin underline'>Pseudo-Inputs</h3>
  102.  
  103. <p class='button-height'>
  104.         <span class='input'>
  105.                 <label for='pseudo-input-1' class='button blue-gradient'>Label</label>
  106.                 <input type='text' name='pseudo-input-1' id='pseudo-input-1' class='input-unstyled' value='Value'>
  107.                 <a href='javascript:void(0)' class='button compact'>Check</a>
  108.         </span>
  109. </p>
  110.  
  111. <p class='button-height'>
  112. <span class='input'>
  113.         <label for='pseudo-input-2' class='button orange-gradient'>
  114.                 <span class='icon-phone small-margin-right'></span>
  115.         </label>
  116.         <select name='pseudo-input-select' class='select compact expandable-list' style='width: 100px'>
  117.                 <option value='USA'>USA</option>
  118.                 <option value='United Kingdom'>United Kingdom</option>
  119.                 <option value='Afghanistan'>Afghanistan</option>
  120.                 <option value='Albania'>Albania</option>
  121.                 <option value='Algeria'>Algeria</option>
  122.                 <option value='American Samoa'>American Samoa</option>
  123.                 <option value='Andorra'>Andorra</option>
  124.                 <option value='Angola'>Angola</option>
  125.                 <option value='Anguilla'>Anguilla</option>
  126.                 <option value='Antarctica'>Antarctica</option>
  127.                 <option value='Antigua and Barbuda'>Antigua and Barbuda</option>
  128.                 <option value='Argentina'>Argentina</option>
  129.                 <option value='Armenia'>Armenia</option>
  130.                 <option value='Aruba'>Aruba</option>
  131.                 <option value='Australia'>Australia</option>
  132.                 <option value='Austria'>Austria</option>
  133.                 <option value='Azerbaijan'>Azerbaijan</option>
  134.                 <option value='Bahamas'>Bahamas</option>
  135.                 <option value='Bahrain'>Bahrain</option>
  136.                 <option value='Bangladesh'>Bangladesh</option>
  137.                 <option value='Barbados'>Barbados</option>
  138.                 <option value='Belarus'>Belarus</option>
  139.                 <option value='Belgium'>Belgium</option>
  140.                 <option value='Belize'>Belize</option>
  141.                 <option value='Benin'>Benin</option>
  142.                 <option value='Bermuda'>Bermuda</option>
  143.                 <option value='Bhutan'>Bhutan</option>
  144.                 <option value='Bolivia'>Bolivia</option>
  145.                 <option value='Bosnia and Herzegovina'>Bosnia and Herzegovina</option>
  146.                 <option value='Botswana'>Botswana</option>
  147.                 <option value='Bouvet Island'>Bouvet Island</option>
  148.                 <option value='Brazil'>Brazil</option>
  149.                 <option value='British Indian Ocean Territory'>British Indian Ocean Territory</option>
  150.                 <option value='Brunei Darussalam'>Brunei Darussalam</option>
  151.                 <option value='Bulgaria'>Bulgaria</option>
  152.                 <option value='Burkina Faso'>Burkina Faso</option>
  153.                 <option value='Burundi'>Burundi</option>
  154.                 <option value='Cambodia'>Cambodia</option>
  155.                 <option value='Cameroon'>Cameroon</option>
  156.                 <option value='Canada'>Canada</option>
  157.                 <option value='Cape Verde'>Cape Verde</option>
  158.                 <option value='Cayman Islands'>Cayman Islands</option>
  159.                 <option value='Central African Republic'>Central African Republic</option>
  160.                 <option value='Chad'>Chad</option>
  161.                 <option value='Chile'>Chile</option>
  162.                 <option value='China'>China</option>
  163.                 <option value='Christmas Island'>Christmas Island</option>
  164.                 <option value='Cocos (Keeling) Islands'>Cocos (Keeling) Islands</option>
  165.                 <option value='Colombia'>Colombia</option>
  166.                 <option value='Comoros'>Comoros</option>
  167.                 <option value='Congo'>Congo</option>
  168.                 <option value='Congo, The Democratic Republic of The'>Congo, The Democratic Republic of The</option>
  169.                 <option value='Cook Islands'>Cook Islands</option>
  170.                 <option value='Costa Rica'>Costa Rica</option>
  171.                 <option value='Cote D'ivoire'>Cote D'ivoire</option>
  172.                 <option value='Croatia'>Croatia</option>
  173.                 <option value='Cuba'>Cuba</option>
  174.                 <option value='Cyprus'>Cyprus</option>
  175.                 <option value='Czech Republic'>Czech Republic</option>
  176.                 <option value='Denmark'>Denmark</option>
  177.                 <option value='Djibouti'>Djibouti</option>
  178.                 <option value='Dominica'>Dominica</option>
  179.                 <option value='Dominican Republic'>Dominican Republic</option>
  180.                 <option value='Ecuador'>Ecuador</option>
  181.                 <option value='Egypt'>Egypt</option>
  182.                 <option value='El Salvador'>El Salvador</option>
  183.                 <option value='Equatorial Guinea'>Equatorial Guinea</option>
  184.                 <option value='Eritrea'>Eritrea</option>
  185.                 <option value='Estonia'>Estonia</option>
  186.                 <option value='Ethiopia'>Ethiopia</option>
  187.                 <option value='Falkland Islands (Malvinas)'>Falkland Islands (Malvinas)</option>
  188.                 <option value='Faroe Islands'>Faroe Islands</option>
  189.                 <option value='Fiji'>Fiji</option>
  190.                 <option value='Finland'>Finland</option>
  191.                 <option value='France'>France</option>
  192.                 <option value='French Guiana'>French Guiana</option>
  193.                 <option value='French Polynesia'>French Polynesia</option>
  194.                 <option value='French Southern Territories'>French Southern Territories</option>
  195.                 <option value='Gabon'>Gabon</option>
  196.                 <option value='Gambia'>Gambia</option>
  197.                 <option value='Georgia'>Georgia</option>
  198.                 <option value='Germany'>Germany</option>
  199.                 <option value='Ghana'>Ghana</option>
  200.                 <option value='Gibraltar'>Gibraltar</option>
  201.                 <option value='Greece'>Greece</option>
  202.                 <option value='Greenland'>Greenland</option>
  203.                 <option value='Grenada'>Grenada</option>
  204.                 <option value='Guadeloupe'>Guadeloupe</option>
  205.                 <option value='Guam'>Guam</option>
  206.                 <option value='Guatemala'>Guatemala</option>
  207.                 <option value='Guinea'>Guinea</option>
  208.                 <option value='Guinea-bissau'>Guinea-bissau</option>
  209.                 <option value='Guyana'>Guyana</option>
  210.                 <option value='Haiti'>Haiti</option>
  211.                 <option value='Heard Island and Mcdonald Islands'>Heard Island and Mcdonald Islands</option>
  212.                 <option value='Holy See (Vatican City State)'>Holy See (Vatican City State)</option>
  213.                 <option value='Honduras'>Honduras</option>
  214.                 <option value='Hong Kong'>Hong Kong</option>
  215.                 <option value='Hungary'>Hungary</option>
  216.                 <option value='Iceland'>Iceland</option>
  217.                 <option value='India'>India</option>
  218.                 <option value='Indonesia'>Indonesia</option>
  219.                 <option value='Iran, Islamic Republic of'>Iran, Islamic Republic of</option>
  220.                 <option value='Iraq'>Iraq</option>
  221.                 <option value='Ireland'>Ireland</option>
  222.                 <option value='Israel'>Israel</option>
  223.                 <option value='Italy'>Italy</option>
  224.                 <option value='Jamaica'>Jamaica</option>
  225.                 <option value='Japan'>Japan</option>
  226.                 <option value='Jordan'>Jordan</option>
  227.                 <option value='Kazakhstan'>Kazakhstan</option>
  228.                 <option value='Kenya'>Kenya</option>
  229.                 <option value='Kiribati'>Kiribati</option>
  230.                 <option value='Korea, Democratic People's Republic of'>Korea, Democratic People's Republic of</option>
  231.                 <option value='Korea, Republic of'>Korea, Republic of</option>
  232.                 <option value='Kuwait'>Kuwait</option>
  233.                 <option value='Kyrgyzstan'>Kyrgyzstan</option>
  234.                 <option value='Lao People's Democratic Republic'>Lao People's Democratic Republic</option>
  235.                 <option value='Latvia'>Latvia</option>
  236.                 <option value='Lebanon'>Lebanon</option>
  237.                 <option value='Lesotho'>Lesotho</option>
  238.                 <option value='Liberia'>Liberia</option>
  239.                 <option value='Libyan Arab Jamahiriya'>Libyan Arab Jamahiriya</option>
  240.                 <option value='Liechtenstein'>Liechtenstein</option>
  241.                 <option value='Lithuania'>Lithuania</option>
  242.                 <option value='Luxembourg'>Luxembourg</option>
  243.                 <option value='Macao'>Macao</option>
  244.                 <option value='Macedonia, The Former Yugoslav Republic of'>Macedonia, The Former Yugoslav Republic of</option>
  245.                 <option value='Madagascar'>Madagascar</option>
  246.                 <option value='Malawi'>Malawi</option>
  247.                 <option value='Malaysia'>Malaysia</option>
  248.                 <option value='Maldives'>Maldives</option>
  249.                 <option value='Mali'>Mali</option>
  250.                 <option value='Malta'>Malta</option>
  251.                 <option value='Marshall Islands'>Marshall Islands</option>
  252.                 <option value='Martinique'>Martinique</option>
  253.                 <option value='Mauritania'>Mauritania</option>
  254.                 <option value='Mauritius'>Mauritius</option>
  255.                 <option value='Mayotte'>Mayotte</option>
  256.                 <option value='Mexico'>Mexico</option>
  257.                 <option value='Micronesia, Federated States of'>Micronesia, Federated States of</option>
  258.                 <option value='Moldova, Republic of'>Moldova, Republic of</option>
  259.                 <option value='Monaco'>Monaco</option>
  260.                 <option value='Mongolia'>Mongolia</option>
  261.                 <option value='Montserrat'>Montserrat</option>
  262.                 <option value='Morocco'>Morocco</option>
  263.                 <option value='Mozambique'>Mozambique</option>
  264.                 <option value='Myanmar'>Myanmar</option>
  265.                 <option value='Namibia'>Namibia</option>
  266.                 <option value='Nauru'>Nauru</option>
  267.                 <option value='Nepal'>Nepal</option>
  268.                 <option value='Netherlands'>Netherlands</option>
  269.                 <option value='Netherlands Antilles'>Netherlands Antilles</option>
  270.                 <option value='New Caledonia'>New Caledonia</option>
  271.                 <option value='New Zealand'>New Zealand</option>
  272.                 <option value='Nicaragua'>Nicaragua</option>
  273.                 <option value='Niger'>Niger</option>
  274.                 <option value='Nigeria'>Nigeria</option>
  275.                 <option value='Niue'>Niue</option>
  276.                 <option value='Norfolk Island'>Norfolk Island</option>
  277.                 <option value='Northern Mariana Islands'>Northern Mariana Islands</option>
  278.                 <option value='Norway'>Norway</option>
  279.                 <option value='Oman'>Oman</option>
  280.                 <option value='Pakistan'>Pakistan</option>
  281.                 <option value='Palau'>Palau</option>
  282.                 <option value='Palestinian Territory, Occupied'>Palestinian Territory, Occupied</option>
  283.                 <option value='Panama'>Panama</option>
  284.                 <option value='Papua New Guinea'>Papua New Guinea</option>
  285.                 <option value='Paraguay'>Paraguay</option>
  286.                 <option value='Peru'>Peru</option>
  287.                 <option value='Philippines'>Philippines</option>
  288.                 <option value='Pitcairn'>Pitcairn</option>
  289.                 <option value='Poland'>Poland</option>
  290.                 <option value='Portugal'>Portugal</option>
  291.                 <option value='Puerto Rico'>Puerto Rico</option>
  292.                 <option value='Qatar'>Qatar</option>
  293.                 <option value='Reunion'>Reunion</option>
  294.                 <option value='Romania'>Romania</option>
  295.                 <option value='Russian Federation'>Russian Federation</option>
  296.                 <option value='Rwanda'>Rwanda</option>
  297.                 <option value='Saint Helena'>Saint Helena</option>
  298.                 <option value='Saint Kitts and Nevis'>Saint Kitts and Nevis</option>
  299.                 <option value='Saint Lucia'>Saint Lucia</option>
  300.                 <option value='Saint Pierre and Miquelon'>Saint Pierre and Miquelon</option>
  301.                 <option value='Saint Vincent and The Grenadines'>Saint Vincent and The Grenadines</option>
  302.                 <option value='Samoa'>Samoa</option>
  303.                 <option value='San Marino'>San Marino</option>
  304.                 <option value='Sao Tome and Principe'>Sao Tome and Principe</option>
  305.                 <option value='Saudi Arabia'>Saudi Arabia</option>
  306.                 <option value='Senegal'>Senegal</option>
  307.                 <option value='Serbia and Montenegro'>Serbia and Montenegro</option>
  308.                 <option value='Seychelles'>Seychelles</option>
  309.                 <option value='Sierra Leone'>Sierra Leone</option>
  310.                 <option value='Singapore'>Singapore</option>
  311.                 <option value='Slovakia'>Slovakia</option>
  312.                 <option value='Slovenia'>Slovenia</option>
  313.                 <option value='Solomon Islands'>Solomon Islands</option>
  314.                 <option value='Somalia'>Somalia</option>
  315.                 <option value='South Africa'>South Africa</option>
  316.                 <option value='South Georgia and The South Sandwich Islands'>South Georgia and The South Sandwich Islands</option>
  317.                 <option value='Spain'>Spain</option>
  318.                 <option value='Sri Lanka'>Sri Lanka</option>
  319.                 <option value='Sudan'>Sudan</option>
  320.                 <option value='Suriname'>Suriname</option>
  321.                 <option value='Svalbard and Jan Mayen'>Svalbard and Jan Mayen</option>
  322.                 <option value='Swaziland'>Swaziland</option>
  323.                 <option value='Sweden'>Sweden</option>
  324.                 <option value='Switzerland'>Switzerland</option>
  325.                 <option value='Syrian Arab Republic'>Syrian Arab Republic</option>
  326.                 <option value='Taiwan, Province of China'>Taiwan, Province of China</option>
  327.                 <option value='Tajikistan'>Tajikistan</option>
  328.                 <option value='Tanzania, United Republic of'>Tanzania, United Republic of</option>
  329.                 <option value='Thailand'>Thailand</option>
  330.                 <option value='Timor-leste'>Timor-leste</option>
  331.                 <option value='Togo'>Togo</option>
  332.                 <option value='Tokelau'>Tokelau</option>
  333.                 <option value='Tonga'>Tonga</option>
  334.                 <option value='Trinidad and Tobago'>Trinidad and Tobago</option>
  335.                 <option value='Tunisia'>Tunisia</option>
  336.                 <option value='Turkey'>Turkey</option>
  337.                 <option value='Turkmenistan'>Turkmenistan</option>
  338.                 <option value='Turks and Caicos Islands'>Turks and Caicos Islands</option>
  339.                 <option value='Tuvalu'>Tuvalu</option>
  340.                 <option value='Uganda'>Uganda</option>
  341.                 <option value='Ukraine'>Ukraine</option>
  342.                 <option value='United Arab Emirates'>United Arab Emirates</option>
  343.                 <option value='United Kingdom'>United Kingdom</option>
  344.                 <option value='United States'>United States</option>
  345.                 <option value='United States Minor Outlying Islands'>United States Minor Outlying Islands</option>
  346.                 <option value='Uruguay'>Uruguay</option>
  347.                 <option value='Uzbekistan'>Uzbekistan</option>
  348.                 <option value='Vanuatu'>Vanuatu</option>
  349.                 <option value='Venezuela'>Venezuela</option>
  350.                 <option value='Viet Nam'>Viet Nam</option>
  351.                 <option value='Virgin Islands, British'>Virgin Islands, British</option>
  352.                 <option value='Virgin Islands, U.S.'>Virgin Islands, U.S.</option>
  353.                 <option value='Wallis and Futuna'>Wallis and Futuna</option>
  354.                 <option value='Western Sahara'>Western Sahara</option>
  355.                 <option value='Yemen'>Yemen</option>
  356.                 <option value='Zambia'>Zambia</option>
  357.                 <option value='Zimbabwe'>Zimbabwe</option>
  358.         </select>
  359.         <input type='text' name='pseudo-input-2' id='pseudo-input-2' class='input-unstyled input-sep' placeholder='Area' value='' maxlength='3' style='width: 30px;'>
  360.         <input type='text' name='pseudo-input-3' id='pseudo-input-3' class='input-unstyled' placeholder='Number' value='' style='width: 80px;'>
  361. </span>
  362. </p>
  363.  
  364. <fieldset>
  365.         <table>
  366.         <tr>
  367.                 <td><b>Login</b><span style='color:red;'>*</span></td>
  368.                 <td><input type='text' name='login' id='login' value='' class='input-unstyled' placeholder='Login' autocomplete='off'></td></tr>
  369.         <tr>
  370.                 <td><b>Password</b><span style='color:red;'>*</span></td>
  371.                 <td><input type='password' name='pass' id='pass' value='' class='input-unstyled' placeholder='Password' autocomplete='off'></td></tr>
  372.         </table>
  373.         </fieldset>
  374.         <p></p>
  375.  
  376.         <table>
  377.         <tr>
  378.           <td>Password (6-8 characters)<span style='color:red;'>*</span></td>
  379.           <td><input type='password' id='password' name='password' maxlength='8' /></td>
  380.           <td id='passwordError' color='red'>&nbsp;</td></tr>
  381.         <tr>
  382.           <td>Verify password<span style='color:red;'>*</span></td>
  383.           <td><input type='password' id='pwVerified' name='pwVerified' maxlength='8' /></td>
  384.           <td id='pwVerifiedError' color='red'>&nbsp;</td></tr>
  385.         </table>
  386.         <h3 class='thin underline'>Special Inputs:</h3>
  387.  
  388.         <p class='button-height'>
  389.                 <input type='file' name='special-input-1' id='special-input-1' value='' class='file' multiple>
  390.         </p>
  391.  
  392.         <p class='button-height'>
  393.                 <span class='number input margin-right'>
  394.                         <button type='button' class='button number-down'>-</button>
  395.                         <input type='text' name='special-input-2' id='special-input-2' value='320' class='input-unstyled'>
  396.                         <button type='button' class='button number-up'>+</button>
  397.                 </span>
  398.         </p>
  399. </div>
  400.  
  401. <p>Bullet List (Line Indentations):</p>
  402.  
  403. <ul class='bullet-list'>
  404.         <li>Bullet 1</li>
  405.         <li>Bullet 2</li>
  406.         <li>Bullet 3</li>
  407. </ul>
  408.  
  409. <p> Alpha Bullet List (Line Indentations):</p>
  410.  
  411. <ol type="A">
  412. <li>List Item 1
  413. <li>List Item 2
  414. <li>List Item 3
  415. </ol>
  416.  
  417. <p> Arrow Bullet List (Line Indentations): (Note: source of image must be in the same folder as of the html file)</p>
  418.  
  419. <dl>
  420. <dd><img src="imgarrow.gif"> List item 1</dd><br>
  421. <dd><img src="imgarrow.gif"> List item 2</dd><br>
  422. <dd><img src="imgarrow.gif"> List item 3</dd>
  423. </dl>
  424.  
  425.         </div>
  426.  
  427.  
  428.  
  429.         <div class='four-columns six-columns-tablet twelve-columns-mobile clearfix'>
  430.  
  431.                 <h3 class='thin underline'>Selection Examples:</h3>
  432.  
  433.                 <div class='float-left margin-right margin-bottom'>
  434.                         <h5> Single Selection List <br>(no multiple selection)<br>
  435.                         <select class='select expandable-list anthracite-gradient glossy' style='width:100px' tabindex='2'>
  436.                                 <option value='1'>Option 1</option>
  437.                                 <option value='2'>Option 2</option>
  438.                                 <option value='3' selected='selected'>Option 3 .....Pre-Selected</option>
  439.                                 <option value='2'>Option 4</option>
  440.                                 <option value='4'>Last value</option>
  441.                         </select>
  442.                         </h5>
  443.                 </div>
  444.  
  445.                 <h5> Multiple Selection <br>(hold Ctrl/Cmd)<br>
  446.                         <select multiple>
  447.                                 <option value='1'>Value 1</option>
  448.                                 <option value='2'>Value 2</option>
  449.                                 <option value='3' selected='selected'>Multiple</option>
  450.                                 <option value='2'>Value 4</option>
  451.                                 <option value='2'>Value 5</option>
  452.                                 <option value='2'>Value 6</option>
  453.                                 <option value='2'>Value 7</option>
  454.                                 <option value='2'>Value 8</option>
  455.                                 <option value='2'>Value 9</option>
  456.                                 <option value='4'>Last value</option>
  457.                         </select>
  458.                         </h5>
  459.                 </div>
  460.         </div>
  461. </form>
  462. </div>
  463. </section>
  464. <form action = ''>
  465. <fieldset>
  466.         <legend>Reset Contents</legend>
  467.                         <table>
  468.                         <tr><td><span class='label'>Radios: </span></td><td>
  469.                                 <label for='button-radio-1'>
  470.                                         <input type='radio' name='button-radio' id='button-radio-1' value='1' checked>
  471.                                         First
  472.                                 </label></td><td>
  473.                                 <label for='button-radio-2'>
  474.                                         <input type='radio' name='button-radio' id='button-radio-2' value='2'>
  475.                                         Second
  476.                                 </label></td><td>
  477.                                 <label for='button-radio-3'>
  478.                                         <input type='radio' name='button-radio' id='button-radio-3' value='3'>
  479.                                         Third
  480.                                 </label></td><tr>
  481.                                 <tr><td><span class='label'>Checkboxes: </span></td><td>
  482.                                         <label for='button-checkbox-1'>
  483.                                                 <input type='checkbox' name='button-checkbox-1' id='button-checkbox-1' value='1'>
  484.                                                 First
  485.                                         </label></td><td>
  486.                                         <label for='button-checkbox-2'>
  487.                                                 <input type='checkbox' name='button-checkbox-2' id='button-checkbox-2' value='2' checked>
  488.                                                 Second
  489.                                         </label></td><td>
  490.                                         <label for='button-checkbox-3'>
  491.                                                 <input type='checkbox' name='button-checkbox-3' id='button-checkbox-3' value='3'>
  492.                                                 Third
  493.                                         </label></td><tr>
  494.                         </table>
  495.                         <table>
  496.                         <tr></td><td><label>Select List</label></td><td></td><td>
  497.                         <select id = 'myList'>
  498.                                 <option value = '1'>one</option>
  499.                                 <option value = '2'>two</option>
  500.                                 <option value = '3'>three</option>
  501.                         </select></td></tr>
  502.                         </table>
  503.                 </fieldset>
  504.         <input type = 'reset' />
  505.     </form>
  506.  
  507. <!-- End main content -->
  508.  
  509. <!-- Side tabs shortcuts -->
  510. <ul id='shortcuts' role='complementary' class='children-tooltip tooltip-right'>
  511.         <li><a href='newtab0.html' class='shortcut-newtab0' title='New Tab - Stay'>Stay And Open A New Tab</a></li>
  512.         <li><a href='newtab1.html' class='shortcut-newtab1' title='New Tab - Go'>Open And Go To A New Tab</a></li>
  513.         <li><a href='about.html' class='shortcut-contact' title='If You Want To Know Who We Are'>About Us</a></li>
  514. </ul>
  515.  
  516.                                         <div class='float-left margin-right margin-bottom'>
  517.                                         <h4>Copy To Clipboard Button:
  518.                                         <button id='select-clipboard' type='button' class='button' style='width: 100px'>Click Here</button>
  519.                                         </h4></div>
  520.  
  521. <!-- Sidebar/drop-down menu -->
  522. <section id='menu' role='complementary'>
  523.        
  524. Wrapper: 3 Column
  525. <style type="text/css">
  526.     #wrapper{
  527.         border:1px solid white;
  528.             overflow:auto;/* to clear floats*/
  529.         }
  530.         #wrapper div{
  531.             height:60px;
  532.             }
  533.           #wrapper .left{
  534.         float:left;
  535.         border:3px solid red;
  536.         width:32%;
  537.         }
  538.         #wrapper .right{
  539.         float:right;
  540.         border:3px solid blue;
  541.         width:32%;
  542.         }
  543.         #wrapper .middle{
  544.         border:3px solid green;
  545.         margin-right:33%;
  546.         margin-left:33%;
  547.         }
  548. </style>
  549. <div id="wrapper">
  550.         <div class="left">. left</div>
  551.         <div class="right">. right</div>
  552.         <div class="middle">. middle</div>
  553. </div>
  554.  
  555.                 <!-- This wrapper is used by several responsive layouts -->
  556.                 <div id='menu-content'>
  557.  
  558.                         <header>
  559.                                 Image:
  560.                         </header>
  561.  
  562.                         <div id='images'>
  563.                                 <a href='http://www.vectors4all.net/preview/globe-logo-concept.jpg'><img src='http://www.vectors4all.net/preview/globe-logo-concept.jpg'  width='100' height='100' alt='Image Hovering Text' /> Click This Image Or This Text </a><br> Image Pseudo Resized to 100x100<br><br>
  564.                                 <br><img src='http://www.vectors4all.net/preview/globe-logo-concept.jpg' alt='Image Hovering Text' class='fullsize-image'> Actual Size
  565.                         </div>
  566.  
  567.                 </div>
  568.                 <!-- End content wrapper -->
  569.  
  570.  
  571.  
  572.  
  573. <TABLE BORDER="0"><TR>
  574.  
  575. <TD bgcolor="#0000FF" align="center"><font size=2 face="tahoma, arial" color="yellow"><B>Fonts</b></FONT></TD>
  576. <TD bgcolor="yellow" align="center"><font size=2 face="tahoma, arial" color="#0000FF"><B>ABC123</b></FONT></TD>
  577. </TR><TR>
  578. <TD VALIGN="top">
  579.  
  580. <font size="2" color="black">
  581. <OL>
  582. <LI><FONT face="arial">arial</FONT>
  583. <LI><FONT face="arial black">arial black</FONT>
  584. <LI><FONT face="comic sans ms">comic sans ms</FONT>
  585. <LI><FONT face="courier">courier</FONT>
  586. <LI><FONT face="georgia">georgia</FONT>
  587. <LI><FONT face="helvetica">helvetica</FONT>
  588. <LI><FONT face="impact">impact</FONT>
  589. <LI><FONT face="Lucida Console">lucida console</FONT>
  590. <LI><FONT size="5" face="Mekanik LET">mekanik let</FONT>
  591. <LI><FONT face="monospace">monospace</FONT>
  592. <LI><FONT face="sans-serif">sans-serif</FONT>
  593. <LI><FONT face="symbol">symbol</FONT><FONT color="red" face="arial">* (Symbol)</FONT>
  594. <LI><FONT face="tahoma">tahoma</FONT>
  595. <LI><FONT face="times new roman">times new roman</FONT><FONT color="red" face="arial">**</FONT><FONT color="grey" face="arial"><b> (default)</b></FONT>
  596. <LI><FONT face="trebuchet MS">trebuchet ms</FONT>
  597. <LI><FONT face="verdana">verdana</FONT>
  598. <LI><FONT face="wingdings">wingdings</FONT><FONT color="red" face="arial">* (Wingdings)</FONT>
  599. </OL>
  600. </FONT>
  601.  
  602. </TD><TD VALIGN="top">
  603. <font size="2" color="#000000">
  604. <OL>
  605. <LI><FONT face="arial">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  606. <LI><FONT face="arial black">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  607. <LI><FONT face="comic sans ms">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  608. <LI><FONT face="courier">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  609. <LI><FONT face="georgia">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  610. <LI><FONT face="helvetica">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  611. <LI><FONT face="impact">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  612. <LI><FONT face="Lucida Console">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  613. <LI><FONT size="5" face="Mekanik LET">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  614. <LI><FONT face="monospace">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  615. <LI><FONT face="sans-serif">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  616. <LI><FONT face="symbol">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  617. <LI><FONT face="tahoma">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  618. <LI><FONT face="times new roman">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  619. <LI><FONT face="trebuchet MS">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  620. <LI><FONT face="verdana">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  621. <LI><FONT face="wingdings">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  622. </OL>
  623. </FONT>
  624. </TD>
  625.  
  626. <font size=1pt face="arial" color=#FF2400>1 point arial type text</font>
  627. <font size=2pt face="arial" color=#FF2400>2 point arial type text</font>
  628. <font size=3pt face="arial" color=#FF2400>3 point arial type text</font>
  629. <font size=4pt face="arial" color=#FF2400>4 point arial type text</font>
  630. <font size=5pt face="arial" color=#FF2400>5 point arial type text</font>
  631. <font size=6pt face="arial" color=#FF2400>6 point arial type text</font>
  632. <font size=7pt face="arial" color=#FF2400>7 point arial type text</font>
  633.  
  634. </TR></TABLE>
  635.  
  636.  
  637.         </section>
  638.         <!-- End sidebar/drop-down menu -->
  639.  
  640.         <!-- JavaScript at the bottom for fast page loading -->
  641.  
  642.         <!-- Scripts -->
  643.         <script src='js/libs/jquery-1.7.2.min.js'></script>
  644.         <script src='js/setup.js'></script>
  645.  
  646.         <!-- jQuery Form Validation -->
  647.         <script src='js/libs/formValidator/jquery.validationEngine.js?v=1'></script>
  648.         <script src='js/libs/formValidator/languages/jquery.validationEngine-en.js?v=1'></script>
  649.  
  650. </body>
  651. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement