Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

439 lines (337 sloc) 12.152 kb
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<title>Helium, a lighter-than-air responsive front end</title>
<link rel="stylesheet" href="css/master.css">
</head>
<body class="fixed-page-nav responsive">
<nav id="page-nav">
<div class="container">
<div id="nav-branding" class="float-left">
<a>Helium</a>
</div>
<button id="nav-toggle" class="button float-right" data-toggle="collapse" data-target="#nav-collapse">Toggle</button>
<div id="nav-collapse" class="collapse">
<ul id="nav-site" class="nav-section float-left">
<li><a href="#">Home</a></li>
<li class="has-dropdown">
<a href="#" data-toggle="dropdown">Products <span class="caret"></span></a>
<ul class="dropdown">
<li class="section-title">Noble Gases</li>
<li><a href="#">Helium</a></li>
<li><a href="#">Neon</a>
<li><a href="#">Argon</a></li>
<li><a href="#">Krypton</a></li>
<li><a href="#">Xenon</a></li>
<li><a href="#">Radon</a></li>
<li class="divider"></li>
<li class="section-title">Molecules</li>
<li><a href="#">Carbon Dioxide</a></li>
<li><a href="#">Sodium Chloride</a></li>
</ul>
</li>
<li><a href="#">How It Works</a></li>
<li><a href="#">About</a></li>
</ul>
<div id="nav-auth" class="nav-section float-right">
<a class="button" href="#">Log in</a>
<a class="button" href="#">Sign up</a>
</div>
</div>
</div><!--end container-->
</nav><!--end page-nav-->
<header id="page-header" class="page-region">
<div class="container">
<hgroup class="module">
<h1>Forms made easy</h1>
</hgroup>
</div><!--end container-->
</header><!--end page-header-->
<div class="page-region">
<div class="container">
<div class="row subregion">
<div class="span6">
<h2>Labels above fields</h2>
<form>
<div class="field-row">
<div class="span5">
<div class="field-group">
<label class="field-label">First name</label>
<div class="fields">
<input type="text" />
</div>
</div>
</div>
<div class="span7">
<div class="field-group">
<label class="field-label">Last name</label>
<div class="fields">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="field-group">
<label class="field-label">Email address</label>
<div class="fields">
<input type="email" placeholder="name@example.com" />
</div>
</div>
<div class="field-row">
<div class="span6">
<div class="field-group">
<label class="field-label">Credit card number</label>
<div class="fields">
<input type="number" />
</div>
</div>
</div>
<div class="span6">
<div class="field-group">
<label class="field-label">Expiration date</label>
<div class="fields">
<div class="select-holder">
<select>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>Novemeber</option>
<option>December</option>
</select>
<select>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="field-group">
<label class="field-label">CVC Number</label>
<div class="fields">
<input type="number" />
<div class="field-instructions block">
This is a small 3 digit number on the back of your card.
</div>
</div>
</div>
<div class="field-group">
<label class="field-label">Comments</label>
<div class="fields">
<textarea rows="4"></textarea>
</div>
</div>
<div class="field-group">
<label class="field-label">Reason for contact</label>
<div class="fields">
<ul class="radio-checkbox-list">
<li>
<label><input type="checkbox" name="example-radio">Product inquiry</label>
</li>
<li>
<label><input type="checkbox" name="example-radio">Product inquiry</label>
</li>
<li class="error">
<label><input type="checkbox" name="example-radio">Here&rsquo;s a really, really long item that goes onto two lines</label>
<div class="error-message">You’ve got some problems, man.</div>
</li>
</ul>
</div>
</div>
<div class="field-group">
<label class="field-label">Another random field <span class="small muted">(optional)</span></label>
<div class="fields">
<input type="text" />
</div>
</div>
<div class="field-group">
<label class="single-checkbox"><input type="checkbox"> I agree to the terms and conditions of using <a href="#">this website</a>, even if it does end up going onto two lines.</label>
</div>
<div class="field-group">
<button class="button" type="submit">Agree and continue</button>
<button class="button" type="submit">Cancel</button>
</div>
</form>
</div>
<div class="span6">
<h2>Labels left of fields</h2>
<form class="labels-left">
<div class="field-group">
<div class="field-row">
<div class="span3">
<label class="field-label">First name</label>
</div>
<div class="span9">
<div class="fields">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="field-group error">
<div class="field-row">
<div class="span3">
<label class="field-label">Last name</label>
</div>
<div class="span9">
<div class="fields">
<input type="text" />
<div class="error-message">You&rsquo;ve got some problems, man.</div>
</div>
</div>
</div>
</div>
<div class="field-group">
<div class="field-row">
<div class="span3">
<label class="field-label">Date of birth</label>
</div>
<div class="span9">
<div class="fields">
<div class="select-holder">
<select>
<option>Month</option>
</select>
<select>
<option>Day</option>
</select>
<select>
<option>Year</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="field-group">
<div class="field-row">
<div class="span3">
<label class="field-label">Email</label>
</div>
<div class="span9">
<div class="fields">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="field-group">
<div class="field-row">
<div class="span3">
<label class="field-label">Comments</label>
</div>
<div class="span9">
<div class="fields">
<textarea rows="4"></textarea>
</div>
</div>
</div>
</div>
<div class="field-group">
<div class="field-row">
<div class="span3">
<label class="field-label">SSN</label>
</div>
<div class="span9">
<div class="fields multi-field">
<input class="char3" type="number">
<div class="input-inline">-</div>
<input class="char2" type="number">
<div class="input-inline">-</div>
<input class="char4" type="number">
</div>
</div>
</div>
</div>
<div class="field-group">
<div class="field-row">
<div class="span3">
<label class="field-label">Phone</label>
</div>
<div class="span9">
<div class="fields multi-field">
<input class="char3" type="number" pattern="[0-9]*">
<div class="input-inline">-</div>
<input class="char3" type="number" pattern="[0-9]*">
<div class="input-inline">-</div>
<input class="char4" type="number" pattern="[0-9]*">
</div>
</div>
</div>
</div>
<div class="field-group">
<div class="field-row">
<div class="span3">
</div>
<div class="span9">
<label class="single-checkbox"><input type="checkbox"> I agree to the terms and conditions.</label>
</div>
</div>
</div>
<div class="field-group">
<div class="field-row">
<div class="span3">
</div>
<div class="span9">
<button class="button" type="submit">Agree and continue</button>
<button class="button" type="submit">Cancel</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<footer id="page-footer" class="page-region">
<div class="container">
<div class="row">
<div class="span3">
<div class="module">
<h3>Footer Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a.</p>
</div><!--end module-->
</div><!--end span3-->
<div class="span3">
<div class="module">
<h3>Footer Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a.</p>
</div><!--end module-->
</div><!--end span3-->
<div class="span3">
<div class="module">
<h3>Footer Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a.</p>
</div><!--end module-->
</div><!--end span3-->
<div class="span3">
<div class="module">
<h3>Footer Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a.</p>
</div><!--end module-->
</div><!--end span3-->
</div>
</div><!--end container-->
</footer><!--end page-footer-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.