
    <!-- spotlight -->
    <div class="tm-block-spotlight uk-block uk-block-primary" id="tm-spotlight">
      <div class="uk-container uk-container-center">
        <section class="tm-spotlight uk-grid" data-uk-grid-match="{target:'> div > .uk-panel'}">
          <div class="uk-width-1-1">
            <div class="uk-panel">
              <h1 class="uk-h2 uk-margin-remove">Elements</h1>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- breadcrumbs -->
    <div class="tm-breadcrumbs">
      <div class="uk-container uk-container-center">
        <div class="uk-hidden-small">
          <ul class="uk-breadcrumb">
            <li><a href="?page=home">Home</a></li>
            <li class="uk-active"><span>Elements</span></li>
          </ul>
        </div>
      </div>
    </div>

  <!-- main content -->
  <div id="tm-main" class="tm-block-main uk-block uk-block-default">
    <div class="uk-container uk-container-center">
      <div class="tm-middle uk-grid" data-uk-grid-match data-uk-grid-margin>
        <div class="tm-main uk-width-medium-1-1">
          <main id="tm-content" class="tm-content">
            <article class="uk-article tm-article">
              <div class="tm-article-wrapper">
                <div class="tm-article-content uk-margin-large-bottom uk-margin-top-remove">
                  <div class="tm-article">
                    <h2 class="uk-module-title">Headings</h2>
                    <p>Here are some examples of headings</p>
                    <h1>H1 Heading</h1>
                    <h2>H2 Heading</h2>
                    <h3>H3 Heading</h3>
                    <h4>H4 Heading</h4>
                    <h5>H5 Heading</h5>
                    <h6>H6 Heading</h6>
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div> 
                    <pre>&lt;h1&gt;H1 Heading&lt;/h1&gt;</pre>
                    <br>
                    <h3 class="uk-module-title">Heading with underline</h3>
                    <p>To use the conventional module title underline, use the <code>uk-module-title</code> style. To have a fancy module title, use the <code>uk-module-title-alt</code> style. You can also highlight the first word of a title using the <code>tm-primary-color</code> class. Example:</p>
                    <br>
                    <h3 class="uk-module-title">Module title</h3>
                    <h3 class="uk-module-title-alt">Alternative module title</h3>
                    <h3 class="uk-module-title"><span class="tm-primary-color">Module </span> title</h3>
                    <div class="uk-text-center">
                      <h3 class="uk-module-title-alt">Centered alternative module title</h3> </div>
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div> 
                    <pre>
&lt;h3 class="uk-module-title"&gt;Your title goes here&lt;/h3&gt;
&lt;h3 class="uk-module-title"&gt;&lt;span class="tm-primary-color"&gt;Module &lt;/span&gt; title&lt;/h3&gt;
&lt;h3 class="uk-module-title-alt"&gt;Your title goes here&lt;/h3&gt;
&lt;div class="uk-text-center"&gt;
&lt;h3 class="uk-module-title-alt"&gt;Your title goes here&lt;/h3&gt;
&lt;/div&gt;</pre>
                    <br>

                    <p>To add a rotating effect on text, use the <code>tm-rotate-text</code> class. The leading text defines the static text, and the <code>tm-word</code> class is used for each word that will be rotated.</p>
                    <br>

                    <div class="tm-rotate-text uk-flex">
                      <h2 class="uk-h3 uk-module-title tm-thin-font">We are</h2>
                      <h2 class="uk-h3">
                        <span class="tm-word">Professional.</span>
                        <span class="tm-word">Creative.</span>
                        <span class="tm-word">Passionate.</span>
                      </h2>
                    </div>
                    <br>
                    <pre>&lt;div class="tm-rotate-text uk-flex"&gt;
  &lt;h2 class="uk-h3 uk-module-title tm-thin-font"&gt;We are&lt;/h2&gt;
  &lt;h2 class="uk-h3"&gt;
    &lt;span class="tm-word"&gt;Professional.&lt;/span&gt;
    &lt;span class="tm-word"&gt;Creative.&lt;/span&gt;
    &lt;span class="tm-word"&gt;Passionate.&lt;/span&gt;
  &lt;/h2&gt;
