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

<div class="masthead segment">
  <div class="container">
    <h1><i class="icon th-alt"></i>Semantic UI</h1>
    <h2><strike>HTML</strike> UI is the language of the web.</h2>
    <p>Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.</p>
    
    <div class="ui two fluid black buttons">
      <a href="#" class="ui button"><i class="icon cloud"></i> Download</a>
      <a href="#" class="ui button"><i class="icon terminal"></i> Customize</a>
    </div>
    
  </div>
</div>

<div class="solid">
  <div class="container ui three column grid">
    <div class="column"> 
      <h1 class="ui icon header">
        <i class="icon users"></i> 
        Learn HTML
      </h1>
      <p>Semantic code is designed to be human readable, so front end code can be understood by anyone.</p>
    </div>
    <div class="column">
      <h1 class="ui icon header">
        <i class="icon easel"></i> 
        Swap Designs
      </h1>
      <p>Semantic provides an exchange format for UI, so swapping out designs doesn't mean rewriting your site's codebase.</p>
    </div>
    <div class="column">
      <h1 class="ui icon header">
        <i class="icon terminal"></i> 
        Build Smarter
      </h1>
      <p>Semantic UI is developed around the semantic standard which seeks to make front end decisions less arbitrary.</p>
    </div>
  </div>
</div>
<div class="stripe">
  <div class="container ui grid">
      <div class="row">
        <div class="seven wide column">
          <div class="ui message">
            <h2 class="ui header"><i class="icon info-circle"></i> Get Started</h2>
            <p>Learn about how to get started with Semantic UI, and best practices for using the Semantic standard in your project.</p>
            <div class="ui fluid teal button">Learn more <i class="icon right-open"></i></div>
          </div>
        </div>
        <div class="five wide column">
          <div class="ui message">
            <h2 class="ui header"><i class="icon easel"></i> See UI elements</h2>
            <p>See some of the UI elements that the Semantic library has to offer.</p>
            <div class="ui fluid red button">View Library <i class="icon right-open"></i></div>
          </div>
        </div>
      </div>
    <div class="row">
      <div class="five wide column">
        <div class="ui message">
          <h2 class="ui header"><i class="icon terminal"></i> Author Elements </h2>
          <p>Learn about developing and releasing your own skins UI skins.</p>
          <div class="ui fluid green button">Authoring Guide <i class="icon right-open"></i></div>
        </div>
      </div>
      <div class="seven wide column">
        <div class="ui message">
        <h2 class="ui header"><i class="icon edit"></i> Help Write the Spec </h2>
        <p>Semantic is a living spec. We need the communitys help to reach our full potential. Help Semantic develop specifications for missing UI elements.</p>
        <div class="ui fluid blue button">Contribute <i class="icon right-open"></i></div>
        </div>
      </div>
    </div>
  </div>
</div>


</body>

</html>