index.html

---
layout: landing
title: Home
---

<div class="ui feature vertical segment">
  <div class="ui centered page grid">
    <div class="fourteen wide column">
      <div class="ui three column center aligned stackable divided grid">
        <div class="column">
          <div class="ui icon header">
            <i class="purple github icon"></i>
            Free GitHub Hosting
          </div>
          <p>Free world-class hosting for your website on world's largest open source repository.</p>
        </div>
        <div class="column">
          <div class="ui icon header">
            <i class="purple code icon"></i>
            Semantic UI Goodness
          </div>
          <p>Create rich, modern user experience with tags as easy as describing design in English.</p>
        </div>
        <div class="column">
          <div class="ui icon header">
            <i class="purple thumbs up icon"></i>
            Jekyll Pre-processing 
          </div>
          <p>No server or database to maintain. No plugin hassels. Just focus on your content.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="ui vertical segment black-shine-gradient">
  <div class="ui stackable page grid">
    <div class="row">
      <div class="eight wide column">
        <h3 class="ui inverted header">OpenTheme Helps Re-Imagine Web Design</h3> 
        <h4 class="ui inverted header">
        Design a website that <a href="/metrics/">self monitors</a> as it changes!
        </h4>
        <h4 class="slim-header-light">
        Create <a href="/apps/">mobile hybrid apps</a> in just 3 lines of code!
        </h4>
        <h4 class="ui inverted header">
        Author real-time content using <a href="/embeds/">plugin embeds</a>.
        </h4>
        <h4 class="slim-header-light">
        Manage content <a href="{% post_url /blog/2014-11-26-open-cloud-based-workflow-for-designing-your-website %}">100% on Cloud, in Browser</a>.
        </h4>
        <h4 class="ui inverted header">
        Publish <a href="{% post_url /blog/2014-12-2-data-driven-web-apps-using-github %}">data driven docs</a>, without a database.
        </h4>
      </div>
      <div class="eight wide column">
        {% include feature-post.html %}        
      </div>
    </div>
  </div>
</div>


<div class="ui feature vertical segment">
  <div class="ui centered page grid">
    <div class="fourteen wide column">
      <div class="ui three column center aligned stackable divided grid">
        <div class="column">
          <div class="ui icon header">
            <i class="purple mobile icon"></i>
            Hybrid Apps
          </div>
          <p>Responsive theme supporting multiple devices with one code base. Design once, publish anywhere.</p>
        </div>
        <div class="column">
          <div class="ui icon header">
            <i class="purple bug icon"></i>
            Live Tests
          </div>
          <p>Travis CI integrated. BrowserSync ready. Lint JS, CSS on build. HTML proofing planned.</p>
        </div>
        <div class="column">
          <div class="ui icon header">
            <i class="purple rocket icon"></i>
            Speed Optimized
          </div>
          <p>PageSpeed Insights built-in. Images optimized in build. CSS, JS minified. Selective JS includes.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="ui inverted vertical segment">
  <div class="ui centered page grid">
    <div class="fourteen wide column">
      <div class="ui five column center aligned stackable inverted divided grid">
        <div class="column">
          <a class="ui small blue inverted statistic" href="/apps/">
            <div class="value">
              <i class="cube icon"></i> {{ site.categories.app | size  }}
            </div>
            <p class="label">
              Single Page Apps
            </p>
          </a>
        </div>
        <div class="column">
          <a class="ui small purple inverted statistic pagebar" href="#">
            <div class="value">
              <i class="content icon"></i> {{ site.pages | size  }}
            </div>
            <div class="label">
              Templates
            </div>
          </a>
        </div>
        <div class="column">
          <a class="ui small blue inverted statistic" href="/embeds/">
            <div class=" value">
              <i class="wizard icon"></i> {{ site.data.embeds | size }}
            </div>
            <div class="label">
              Reusable Embeds
            </div>
          </a>
        </div>
        <div class="column">
          <a class="ui small orange inverted statistic" href="{% post_url /blog/2014-12-15-content-strategy-for-startup-websites %}">
            <div class="text value">
              One Minute
            </div>
            <div class="label">
              Content Workflow
            </div>
          </a>
        </div>
        <div class="column">
          <a class="ui small blue inverted statistic" href="/category/#theme">
            <div class="value">
              <i class="student icon"></i> {{ site.categories.theme | size  }}
            </div>
            <div class="label">
              Theme Tutorials
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="ui vertical segment">
  <div class="ui centered page stackable divided grid">
    <div class="row">
      <div class="column">
        <h1 class="center aligned ui header">
          Browse OpenTheme Content
        </h1>
      </div>
    </div>
    <div class="row">
      <div class="eight wide column">

        <h3 class="ui header">Tags</h3>
          {% include site-tags.html %}

      </div>

      <div class="eight wide column">

        <h3 class="ui header">Categories</h3>
          {% include site-categories.html %}

      </div>

    </div> <!-- /row -->
  </div>
</div>