&lt;/div&gt;</pre>

                    <!-- blocks -->
                    <h2 class="uk-margin-top uk-module-title" id="blocks">Blocks</h2>
                    <p>Blocks are distinct ways of enumarating points in paragraphs with numbers, dates or icons. For block-numbers, you can use any numbering or alphabetical format.</p>
                    <br>
                    <h3 class="uk-module-title">Block numbers</h3>
                    <div class="uk-grid" data-uk-grid-margin="">
                      <div class="uk-width-medium-1-2">
                        <div class="tm-block-number uk-flex">
                          <div class="tm-block-digit uk-flex-item-none">
                            <span class="tm-block-left"></span>
                            <span class="tm-block-text uk-float-right">1</span>
                          </div>
                          <div class="tm-block-content uk-flex-item-1">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success
                          </div>
                        </div>
                        <div class="tm-block-number uk-flex">
                          <div class="tm-block-digit uk-flex-item-none">
                            <span class="tm-block-left"></span>
                            <span class="tm-block-text uk-float-right">2</span>
                          </div>
                          <div class="tm-block-content uk-flex-item-1">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success
                          </div>
                        </div>
                        <div class="tm-block-number uk-flex">
                          <div class="tm-block-digit uk-flex-item-none">
                            <span class="tm-block-left"></span>
                            <span class="tm-block-text uk-float-right">3</span>
                          </div>
                          <div class="tm-block-content uk-flex-item-1">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success
                          </div>
                        </div>
                      </div>
                      <div class="uk-width-medium-1-2">
                        <div class="tm-block-number uk-flex">
                          <div class="tm-block-digit uk-flex-item-none">
                            <span class="tm-block-left"></span>
                            <span class="tm-block-text uk-float-right">4</span>
                          </div>
                          <div class="tm-block-content uk-flex-item-1">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success
                          </div>
                        </div>
                        <div class="tm-block-number uk-flex">
                          <div class="tm-block-digit uk-flex-item-none">
                            <span class="tm-block-left"></span>
                            <span class="tm-block-text uk-float-right">5</span>
                          </div>
                          <div class="tm-block-content uk-flex-item-1">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success
                          </div>
                        </div>
                        <div class="tm-block-number uk-flex">
                          <div class="tm-block-digit uk-flex-item-none">
                            <span class="tm-block-left"></span>
                            <span class="tm-block-text uk-float-right">6</span>
                          </div>
                          <div class="tm-block-content uk-flex-item-1">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success
                          </div>
                        </div>
                      </div>
                    </div><br>
                    <br>
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div>
                    <pre>&lt;div&gt;
  &lt;div class="tm-block-number uk-flex"&gt; 
    &lt;span class="tm-block-left"&gt;&lt;/span&gt; 
    &lt;span class="tm-block-digit"&gt;1&lt;/span&gt; 
  &lt;/div&gt;
  &lt;div class="tm-block-content uk-flex-item-1"&gt;your content here&lt;/div&gt;
