tag:blogger.com,1999:blog-79349993884051647862024-03-14T08:31:16.647+07:00Ripple VESClean and Responsive Blogger Template VESAnonymoushttp://www.blogger.com/profile/18029226697647415893noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-7934999388405164786.post-38755223126253943542015-06-04T19:13:00.002+07:002015-06-05T16:25:37.798+07:00Tags and Styling Blogger<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjEv3-Oqpe5F7GIz-agSYSxNjK14ilILM2e7iMSi0jnZ-_Uuu6EbL9gLfcG-PXFDMPj-440RF1ktsF6bu2UuHfc2a3w_rLYgp6iczz1zDg-akNMtIqL432ZxbY3-bmAhTF1FE2YvoWv8A/s1600/Tags+and+Styling+Blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Tags and Styling Blogger" height="482" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjEv3-Oqpe5F7GIz-agSYSxNjK14ilILM2e7iMSi0jnZ-_Uuu6EbL9gLfcG-PXFDMPj-440RF1ktsF6bu2UuHfc2a3w_rLYgp6iczz1zDg-akNMtIqL432ZxbY3-bmAhTF1FE2YvoWv8A/s640/Tags+and+Styling+Blogger.jpg" title="Tags and Styling Blogger" width="640" /></a></div>
<br />
<b><span style="font-family: inherit; font-size: large;">Normal Paragraph</span></b><br />
<div style="text-align: left;">
<span style="font-family: inherit;">Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.</span><br /></div>
<div style="text-align: left;">
<span style="font-weight: bold;"></span></div>
<span style="font-family: inherit;"></span> <br />
<div style="text-align: left;">
<span style="font-family: inherit; font-size: large;"><b style="font-family: inherit;">Paragraph Format</b></span></div>
<div style="text-align: left;">
<span style="font-family: inherit;">Et posse meliore <b>definitiones (strong)</b> his, vim <i>tritani vulputate (italic)</i> pertinacia at. <acronym title="Acronym">Augue quaerendum (Acronym)</acronym> te sea, ex <sub>sed</sub> <sup>sint</sup> <span style="text-decoration: line-through;">invenire erroribus</span>. Cu vel ceteros scripserit, te usu modus fabellas mediocritatem. In legere regione instructior eos. Ea repudiandae suscipiantur vim, vel partem labores ponderum in blogger templates (<a href="http://arlinadesign.blogspot.com/" target="_blank">link</a>).</span></div>
<br />
<b><span style="font-family: inherit; font-size: large;">Default KBD</span></b><br />
To paste copied text content stripped of formatting, use <kbd>⌘</kbd>+<kbd>Opt</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd>.<br />
<br />
<div style="text-align: left;">
<span style="font-family: inherit; font-size: large;"><b style="font-family: inherit;">Paragraph As Code</b></span><br />
<div style="text-align: left;">
<code><span style="font-family: inherit;">Mel putent quaeque an, ut postea melius denique sit. Officiis sensibus at mea, sea at labitur deserunt. Eam dicam congue soluta ut.</span></code></div>
<br />
<span style="font-family: inherit; font-size: large;"><b style="font-family: inherit;">Paragraph As Blockquote</b></span></div>
<span style="font-family: inherit;"></span> <br />
<blockquote class="tr_bq">
Eu mei solum oporteat eleifend, libris nominavi maiestatis duo at, quod dissentiet vel te. Legere prompta impedit id eum. Te soleat vocibus luptatum sed, augue dicta populo est ad, et consul diceret officiis duo. Et duo primis nostrum.</blockquote>
<br />
<span style="font-family: inherit; font-size: large;"><b style="font-family: inherit;">Paragraph As Pre</b></span>
<span style="font-family: inherit;"></span> <br />
<pre><code>
Eu mei solum oporteat eleifend, libris nominavi maiestatis duo at, quod dissentiet vel te. Legere prompta impedit id eum. Te soleat vocibus luptatum sed, augue dicta populo est ad, et consul diceret officiis duo. Et duo primis nostrum.</code></pre>
<br />
<div style="text-align: left;">
<b><span style="font-family: inherit; font-size: large;">Unordered list</span></b></div>
<ul>
<li style="text-align: left;"><span style="font-family: inherit;">Blogger templates</span></li>
<li style="text-align: left;"><span style="font-family: inherit;">Templates</span></li>
<li style="text-align: left;"><span style="font-family: inherit;">Blogs</span></li>
<li style="text-align: left;"><span style="font-family: inherit;">Layouts</span></li>
<li style="text-align: left;"><span style="font-family: inherit;">Skins</span></li>
</ul>
<div style="text-align: left;">
<b><span style="font-family: inherit;"><br />
</span></b><b><span style="font-family: inherit; font-size: large;">Ordered list</span></b></div>
<ol>
<li style="text-align: left;"><span style="font-family: inherit;">Login</span></li>
<li style="text-align: left;"><span style="font-family: inherit;">Visit <b><a href="http://bagisecret.blogspot.com/" target="_blank" title="Bagi Secret">Bagi Secret</a></b></span></li>
<li style="text-align: left;"><span style="font-family: inherit;">Download template</span></li>
<li style="text-align: left;"><span style="font-family: inherit;">Install</span></li>
<li style="text-align: left;"><span style="font-family: inherit;">Enjoy!</span></li>
</ol>
<div style="text-align: left;">
<b><span style="font-family: inherit;"><br />
</span></b><b><span style="font-family: inherit; font-size: large;">Heading</span></b><br />
<b><span style="font-family: inherit; font-size: large;"><br />
</span></b></div>
<h1 style="text-align: left;">
<span style="font-family: inherit;">Heading 1</span></h1>
<h2 style="text-align: left;">
<span style="font-family: inherit;">Heading 2</span></h2>
<h3 style="text-align: left;">
<span style="font-family: inherit;">Heading 3</span></h3>
<h4 style="text-align: left;">
<span style="font-family: inherit;">Heading 4</span></h4>
<h5 style="text-align: left;">
<span style="font-family: inherit;">Heading 5</span></h5>
<h6 style="text-align: left;">
<span style="font-family: inherit;">Heading 6</span></h6>
<br />
<br />
<div style="text-align: left;">
<b><span style="font-family: inherit; font-size: large;">Button</span></b></div>
<br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://sweetiewawa.blogspot.com/" title="Demo">DEMO</a></li>
<li><a class="download" href="http://bagisecret.blogspot.com/" title="Download">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear">
</div>
<br />
<br />
<div style="text-align: left;">
<b><span style="font-family: inherit; font-size: large;">Table</span></b></div>
<div style="text-align: left;">
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th><span style="font-family: inherit;">Table Header 1</span></th><th><span style="font-family: inherit;">Table Header 2</span></th><th><span style="font-family: inherit;">Table Header 3</span></th></tr>
<tr><td><span style="font-family: inherit;">Division 1</span></td><td><span style="font-family: inherit;">Division 2</span></td><td><span style="font-family: inherit;">Division 3</span></td></tr>
<tr class="even"><td><span style="font-family: inherit;">Division 1</span></td><td><span style="font-family: inherit;">Division 2</span></td><td><span style="font-family: inherit;">Division 3</span></td></tr>
<tr><td><span style="font-family: inherit;">Division 1</span></td><td><span style="font-family: inherit;">Division 2</span></td><td><span style="font-family: inherit;">Division 3</span></td></tr>
</tbody></table>
<div style="clear: both;">
</div>
</div>
<br />
<br />
<b><span style="font-size: large;">Tabs</span></b><br />
<br />
<div class="su-tabs su-tabs-style-default" data-active="1">
<div class="su-tabs-nav">
<span class="su-tabs-current" data-target="blank" data-url="">Tab 1</span><span class="" data-target="blank" data-url="">Tab 2</span><span class="" data-target="blank" data-url="">Tab 3</span></div>
<div class="su-tabs-panes">
<div class="su-tabs-pane su-clearfix" style="display: block;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bibendum congue sapien quis ornare. Etiam semper faucibus ultrices. Mauris et dapibus quam.</div>
<div class="su-tabs-pane su-clearfix" style="display: none;">
Cras molestie posuere magna eget bibendum. Integer finibus purus condimentum lectus congue hendrerit.</div>
<div class="su-tabs-pane su-clearfix" style="display: none;">
Phasellus suscipit enim a accumsan semper. Nam tincidunt, libero at aliquam cursus, ipsum tortor fermentum velit, at facilisis lacus justo eget turpis.</div>
</div>
</div>
<br />
<br />
Custom active tab<br />
<br />
<div class="su-tabs su-tabs-style-default" data-active="2">
<div class="su-tabs-nav">
<span class="" data-target="blank" data-url="">Tab 1</span><span class="su-tabs-current" data-target="blank" data-url="">Tab 2</span><span class="" data-target="blank" data-url="">Tab 3</span></div>
<div class="su-tabs-panes">
<div class="su-tabs-pane su-clearfix" style="display: none;">
Phasellus suscipit enim a accumsan semper. Nam tincidunt, libero at aliquam cursus, ipsum tortor fermentum velit, at facilisis lacus justo eget turpis.</div>
<div class="su-tabs-pane su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bibendum congue sapien quis ornare. Etiam semper faucibus ultrices. Mauris et dapibus quam.</div>
<div class="su-tabs-pane su-clearfix" style="display: none;">
Tab 3 content</div>
</div>
</div>
<br />
<br />
Vertical tab<br />
<br />
<div class="su-tabs su-tabs-style-default su-tabs-vertical" data-active="1">
<div class="su-tabs-nav">
<span class="su-tabs-current" data-target="blank" data-url="">Tab 1</span><span class="" data-target="blank" data-url="">Tab 2</span><span class="" data-target="blank" data-url="">Tab 3</span></div>
<div class="su-tabs-panes">
<div class="su-tabs-pane su-clearfix" style="display: block; min-height: 120px;">
Phasellus suscipit enim a accumsan semper. Nam tincidunt, libero at aliquam cursus, ipsum tortor fermentum velit, at facilisis lacus justo eget turpis.</div>
<div class="su-tabs-pane su-clearfix" style="display: none; min-height: 120px;">
Phasellus suscipit enim a accumsan semper. Nam tincidunt, libero at aliquam cursus, ipsum tortor fermentum velit, at facilisis lacus justo eget turpis.</div>
<div class="su-tabs-pane su-clearfix" style="display: none; min-height: 120px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bibendum congue sapien quis ornare. Etiam semper faucibus ultrices. Mauris et dapibus quam.</div>
</div>
</div>
<br />
<br />
With disable tab<br />
<br />
<div class="su-tabs su-tabs-style-default" data-active="1">
<div class="su-tabs-nav">
<span class="su-tabs-current" data-target="blank" data-url="">Tab 1</span><span class="" data-target="blank" data-url="">Tab 2</span><span class="" data-target="blank" data-url="">Tab 3</span><span class="su-tabs-disabled" data-target="blank" data-url="">Tab 4 (disabled)</span><span class="su-tabs-disabled" data-target="blank" data-url="">Tab 5 (disabled)</span></div>
<div class="su-tabs-panes">
<div class="su-tabs-pane su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bibendum congue sapien quis ornare. Etiam semper faucibus ultrices. Mauris et dapibus quam.</div>
<div class="su-tabs-pane su-clearfix" style="display: none;">
Phasellus suscipit enim a accumsan semper. Nam tincidunt, libero at aliquam cursus, ipsum tortor fermentum velit, at facilisis lacus justo eget turpis.</div>
<div class="su-tabs-pane su-clearfix" style="display: none;">
Tab 3 content</div>
<div class="su-tabs-pane su-clearfix" style="display: none;">
Tab 4 content</div>
<div class="su-tabs-pane su-clearfix" style="display: none;">
Tab 5 content</div>
</div>
</div>
<br />
<br />
<b><span style="font-size: large;">Accordion + Spoiler</span></b><br />
<br />
Basic accordion<br />
<br />
<div class="su-accordion">
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>Lorem ipsum dolor</div>
<div class="su-spoiler-content su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat lacus ac dolor blandit</div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>Lorem ipsum dolor</div>
<div class="su-spoiler-content su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat lacus ac dolor blandit</div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>Lorem ipsum dolor</div>
<div class="su-spoiler-content su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat lacus ac dolor blandit</div>
</div>
</div>
<br />
<br />
Custom accordion<br />
<br />
<div class="su-accordion">
<div class="su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>Lorem ipsum dolor</div>
<div class="su-spoiler-content su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat lacus ac dolor blandit</div>
</div>
<div class="su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>Lorem ipsum dolor</div>
<div class="su-spoiler-content su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat lacus ac dolor blandit</div>
</div>
<div class="su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>Lorem ipsum dolor</div>
<div class="su-spoiler-content su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat lacus ac dolor blandit</div>
</div>
</div>
<br />
<br />
Accordion with different icon<br />
<br />
<div class="su-accordion">
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>plus</div>
<div class="su-spoiler-content su-clearfix">
Spoiler content</div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus-circle su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>plus-circle</div>
<div class="su-spoiler-content su-clearfix">
Spoiler content</div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus-square-1 su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>plus-square-1</div>
<div class="su-spoiler-content su-clearfix">
Spoiler content</div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-arrow su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>arrow</div>
<div class="su-spoiler-content su-clearfix">
Spoiler content</div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-arrow-circle-1 su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>arrow-circle-1</div>
<div class="su-spoiler-content su-clearfix">
Spoiler content</div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-arrow-circle-2 su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>arrow-circle-2</div>
<div class="su-spoiler-content su-clearfix">
Spoiler content</div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-caret su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>caret</div>
<div class="su-spoiler-content su-clearfix">
Spoiler content</div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-caret-square su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>caret-square</div>
<div class="su-spoiler-content su-clearfix">
Spoiler content</div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-folder-1 su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>folder-1</div>
<div class="su-spoiler-content su-clearfix">
Spoiler content</div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-folder-2 su-spoiler-closed">
<div class="su-spoiler-title">
<span class="su-spoiler-icon"></span>folder-2</div>
<div class="su-spoiler-content su-clearfix">
Spoiler content</div>
</div>
</div>
<br />
<br />
<span style="font-size: large;"><b>Info Box</b></span><br />
<br />
<div class="su-box su-box-style-soft" style="-moz-border-radius: 3px; -webkit-border-radius: 3px; border-color: #b3b3b3; border-radius: 3px;">
<div class="su-box-title" style="-moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; background-color: #e0e0e0; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #5e5e5e;">
Info Box Title</div>
<div class="su-box-content su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat lacus ac dolor blandit, ut elementum orci volutpat. Donec eu purus viverra diam luctus ultrices. Cras quis pellentesque odio, vitae feugiat elit. Nam rutrum ante sit amet lacus tristique porttitor.</div>
</div>
<div class="su-box su-box-style-soft" style="-moz-border-radius: 3px; -webkit-border-radius: 3px; border-color: #93bac3; border-radius: 3px;">
<div class="su-box-title" style="-moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; background-color: #b8e9f4; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #5e5e5e;">
Info Box Title</div>
<div class="su-box-content su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat lacus ac dolor blandit, ut elementum orci volutpat. Donec eu purus viverra diam luctus ultrices. Cras quis pellentesque odio, vitae feugiat elit. Nam rutrum ante sit amet lacus tristique porttitor.</div>
</div>
<div class="su-box su-box-style-soft" style="-moz-border-radius: 3px; -webkit-border-radius: 3px; border-color: #c39493; border-radius: 3px;">
<div class="su-box-title" style="-moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; background-color: #f4b9b8; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #5e5e5e;">
Info Box Title</div>
<div class="su-box-content su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat lacus ac dolor blandit, ut elementum orci volutpat. Donec eu purus viverra diam luctus ultrices. Cras quis pellentesque odio, vitae feugiat elit. Nam rutrum ante sit amet lacus tristique porttitor.</div>
</div>
<div class="su-box su-box-style-soft" style="-moz-border-radius: 3px; -webkit-border-radius: 3px; border-color: #c3c293; border-radius: 3px;">
<div class="su-box-title" style="-moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; background-color: #f4f2b8; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #5e5e5e;">
Info Box Title</div>
<div class="su-box-content su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat lacus ac dolor blandit, ut elementum orci volutpat. Donec eu purus viverra diam luctus ultrices. Cras quis pellentesque odio, vitae feugiat elit. Nam rutrum ante sit amet lacus tristique porttitor.</div>
</div>
<br />
<br />
<span style="font-size: large;"><b>Note Box</b></span><br />
<br />
<div class="su-note" style="-moz-border-radius: 3px; -webkit-border-radius: 3px; border-color: #d6d6d6; border-radius: 3px;">
<div class="su-note-inner su-clearfix" style="-moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #eeeeee; border-color: #fcfcfc; border-radius: 3px; color: #333333;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat lacus ac dolor blandit, ut elementum orci volutpat. Donec eu purus viverra diam luctus ultrices. Cras quis pellentesque odio, vitae feugiat elit. Nam rutrum ante sit amet lacus tristique porttitor.</div>
</div>
<div class="su-note" style="-moz-border-radius: 3px; -webkit-border-radius: 3px; border-color: #b7ddde; border-radius: 3px;">
<div class="su-note-inner su-clearfix" style="-moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #cbf6f7; border-color: #f5fdfd; border-radius: 3px; color: black;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat lacus ac dolor blandit, ut elementum orci volutpat. Donec eu purus viverra diam luctus ultrices. Cras quis pellentesque odio, vitae feugiat elit. Nam rutrum ante sit amet lacus tristique porttitor.</div>
</div>
<div class="su-note" style="-moz-border-radius: 3px; -webkit-border-radius: 3px; border-color: #dcafaf; border-radius: 3px;">
<div class="su-note-inner su-clearfix" style="-moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #f4c2c3; border-color: #fdf3f3; border-radius: 3px; color: black;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat lacus ac dolor blandit, ut elementum orci volutpat. Donec eu purus viverra diam luctus ultrices. Cras quis pellentesque odio, vitae feugiat elit. Nam rutrum ante sit amet lacus tristique porttitor.</div>
</div>
<div class="su-note" style="-moz-border-radius: 3px; -webkit-border-radius: 3px; border-color: #bbdcaf; border-radius: 3px;">
<div class="su-note-inner su-clearfix" style="-moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #d0f4c2; border-color: #f6fdf3; border-radius: 3px; color: black;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat lacus ac dolor blandit, ut elementum orci volutpat. Donec eu purus viverra diam luctus ultrices. Cras quis pellentesque odio, vitae feugiat elit. Nam rutrum ante sit amet lacus tristique porttitor.</div>
</div>
<br />
<br />
<span style="font-size: large;"><b>Column</b></span><br />
<br />
Full-width column<br />
<br />
<div class="su-row">
<div class="su-column su-column-size-1-1">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.</div>
</div>
</div>
<br />
<br />
1/2 + 1/2<br />
<br />
<div class="su-row">
<div class="su-column su-column-size-1-2">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.</div>
</div>
<div class="su-column su-column-size-1-2">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.</div>
</div>
</div>
<br />
<br />
1/3 + 1/3 + 1/3<br />
<br />
<div class="su-row">
<div class="su-column su-column-size-1-3">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.</div>
</div>
<div class="su-column su-column-size-1-3">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.</div>
</div>
<div class="su-column su-column-size-1-3">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.</div>
</div>
</div>
<br />
<br />
1/2 + 1/4 + 1/4<br />
<br />
<div class="su-row">
<div class="su-column su-column-size-1-2">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.</div>
</div>
<div class="su-column su-column-size-1-4">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem.</div>
</div>
<div class="su-column su-column-size-1-4">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem.</div>
</div>
</div>
<br />
<br />
3/4 + 1/4<br />
<br />
<div class="su-row">
<div class="su-column su-column-size-3-4">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit.</div>
</div>
<div class="su-column su-column-size-1-4">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<br />
<br />
1/5 + 4/5<br />
<br />
<div class="su-row">
<div class="su-column su-column-size-1-5">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="su-column su-column-size-4-5">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.</div>
</div>
</div>
<br />
<br />
2/5 + 3/5<br />
<br />
<div class="su-row">
<div class="su-column su-column-size-2-5">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique.</div>
</div>
<div class="su-column su-column-size-3-5">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.</div>
</div>
</div>
<br />
<br />
2/3 + 1/6 + 1/6<br />
<br />
<div class="su-row">
<div class="su-column su-column-size-2-3">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.</div>
</div>
<div class="su-column su-column-size-1-6">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="su-column su-column-size-1-6">
<div class="su-column-inner su-clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
</div>
</div>
</div>Anonymoushttp://www.blogger.com/profile/18029226697647415893noreply@blogger.com0