<section id="contact">
<div class="content">
<div id="form">
<form action="" id="contactForm" method="post">
<span>Name</span>
<input type="text" name="name" class="name" placeholder="Enter your name" tabindex=1 />
<span>Email</span>
<input type="text" name="email" class="email" placeholder="Enter your email" tabindex=2 />
<span id="captcha"></span>
<input type="text" name="captcha" class="captcha" maxlength="4" size="4" placeholder="Enter captcha code" tabindex=3 />
<span>Message</span>
<textarea class="message" placeholder="Enter your message" tabindex=4></textarea>
<input type="submit" name="submit" value="Send e-mail" class="submit" tabindex=5>
</form>
</div>
</section>
* {
margin: 0;
padding: 0
}
body {
margin: 15px auto 0;
width: 410px;
color: black;
}
#contact {
overflow: auto;
}
#contact #form {
width:410px;
float:left;
}
#contact #form span {
display:block;
float:left;
width:100px;
padding-top:5px;
font: 14px/16px'Bree Serif', Georgia, serif;
}
#contact #form input {
float:left;
width:255px;
border:0px;
padding:10px 10px 10px 30px;
font: 11px/20px'Open Sans', Verdana, Helvetica, sans-serif;
margin-bottom:10px;
border: 1px solid black;
color: black;
}
#contact #form textarea {
float:left;
border:0px;
width:255px;
height:140px;
padding:10px 10px 10px 30px;
font: 11px/20px'Open Sans', Verdana, Helvetica, sans-serif;
color:#F1F1F1;
resize: none;
border: 1px solid black;
}
#contact #form input.submit {
cursor: pointer;
width:85px;
height:30px;
float:right;
padding:0px 0px 5px 0px;
margin:10px 16px 0px 0px;
background:#222222;
color:#F1F1F1;
font: 14px/16px'Bree Serif', Georgia, serif;
}
This Pen doesn't use any external CSS resources.