{% extends "base.html" %}
{% block header %}
<style>
  body {
    padding-top: 20px;
    padding-bottom: 40px;
  }

  /* Custom container */
  .container {
    margin: 0 auto;
    max-width: 700px;
  }
  .container > hr {
    margin: 30px 0;
  }

  /* Main marketing message and sign up button */
  .jumbotron {
    margin: 60px 0;
    text-align: center;
  }
  .jumbotron h1 {
    font-size: 72px;
    line-height: 1;
  }
  .jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
  }

  /* Supporting marketing content */
  .marketing {
    margin: 60px 0;
  }
  .marketing p + h4 {
    margin-top: 28px;
  }

  #navlist {
    margin-top: 60px;
  }

  #navlist li {
    display: inline;
    list-style-type: none;
    padding-right: 10px;
  }
</style>
{% end %}

{% block page %}
<div class="masthead">
  <ul class="nav nav-pills pull-right">
    <li class="active"><a href="/">{{_("Home")}}</a></li>
    <li><a href="/signin">{{_("Sign in")}}</a></li>
  </ul>
  <h3 class="muted">$modname</h3>
</div>

<hr>

<div class="jumbotron">
  <h1>{{_("Super awesome marketing speak!")}}</h1>
  <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <a class="btn btn-large btn-success" href="signup">{{_("Sign up today")}}</a>

  <ul id="navlist">
    <li><a href="/lang/en_US">English</a></li>
    <li><a href="/lang/es_ES">Español</a></li>
    <li><a href="/lang/pt_BR">Português</a></li>
  </ul>
</div>

<hr>

<div class="row-fluid marketing">
  <div class="span6">
    <h4>Subheading</h4>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

    <h4>Subheading</h4>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

    <h4>Subheading</h4>
    <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  </div>

  <div class="span6">
    <h4>Subheading</h4>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

    <h4>Subheading</h4>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

    <h4>Subheading</h4>
    <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  </div>
</div>

<hr>

<div class="footer">
  <p>&copy; Company 2012</p>
</div>

{% end %}
