Spacemaids' Form

Exclusive purchase form used on the upcoming spacemaids.com

by Emily Humphrey

HTML

<div id="wrapper">
    <div class="boxes boxes-1 contain form-box">
        <div class="contain">
            <form>
                <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 -->
                
                <div class="side-1">
                    <input name="q" placeholder="Your Name">
                    <input name="q" placeholder="Your Email">
                    <input name="q" placeholder="Your Phone" id="phone">
                    <input name="q" placeholder="Street Address">
                    <input name="q" placeholder="Zip Code">
                    <input name="q" placeholder="Your Phone" id="phone">
                </div><!-- .side-1 -->
                    <div class="side-2">
                        Bammmmm
                    </div><!-- .side-2 -->
                </div><!-- .stage-info -->
          </form>
        </div> <!-- div.contain -->
    </div>
    <!-- div#hc-box -->
</div>

CSS

body{background:#E6E2DB;color:#494947;font-family:"Myriad Pro",Frutiger,"Frutiger Linotype",Helvetica,Arial,sans-serif;font-size:16px;overflow-y:auto;padding:0;margin:0;}div#wrapper{display:block;width:940px;margin:20px auto 0;}div.boxes{display:block;margin-bottom:20px;position:relative;background:#fbfbfb;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;float:left;}div.boxes:after{display:block;height:100%;width:100%;position:absolute;bottom:-4px;right:-4px;background:#323232;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;content:"";opacity:.05;z-index:-1;}div.boxes-4{width:220px;margin-right:20px;}div.boxes-3{width:300px;margin-right:20px;}div.boxes-2{width:460px;margin-right:20px;}div.boxes-1{width:940px;margin-right:0;}*{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;}div.boxes-4 .contain{width:180px;padding:20px;}div.boxes-3 .contain{width:260px;padding:20px;}div.boxes-2 .contain{width:420px;padding:20px;}div.boxes-1 .contain{width:900px;padding:20px; overflow:hidden;}


div.side-1{
    display:block;
    width:400px;
    padding:20px 20px 0 0;
    float:left;
}
div.side-2{
    display:block;
    width:480px;
    padding:20px 0 0 0;
    float:left;
}
input{
    display:block;
    width:378px;  
    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:first-of-type{
    margin-top:0;
}
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;
}