Spacemaids Form

Form layout and components for Spacemaids.

by Emily Humphrey

HTML

<div id="form-contain">
    <form>
        <div class="bo-stage bo-stage-1">
            <div class="stage-info"> 
                <span class="larger bold green">Stage Header</span><br>
                <span class="black normal">Short description to explain this stage goes here.</span>
            </div><!-- .stage-info -->
            <input name="q" placeholder="Your Name">
            <input name="q" placeholder="Your Email">
            <input name="q" placeholder="Your Phone" id="phone">
            <button id="stage-1" class="next">vbgfbf</button>
        </div><!-- .bo-stage-1 -->
    </form>
</div>
<!-- #form-contain -->

CSS

body {
    background:#E6E2DB;
    color:#494947;
    font-family:"Myriad Pro", Frutiger, "Frutiger Linotype", Helvetica, Arial, sans-serif;
    font-size:16px;
    overflow-y: auto;
    padding:40px;
    margin:0;
}

/* --------------------
   Typographry
-------------------- */

*{
	color:#494947;
	font-family: "Myriad Pro", Frutiger, "Frutiger Linotype", Helvetica, Arial, sans-serif;
}
p{
    line-height:1.25em;
}
.larger{
    font-size:1.5em;
}
.large{
    font-size:1.25em;
}
.small{
    font-size:0.75em;
}
.smaller{
    font-size:0.5em;
}
.green{
    color:#79BE50;
}
.purple{
    color:#7D569F;
}
.bold{
    font-weight:700;
}

/* --------------------
   Form Elements
-------------------- */

#form-contain{
    display:block;
    width:600px;
    background:#fbfbfb;
    padding:20px;
    margin:0 auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
input{
    display:block;
    width:388px;  
    padding:12px 10px 8px;
    margin:20px auto 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size:1em;
    color:#333;
    border:#7D569F solid 1px;
}
input:focus{
    outline:none;
}
input:focus::-webkit-input-placeholder {
    opacity: .2;
}
input:-moz-placeholder {
    opacity: .2;
}
input::-moz-placeholder {
    opacity: .2;
}
input:-ms-input-placeholder {
    opacity: .2;
}