&lt;/div&gt;</pre>
                    <br>
                    <h3 class="uk-margin-top uk-module-title">Block Dates</h3>
                    <div class="uk-grid" data-uk-grid-margin="">
                      <div class="uk-width-medium-1-2">
                        <div class="uk-clearfix uk-flex">
                          <div class="tm-block-time uk-flex-item-none">
                            <span class="tm-block-month">Jan</span>
                            <span class="tm-block-text uk-float-right">29</span>
                          </div>
                          <div class="tm-event-descr uk-flex-item-1">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.
                          </div>
                        </div>
                        <div class="uk-clearfix uk-flex">
                          <div class="tm-block-time uk-flex-item-none">
                            <span class="tm-block-month">apr</span>
                            <span class="tm-block-text uk-float-right">19</span>
                          </div>
                          <div class="tm-event-descr uk-flex-item-1">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.
                          </div>
                        </div>
                        <div class="uk-clearfix uk-flex">
                          <div class="tm-block-time uk-flex-item-none">
                            <span class="tm-block-month">Jun</span>
                            <span class="tm-block-text uk-float-right">30</span>
                          </div>
                          <div class="tm-event-descr uk-flex-item-1">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.
                          </div>
                        </div>
                      </div>

                      <div class="uk-width-medium-1-2">
                        <div class="uk-clearfix uk-flex">
                          <div class="tm-block-time uk-flex-item-none">
                            <span class="tm-block-month">aug</span>
                            <span class="tm-block-text uk-float-right">03</span>
                          </div>
                          <div class="tm-event-descr uk-flex-item-1">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.
                          </div>
                        </div>
                        <div class="uk-clearfix uk-flex">
                          <div class="tm-block-time uk-flex-item-none">
                            <span class="tm-block-month">sep</span>
                            <span class="tm-block-text uk-float-right">23</span>
                          </div>
                          <div class="tm-event-descr uk-flex-item-1">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.
                          </div>
                        </div>
                        <div class="uk-clearfix uk-flex">
                          <div class="tm-block-time uk-flex-item-none">
                            <span class="tm-block-month">dec</span>
                            <span class="tm-block-text uk-float-right">10</span>
                          </div>
                          <div class="tm-event-descr uk-flex-item-1">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.
                          </div>
                        </div>
                      </div>
                    </div>
                    <p>To use the date block style create a paragraph in the following format</p>
                    
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div>
                    <pre>&lt;div class="uk-flex uk-clearfix"&gt;
  &lt;div class="tm-block-time uk-flex-item-none"&gt; 
    &lt;span class="tm-block-month"&gt;Jan&lt;/span&gt; 
    &lt;span class="tm-block-digit"&gt;29&lt;/span&gt; 
  &lt;/div&gt;
  &lt;p class="tm-event-descr uk-flex-item-1"&gt;your content here&lt;/p&gt;
&lt;/div&gt;</pre>
                    <br>
                    <h3 class="uk-margin-top uk-module-title">Block Icons</h3>
                    <br>
                    <div class="uk-grid" data-uk-grid-margin>
                      <div class="uk-width-medium-1-3">
                        <h3 class="uk-module-title">Creativity</h3>
                        <div class="uk-flex">
                          <div class="tm-block-icon uk-icon-7s-alarm"></div>
                          <div class="tm-block-content">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
                          </div>
                        </div>
                      </div>
                      <div class="uk-width-medium-1-3">
                        <h3 class="uk-module-title">Design</h3>
                        <div class="uk-flex">
                          <div class="tm-block-icon uk-icon-7s-config"></div>
                          <div class="tm-block-content">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
                          </div>
                        </div>
                      </div>
                      <div class="uk-width-medium-1-3">
                        <h3 class="uk-module-title">Strategy</h3>
                        <div class="uk-flex">
                          <div class="tm-block-icon uk-icon-7s-config"></div>
                          <div class="tm-block-content">
                            Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
                          </div>
                        </div>
                      </div>
                    </div>
                    <br>
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div> 

                    <pre>&lt;div class="uk-flex"&gt;
  &lt;div class="tm-block-icon uk-icon-7s-alarm"&gt;&lt;/div&gt;
  &lt;div&gt;Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.&lt;/div&gt;
&lt;/div&gt;</pre>
                    <p>
                      <br> To view a list of available icons that you can use in block icons, <a href="?page=elements-icons">click here</a>.</p>
                    <br>
                    <hr>
                    <br>
                    <!-- blockquotes -->
                    <h2 class="uk-module-title" id="blockquotes">Blockquotes</h2>
                    <p>Blockquotes are a nice way to show some commentary or slogan accompanied by the author or name of the commenter. To create a standard blockquote, use the <code>blockquote</code> element. Inline quotations can also be defined by using the <q>&lt;q&gt; element</q>.</p>
                    <br>
                    <h3 class="uk-module-title">Blockquote example</h3>
                    <blockquote class="uk-clearfix">
                      <p>Life is a series of natural and spontaneous changes. Don't resist them - that only creates sorrow. Let reality be reality. Let things flow naturally</p><span class="author">John Doe</span>
                    </blockquote>
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div>
                    <pre>&lt;blockquote class="uk-clearfix"&gt;
  &lt;p&gt;Your quote goes here&lt;/p&gt;
  &lt;span class="author"&gt;John Doe&lt;/span&gt;
