ui.html

   1 <!DOCTYPE HTML>
   2 <html><head>
   3
   4
   5     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
   6     <title>UI</title>
   7     <style type="text/css">
   8             html, body
   9             {
  10                    height: 100%;
  11                    margin: 0;
  12                    background: -moz-linear-gradient(top, #888888, #8f8f8f);
  13                    font-family: "Segoe UI Semibold";
  14            }
  15
  16             input
  17             {
  18                     background: rgba(255,255,255,.65);
  19                     border: 1px solid white;
  20                     border-radius: 0;
  21             }
  22
  23             td:first-child
  24             {
  25                     text-align: right;
  26             }
  27
  28                 label:after
  29                 {
  30                         content: ":";
  31                 }
  32
  33                 section
  34                 {
  35                         display: block;
  36                         width: 120ex;
  37                         margin: 0 auto;
  38                 }
  39
  40     </style>
  41 </head><body>
  42         <section>
  43         <article>
  44         <header>Data</header>
  45         <form>
  46                 <table>
  47                         <tbody><tr><td>
  48         <label for="fname">First Name</label>
  49         </td><td>
  50         <input name="fname" placeholder="Enter First Name" type="text">
  51                         </td></tr>
  52                         <tr><td>
  53         <label for="email">E-Mail</label>
  54         </td><td>
  55         <input name="email" type="email">
  56                         </td></tr>
  57                         <tr><td>
  58         <label for="age">Age</label>
  59         </td><td>
  60         <input name="age" min="1" max="120" type="number">
  61                         </td></tr>
  62                         <tr><td>
  63         <label for="satisfaction">Satisfaction</label>
  64         </td><td>
  65         <input name="satisfaction" min="1" max="12" value="6" type="range">
  66                         </td></tr>
  67 </tbody></table>
  68         </form></article>
  69         </section>
  70 </body></html>