Form

by JamesKyle

HTML

<div class="box light" id="#this">
    <form>
        <div class="row text-align-center">
            <h4>You're well on your way to getting Coached Up</h4>
            <p class="col-10 centered">If you want the best experience as possible you may leave your information and we'll do our very best to help you out</p>
        </div>
        <hr>
        <div class="row">
            <div class="span-3 text-align-right">
                <label  for="this-name">Name:</label></div>
            <div class="col-8 pull-1 input-fill">
                <input name="this-name" type="text" placeholder="John Doe" /></div>
        </div>
        <div class="row">
            <div class="span-3 text-align-right">
                <label  for="this-email">Email:</label></div>
            <div class="col-8 pull-1 input-fill">
                <input name="this-email" type="text" placeholder="[email protected]" /></div>
        </div>
        <hr>
        <div class="row">
            <div class="col-10 centered text-align-center">
                <p><strong>Optional:</strong> Leave your phone number and an athlete advisor will call and help match you to the perfect coach</p>
                <p></p>
            </div>
            <div class="span-3 text-align-right">
                <label  for="this-phone">Phone:</label></div>
            <div class="col-8 pull-1 input-fill">
                <input name="this-phone" type="text" placeholder="(123) 456 - 7890" /></div>
        </div>
        <hr>
        <div class="row">
            <div class="span-3">
                <span class="close">Ignore</span>
            </div>
            <div class="col-8 pull-1 input-fill">
                <button>Submit</button>
            </div>
        </div>
    </form>
</div>

CSS

/* DEBUG */
xxx *:hover {
  outline: 1px solid #f00;
  outline-offset: -1px;
}
/* BASELINE */
html {
  font-size: 87.5%;
}
body {
  position: relative;
  top: 0;
  bottom: 0;
  min-height: 100%;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: 1em;
  line-height: 1.5em;
  font-family: "Proxima-Nova-Regular", "ProximaNova-Regular", "Proxima Nova Regular", "ProximaNova Regular", "Proxima Nova", "proxima-nova", "Proxima Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -khtml-font-smoothing: subpixel-antialiased;
  -moz-font-smoothing: subpixel-antialiased;
  -ms-font-smoothing: subpixel-antialiased;
  -o-font-smoothing: subpixel-antialiased;
  font-smoothing: subpixel-antialiased;
  opacity: 0.999999;
  -webkit-transform: translate3d(0, 0, 0);
}
.font-face.wf-proximanova-i7-active.wf-proximanova-i4-active.wf-proximanova-n4-active.wf-proximanova-n7-active.wf-proximanova-n1-active.wf-proximanova-n3-active.wf-proximanova-n9-active body {
  font-family: "proxima-nova";
}
/* SCAFFOLDING */
* {
  -webkit-box-sizing: border-box;
  -khtml-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.row {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  *zoom: 1;
}
.row::before,
.row::after {
  content: "";
  display: table;
}
.row::after {
  clear: both;
}
.row .row {
  width: auto;
  max-width: none;
  min-width: 0;
}
.row .row.collapse {
  margin: 0;
}
.row .row.collapse [class|="col"],
.row .row.collapse [class|="span"] {
  padding: 0;
}
[class|="col"],
[class|="span"] {
  position: relative;
  float: left;
  min-height: 1px;
  margin: 0;
}
[class|="col"].centered,
[class|="span"].centered {
  float: none;
  margin: 0 auto;
}
[class|="col"] + [class|="col"]:last-child,
[class|="span"] +...