index.html

---
layout: default
class: home
---
<header class="Intro">
  <h1 class="Intro-brand">
    <object data="img/logo.svg">
      <img src="img/logo.png" alt="Flarum">
    </object>
  </h1>

  <div class="animated fadeIn">
    <div class="Intro-beta">BETA</div>
    
    <h2>Forums made simple.</h2>
    <p>Flarum is the next-generation forum software that makes online discussion fun. It's simple, fast, and free.</p>

    <div class="Intro-actions">
      <a href="http://discuss.flarum.org" class="Button">Try it out</a>
      <a href="{{ site.baseurl }}/docs/installation" class="Button">Download Beta</a>
    </div>
  </div>
</header>

<div class="animated fadeUp">
  <figure class="Home-screenshot">
    <img src="img/screenshot.png" alt="" width="1151">
  </figure>

  <div class="Features">
    <div class="Carousel">
      <div class="CarouselItem">
        <img src="img/features/icons/blue/ui.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Elegant UI</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/touch.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Touch-Optimized</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/fast.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Fast &amp; Lightweight</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/installation.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Easy Installation</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/extensible.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Extensible Architecture</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/themeable.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Themeable</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/notifications.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Notifications</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/tags.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Tags</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/mentions.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Replies &amp; Mentions</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/permissions.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Powerful Permissions</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/search.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Convenient Search</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/real-time.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Real-Time Discussion</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/seo.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Search Engine Optimization</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/localization.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Localization</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/moderation.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Moderation Tools</div>
      </div>
      <div class="CarouselItem">
        <img src="img/features/icons/blue/formatting.svg" class="CarouselItem-icon">
        <div class="CarouselItem-label">Powerful Formatting</div>
      </div>
    </div>

    <p class="Features-text">
      Flarum is packed full of innovation, all wrapped up in a beautiful design.
      This isn't just a nice skin. It's forum software reimagined.
    </p>

    <div class="Features-actions">
      <a href="{{ site.baseurl }}/features" class="Button">Learn about Flarum's features</a>
    </div>
  </div>

  {% include team.html %}
  
  {% include actions.html %}
</div>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
  $(function() {
    var $carousel = $('.Carousel');
    $carousel.wrapInner($('<div class="CarouselGroup"/>'));
    var $group = $('.CarouselGroup');
    var $group2 = $group.clone().appendTo($carousel);

    var animate = function() {
      $group.css({marginLeft: 0}).animate({marginLeft: -$group.width()}, 70000, 'linear').promise().done(function() {
        animate();
      });
    };

    animate();

    if (window.devicePixelRatio > 1) {
      var $screenshot = $('.Home-screenshot img');

      $screenshot.attr('src', $screenshot.attr('src').replace('.', '_2x.'));
    }
  });
</script>