&lt;/blockquote&gt;</pre>
                    <br>
                    <p>The <code>testimonial</code> element adds an avatar and icon attribute to the native blockquote. <code>avatar</code> attribute shows an image of the author by specifying a url to the image. <code>icon</code> attribute is used to add a transparent icon that is positioned bottom left.</p>
                    <br>
                    <h3 class="uk-module-title">Testimonial example</h3>
                    <blockquote class="tm-testimonial uk-clearfix uk-text-left"><i class="quote-icon uk-icon-quote-left"></i>
                      <p><img class="tm-testimonial-avatar uk-align-left uk-margin-top" src="images/demo/avatar/client-1-thumb.png" alt="John Doe" width="64" height="64">Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers <strong>you cannot be successful</strong> or happy.</p> 
                      <span class="author uk-margin-top">John Doe</span> 
                      <span class="jobtitle">Head of Sales, envato</span>
                    </blockquote>
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div>
                    <pre>&lt;blockquote class="tm-testimonial uk-clearfix uk-text-left"&gt;&lt;i class="quote-icon uk-icon-quote-left"&gt;&lt;/i&gt;
  &lt;p&gt;&lt;img class="tm-testimonial-avatar uk-align-left uk-margin-top" src="images/demo/avatar/client-1-thumb.png" alt="John Doe" width="64" height="64"&gt;your quote goes here&lt;/p&gt; 
  &lt;span class="author uk-margin-top"&gt;John Doe&lt;/span&gt; 
  &lt;span class="jobtitle"&gt;Head of Sales, arrowthemes&lt;/span&gt;
&lt;/blockquote&gt;</pre>
                    <br>
                    <div class="uk-badge-danger uk-badge">important</div>
                    <br>
                    <p>You can omit any of the parameters of testimonial (author, title) but not the 'avatar' parameter. If you'd like to use the testimonial without the avatar, use the blockquote element instead</p>
                    <br>
                    <h3 class="uk-module-title">Inline code</h3>
                    <p class="uk-margin-top">To define a short inline computer code use the <code>&lt;code&gt;</code> element. For a larger code snippet use the <code>code</code> element which defines preformatted text. It creates a new text block which preserves both spaces and line breaks.</p>
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div> <pre><i>[</i>code].my-class {
    margin: 15px 0;
    padding: 10px;
}<i>[</i>/code]
</pre>
                    <br>
                    <hr>
                    <br>
                    <!-- lists -->
                    <h2 class="uk-module-title" id="lists">Lists</h2>
                    <p>You can create an unordered list using the <code><i>[</i>list]</code>. The li element defines the list item.</p>
                    <br>
                    <h3 class="uk-module-title uk-padding-bottom">Simple List</h3>
                    <ul>
                      <li>List Item 1</li>
                      <li>List Item 2</li>
                      <li>List Item 3</li>
                    </ul>
                    <br>
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div> 
                    <pre>&lt;ul&gt;
  &lt;li&gt;List Item 1&lt;/li&gt;
  &lt;li&gt;List Item 2&lt;/li&gt;
  &lt;li&gt;List Item 3&lt;/li&gt;
&lt;/ul&gt;</pre>
                    <br>
                    <p>You can create lists with different style variations. E.g Lists with alternative stripes, lists with icons etc.</p>
                    <br>
                    <h3 class="uk-module-title uk-padding-bottom">Lists with stripes</h3>
                    <ul class="uk-list uk-list-striped">
                      <li>List Item 1</li>
                      <li>List Item 2</li>
                      <li>List Item 3</li>
                    </ul>
                    <br>
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div> <pre>&lt;ul class="uk-list uk-list-striped"&gt;
  &lt;li&gt;List Item 1&lt;/li&gt;
  &lt;li&gt;List Item 2&lt;/li&gt;
  &lt;li&gt;List Item 3&lt;/li&gt;
