Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus sit amet est placerat in egestas erat. Ac felis donec et odio pellentesque diam volutpat commodo sed. Risus quis varius quam quisque id.
How to use this Table of Content:
How to use :
How to use :
How to use :
How to use this Table of Content:
<div id="toclist">
<input checked="checked" id="show" name="group" type="radio" /><input id="hide" name="group" type="radio" /><label class="hide" for="hide">Table of Content</label><label class="show" for="show"></label>
<div class="content">
<ol>
<li><a href="#1">Target #1</a></li>
<li><a href="#2">Target #2</a>
<ol>
<li><a href="#21">Target #2 sub #1</a></li>
<li><a href="#22">Target #2 sub #2</a></li>
<li><a href="#23">Target #2 sub #3</a></li>
</ol>
</li>
<li><a href="#3">Target #3</a></li>
</ol>
</div>
</div>
<h2>Heading</h2>
<h3>Sub Heading</h3>
<h4>Minor Heading</h4>
<h5>Minor Heading</h5>
<h6>Minor Heading</h6>
Text Styles
Result | How to use |
---|---|
Bold | <b>Bold</b> |
Italic | <i>Italic</i> |
Bold Italic | <b><i>Bold Italic</i></b> |
Underline | <u>Underline</u> |
<strike>Striketrough</strike> | |
Mark | <mark>Mark</mark> |
Code Style | <code>Code Style</code> |
M3 | M<sup>3</sup> |
H2O | H<sub>2</sub>O |
Exterlink | <a class="exterlink" href="#">Exterlink</a> |
Yellow | <span class="yellow">Yellow</span> |
Blue | <span class="blue">Blue</span> |
Red | <span class="red">Red</span> |
Lime | <span class="lime">Lime</span> |
Green | <span class="green">Green</span> |
Grey | <span class="grey">Grey</span> |
Orange | <span class="orange">Orange</span> |
Table
Table Header | Table Header |
---|---|
Sub | Sub |
Sub | Sub |
Sub | Sub |
Sub | Sub |
Sub | Sub |
Sub | Sub |
Sub | Sub |
<table><tbody>
<tr><th>Table Header</th><th>Table Header</th></tr>
<tr><td>Sub</td><td>Sub</td></tr>
<tr><td>Sub</td><td>Sub</td></tr>
<tr><td>Sub</td><td>Sub</td></tr>
<tr><td>Sub</td><td>Sub</td></tr>
<tr><td>Sub</td><td>Sub</td></tr>
<tr><td>Sub</td><td>Sub</td></tr>
</tbody></table>
Syntax Highlighter
<div class='about'>
<a href='/p/disclaimer.html' title='Disclaimer'>Disclaimer</a>
<a href='/p/contact.html' title='Contact'>Contact</a>
<a href='/p/term-of-service.html' title='Term of Services'>TOS</a>
<a href='/p/privacy-policy.html' title='Privacy Policy'>Privacy</a>
<a href='/p/about.html' title='About Us'>About</a>
</div>
How to use :<pre>
<code>
Parsed CSS, HTML, Java Script here
</code>
</pre>
Box and Blockquote
Blockquote
Suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Ac turpis egestas integer eget aliquet nibh praesent. Malesuada fames ac turpis egestas.
<blockquote>
Text here
</blockquote>
Warning Box
Suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique.
<div class="warning">
Text here
</div>
Important Box
Suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique.
<div class="important">
Text here
</div>
Note Box
Suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique.
<div class="note">
Text here
</div>
Recommended Box
Suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique.
<div class="recommended">
Text here
</div>
Box Baca Juga
<div class="bacajuga">
Baca juga: <a href="#link">Text</a>
</div>
Button
How to use :
<a href="#"><button>Normal</button></a>
<a href="#"><button class="download">Download</button></a>
<a href="#"><button class="preview">Preview</button></a>
Ordered Lists (Nested)
- item
- item
- item
- item
- item
- item
- item
- item
- item
<div class="nested">
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</div>
Unordered Lists (Nested)
- item
- item
- item
- item
- item
- item
- item
- item
- item
<ul>
<li>item</li>
<li>item
<ul>
<li>item</li>
<li>item
<ul>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>item</li>
</ul>