138 lines
No EOL
5.1 KiB
HTML
138 lines
No EOL
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Test page for mini.css</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="generator" content="http://chalarangelo.github.io/htmltemplategenerator/">
|
|
<link rel="stylesheet" href="css/mini-full.css">
|
|
</head>
|
|
<body>
|
|
<h1>Heading 1 <small>smaller</small></h1>
|
|
<h2>Heading 2 <small>smaller</small></h2><br>
|
|
<p><strong>Paragraph</strong>: Lorem ipsum dolor sit amet, <mark>consectetur</mark> adipiscing elit. <code>Praesent est mi</code>, commodo vitae mauris at, sagittis vehicula sem. Quisque malesuada dui at justo maximus, vel placerat nibh blandit. Phasellus <sub>quis</sub> ipsum aliquam, <sup>fringilla</sup> ante <kbd>sit</kbd> amet, sagittis magna. In at dignissim eros, id vulputate tellus. Quisque orci urna, pretium in porttitor et, rhoncus in nulla. Aenean viverra ante in velit tincidunt, <kbd>sit</kbd> amet tincidunt ante suscipit. In malesuada consectetur molestie.</p>
|
|
<br>
|
|
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
|
|
<br>
|
|
<hr>
|
|
<br>
|
|
<ol>
|
|
<li>List element</li>
|
|
<li>List element</li>
|
|
<li>List element</li>
|
|
</ol>
|
|
<pre>Ut sollicitudin arcu arcu, eget fermentum sem ullamcorper in.
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Phasellus nec nisl nunc. Sed sit amet urna arcu.
|
|
Donec non consequat tortor, id fermentum felis.
|
|
Quisque elementum hendrerit egestas. In id rhoncus neque, eget mattis neque.
|
|
Suspendisse varius turpis et dui viverra semper.</pre>
|
|
<hr>
|
|
<br>
|
|
<h3>Heading 3 <small>smaller</small></h3>
|
|
<form method="post" action="demo_form.php"><fieldset>
|
|
First name: <input type="text" name="demo_form_name"><br>
|
|
Last name: <input type="text" name="demo_form_surname"><br></fieldset>
|
|
<input type="submit" value="Submit form">
|
|
</form>
|
|
<h4>Heading 4 <small>smaller</small></h4>
|
|
<table>
|
|
<tr>
|
|
<th>Month</th>
|
|
<th>Savings</th>
|
|
</tr>
|
|
<tr>
|
|
<td>January</td>
|
|
<td>$100</td>
|
|
</tr>
|
|
</table>
|
|
<h5>Heading 5 <small>smaller</small></h5>
|
|
<textarea rows="4" cols="16">This is a textarea.</textarea>
|
|
<h6>Heading 6 <small>smaller</small></h6>
|
|
<ul>
|
|
<li>Suspendisse convallis ac metus non efficitur.</li>
|
|
<li>Donec consectetur eu nisi luctus bibendum.</li>
|
|
<li>Nam tempor facilisis sem vitae mattis.</li>
|
|
<li>Fusce feugiat rhoncus eros, id auctor mauris facilisis quis.</li>
|
|
</ul>
|
|
<br>
|
|
<div>Etiam maximus, ante vitae porttitor tincidunt, sem erat pharetra turpis, a ornare tortor purus <a href="https://www.google.com" class="btn lg">ut justo</a>.
|
|
</div>
|
|
<br>
|
|
<h3>TODO: Add helper class for bordered that uses 1px solid rgba(0,0,0,0.25) to add a border to elements easily</h3>
|
|
<table class="tbl">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Make</th>
|
|
<th>Model</th>
|
|
<th>Year</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>Honda</td>
|
|
<td>Accord</td>
|
|
<td>2009</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>2</td>
|
|
<td>Toyota</td>
|
|
<td>Camry</td>
|
|
<td>2012</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>3</td>
|
|
<td>Hyundai</td>
|
|
<td>Elantra</td>
|
|
<td>2010</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
<button type="button" class="green sm btn">Sample button</button>
|
|
<blockquote cite="https://www.google.com">Nam non diam ante. Curabitur non enim vitae eros luctus porta.</blockquote>
|
|
<div class="grid-container"><div class="row"><div class="col xs-4 sm-6" style="background: red;">1c</div><div class="col xs-8 sm-6" style="background: blue;">2c</div></div><div class="row"><div class="col xs-1 sm-no md-no lg-no" style="background: purple;"></div><div class="col xs-10 sm-12" style="background: yellow;">3c</div></div></div>
|
|
<br><br>
|
|
<form class="frm inline">
|
|
<fieldset>
|
|
<div class="ctrl-group">
|
|
<label for="name">Username</label>
|
|
<input id="name" type="text" placeholder="Username">
|
|
</div>
|
|
|
|
<div class="ctrl-group">
|
|
<label for="password">Password</label>
|
|
<input id="password" type="password" placeholder="Password">
|
|
</div>
|
|
|
|
<div class="ctrl-group">
|
|
<label for="email">Email Address</label>
|
|
<input id="email" type="email" placeholder="Email Address">
|
|
</div>
|
|
|
|
<div class="ctrl-group">
|
|
<label for="foo">Supercalifragilistic Label</label>
|
|
<input id="foo" type="text" placeholder="Enter something here...">
|
|
</div>
|
|
|
|
<div class="">
|
|
<label for="cb" class="pure-checkbox">
|
|
<input id="cb" type="checkbox"> I've read the terms and conditions
|
|
</label>
|
|
</div><div>
|
|
<button type="submit" class="btn lg blue">Submit</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
<h3>Notes for the demo page</h3>
|
|
<ul>
|
|
<li>Responsive images are part of the _base.</li>
|
|
</ul>
|
|
|
|
</body>
|
|
</html> |