&lt;/ul&gt;</pre>
                    <br>
                    <h3 class="uk-module-title uk-padding-bottom">Lists with icons</h3>
                    <p>Adding icons to your list, makes them even look more outstanding. Check out the entire collection of icon fonts that you can use with lists <a href="?page=elements-icons">here</a>
                    </p>
                    <div class="uk-grid" data-uk-grid-margin>
                      <div class="uk-width-medium-1-3">
                        <ul class="uk-list list-icons">
                          <li><i class="uk-icon-folder-o"></i>Lorem ipsum dolor</li>
                          <li><i class="uk-icon-folder-o"></i>consectetur adipisicing elit</li>
                          <li><i class="uk-icon-folder-o"></i>sed do eiusmod tempor</li>
                        </ul>
                      </div>
                      <div class="uk-width-medium-1-3">
                        <ul class="uk-list list-icons">
                          <li><i class="uk-icon-info-circle"></i>Lorem ipsum dolor</li>
                          <li><i class="uk-icon-info-circle"></i>consectetur adipisicing elit</li>
                          <li><i class="uk-icon-info-circle"></i>sed do eiusmod tempor</li>
                        </ul>
                      </div>
                      <div class="uk-width-medium-1-3">
                        <ul class="uk-list list-icons">
                          <li><i class="uk-icon-check"></i>Lorem ipsum dolor</li>
                          <li><i class="uk-icon-check"></i>consectetur adipisicing elit</li>
                          <li><i class="uk-icon-check"></i>sed do eiusmod tempor</li>
                        </ul>
                      </div>
                    </div>
                    <div class="uk-grid" data-uk-grid-margin>
                      <div class="uk-width-medium-1-3">
                        <ul class="uk-list list-icons">
                          <li><i class="uk-icon-chevron-right"></i>Lorem ipsum dolor</li>
                          <li><i class="uk-icon-chevron-right"></i>consectetur adipisicing elit</li>
                          <li><i class="uk-icon-chevron-right"></i>sed do eiusmod tempor</li>
                        </ul>
                      </div>
                      <div class="uk-width-medium-1-3">
                        <ul class="uk-list list-icons">
                          <li><i class="uk-icon-arrow-circle-right"></i>Lorem ipsum dolor</li>
                          <li><i class="uk-icon-arrow-circle-right"></i>consectetur adipisicing elit</li>
                          <li><i class="uk-icon-arrow-circle-right"></i>sed do eiusmod tempor</li>
                        </ul>
                      </div>
                      <div class="uk-width-medium-1-3">
                        <ul class="uk-list list-icons">
                          <li><i class="uk-icon-caret-right"></i>Lorem ipsum dolor</li>
                          <li><i class="uk-icon-caret-right"></i>consectetur adipisicing elit</li>
                          <li><i class="uk-icon-caret-right"></i>sed do eiusmod tempor</li>
                        </ul>
                      </div>
                    </div>
                    <br>
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div> 
                    <pre>&lt;ul class="uk-list list-icons&gt;
  &lt;li&gt;&lt;i class="uk-icon-asterisk"&gt;&lt;/i&gt;List Item 1&lt;/li&gt;
  &lt;li&gt;&lt;i class="uk-icon-asterisk"&gt;&lt;/i&gt;List Item 2&lt;/li&gt;
  &lt;li&gt;&lt;i class="uk-icon-asterisk"&gt;&lt;/i&gt;List Item 3&lt;/li&gt;
&lt;/ul&gt;</pre>
                    <br>
                    <h3 class="uk-module-title uk-padding-top">Nested Lists</h3>
                    <ul class="uk-list list-icons">
                      <li><i class="uk-icon-caret-right"></i>Lorem ipsum dolor</li>
                      <li><i class="uk-icon-caret-right"></i>consectetur adipisicing elit</li>
                      <li><i class="uk-icon-caret-right"></i>sed do eiusmod tempor</li>
                      <ul class="uk-list uk-nested-list">
                        <li><i class="uk-icon-caret-right"></i>Lorem ipsum dolor</li>
                        <li><i class="uk-icon-caret-right"></i>consectetur adipisicing elit</li>
                        <li><i class="uk-icon-caret-right"></i>sed do eiusmod tempor</li>
                      </ul>
                      <li><i class="uk-icon-caret-right"></i>dolor adipisicing elit</li>
                    </ul>
                    <br>
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div> 
                    <pre>&lt;ul class="uk-list list-icons"&gt;
  &lt;li&gt;&lt;i class="uk-icon-caret-right"&gt;&lt;/i&gt;list item 1&lt;/li&gt;
  &lt;li&gt;&lt;i class="uk-icon-caret-right"&gt;&lt;/i&gt;list item 2&lt;/li&gt;
  &lt;ul class="uk-list uk-nested-list"&gt;
    &lt;li&gt;&lt;i class="uk-icon-caret-right"&gt;&lt;/i&gt;list item 1&lt;/li&gt;
    &lt;li&gt;&lt;i class="uk-icon-caret-right"&gt;&lt;/i&gt;list item 2&lt;/li&gt;
  &lt;/ul&gt;
  &lt;li&gt;&lt;i class="uk-icon-caret-right"&gt;&lt;/i&gt;list item 3&lt;/li&gt;
