theme 220 html part

<!--     maziekeen's theme 221 - MASONRY NAVIGATION HTML PART    -->
<h3>one column style</h3>
<div class="masonry-navigation"> <!-- separates each section, you can use only one and add a bunch of items inside too -->
<div class="masonry-navigation-item one-column"> <!-- each link/item block. you can use anything html related inside -->
<p><strong>title or something like that</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
<div class="masonry-navigation-item one-column"> <!-- each link/item block. you can use anything html related inside -->
<p><strong>can add a title on each item (masonry-navigation-item)</strong></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<h3>two columns style</h3>
<div class="masonry-navigation">
<div class="masonry-navigation-item two-columns">
<p><strong>title 1</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
<div class="masonry-navigation-item two-columns">
<p><strong>title 2</strong></p>
<em>doesn&rsquo;t have to be only links here</em>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
<div class="masonry-navigation-item two-columns">
<p><strong>title 3</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
<em>some middle section</em>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
<div class="masonry-navigation-item two-columns">
<p><strong>title 4</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
<p><strong>title 5</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
</div>
<h3>three columns style</h3>
<div class="masonry-navigation">
<div class="masonry-navigation-item three-columns">
<p><strong>title 1</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
<p><strong>title 2</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
<div class="masonry-navigation-item three-columns">
<p><strong>title 3</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
<div class="masonry-navigation-item scroll three-columns">
<p><strong>title 4</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
</div>
<!--     maziekeen's theme 221 - MASONRY NAVIGATION HTML PART    -->