<div class="jumbotron">
  <div class="container">
    <h1>{{'FULLSCREEN' | translate}}</h1>
    <p class="lead">{{'FULLSCREEN-DESC' | translate}}</p>
  </div>
</div>

<div class="container">
  <div class="row">

    <div class="col-lg-3">
      <div class="list-group" affix>
          <ul class="nav">
            <a href="" smooth-scroll target="fullscreen" offset="80" class="list-group-item">{{'FULLSCREEN' | translate}}</a>
          </ul>
      </div>
    </div>

    <div class="col-lg-9">

      <section id="fullscreen">

        <h1>{{'FULLSCREEN' | translate}}</h1><hr>
        <p class="lead">{{'FULLSCREEN-DESC2' | translate}}</p>

        <div class="panel panel-default">
          <div class="panel-body">
            <p class="text-muted"><small>EXAMPLE</small></p>
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <div class="col-sm-12">
                  <a href="" class="btn btn-info" full-screen></a>
                </div>
              </div>
            </form>
          </div>
          <div class="panel-footer">
            <p class="text-muted"><small>CODE</small></p>
            <gist id="e93b0a876fb45a6e3811"></gist>
          </div>
        </div>

        <iframe height='250' scrolling='no' src='//codepen.io/alfredobarron/embed/YPvzXG/?height=250&theme-id=8624' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/alfredobarron/pen/YPvzXG/'>Smoke Fullscreen</a> by Alfredo Barron (<a href='http://codepen.io/alfredobarron'>@alfredobarron</a>) on <a href='http://codepen.io'>CodePen</a>.
        </iframe>

      </section>


    </div><!--/.col-lg-9 -->
  </div><!--/.row -->
</div><!-- /.container -->