index.html

<!DOCTYPE html>
<html lang="en">
  <!--# if expr="$file = index.html" -->
        <!--# set var="file" value="index" -->
  <!--# elif expr="$file = /" -->
        <!--# set var="file" value="index" -->
  <!--# endif -->
  <head>
    <meta charset="utf-8">
    <title>Hackeriet Nettlaug</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="/css/bootstrap.css" rel="stylesheet">
    <style>
    body {
      padding-bottom: 40px;
      color: #5a5a5a;
    }

    body > .container, body > .container-fluid {
      margin-top: 100px;
    }

    #myCarousel + .container, #myCarousel + .container-fluid {
      margin-top: 0px;
    }

    .navbar-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      margin-top: 20px;
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
    }

    .navbar .navbar-inner {
      border: 0;
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
         -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
              box-shadow: 0 2px 10px rgba(0,0,0,.25);
    }

    .navbar .brand {
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    }

    .navbar .nav > li > a {
      padding: 15px 20px;
    }

    .navbar .btn-navbar {
      margin-top: 10px;
    }

    .carousel {
      margin-bottom: 60px;
    }

    .carousel .container, .carousel .fluid-container {
      position: relative;
      z-index: 9;
    }

    .carousel-control {
      height: 80px;
      margin-top: 0;
      font-size: 120px;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
      background-color: transparent;
      border: 0;
      z-index: 10;
    }

    .carousel .item {
      height: 500px;
    }

    .carousel img {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 500px;
    }

    .carousel-caption {
      background-color: transparent;
      position: static;
      max-width: 550px;
      padding: 0 20px;
      margin-top: 200px;
    }

    .carousel-caption h1, .carousel-caption .lead {
      margin: 0;
      line-height: 1.25;
      color: #fff;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }

    .carousel-caption .btn {
      margin-top: 10px;
    }

    .featurette-divider {
      margin: 80px 0; /* Space out the Bootstrap <hr> more */
    }

    .featurette {
      overflow: hidden; /* Vertically center images part 2: clear their floats. */
    }

    .featurette-heading {
      font-size: 50px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -1px;
    }

    footer {
      border-top: 1px solid #EEE;
      padding: 1em 0.5em;
    }
    </style>

  </head>

  <body>
    <div class="navbar-wrapper">
      <div class="container-fluid">

        <div class="navbar navbar-inverse">
          <div class="navbar-inner">
            <a class="brand" href="#">Hackeriet Nettlaug</a>
            <div class="nav-collapse collapse">
              <ul class="nav">
                <li><a href="./">Home</a></li>
                <li><a href="about">Join us</a></li>
                <li><a href="om">Bli medlem</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div><!-- /.navbar-inner -->
        </div><!-- /.navbar -->

      </div> <!-- /.container -->
    </div><!-- /.navbar-wrapper -->

      <!--# if expr="$file = index" --> 

        <div id="myCarousel" class="carousel slide">
          <div class="carousel-inner">
            <!--# include virtual="dist/slides/2.html" -->
          </div>
          
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>

      <!--# endif -->

    <div class="container-fluid">

      <!--# block name="404" -->
        <div class="featurette">
          <h2 class="featurette-heading">Oh noooooess! <span class="muted">sssh, i'm hiding.</span></h2>
          <p class="lead">
            It seems your playing hide n' seek with the requested page.
            You should look somewhere else!
          </p>
        </div>
      <!--# endblock --> 

      <!--# include virtual="dist/page/$file.html" stub="404" -->

      <footer>
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>&copy; Copyleft, do whatever you want..., but be nice :)</p>
      </footer>

    </div>

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
      !function ($) {
        $(function(){
          // carousel demo
          $('#myCarousel').carousel()
        })
      }(window.jQuery)
    </script>
  </body>
</html>