prodio
Version:
Simplified project management
331 lines (288 loc) • 16 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Forms</title>
<meta name="description" content="">
<meta name="author" content="ink, cookbook, recipes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- Place favicon.ico and apple-touch-icon(s) here -->
<link rel="shortcut icon" href="../img/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="../img/touch-icon.57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../img/touch-icon.72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../img/touch-icon.114.png">
<link rel="apple-touch-startup-image" href="../img/splash.320x460.png" media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="../img/splash.768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="../img/splash.1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
<!-- load inks CSS -->
<link rel="stylesheet" type="text/css" href="../css/ink-flex.min.css">
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
<!-- load inks CSS for IE8 -->
<!--[if lt IE 9 ]>
<link rel="stylesheet" href="../css/ink-ie.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
<![endif]-->
<!-- test browser flexbox support and load legacy grid if unsupported -->
<script type="text/javascript" src="../js/modernizr.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.flexbox,
nope : '../css/ink-legacy.min.css'
});
</script>
<!-- load inks javascript files -->
<script type="text/javascript" src="../js/holder.js"></script>
<script type="text/javascript" src="../js/ink-all.min.js"></script>
<script type="text/javascript" src="../js/autoload.js"></script>
<style type="text/css">
body {
background: #ededed;
}
header {
padding: 2em 0;
margin-bottom: 2em;
}
header h1 {
font-size: 2em;
}
header h1 small:before {
content: "|";
margin: 0 0.5em;
font-size: 1.6em;
}
footer {
background: #ccc;
}
</style>
</head>
<body>
<div class="ink-grid">
<!--[if lte IE 9 ]>
<div class="ink-alert basic">
<button class="ink-dismiss">×</button>
<p>
<strong>You are using an outdated Internet Explorer version.</strong>
Please <a href="http://browsehappy.com/">upgrade to a browser</a> to improve your web experience.
</p>
</div>
-->
<!-- Add your site or application content here -->
<header>
<h1>site name<small>smaller text</small></h1>
<nav class="ink-navigation">
<ul class="menu horizontal black">
<li class="active"><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</nav>
</header>
<div class="column-group gutters">
<form action="" class="ink-form all-50 small-100 tiny-100">
<fieldset>
<div class="control-group required column-group gutters">
<label for="first-name" class="all-20 align-right">Name</label>
<div class="control all-40">
<input type="text" id="first-name">
<p class="tip">First Name</p>
</div>
<div class="control all-40">
<input type="text" id="last-name">
<p class="tip">Last Name</p>
</div>
</div>
<div class="control-group required column-group gutters">
<label for="email" class="all-20 align-right">Email</label>
<div class="control all-80">
<input type="text" id="email">
</div>
</div>
<div class="control-group column-group gutters">
<label for="area" class="all-20 align-right">Description</label>
<div class="control all-80">
<textarea id="area"></textarea>
</div>
</div>
<div class="control-group column-group gutters">
<label for="file-input" class="all-20 align-right">File input</label>
<div class="control all-80">
<div class="input-file">
<input type="file" name="" id="file-input">
</div>
</div>
</div>
</fieldset>
</form>
<div class="all-50 small-100 tiny-100">
<p>
Chuck Norris once kicked a baby elephant into puberty. Crop circles are Chuck Norris' way of telling the world that sometimes corn needs to lie the f*ck down.
</p>
<img src="holder.js/1200x600/auto/ink" alt="">
</div>
</div>
<form action="#" class="ink-form column-group gutters">
<fieldset class="all-33 small-100 tiny-100">
<legend>Fieldset title</legend>
<div class="control-group">
<label for="name2">Name</label>
<div class="control">
<input type="text" id="name2">
</div>
</div>
<div class="control-group">
<label for="phone2">Phone</label>
<div class="control">
<input type="text" id="phone2">
</div>
</div>
<div class="control-group">
<label for="email2">Email</label>
<div class="control">
<input type="text" id="email2">
</div>
</div>
</fieldset>
<fieldset class="all-33 small-100 tiny-100">
<legend>Rock Bands</legend>
<div class="control-group">
<p class="label">Please select one or more options</p>
<ul class="control unstyled">
<li><input type="checkbox" id="cb1" name="cb1" value=""><label for="cb1">Chimaira</label></li>
<li><input type="checkbox" id="cb2" name="cb2" value=""><label for="cb2">Metallica</label></li>
<li><input type="checkbox" id="cb3" name="cb3" value=""><label for="cb3">Motörhead</label></li>
<li><input type="checkbox" id="cb4" name="cb4" value=""><label for="cb4">Pantera</label></li>
<li><input type="checkbox" id="cb5" name="cb5" value=""><label for="cb5">Slayer</label></li>
<li><input type="checkbox" id="cb6" name="cb6" value=""><label for="cb6">Switchtense</label></li>
</ul>
</div>
</fieldset>
<fieldset class="all-33 small-100 tiny-100">
<legend>Pick a card</legend>
<div class="control-group">
<p class="label">Please select one of these options</p>
<ul class="control unstyled">
<li><input type="radio" id="rb1" name="rb" value=""><label for="rb1">Ace of Spades</label></li>
<li><input type="radio" id="rb2" name="rb" value=""><label for="rb2">Queen of Diamonds</label></li>
<li><input type="radio" id="rb3" name="rb" value=""><label for="rb3">Queen of Spades</label></li>
<li><input type="radio" id="rb4" name="rb" value=""><label for="rb4">Jack of Hearts</label></li>
<li><input type="radio" id="rb5" name="rb" value=""><label for="rb5">King of Clubs</label></li>
<li><input type="radio" id="rb6" name="rb" value=""><label for="rb6">King of Diamonds</label></li>
</ul>
</div>
</fieldset>
</form>
<form action="#" class="ink-form">
<h4>Inline form with inline fields</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida lacus purus. Integer turpis enim, condimentum non pellentesque vel, consequat vitae diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<div class="column-group gutters vertical-space">
<div class="control-group all-33 small-100 tiny-100">
<div class="column-group gutters">
<label for="name3" class="all-20 align-right">Name</label>
<div class="control all-80">
<input type="text" id="name3">
</div>
</div>
</div>
<div class="control-group all-33 small-100 tiny-100">
<div class="column-group gutters">
<label for="phone3" class="all-20 align-right">Phone</label>
<div class="control all-80">
<input type="text" id="phone3">
</div>
</div>
</div>
<div class="control-group all-33 small-100 tiny-100">
<div class="column-group gutters">
<label for="email3" class="all-20 align-right">Email</label>
<div class="control all-80">
<input type="text" id="email3">
</div>
</div>
</div>
</div>
</form>
<form action="#" class="ink-form">
<h4>Block form with inline fields</h4>
<p>
Proin nibh nulla, consequat vitae aliquet nec, consequat consectetur quam. Morbi diam dui, ornare vel elementum ut, pharetra at urna. Proin vel purus orci, vel euismod lorem. In hac habitasse platea dictumst. Donec eu scelerisque velit. Suspendisse velit lectus, ultrices vitae luctus vel, lobortis non metus.
</p>
<div class="column-group gutters vertical-space">
<div class="control-group all-33 small-100 tiny-100">
<label for="name4">Name</label>
<div class="control">
<input type="text" id="name4">
</div>
</div>
<div class="control-group all-33 small-100 tiny-100">
<label for="phone4">Phone</label>
<div class="control">
<input type="text" id="phone4">
</div>
</div>
<div class="control-group all-33 small-100 tiny-100">
<label for="email4">Email</label>
<div class="control">
<input type="text" id="email4">
</div>
</div>
</div>
</form>
<form action="#" class="ink-form">
<h4>Appended and prepended buttons and symbols</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida lacus purus. Integer turpis enim, condimentum non pellentesque vel, consequat vitae diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<fieldset>
<div class="column-group gutters vertical-space">
<div class="control-group all-50 small-100 tiny-100">
<div class="column-group gutters">
<div class="control all-100 small-100 tiny-100 append-button">
<span><input type="text" id="name5"></span>
<button class="ink-button"><i class="icon-search"></i> Search</button>
</div>
</div>
<div class="column-group gutters">
<div class="control all-100 small-100 tiny-100 prepend-button">
<input type="submit" value="Search" class="ink-button">
<span><input type="text" id="phone5"></span>
</div>
</div>
</div>
<div class="control-group all-50 small-100 tiny-100">
<div class="column-group gutters">
<div class="control all-100 small-100 tiny-100 append-symbol">
<span>
<input type="text" id="email5">
<i class="fa fa-envelope-o"></i>
</span>
</div>
</div>
<div class="column-group gutters">
<div class="control all-100 small-100 tiny-100 prepend-symbol">
<span>
<input type="text" id="email6">
<i class="fa fa-envelope-o"></i>
</span>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<footer class="clearfix">
<div class="ink-grid">
<ul class="unstyled inline half-vertical-space">
<li class="active"><a href="#">About</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Contacts</a></li>
</ul>
<p class="note">Identification of the owner of the copyright, either by name, abbreviation, or other designation by which it is generally known.</p>
</div>
</footer>
</body>
</html>