151 lines
No EOL
6.8 KiB
HTML
151 lines
No EOL
6.8 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><br>
|
|
<input type="checkbox" class="hidden" id="nav-toggle"><div class="nav">
|
|
<span class="logo">mini.css</span>
|
|
<ul class="pure-menu-list">
|
|
<li><a href="#" class="nav-link">link 1</a></li>
|
|
<li class="nav-link"><a href="#" class="pure-menu-link" disabled>d link</a></li>
|
|
<li class="nav-link"><a href="#" class="pure-menu-link">other</a></li>
|
|
<li class="nav-link"><a href="#" class="pure-menu-link">thing</a></li>
|
|
<li class="nav-link">Separator</li>
|
|
<li class="nav-link"><a href="#" class="pure-menu-link">test</a></li>
|
|
<li class="nav-link"><a href="#" class="pure-menu-link">test2</a></li>
|
|
<li class="nav-link"><a href="#" class="pure-menu-link">test3!</a></li>
|
|
</ul>
|
|
</div><label for="nav-toggle"></label><br>
|
|
<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="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTZiYmE2OTM4NyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1NmJiYTY5Mzg3Ij48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQzLjUiIHk9Ijc0LjgiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" class="circle">
|
|
<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.<span class="caret"></span></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, <span class="txt-blue">ante vitae porttitor tincidunt, sem erat</span> pharetra turpis, a ornare tortor purus <a href="https://www.google.com" class="btn lg bordered">ut justo</a>.
|
|
</div>
|
|
<br>
|
|
<h3>TODO: Add helper class for <span class="bg-red">bordered that uses 1px solid</span> 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 bordered" class="green lg 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> |