forked from Git/hugo-story
69 lines
5.5 KiB
HTML
69 lines
5.5 KiB
HTML
|
<!-- Items -->
|
||
|
|
<section class="wrapper style1 align-center">
|
||
|
|
<div class="inner">
|
||
|
|
<h2>Items</h2>
|
||
|
|
<p>This is an <strong>Items</strong> element, and it's basically just a grid for organizing items of various types. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-items">details</a>).</p>
|
||
|
|
<div class="items style1 medium onscroll-fade-in">
|
||
|
|
<section>
|
||
|
|
<span class="icon style2 major fa-gem"></span>
|
||
|
|
<h3>One</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="icon solid style2 major fa-save"></span>
|
||
|
|
<h3>Two</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="icon solid style2 major fa-chart-bar"></span>
|
||
|
|
<h3>Three</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="icon solid style2 major fa-wifi"></span>
|
||
|
|
<h3>Four</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="icon solid style2 major fa-cog"></span>
|
||
|
|
<h3>Five</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="icon style2 major fa-paper-plane"></span>
|
||
|
|
<h3>Six</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="icon solid style2 major fa-desktop"></span>
|
||
|
|
<h3>Seven</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="icon solid style2 major fa-sync-alt"></span>
|
||
|
|
<h3>Eight</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="icon solid style2 major fa-hashtag"></span>
|
||
|
|
<h3>Nine</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="icon solid style2 major fa-bolt"></span>
|
||
|
|
<h3>Ten</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="icon style2 major fa-envelope"></span>
|
||
|
|
<h3>Eleven</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="icon solid style2 major fa-leaf"></span>
|
||
|
|
<h3>Twelve</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|