---
layout : 'default'
css    : 'index'
title  : 'Introduction'
type   : 'Semantic'
---

<div class="masthead segment">
  <div class="ui responsive center aligned grid">
    <div class="column">
      <h1 class="ui header">Semantic UI</h1>
      <h2 class="ui header">UI is the DNA of the web.</h2>
      <p>Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.</p>
        <a class="ui red huge labeled icon button" href="download.html" class="ui button"><i class="icon upload"></i> Download</a>
        <a class="ui black huge labeled sidebar icon button"><i class="icon list layout"></i> View UI</a>
    </div>
  </div>
</div>

<div class="solid">
  <div class="ui two column divided stackable responsive grid">
    <div class="column"> 
      <h1 class="ui purple header">
        <i class="inverted purple circular community icon"></i> 
        Code Like You Think
      </h1>
      <p><b>Designing pages be as easy as describing them.</b>
      <br>Semantic creates a re-usable vocabulary for user interface. Semantic lets </p>
    </div>
    <div class="column">
      <h1 class="ui teal header">
        <i class="inverted teal circular terminal icon"></i> 
        Expert Tools
      </h1>
      <p><b>Not happy with off the shelf plugins?</b><br>Semantic modules are written to be easy to read and extensible. Every plugin provides out of the box debug tools so you can monitor performance without breakpoints.</p>
    </div>
  </div>
</div>
<div class="stripe">
    <div class="two column stackable responsive ui grid">
      <div class="column">
        <div class="large inverted purple center aligned ui block header">
          <i class="book icon"></i> HTML
          <div class="sub header">Sometimes it is easier to just see the code</div>
        </div>
        <p>This code example shows the code powering the code example.</p>
        <div class="code" data-type="html">
    <div class="two column stackable responsive ui grid">
      <div class="column">
        <div class="large inverted purple center aligned ui block header">
          <i class="book icon"></i> HTML
          <div class="sub header">Sometimes it is easier to just see the code</div>
        </div>
        <p>This code example shows the code powering the code example.</p>
        <div class="code"> 
          <!-- Recursion Narrowly Avoided !-->
        </div>
      </div>
      <div class="column">
        <div class="large inverted teal center aligned ui block header">
          <i class="terminal icon"></i> Javascript
          <div class="sub header">Not everything is static</div>
        </div>
        <p>Javascript modules use verbs to show actions</p>
        <div class="code"> 
          <!-- Once more unto the breach, dear friends, once more; !-->
        </div>
      </div>
    </div>
      </div>
        </div>
      <div class="column">
        <div class="large inverted teal center aligned ui block header">
          <i class="terminal icon"></i> Javascript
          <div class="sub header">Not everything is static</div>
        </div>
        <p>Javascript modules use verbs to show actions</p>
        <div class="code">
    $('.ui.tab')
      .tab('activate.tab', 'help')
    ;
        </div>
      </div>
  </div>
</div>


</body>

</html>