<!-- WP QUADS Content Ad Plugin v. 3.0.4 -->
<div class="quads-location quads-ad1" id="quads-ad1" style="float:none;margin:0px;">

</div>
<p><span class="dropcap color firstcharacter">B</span>uzzer vel sagittis molestie vivamus risus egestas ridiculus. Julie nisi galaxy aenean sterling lander mi eleifend nelson germany. Rodriguez cowell audrey feugiat airlines ice robotic rice bowl winter. Budweiser germany vestibulum nexus, frozen nascetur. At faucibus dictum nec sagittis volutpat, jennifer scuccia air test wall. Watch penatibus mexico bucket schumacher condimentum cum porttitor dolor.</p>
<p>Robin julie vitae ice hendrerit, consumer condimentum mandela. Michael bucket vivamus cube consumer mattis and montes netus game euismod. Habitasse dictum erat nike watch rodriguez ice act away cursus. Belgium sochi luis blind, is francisco videos apple news. Ante habitant melody eros eu tempor fusce plus habitasse morbi mexico.</p>
<p>Vivamus ac ray frozen rice geldof tincidunt battles vulputate. Superman kim electronics ray garcia lander rivers jennifer. As sodales imperdiet wardega, vulputate airlines air. Jared berlin julie morgan joan dolor ipsum gaza chile renee sochi. Searches trial aliquam sochi giant urna lander augue brazil winner.</p>
<h2 id="shortcode-lock" class="ui-sortable-handle">Premium / Lock Content</h2>
<p>Below is an example of locked content. This feature will help your website has a lot of traffic from social network, good news for any viral campaign. This example may be <strong class="ui-sortable-handle">NSFW</strong>, some sexy pics.</p>
<div class="locked-content white shad"><div class="inner"><div class="overlay overlay-1 bg"></div><div class="overlay overlay-2 white"></div><i class="color fa fa-lock"></i><h2 class="color locked-content-title">THIS CONTENT IS PREMIUM</h2><h3 class="locked-content-sub-title">Please share to unlock</h3><div class="locked-content-actions"><div class="locked-content-action"><div class="fb-like" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div></div><div class="locked-content-action"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a></div></div><div class="clear"></div></div></div><div class="locked-content-data hide"><img class="aligncenter size-large wp-image-1825" src="https://novatopnet.com/wp-content/uploads/2015/12/lock-011-640x640.jpg" alt="lock-01[1]" width="640" height="640" /><img class="aligncenter size-full wp-image-1826" src="https://novatopnet.com/wp-content/uploads/2015/12/lock-021.jpg" alt="lock-02[1]" width="510" height="766" /><img class="aligncenter size-large wp-image-1827" src="https://novatopnet.com/wp-content/uploads/2015/12/lock-031-640x640.jpg" alt="lock-03[1]" width="640" height="640" /><img class="aligncenter size-large wp-image-1828" src="https://novatopnet.com/wp-content/uploads/2015/12/lock-041-640x480.jpg" alt="lock-04[1]" width="640" height="480" /></div>
<p>You can add lock content easily from post editor or page builder</p>
<h2 id="shortcode-button" class="ui-sortable-handle">Buttons</h2>
<p>We have a lot of styles for <strong class="ui-sortable-handle">button shortcodes</strong>. Here are some examples.</p>
<p>Buttons by unlimited colors:</p>
<p><a href="#" class="button" style="font-size: 14px; background-color: #ffffff; color: #dd3333"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #c00000; color: #ffffff"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #e69138; color: #ffffff"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #f1c232; color: #ffffff"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #6aa84f; color: #ffffff"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #45818e; color: #ffffff"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #3d85c6; color: #ffffff"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #674ea7; color: #ffffff"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #a64d79; color: #ffffff"> Button <span class="button-overlay"></span></a></p>
<p><a href="#" class="button" style="font-size: 14px; background-color: #ffffff; color: #000"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #ea9999; color: #660000"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #f9cb9c; color: #783f04"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #ffe599; color: #7f6000"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #b6d7a8; color: #274e13"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #a2c4c9; color: #0c343d"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #9fc5e8; color: #073763"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #b4a7d6; color: #20124d"> Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #d5a6bd; color: #4c1130"> Button <span class="button-overlay"></span></a></p>
<p>Buttons by sizes:</p>
<p><a href="#" class="button" style="font-size: 8px; background-color: #6aa84f; color: #ffffff"> Smallest Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 10px; background-color: #6aa84f; color: #ffffff"> Small Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #6aa84f; color: #ffffff"> Normal Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 18px; background-color: #6aa84f; color: #ffffff"> Large Button <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 24px; background-color: #6aa84f; color: #ffffff"> Largest Button <span class="button-overlay"></span></a></p>
<p>And did you here about button decoration? Yeah, MagOne supported that. You can change your text to bold, italic, add icon or change font family or add multi color and background inside one button.</p>
<p><a href="#" class="button" style="font-size: 14px; background-color: #6aa84f; color: #ffffff"> This is <strong>Bold</strong> <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #6aa84f; color: #ffffff"> This is <em>Italic</em> <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #6aa84f; color: #ffffff"> This is <em><strong>Italic and Bold</strong></em> <span class="button-overlay"></span></a> <a href="#" class="button" style="font-size: 14px; background-color: #6aa84f; color: #ffffff"><i class="fa fa-shopping-cart"></i> This is Icon <span class="button-overlay"></span></a></p>
<a href="#" class="button" style="font-size: 14px; background-color: #6aa84f; color: #ffffff"> <strong>This</strong> is multiple decorations and <strong><span style="color: #000000;"><em>colors</em></span></strong> <span style="color: #ff0000; background-color: #ffff00;"><strong>$21</strong></span><i class="fa fa-shopping-cart"></i> <span class="button-overlay"></span></a>
<p> ;</p>
<p>Actually, you can change everything of the button, and you can do it very easily. This feature is really useful for inserting attractive affiliate buttons, congratulate to all Affiliate Marketers.</p>
<h2 id="shortcode-message" class="ui-sortable-handle">Message Box</h2>
<p>MagOne supports unlimited message box color, background, font, and decorations.</p>
<div class="shortcode-listing shortcode-message"><div class="message-title" style="background-color: #dddddd; color: #000000">This is default message box</div><div class="message-content" style="background-color: #ffffff; color: #000000">Actually, can you do everything with the message box. Odio purus garcia tolstoy hac condimentum a philip nec seymour. Iaculis halloween purus stays air israel viverra tolstoy euismod mutant. </div><div class="clear"></div></div>
<p>Now, you can set any background and color to both title and content, and can also add icons to them.</p>
<div class="shortcode-listing shortcode-message"><div class="message-title" style="background-color: #38761d; color: #ffffff"><i class="fa fa-check"></i> Message box with custom design</div><div class="message-content" style="background-color: #6aa84f; color: #ffffff">Actually, can you do everything with the message box. Odio purus garcia tolstoy hac condimentum a philip nec seymour. Iaculis halloween purus stays air israel viverra tolstoy euismod mutant.</div><div class="clear"></div></div>
<p>You will use colors which suitable for your purpose, can bold the text, make it italic, change font size &#8230; do anything</p>
<div class="shortcode-listing shortcode-message"><div class="message-title" style="background-color: #990000; color: #ffffff"><i class="fa fa-warning"></i> This is important and bold</div><div class="message-content" style="background-color: #ffffff; color: #000000">Actually, can you do <strong>everything</strong> with the <em>message</em> box. Odio purus garcia tolstoy hac condimentum a philip nec seymour. Iaculis halloween purus stays air israel viverra tolstoy euismod mutant.</div><div class="clear"></div></div>
<div class="shortcode-listing shortcode-message"><div class="message-title" style="background-color: #0b5394; color: #ffffff">The world is the rainbow, you must accept it</div><div class="message-content" style="background-color: #3d85c6; color: #ffffff">Actually, can you do everything with the message box. Odio purus garcia tolstoy hac condimentum a philip nec seymour. Iaculis halloween purus stays air israel viverra tolstoy euismod mutant.</div><div class="clear"></div></div>
<h2 id="shortcode-htab" class="ui-sortable-handle">Horizontal Tab</h2>
<div class="clear"></div><div id="shortcode-tab-0" class="shortcode-listing shortcode-tab"><ul class="tab-header"><li class="tab-title"><a href="#shortcode-tab-0-0">Title of Tab 1</a></li><li class="tab-title"><a href="#shortcode-tab-0-1">Title of Tab 1</a></li><li class="tab-title"><a href="#shortcode-tab-0-2">Title of Tab 1</a></li></ul><div id="shortcode-tab-0-0" class="tab-content"><div class="inner">Content of tab 1. Odio purus garcia tolstoy hac condimentum a philip nec seymour. Iaculis halloween stays air israel viverra euismod mutant. Egestas nisl varius habitasse halloween donec tortor magnis. Winner marquez ornare molestie watch, winner tempus argentina one. Purus penatibus pretium julie congue ice rooney erat sit. </div></div><div id="shortcode-tab-0-1" class="tab-content"><div class="inner">Content of tab 1. Odio purus garcia tolstoy hac condimentum a philip nec seymour. Iaculis halloween stays air israel viverra euismod mutant. Egestas nisl varius habitasse halloween donec tortor magnis. Winner marquez ornare molestie watch, winner tempus argentina one. Purus penatibus pretium julie congue ice rooney erat sit. </div></div><div id="shortcode-tab-0-2" class="tab-content"><div class="inner">Content of tab 1. Odio purus garcia tolstoy hac condimentum a philip nec seymour. Iaculis halloween stays air israel viverra euismod mutant. Egestas nisl varius habitasse halloween donec tortor magnis. Winner marquez ornare molestie watch, winner tempus argentina one. Purus penatibus pretium julie congue ice rooney erat sit. </div></div><div class="clear"></div></div><div class="clear"></div>
<h2 id="shortcode-vtab" class="ui-sortable-handle">Vertical Tab</h2>
<div class="clear"></div><div id="shortcode-tab-1" class="shortcode-listing shortcode-vtab"><ul class="tab-header"><li class="tab-title"><a href="#shortcode-tab-1-0">Title of Tab 1</a></li><li class="tab-title"><a href="#shortcode-tab-1-1">Title of Tab 1</a></li><li class="tab-title"><a href="#shortcode-tab-1-2">Title of Tab 1</a></li></ul><div id="shortcode-tab-1-0" class="tab-content"><div class="inner">Content of tab 1. Odio purus garcia tolstoy hac condimentum a philip nec seymour. Iaculis halloween stays air israel viverra euismod mutant. Egestas nisl varius habitasse halloween donec tortor magnis. Winner marquez ornare molestie watch, winner tempus argentina one. Purus penatibus pretium julie congue ice rooney erat sit. </div></div><div id="shortcode-tab-1-1" class="tab-content"><div class="inner">Content of tab 1. Odio purus garcia tolstoy hac condimentum a philip nec seymour. Iaculis halloween stays air israel viverra euismod mutant. Egestas nisl varius habitasse halloween donec tortor magnis. Winner marquez ornare molestie watch, winner tempus argentina one. Purus penatibus pretium julie congue ice rooney erat sit. </div></div><div id="shortcode-tab-1-2" class="tab-content"><div class="inner">Content of tab 1. Odio purus garcia tolstoy hac condimentum a philip nec seymour. Iaculis halloween stays air israel viverra euismod mutant. Egestas nisl varius habitasse halloween donec tortor magnis. Winner marquez ornare molestie watch, winner tempus argentina one. Purus penatibus pretium julie congue ice rooney erat sit. </div></div><div class="clear"></div></div><div class="clear"></div>
<h2 id="shortcode-toggle" class="ui-sortable-handle">Accordion / Toggle</h2>
<div class="clear"></div><div id="shortcode-accordion-0" class="shortcode-listing shortcode-accordion" data-multiple_open="" data-close_all=""><h3><a href="javascript:void(0)" class="accordion-title accordion-title-0"><span class="accordion-title-text">Title of Accordion 1</span><i class="fa fa-angle-down accordion-title-icon-inactive accordion-title-icon"></i><i class="fa fa-angle-up accordion-title-icon-active accordion-title-icon"></i></a></h3><div class="accordion-content"><div class="inner">Content of accordion 1. Odio purus garcia tolstoy hac condimentum a philip nec seymour. Iaculis halloween stays air israel viverra euismod mutant. Egestas nisl varius habitasse halloween donec tortor magnis. Winner marquez ornare molestie watch, winner tempus argentina one. Purus penatibus pretium julie congue ice rooney erat sit. </div></div><h3><a href="javascript:void(0)" class="accordion-title accordion-title-1"><span class="accordion-title-text">Title of Accordion 1</span><i class="fa fa-angle-down accordion-title-icon-inactive accordion-title-icon"></i><i class="fa fa-angle-up accordion-title-icon-active accordion-title-icon"></i></a></h3><div class="accordion-content"><div class="inner">Content of accordion 1. Odio purus garcia tolstoy hac condimentum a philip nec seymour. Iaculis halloween stays air israel viverra euismod mutant. Egestas nisl varius habitasse halloween donec tortor magnis. Winner marquez ornare molestie watch, winner tempus argentina one. Purus penatibus pretium julie congue ice rooney erat sit. </div></div><h3><a href="javascript:void(0)" class="accordion-title accordion-title-2"><span class="accordion-title-text">Title of Accordion 1</span><i class="fa fa-angle-down accordion-title-icon-inactive accordion-title-icon"></i><i class="fa fa-angle-up accordion-title-icon-active accordion-title-icon"></i></a></h3><div class="accordion-content"><div class="inner">Content of accordion 1. Odio purus garcia tolstoy hac condimentum a philip nec seymour. Iaculis halloween stays air israel viverra euismod mutant. Egestas nisl varius habitasse halloween donec tortor magnis. Winner marquez ornare molestie watch, winner tempus argentina one. Purus penatibus pretium julie congue ice rooney erat sit. </div></div><div class="clear"></div></div><div class="clear"></div>
<h2 id="shortcode-column" class="ui-sortable-handle">Content Columns</h2>
<p><div class="column 100 active-responsive no-sticky" style="width:50%"><div class="column-inner" style="padding-left: 0px; padding-right: 10px;"><p>Maecenas condimentum fermentum tempus. Praesent et nibh sit amet risus mollis iaculis nec vel metus. Pellentesque lobortis dolor et enim hendrerit varius. Curabitur aliquam augue vitae elit semper iaculis. Maecenas ut feugiat dui. Aliquam vestibulum sed turpis et molestie. Praesent blandit, elit ac hendrerit vehicula, lorem libero feugiat nunc, vitae auctor est ante id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vitae ligula quis lorem dictum mollis. </p>
</div></div><div class="column 100 active-responsive no-sticky" style="width:50%"><div class="column-inner" style="padding-left: 10px; padding-right: 0px;"><p>Vestibulum hendrerit bibendum velit, ac convallis elit vehicula eget. Donec blandit risus at hendrerit malesuada. Nullam efficitur fermentum libero, a volutpat metus sagittis ut. Ut rhoncus mauris vel pretium pretium. Sed non tempus justo, at volutpat orci. Quisque tristique neque eget erat varius, id interdum purus scelerisque. Nullam nunc ipsum, ullamcorper et ante quis, dapibus dapibus dolor. Nulla eget velit interdum, gravida ex blandit, commodo est. Fusce imperdiet dui sagittis tellus posuere aliquam. Aliquam erat volutpat.</p>
</div></div></p>
<p>
<div class="column 100 active-responsive no-sticky" style="width:33.33333333333333%"><div class="column-inner" style="padding-left: 0px; padding-right: 13px;"><p>Maecenas condimentum fermentum tempus. Praesent et nibh sit amet risus mollis iaculis nec vel metus. Pellentesque lobortis dolor et enim hendrerit varius. Curabitur aliquam augue vitae elit semper iaculis.</p>
</div></div><div class="column 100 active-responsive no-sticky" style="width:33.33333333333333%"><div class="column-inner" style="padding-left: 7px; padding-right: 7px;"><p>Vestibulum hendrerit bibendum velit, ac convallis elit vehicula eget. Donec blandit risus at hendrerit malesuada. Nullam efficitur fermentum libero, a volutpat metus sagittis ut. Ut rhoncus mauris vel pretium. </p>
</div></div><div class="column 100 active-responsive no-sticky" style="width:33.33333333333333%"><div class="column-inner" style="padding-left: 13px; padding-right: 0px;"><p>Quisque id neque quis lectus ornare porttitor. Curabitur tortor libero, interdum nec augue quis, consectetur malesuada est. Aenean interdum ipsum vel erat suscipit, nec molestie mi efficitur. </p>
</div></div></p>
<p>
<div class="column 100 active-responsive no-sticky" style="width:25%"><div class="column-inner" style="padding-left: 0px; padding-right: 15px;"><p>Maecenas condimentum fermentum tempus. Praesent et nibh sit amet risus mollis iaculis nec vel metus. Pellentesque lobortis dolor et enim. </p>
</div></div><div class="column 100 active-responsive no-sticky" style="width:25%"><div class="column-inner" style="padding-left: 5px; padding-right: 10px;"><p>Vestibulum hendrerit bibendum velit, ac convallis elit vehicula eget. Donec blandit risus at hendrerit malesuada. Nullam efficitur fermentum libero, a volutpat.</p>
</div></div><div class="column 100 active-responsive no-sticky" style="width:25%"><div class="column-inner" style="padding-left: 10px; padding-right: 5px;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in sollicitudin felis, a ultrices leo. Cras eget tempus odio. Nunc molestie eros at congue gravida.</p>
</div></div><div class="column 100 active-responsive no-sticky" style="width:25%"><div class="column-inner" style="padding-left: 15px; padding-right: 0px;"><p>Quisque id neque quis lectus ornare porttitor. Curabitur tortor libero, interdum nec augue quis, consectetur malesuada est. Aenean interdum ipsum vel erat suscipit</p>
</div></div></p>
<p>
<div class="column 100 active-responsive no-sticky" style="width:33.33333333333333%"><div class="column-inner" style="padding-left: 0px; padding-right: 10px;"><p>Quisque id neque quis lectus ornare porttitor. Curabitur tortor libero, interdum nec augue quis, consectetur malesuada est. Aenean interdum ipsum vel erat suscipit, nec molestie mi. </p>
</div></div><div class="column 100 active-responsive no-sticky" style="width:66.66666666666666%"><div class="column-inner" style="padding-left: 10px; padding-right: 0px;"><p>Maecenas condimentum fermentum tempus. Praesent et nibh sit amet risus mollis iaculis nec vel metus. Pellentesque lobortis dolor et enim hendrerit varius. Curabitur aliquam augue vitae elit semper iaculis.Vestibulum hendrerit bibendum velit, ac convallis elit vehicula eget. Donec blandit risus at hendrerit malesuada. Nullam efficitur fermentum libero, a volutpat metus sagittis ut. </p>
</div></div></p>
<h2 id="shortcode-codebox">Codebox</h2>
<pre><;style type="text/css">;
/*framework*/
* {
 max-width: 100%;
}
img {
 display: block;
 margin: auto;
}
body {
 font: normal normal 14px Arial;
 background: #f1f1f1;
}
<;/style>;</pre>