417 lines
17 KiB
HTML
417 lines
17 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Easy front-end framework</title>
|
|
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
|
|
<meta name="keywords" content="" />
|
|
<meta name="description" content="" />
|
|
<meta http-equiv="imagetoolbar" content="no" />
|
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
|
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
|
|
<link rel="stylesheet" href="../stylesheets/easyprint.css" media="print" />
|
|
<script type="text/javascript" src="../javascripts/jquery.js"></script>
|
|
<script type="text/javascript" src="../javascripts/easy.js"></script>
|
|
<script type="text/javascript" src="../javascripts/application.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
|
|
<div id="header">
|
|
|
|
<h1>Easy front-end framework</h1>
|
|
|
|
<ul id="nav">
|
|
<li><a href="http://easyframework.com">Home</a></li>
|
|
<li><a href="http://easyframework.com/overview.php">Overview</a>
|
|
<ul>
|
|
<li><a href="#">Sub-navigation item</a></li>
|
|
<li><a href="#">Sub-navigation item</a></li>
|
|
<li><a href="#">Sub-navigation item</a></li>
|
|
<li><a href="#">Sub-navigation item</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="http://easyframework.com/documentation.php">Documentation</a>
|
|
<ul>
|
|
<li><a href="#">Sub-navigation item</a></li>
|
|
<li><a href="#">Sub-navigation item</a></li>
|
|
<li><a href="#">Sub-navigation item</a></li>
|
|
<li><a href="#">Sub-navigation item</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="http://easyframework.com/demo.php">Demo</a></li>
|
|
<li><a href="http://easyframework.com/contact.php">Contact</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="main">
|
|
|
|
<h1>H1 Title</h1>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis dui nec eros varius
|
|
ac molestie ante malesuada. Duis sed justo et sem hendrerit suscipit et ac eros. </p>
|
|
|
|
<p><strong>Aliquam suscipit</strong> sodales sapien eu egestas. Nulla laoreet sem ac diam
|
|
suscipit condimentum. Vestibulum tempor odio iaculis enim cursus pharetra faucibus dui lobortis.
|
|
Pellentesque at nisl nibh. </p>
|
|
|
|
<blockquote> Aliquam hendrerit accumsan porta. Nam vehicula eleifend sem eu pellentesque. </blockquote>
|
|
|
|
<p class="left"><a href="../images/img_logo1.jpg" title="Click for larger image" class="tooltip popup"><img src="../images/img_logo2.jpg" alt="" /></a></p>
|
|
<p>Donec aliquam cursus tortor, faucibus lobortis convallis. Integer pharetra consequat felis, id malesuada metus vulputate a. Nunc ut magna massa. Donec commodo odio a ligula varius id vulputate nulla tristique. Suspendisse et egestas dolor. Aliquam hendrerit accumsan porta. Nam vehicula eleifend sem eu pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec in lacus nec justo porta congue id vel magna. </p>
|
|
|
|
<pre>pre{
|
|
padding:1em 2em;
|
|
background:#f1f1f1;
|
|
}</pre>
|
|
|
|
<table cellpadding="0" cellspacing="0">
|
|
<caption>Table caption</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Table header</th>
|
|
<th>Table header</th>
|
|
<th>Table header</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<td>Table footer</td>
|
|
<td>Table footer</td>
|
|
<td>Table footer</td>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr>
|
|
<td>Table data</td>
|
|
<td>Table data</td>
|
|
<td>Table data</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Table data</td>
|
|
<td>Table data</td>
|
|
<td>Table data</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui.
|
|
Nulla viverra bibendum nisi, sit amet ullamcorper nibh euismod at. </p>
|
|
|
|
<h2>H2 Title</h2>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
|
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
|
|
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
|
|
|
<ul>
|
|
<li>Lorem ipsum dolor sit amet
|
|
<ul>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Class aptent taciti sociosqu</li>
|
|
<li>Ad litora torquent per </li>
|
|
</ul>
|
|
</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Class aptent taciti sociosqu</li>
|
|
<li>Ad litora torquent per </li>
|
|
</ul>
|
|
|
|
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
|
|
Integer a orci orci. Morbi dignissim pharetra nulla, vitae sollicitudin sapien tristique in.
|
|
Donec quis nulla magna, ac mattis ligula. Ut rhoncus porttitor magna quis pulvinar. </p>
|
|
|
|
<p><a href="#">Read more...</a></p>
|
|
|
|
<ol>
|
|
<li>Lorem ipsum dolor sit amet
|
|
<ol>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Class aptent taciti sociosqu</li>
|
|
<li>Ad litora torquent per </li>
|
|
</ol>
|
|
</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Class aptent taciti sociosqu</li>
|
|
<li>Ad litora torquent per </li>
|
|
</ol>
|
|
|
|
<p>Nullam in dui ac tellus consequat iaculis. Donec faucibus imperdiet leo, et commodo odio posuere sed. Morbi a erat est.</p>
|
|
|
|
<dl>
|
|
<dt>Consectetur adipiscing elit</dt>
|
|
<dd>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia</dd>
|
|
<dt>Ad litora torquent per</dt>
|
|
<dd>Ut rhoncus porttitor magna quis pulvinar. Nullam in dui ac tellus consequat iaculis.</dd>
|
|
</dl>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
|
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
|
|
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
|
|
|
<p class="pullquote">Nullam in dui ac tellus consequat iaculis. Donec faucibus imperdiet leo.</p>
|
|
|
|
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
|
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
|
Curabitur lobortis quam vestibulum risus sodales mattis.
|
|
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
|
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
|
|
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
|
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
|
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
|
Curabitur lobortis quam vestibulum risus sodales mattis.
|
|
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
|
|
|
<p class="boxout">Nullam in dui ac tellus consequat iaculis. Donec faucibus imperdiet leo.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
|
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
|
|
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
|
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
|
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
|
Curabitur lobortis quam vestibulum risus sodales mattis.
|
|
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
|
|
|
<div class="cols">
|
|
|
|
<div class="col first">
|
|
<h3>Column 1</h3>
|
|
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
|
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
|
Curabitur lobortis quam vestibulum risus sodales mattis.
|
|
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<h3>Column 2</h3>
|
|
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
|
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
|
Curabitur lobortis quam vestibulum risus sodales mattis.
|
|
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="cols cols3">
|
|
|
|
<div class="col first">
|
|
<h3>Column 1</h3>
|
|
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
|
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
|
Curabitur lobortis quam vestibulum risus sodales mattis.
|
|
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<h3>Column 2</h3>
|
|
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
|
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
|
Curabitur lobortis quam vestibulum risus sodales mattis.
|
|
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<h3>Column 3</h3>
|
|
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
|
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
|
Curabitur lobortis quam vestibulum risus sodales mattis.
|
|
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="cols cols4">
|
|
|
|
<div class="col first">
|
|
<h2>Column 1</h2>
|
|
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
|
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
|
Curabitur lobortis quam vestibulum risus sodales mattis.
|
|
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<h3>Column 2</h3>
|
|
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
|
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
|
Curabitur lobortis quam vestibulum risus sodales mattis.
|
|
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<h3>Column 3</h3>
|
|
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
|
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
|
Curabitur lobortis quam vestibulum risus sodales mattis.
|
|
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<h3>Column 4</h3>
|
|
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
|
sit amet ullamcorper nibh euismod at. </p>
|
|
<p>Integer vehicula tempor metus eu dignissim.
|
|
Curabitur lobortis quam vestibulum risus sodales mattis.
|
|
Nulla lacinia.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<h4>H4 Title</h4>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
|
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
|
|
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
|
|
|
<h5>H5 Title</h5>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
|
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
|
|
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
|
|
|
<h6>H6 Title</h6>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
|
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
|
|
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
|
|
|
<h2>Form</h2>
|
|
|
|
<p class="note">This is the style for notifications.</p>
|
|
<p class="success">This is the style for successful actions.</p>
|
|
<p class="error">This is the style for errors!</p>
|
|
|
|
<form id="contactForm" action="/" method="post">
|
|
|
|
<fieldset>
|
|
|
|
<legend>Basic options</legend>
|
|
<div>
|
|
<label for="name">Name</label>
|
|
<input type="text" name="name" id="name" size="30" class="field required" />
|
|
</div>
|
|
<div>
|
|
<label for="url">URL</label>
|
|
<input type="text" name="url" id="url" size="30" class="field required url" />
|
|
</div>
|
|
<div>
|
|
<label for="email">Email</label>
|
|
<input type="text" name="email" id="email" size="30" class="field required email" />
|
|
</div>
|
|
<div>
|
|
<label for="phonenumber">Phone Number</label>
|
|
<input type="text" name="phonenumber" id="phonenumber" size="30" class="field" />
|
|
</div>
|
|
<div>
|
|
<label for="city">City</label>
|
|
<select name="city" id="city" class="select">
|
|
<option>New York</option>
|
|
<option>London</option>
|
|
<option>Paris</option>
|
|
<option>Tokio</option>
|
|
<option>Sydney</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="message">Message</label>
|
|
<textarea name="message" id="message" cols="30" rows="10" class="area"></textarea>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>More options...</legend>
|
|
<p>Following text field uses label as a default value.</p>
|
|
<div>
|
|
<label for="location">Where do you live?</label>
|
|
<input type="text" name="location" id="location" size="30" class="field label" />
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>... and more options</legend>
|
|
<div>
|
|
<label><input type="radio" name="radio" value="1" checked="checked" class="radio" /> Value 1</label>
|
|
<label><input type="radio" name="radio" value="2" class="radio" /> Value 2</label>
|
|
<label><input type="radio" name="radio" value="3" class="radio" /> Value 3</label>
|
|
</div>
|
|
<div>
|
|
<label><input type="checkbox" name="checkbox" value="1" checked="checked" class="required" /> Checkbox here</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div class="submit"><button type="submit">Submit</button></div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
<div class="secondary">
|
|
<h2>Interactive Elements</h2>
|
|
|
|
<p>This will display <a href="http://easyframework.com" class="tooltip" title="Regular Tooltip">regular tooltip.</a></p>
|
|
|
|
<p>This will display an <a href="http://easyframework.com/images/img_logo1.jpg" class="popup">image in a popup box</a>.</p>
|
|
|
|
<p>This will open a <a href="http://easyframework.com" class="popup">URL in a popup box</a> using <strong>default settings</strong>.</p>
|
|
|
|
<p>This will open a <a href="http://easyframework.com" class="popup" rel="width:800;height:300">URL in a popup box</a> using <strong>custom settings</strong> for width and height.</p>
|
|
|
|
<p>This will open a <a href="http://www.youtube.com/v/cnvkeJds7zc&hl=en_US&fs" class="popup flash" rel="width:560;height:340">Flash movie in a popup box</a>.</p>
|
|
|
|
<p>This will display <a href="#header" class="popup">any element from the page in a popup box</a>.</p>
|
|
|
|
<p class="toggle">Click on this to show/hide <strong>next sibling</strong>.</p>
|
|
|
|
<p><em>This is the NEXT sibling!</em></p>
|
|
|
|
<p><em>This is the PREVIOUS sibling!</em></p>
|
|
|
|
<p class="toggle prev">Click on this to show/hide <strong>previous sibling</strong>.</p>
|
|
|
|
<p>Click on this to show/hide <a href="#toggler" title="Show and hide element with id=toggler" class="toggle id tooltip">element based on ID</a>.
|
|
It can be placed anywhere on the page. (This works only on anchor elements)</p>
|
|
|
|
<p id="toggler"><em>This is the element with ID "toggler"!</em></p>
|
|
|
|
<p>Click on this link to <a href="#footer" class="jump">jump to the footer</a></p>
|
|
|
|
<ul class="rotate">
|
|
<li>Built-in rotation script...</li>
|
|
<li>...rotates child nodes of any element!</li>
|
|
</ul>
|
|
|
|
<h2>Styled Elements</h2>
|
|
|
|
<p>
|
|
This is <abbr title="title">abbreviation</abbr><br />
|
|
This is <strong>strong</strong><br />
|
|
This is <em>emphasis</em><br />
|
|
This is <b>bold text</b><br />
|
|
This is <i>italic text</i><br />
|
|
This is <cite>cite</cite><br />
|
|
This is <code>code sample</code><br />
|
|
This is <small>small text</small><br />
|
|
This is <big>small text</big><br />
|
|
This is <del>deleted text</del><br />
|
|
This is <ins>inserted text</ins><br />
|
|
This is <dfn>defining instance</dfn><br />
|
|
This is <kbd>user input</kbd><br />
|
|
This is <samp>sample output</samp><br />
|
|
This is <q>inline quote</q> <br />
|
|
These are <sup>superscript</sup> and <sub>subscript</sub><br />
|
|
This is <var>variable or program argument</var>
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="footer">
|
|
<p>© Alen Grakalic Easy front-end framework (Read <a href="http://easyframework.com/license.php">license agreement</a>)<br/>
|
|
Made with <a href="http://easyframework.com">Easy</a></p>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |