root
/
css-mastery-16-master


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
							<!doctype html>
<html lang="en" class="no-js">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Advanced Form</title>
  <script src="js/modernizr.js"></script>
  <style>
    body {
      font-family: Avenir Next, Avenir, SegoeUI, Franklin Gothic, arial, sans-serif;
      background-color: #edf5f8;
      margin: 0;
      padding: 1em;
    }

    label {
      cursor: pointer;
      display: block;
    }

    button {
      cursor: pointer;
      border: 0;
      padding: .5em 1em;
      color: #fff;
      border-radius: .25em;
      font-size: 1em;
      background-color: #173b6d;
      background-image: -webkit-linear-gradient(top, #1a4a8e, #173b6d);
      background-image: -moz-linear-gradient(top, #1a4a8e, #173b6d);
      background-image: -o-linear-gradient(top, #1a4a8e, #173b6d);
      background-image: linear-gradient(to bottom, #1a4a8e, #173b6d);
      box-shadow: 0 .25em 0 rgba(23, 59, 109, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.3);
    }
    button:focus {
      outline: 0;
      background-color: #2158a9;
      background-image: -webkit-linear-gradient(top, #2063c0, #1d4d90);
      background-image: -moz-linear-gradient(top, #2063c0, #1d4d90);
      background-image: -o-linear-gradient(top, #2063c0, #1d4d90);
      background-image: linear-gradient(to bottom, #2063c0, #1d4d90);
      box-shadow: 0 .25em 0 rgba(23, 59, 109, 0.3),
      inset 0 1px 0 rgba(0, 0, 0, 0.3),
      0 0 .5em rgba(93, 162, 248, 0.5);
    }
    input,
    textarea {
      font: inherit;
    }
    textarea {
      height: 10em;
      resize: vertical;
    }
    input[type="radio"] {
      margin-right: .75em;
    }

    legend {
      padding: 0 0 .5em 0;
      font-weight: bold;
      color: #777;
      display: table;
    }

      /**
      * Since fieldsets are notoriously hard to style, we'll just
      * remove default styles from the fieldset and style a wrapper element
      * instead.
      * 1. Bug: Safari has a weird thing where the top margin from elements after 
      * the <legend> get shifted to the top of the fieldset. Setting a tiny
      * amount of padding on the <fieldset> element counters this.
      * 2. WebKit- and Blink-based browsers have a minimum width set to respect
      * the default width of input fields. We override it with min-width here.
      */
      fieldset {
        border: 0;
        padding: 0.01em 0 0 0; /* 1 */
        margin: 0;
        min-width: 0; /* 2 */
      }
      /**
      * Firefox browsers have a minimum width for fieldsets. The only way to
      * override it is to change the display mode to table-*.
      * The @-moz-document url-prefix() bit is a Mozilla-specific mechanism
      * to allow users to override site-specific styles in user stylesheets.
      * It works for author styles as well, so we might as well use it, even
      * if it's an ugly hack. Leaving the url-prefix()-bit empty applies
      * the rule for any URL.
      * Note: this adds a couple of pixels of extra white-space after the 
      * fieldset.
      */
      @-moz-document url-prefix() {
        fieldset {
          display: table-cell;
        }
      }
      /**
      * Our "artificial fieldset" since ordinary fieldsets are a pain to style.
      * 1. Add a border, mostly to create a visually distinguishing edge for
      * old browsers like IE 8.
      */
      .fieldset-wrapper {
        padding: 1em;
        margin-bottom: 1em;
        border: 1px solid #eee; /* 1 */
        background-color: #fff;
        -webkit-box-shadow: 0 0 .25em rgba(0, 0, 0, 0.25);
           -moz-box-shadow: 0 0 .25em rgba(0, 0, 0, 0.25);
                box-shadow: 0 0 .25em rgba(0, 0, 0, 0.25);
      }
      /**
      * No border for more modern browsers (excludes old browsers that don't
      * understand the :root selector).
      */
      :root .fieldset-wrapper {
        border: 0;
      }

      .field {
        max-width: 20em;
      }
      .field-text label,
      .field-text input,
      .field-prefixed,
      .field-text textarea {
        width: 100%;
        max-width: 100%;
        -webkit-appearance: none;
        -moz-box-sizing: border-box;
             box-sizing: border-box;
      }
      .field-text input,
      .field-text textarea {
        padding: .375em .3125em .3125em;
        border: 1px solid #ccc;
        border-radius: .25em;
      }
      .field-text input:focus,
      .field-text textarea:focus {
        outline: 0;
        box-shadow: 0 0 .5em rgba(93, 162, 248, 0.5);
        border-color: #5da2f8;
      }
      
      .field-submit {
        padding: 1em;
      }

      .flexbox .field-prefixed {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: -webkit-box;
        display: -moz-box;
        display: flex;
      }
      .field-prefix {
        display: inline-block;
        padding: .375em .375em .3125em .375em;
        background-color: #f5f8f8;
        color: #666f77;
        border: 1px solid #ccc;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: .25em;
      }
      .flexbox .field-prefix {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: -webkit-box;
        display: -moz-box;
        display: flex;
        border-right: 0;
        border-radius: .25em 0 0 .25em;
        -webkit-align-items: center;
             -ms-flex-align: center;
          -webkit-box-align: center;
             -moz-box-align: center;
                align-items: center;
      }
      .field-prefixed input {
        max-width: 12em;
      }
      .flexbox .field-prefixed input {
        max-width: 100%;
        border-radius: 0 .25em .25em 0;
        -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        flex: 1 1 100%;
      }

      .checkboxes {
        list-style: none;
        padding: 0;
        -webkit-column-width: 10em;
           -moz-column-width: 10em;
                column-width: 10em;
      }
      
      .checkboxes li {
        min-height: 1.5em;
        margin-bottom: .5em;
      }
      /**
      * 1. Set inline block + 100% width on <li> elements, to avoid multi-column
      *    bug where margin flows across columns in WebKit/Blink.
      *    This selector is only recognized by WebKit/Blink.
      */
      .checkboxes li:not(*:root) {
        width: 100%; /* [1] */
        display: inline-block; /* [1] */
      }
      .checkboxes input[type="checkbox"] + label {
        display: inline-block;
      }
      /* only target IE9+, so to speak. */
      :root input[type="checkbox"] {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
      }

      :root input[type="checkbox"] + label {
        line-height: 1.5;
        color: #333;
        padding-left: 1.5em;
        background-position: .125em 36%;
        background-repeat: no-repeat;
        background-size: 18px 18px;
      }

      /** 
      * fallbacks to png for when :checked is supported but no svg support/no js.
      * (in effect for Android 2.X)
      */
      :root input[type="checkbox"] + label {
        background-image: url(images/checkbox-unchecked.png);
      }
      :root input[type="checkbox"]:checked + label {
        background-image: url(images/checkbox-checked.png);
      }
      :root input[type="checkbox"]:focus + label {
        background-image: url(images/checkbox-unchecked-focus.png);
      }
      :root input[type="checkbox"]:focus:checked + label {
        background-image: url(images/checkbox-checked-focus.png);
      }
      /**
      * Modern browsers supporting SVG will get the inline SVG as data URI:s.
      * The SVG file is basically raw in the URL, but encoded to escape the SVG
      * code.
      * This boosts performance by cutting the number of requests and prevents
      * an ugly "white flash" as the browser switches from one graphic to the next
      * before all images have loaded.
      */

      /* unchecked checkbox: */
      :root.svgasimg input[type="checkbox"] + label {
        background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M35%2029c0%203.3-2.7%206-6%206H7c-3.3%200-6-2.7-6-6V7c0-3.3%202.7-6%206-6h22c3.3%200%206%202.7%206%206v22z%22%2F%3E%3C%2Fsvg%3E);
      }
      /* checked checkbox: */
      :root.svgasimg input[type="checkbox"]:checked + label {
        background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M35%2029c0%203.3-2.7%206-6%206H7c-3.3%200-6-2.7-6-6V7c0-3.3%202.7-6%206-6h22c3.3%200%206%202.7%206%206v22z%22%2F%3E%3Cpath%20fill%3D%22%231A4A8E%22%20d%3D%22M26%205l5.2%206.7S19.1%2031.2%2019.1%2031.3L5%2021l4-4%209%207%208-19z%22%2F%3E%3C%2Fsvg%3E);
      }
      /* focused (but unchecked) checkbox: */
      :root.svgasimg input[type="checkbox"]:focus + label {
        color: #000;
        background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%235DA2F8%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M35%2029c0%203.3-2.7%206-6%206H7c-3.3%200-6-2.7-6-6V7c0-3.3%202.7-6%206-6h22c3.3%200%206%202.7%206%206v22z%22%2F%3E%3C%2Fsvg%3E);
      }
      /* checked and focused checkbox: */
      :root.svgasimg input[type="checkbox"]:focus:checked + label {
        background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%235DA2F8%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M35%2029c0%203.3-2.7%206-6%206H7c-3.3%200-6-2.7-6-6V7c0-3.3%202.7-6%206-6h22c3.3%200%206%202.7%206%206v22z%22%2F%3E%3Cpath%20fill%3D%22%231A4A8E%22%20d%3D%22M26%205l5.2%206.7S19.1%2031.2%2019.1%2031.3L5%2021l4-4%209%207%208-19z%22%2F%3E%3C%2Fsvg%3E);
      }

      /**
      * Here's the non-inlined and commented out image version with SVG files, 
      * to explain what's going on with the dataURI strings above. (they are
      * in effect containing the files below:)
      :root input[type="checkbox"] + label {
        background-image: url(images/checkbox-unchecked.svg);
      }

      :root.svgasimg input[type="checkbox"]:checked + label {
        background-image: url(images/checkbox-checked.svg);
      }
      :root.svgasimg input[type="checkbox"]:focus + label {
        color: #000;
        background-image: url(images/checkbox-unchecked-focus.svg);
      }
      :root.svgasimg input[type="checkbox"]:focus:checked + label {
        background-image: url(images/checkbox-checked-focus.svg);
      }*/

      /** 
      * Adjust the text input fields to be in line with the
      * labels when screens are a little wider.
      */
      @media only screen and (min-width: 35em) {
        .flexbox .field-text {
          display: -webkit-flex;
          display: -ms-flexbox;
          display: -webkit-box;
          display: -moz-box;
          display: flex;
          max-width: 28em;
        }
        .flexbox .field-text label {
          -webkit-flex: 0 0 8em;
          -ms-flex: 0 0 8em;
          -webkit-box-flex: 0;
          -moz-box-flex: 0;
          flex: 0 0 8em;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: -webkit-box;
          display: -moz-box;
          display: flex;
          -webkit-align-items: center;
               -ms-flex-align: center;
            -webkit-box-align: center;
               -moz-box-align: center;
                  align-items: center;
        }
      }
    </style>
  </head>

  <body>
    <h1>Job application</h1>
    <form id="comments_form" action="/comments/" method="post">
      <div class="fieldset-wrapper">
        <fieldset>
          <legend>Your contact details</legend>

          <p class="field field-text">
            <label for="applicant-name">Name:</label>
            <input name="applicant-name" id="applicant-name" type="text" />
          </p>

          <p class="field field-text">
            <label for="applicant-email">Email Address:</label>
            <input name="applicant-email" id="applicant-email" type="email" />
          </p>

          <p class="field field-text">
            <label for="applicant-twitter">Twitter handle:</label>
            <span class="field-prefixed">
              <span class="field-prefix" id="applicant-twitter-prefix" aria-label="You can omit the @">@</span>
              <input aria-describedby="applicant-twitter-prefix" name="applicant-twitter" id="applicant-twitter" type="text" />
            </span>
          </p>
        </fieldset>
      </div>

      <div class="fieldset-wrapper">
        <fieldset>
          <legend>Which languages have you mastered?</legend>
          <ul class="checkboxes">
            <li>
              <input type="checkbox" name="lang-as" id="lang-as">
              <label for="lang-as">ActionScript</label>
            </li>
            <li>
              <input type="checkbox" name="lang-basic" id="lang-basic">
              <label for="lang-basic">BASIC</span>
              </li>
              <li>
                <input type="checkbox" name="lang-csharp" id="lang-csharp">
                <label for="lang-csharp">C#</label>
              </li>
              <li>
                <input type="checkbox" name="lang-cplusplus" id="lang-cplusplus">
                <label for="lang-cplusplus">C++</label>
              </li>
              <li>
                <input type="checkbox" name="lang-clojure" id="lang-clojure">
                <label for="lang-clojure">Clojure</label>
              </li>
              <li>
                <input type="checkbox" name="lang-cobol" id="lang-cobol">
                <label for="lang-cobol">COBOL</label>
              </li>
              <li>
                <input type="checkbox" name="lang-css" id="lang-css">
                <label for="lang-css">CSS</label>
              </li>
              <li>
                <input type="checkbox" name="lang-haskell" id="lang-haskell">
                <label for="lang-haskell">Haskell</label>
              </li>
              <li>
                <input type="checkbox" name="lang-html" id="lang-html">
                <label for="lang-html">HTML</label>
              </li>
              <li>
                <input type="checkbox" name="lang-java" id="lang-java">
                <label for="lang-java">Java</label>
              </li>
              <li>
                <input type="checkbox" name="lang-js" id="lang-js">
                <label for="lang-js">JavaScript</label>
              </li>
              <li>
                <input type="checkbox" name="lang-objc" id="lang-objc">
                <label for="lang-objc">Objective-C</label>
              </li>
              <li>
                <input type="checkbox" name="lang-python" id="lang-python">
                <label for="lang-python">Python</label>
              </li>
              <li>
                <input type="checkbox" name="lang-ruby" id="lang-ruby">
                <label for="lang-ruby">Ruby</label>
              </li>

            </ul>
          </fieldset>
        </div>

        <p class="field-submit">
          <button id="submit" class="submit" name="submit" type="submit">Send application</button>
        </p>
      </form>

    </body>
    </html>