&lt;/ul&gt;</pre>
                    <br>
                    <hr>
                    <br>
                    <h2 class="uk-module-title">Tags</h2>
                    <p>Tags can be used to highlight keywords within your content. To create a tag, use the <code>tag</code> element</p>
                    <br> <a class="tm-tag" href="#">Themeforest</a> <a class="tm-tag" href="#">envato</a> <a class="tm-tag" href="#">youtube</a> <a class="tm-tag" href="#">action</a> <a class="tm-tag" href="#">web design</a>
                    <br>
                    <br>
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div> 
                    <pre>&lt;a class="tm-tag" href="#"&gt;Themeforest&lt;/a&gt;
&lt;a class="tm-tag" href="#"&gt;envato&lt;/a&gt;
&lt;a class="tm-tag" href="#"&gt;youtube&lt;/a&gt;</pre>
                    <br>
                    <hr>
                    <br>
                    <h2 class="uk-module-title">Ratings</h2>
                    <p>To create a rating review stars, use one of these rating classes:</p>
                    <br>
                    <table class="uk-table uk-table-condensed">
                      <thead>
                        <tr>
                          <th class="uk-width-1-4">Class</th>
                          <th class="uk-width-3-4">Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><code>uk-icon-star</code></td>
                          <td>Show a full star icon</td>
                        </tr>
                        <tr>
                          <td><code>uk-icon-star-half-o</code></td>
                          <td>Show a half full star icon</td>
                        </tr>
                        <tr>
                          <td><code>uk-icon-star-o</code></td>
                          <td>Show an empty star</td>
                        </tr>
                    </table>
                    <br>
                    <ul class="tm-rating">
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star"></i></li>
                    </ul>
                    <ul class="tm-rating">
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star-half-o"></i></li>
                    </ul>
                    <ul class="tm-rating">
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star-o"></i></li>
                    </ul>
                    <ul class="tm-rating">
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star-o"></i></li>
                      <li><i class="uk-icon-star-o"></i></li>
                    </ul>
                    <ul class="tm-rating">
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star-o"></i></li>
                      <li><i class="uk-icon-star-o"></i></li>
                      <li><i class="uk-icon-star-o"></i></li>
                    </ul>
                    <ul class="tm-rating">
                      <li><i class="uk-icon-star"></i></li>
                      <li><i class="uk-icon-star-o"></i></li>
                      <li><i class="uk-icon-star-o"></i></li>
                      <li><i class="uk-icon-star-o"></i></li>
                      <li><i class="uk-icon-star-o"></i></li>
                    </ul>
                    <ul class="tm-rating">
                      <li><i class="uk-icon-star-o"></i></li>
                      <li><i class="uk-icon-star-o"></i></li>
                      <li><i class="uk-icon-star-o"></i></li>
                      <li><i class="uk-icon-star-o"></i></li>
                      <li><i class="uk-icon-star-o"></i></li>
                    </ul>
                    <br>
                    <br>
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div> <pre>&lt;ul class="tm-rating"&gt;
  &lt;li&gt;&lt;i class="uk-icon-star"&gt;&lt;/i&gt;&lt;/li&gt;
  &lt;li&gt;&lt;i class="uk-icon-star"&gt;&lt;/i&gt;&lt;/li&gt;
  &lt;li&gt;&lt;i class="uk-icon-star"&gt;&lt;/i&gt;&lt;/li&gt;
  &lt;li&gt;&lt;i class="uk-icon-star"&gt;&lt;/i&gt;&lt;/li&gt;
  &lt;li&gt;&lt;i class="uk-icon-star"&gt;&lt;/i&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
                    <br>
                    <hr>
                    <br>
                    <h2 class="uk-module-title" id="semantics">Text level semantics</h2>
                    <table class="uk-table uk-table-hover uk-table-condensed">
                      <thead>
                        <tr>
                          <th class="uk-width-1-4">Element</th>
                          <th class="uk-width-3-4">Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><code>&lt;a&gt;</code></td>
                          <td>Turn text into hypertext using the <a href="#">a element</a>.</td>
                        </tr>
                        <tr>
                          <td><code>&lt;em&gt;</code></td>
                          <td>Emphasize text using the <em>em element</em>.</td>
                        </tr>
                        <tr>
                          <td><code>&lt;strong&gt;</code></td>
                          <td>Imply any extra importance using the <strong>strong element</strong>.</td>
                        </tr>
                        <tr>
                          <td><code>&lt;code&gt;</code></td>
                          <td>Define inline code snippets using the <code>code element</code>.</td>
                        </tr>
                        <tr>
                          <td><code>&lt;del&gt;</code></td>
                          <td>Mark document changes as deleted text using the <del>del element</del>.</td>
                        </tr>
                        <tr>
                          <td><code>&lt;ins&gt;</code></td>
                          <td>Mark document changes as inserted text using the <ins>ins element</ins>.</td>
                        </tr>
                        <tr>
                          <td><code>&lt;mark&gt;</code></td>
                          <td>Highlight text with no semantic meaning using the
                            <mark>mark element</mark>.</td>
                        </tr>
                        <tr>
                          <td><code>&lt;q&gt;</code></td>
                          <td>Define inline quotations using <q>q element <q>inside</q> a q element</q>.</td>
                        </tr>
                        <tr>
                          <td><code>&lt;abbr&gt;</code></td>
                          <td>Define an abbreviation using the <abbr title="Abbreviation Element">abbr element</abbr> with a title.</td>
                        </tr>
                        <tr>
                          <td><code>&lt;dfn&gt;</code></td>
                          <td>Define a definition term using the <dfn title="Defines a definition term">dfn element</dfn> with a title.</td>
                        </tr>
                        <tr>
                          <td><code>&lt;small&gt;</code></td>
                          <td>De-emphasize text for small print using the <small>small element</small>.</td>
                        </tr>
                      </tbody>
                    </table>
                    <p>You can find more html tags and classes that you can use <a href="http://getuikit.com/docs/utility.html" target="_blank">from here</a>
                    </p>
                    <br>
                    <hr>
                    <br>
                    <h2 class="uk-module-title" id="classes">Module Classes</h2>
                    <table class="uk-table uk-table-condensed">
                      <thead>
                        <tr>
                          <th class="uk-width-1-4">Module Class</th>
                          <th class="uk-width-3-4">Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><code>uk-panel-box-primary</code></td>
                          <td>Change the module background to have the primary background; You can specify the primary background from the customizer panel.</td>
                        </tr>
                        <tr>
                          <td><code>uk-panel-box-secondary</code></td>
                          <td>Change the module background to have the secondary background; You can specify the secondary background from the customizer panel.</td>
                        </tr>
                        <tr>
                          <td><code>tm-primary-background</code></td>
                          <td>Change an element's background to have the primary background; You can specify the primary background from the customizer panel.</td>
                        </tr>
                        <tr>
                          <td><code>tm-secondary-background</code></td>
                          <td>Change an element's background to have the secondary background; You can specify the secondary background from the customizer panel.</td>
                        </tr>
                        <tr>
                          <td><code>tm-primary-color</code></td>
                          <td>Change an element's font color to have the primary color; You can specify the primary color from the customizer panel.</td>
                        </tr>
                        <tr>
                          <td><code>tm-overlay-primary</code></td>
                          <td>Add a primary overlay</td>
                        </tr>
                        <tr>
                          <td><code>tm-overlay-secondary</code></td>
                          <td>Add a secondary overlay</td>
                        </tr>
                        <tr>
                          <td><code>tm-overlay-slider</code></td>
                          <td>Add an overlay similar to the slider overlay</td>
                        </tr>
                        <tr>
                          <td><code>tm-secondary-color</code></td>
                          <td>Change an element's font color to have the secondary color; You can specify the secondary background from the color customizer panel.</td>
                        </tr>
                        <tr>
                          <td><code>tm-muted-background</code></td>
                          <td>Set the module background to a light-grey muted background.</td>
                        </tr>
                        <tr>
                          <td><code>tm-caps</code></td>
                          <td>Set the module caption to be in capitalized words with letter spacing</td>
                        </tr>
                        <tr>
                          <td><code>tm-small-caps</code></td>
                          <td>Set the module caption to be in capitalized words with letter spacing and a small font</td>
                        </tr>
                        <tr>
                          <td><code>tm-padding</code></td>
                          <td>Add extra padding to an element</td>
                        </tr>
                        <tr>
                          <td><code>tm-padding-small-sides</code></td>
                          <td>Add small padding on the side</td>
                        </tr>
                        <tr>
                          <td><code>tm-inner-padding-large</code></td>
                          <td>Add a large padding to the inner container. Used in conjuction with modules that have a background image</td>
                        </tr>
                        <tr>
                          <td><code>tm-padding-remove</code></td>
                          <td>Remove all padding on an element</td>
                        </tr>
                        <tr>
                          <td><code>tm-text-large</code></td>
                          <td>Add this class to make the text large</td>
                        </tr>
                        <tr>
                          <td><code>tm-text-xlarge</code></td>
                          <td>Add this class to make the text extra large</td>
                        </tr>
                        <tr>
                          <td><code>tm-border-bottom</code></td>
                          <td>Add this class to an image to add a bottom border</td>
                        </tr>
                        <tr>
                          <td><code>tm-thin-font</code></td>
                          <td>Add this class to make the font weight thinner</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </article>
          </main>
        </div>
      </div>
    </div>
  </div>

    <!-- bottom-d -->
    <div class="tm-block-bottom-d uk-block uk-block-secondary tm-overlay-6" id="tm-bottom-d">
      <div class="uk-container uk-container-center">
        <section class="tm-bottom-d uk-grid" data-uk-grid-margin="" data-uk-grid-match="{target:'> div > .uk-panel'}">
          
          <!-- block -->
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <img alt="logo" height="40" src="images/demo/general/logo-small-white.svg" width="140">
              <p>Sandal LLC.<br>
              Hamburg, Germany<br>
              One Street | Two Drive,<br>
              10th Floor, Site Wing<br>
              <br>
              +49 555 000 000<br>
              hello@sandal.com<br>
              support@sandal.com</p>
            </div>
          </div>

          <!-- block -->
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <h3 class="uk-h3 uk-module-title uk-margin-bottom">Recent Posts</h3>
              <div class="tm-item-block">
                <ul>
                  <li>
                    <a href="?page=news-item">Have faith in your abilities</a> 
                    <div class="uk-margin-small-top">
                      Believe in yourself! Have faith in your abilities! Without a...
                    </div>
                  </li>
                  <li>
                    <a href="?page=news-item">Live in the only moment</a> 
                    <div class="uk-margin-small-top">
                      Always continue the climb. It is possible for you to...
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- block -->
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <h3 class="uk-h3 uk-module-title uk-margin-bottom">Our Work</h3>
              <ul class="uk-list list-icons">
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Gaucho Cafe</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Fontaine Corp</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Saffron Magazine</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Celsius gallery</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Fidelity business</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Lighthouse Church</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Sauna Spa</a></li>
              </ul>
            </div>
          </div>
          
          <!-- block -->
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <h3 class="uk-h3 uk-module-title uk-margin-bottom">Our Values</h3>
              <p>Do not dwell in the past, do not dream of the future, concentrate the mind on now.</p>
              <p>Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future.</p>
            </div>
          </div>
        </section>
      </div>
    </div>