A Pen by Jayson Mascoll

Thumbnail
This awesome code was written by jbm482, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jbm482 ©
  • HTML
  • CSS
  • JavaScript
    <div class="twelve columns">
      <ul class="stepy-titles" id="custom-titles"><li class="current-step" id="custom-title-0"><div>Step 1</div><span>Personal info</span></li><li id="custom-title-1"><div>Step 2</div><span>Address</span></li><li id="custom-title-2"><div>Step 3</div><span>Message</span></li></ul><form novalidate="novalidate" id="custom" action="sign-up-send.php" method="POST">
      
      <input class="text" id="website" name="website" value="" type="text">
      
        <fieldset id="custom-step-0" class="step" title="Step 1">
          <legend style="display: none;">Personal info</legend>
          <div class="five columns alpha">
            <label>Name<a href="#" class="tooltip_1" title="Your tooltip">Info</a></label>
            <input class="text valid" name="name" type="text">
          </div>
          <div class="five columns omega">
            <label>Last name <a href="#" class="tooltip_1" title="Your tooltip">Info</a></label>
            <input class="text" name="last_name" type="text">
          </div>
          <div class="five columns alpha ">
            <label>Your Email <a href="#" class="tooltip_1" title="Your tooltip">Info</a></label>
            <input class="email" name="email" type="email">
          </div>
          <div class="five columns omega">
            <label>Phone number <a href="#" class="tooltip_1" title="Your tooltip">Info</a></label>
            <input class="text" name="phone_number" type="text">
          </div>
          <br class="clear">
          <label>Subscribe to Newsletter?</label>
          <div class="radio"><span><input name="newsletter" value="Yes" type="radio"></span></div>Yes
          <div class="radio"><span><input name="newsletter" value="No" type="radio"></span></div>No
        <p id="custom-buttons-0" class="custom-buttons"><a class="button-next" href="javascript:void(0);" id="custom-next-0">Next step</a></p></fieldset><!-- End Step one -->
        
        <fieldset style="display: none;" id="custom-step-1" class="step" title="Step 2">
          <legend style="display: none;">Address</legend>
          <label>Address <a href="#" class="tooltip_1" title="Stree addres">Info</a></label>
          <input name="address" class="long text" type="text">
          <div class="five columns alpha">
            <label>Zip code <a href="#" class="tooltip_1" title="Stree addres">Info</a></label>
            <input class="text" name="zip_code" type="text">
          </div>
          <div class="five columns omega">
            <label>Country</label>
            <div style="width: 249px;" class="selector"><span style="width: 224px; -moz-user-select: none;"></span><select name="country">
              <option></option>
              <option>Asia</option>
              <option>Europe</option>
              <option>United States</option>
            </select></div>
          </div>
          <br class="clear">
        <p id="custom-buttons-1" class="custom-buttons"><a class="button-back" href="javascript:void(0);" id="custom-back-1">Previous step</a><a class="button-next" href="javascript:void(0);" id="custom-next-1">Next step</a></p></fieldset><!-- End Step two -->
        
        <fieldset style="display: none;" id="custom-step-2" class="step" title="Step 3">
          <legend style="display: none;">Message</legend>
          <label>Write your message</label>
          <textarea class="uniform" name="message" rows="5" cols="60"></textarea>
          <p><div class="checker"><span><input name="terms" value="Yes" type="checkbox"></span></div><a class="fancybox fancybox.ajax" href="terms.txt">I accept terms and condition </a></p>
        <p id="custom-buttons-2" class="custom-buttons"><a class="button-back" href="javascript:void(0);" id="custom-back-2">Previous step</a><input class="finish" value="Finish!" type="submit"></p></fieldset><!-- End Step three -->
        
        
      <div class="stepy-error"></div></form>
    </div>

/*Downloaded from https://www.codeseek.co/jbm482/a-pen-by-jayson-mascoll-JoWBOK */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0px;
    padding: 0px;
    border: 0px none;
    font: inherit;
    vertical-align: baseline;
}

.container .columns {
    float: left;
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
}

.container .twelve.columns {
    width: 700px;
}

#form_area {
    color: #FFF;
}

input[type="text"], input[type="password"], input[type="email"], textarea, select {
    height: 39px;
    line-height: 39px;
    outline: medium none;
    color: #FFF;
    margin: 0px 0px 20px;
    padding: 0px 10px;
    width: 93%;
    max-width: 100%;
    display: block;
    border: medium none;
}

input.text, input.email, input.search, input.tel, input.url, input.datetime, input.month, input.week, input.time, input.datetime-local, input.number, input.color, input.password, select.uniform-multiselect {
    background: url("../images/bg-input.png") repeat-x scroll 0px 0px transparent;
    outline: 0px none;
    font-size: 14px;
    font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
    font-weight: normal;
    color: #FFF;
    border-bottom: 1px solid #CCC;
    border-radius: 4px;
}



/*Downloaded from https://www.codeseek.co/jbm482/a-pen-by-jayson-mascoll-JoWBOK */
    

Comments