html5 css3 form
by Budhram Gurung
HTML
<form id="sign-up">
<fieldset>
<label>Name</label>
<input type="text" name="name" placeholder='Name' required/>
</fieldset>
<fieldset>
<label>Email</label>
<input type="email" name="email" placeholder='Email' required/>
</fieldset>
<fieldset>
<label>Phone</label>
<input type="text" name="phone" placeholder='Phone'/>
</fieldset>
<fieldset>
<label>Favorite Beer</label>
<input type="text" name="favorite_beer" placeholder='Favorite Beer' required/>
</fieldset>
<fieldset>
<input type="submit" value="Submit" />
</fieldset>
</form>
CSS
@font-face {
font-family: 'DroidSansRegular';
src: url('fonts/DroidSans-webfont.eot');
src: local('☺'), url('fonts/DroidSans-webfont.woff') format('woff'), url('fonts/DroidSans-webfont.ttf') format('truetype'), url('fonts/DroidSans-webfont.svg#webfontw7zqO19G') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSansBold';
src: url('fonts/DroidSans-Bold-webfont.eot');
src: local('☺'), url('fonts/DroidSans-Bold-webfont.woff') format('woff'), url('fonts/DroidSans-Bold-webfont.ttf') format('truetype'), url('fonts/DroidSans-Bold-webfont.svg#webfontSOhoM6aS') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'MarketingScriptRegular';
src: url('fonts/MarketingScript-webfont.eot');
src: local('☺'), url('fonts/MarketingScript-webfont.woff') format('woff'), url('fonts/MarketingScript-webfont.ttf') format('truetype'), url('fonts/MarketingScript-webfont.svg#webfontZ5AiaAsu') format('svg');
font-weight: normal;
font-style: normal;
}
/***** Reset *****/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote { margin: 0; padding: 0; }
fieldset,img { border: 0; }
ol,ul { list-style: none; }
h1,h2,h3,h4 { font-size: 100%; font-weight: normal; }
a { text-decoration: none; }
a img { border: none; }
.texthide { text-indent: -9999em; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display:block;
}
body {
background: url(bg.png) repeat;
}
#blocks {
float: left;
margin-top: 20px;
}
#blocks section {
float: left;
width: 290px;
display: inline;
background: #fafaf6;
border: 5px solid #e9e9e4;
margin-right: 30px;
}
#blocks section:last-child {
margin-right: 0;
}
.box h1.script {
font: normal 24px "MarketingScriptRegular", Georgia, serif;
color: #717165;
margin-left: 10px;
padding: 5px 0 0 0;
border-bottom: 1px solid #ecece9;
width: 270px;
text-align: left;
}
#sign-up fieldset...