<nav>
  <a href="#maincode">Maincode</a>
  <a href="#whatis">What is #Maincode?</a>
  <a href="#participate">How to participate?</a>
  <a href="#happening">What's happening?</a>
  <a href="#costs">Costs and price?</a>
  <a href="#sponsorus">Sponsor us</a>
</nav>
<button class="toggle-nav entypo-menu"></button>
<div class="wrapper">
  <section id="maincode">
    <article>
      <h1>Maincode</h1>
      <p>Welcome to #Maincode! You're a web-dev? A web-designer? From around Frankfurt? Awesome, you found the right spot to make your dreams come true.</p>
      <p>Already excited and intersted to hear more? Nice, go on and scroll down.</p>
    </article>
  </section>
  <section id="whatis">
    <article>
      <h1>What is #Maincode?</h1>
      <p>First of all it is for developers and designers around Frankfurt. It's a hackday with different topics each time. <a href="https://kevingimbel.com">Kevin</a>, <a href="http://timpietrusky.com">Tim</a> and <a href="http://myxotod.de">Max</a> invented this event to share experience and have a nice time together with other internet geeks.</p>
      <p>The event takes place at different locations each time. Even more excited to take part? Scroll down.</p>
    </article>
  </section>
  <section id="participate">
    <article>
      <h1>How to participate?</h1>
      <p>We'll let you know on this website and you can sign up for a newsletter which will keep you informed.</p>
    </article>
  </section>
  <section id="happening">
    <article>
      <h1>What's happening?</h1>
      <p>Each hackday has it own topic. You can sign up with your friends or alone and build small teams at the location. After a quick introduction of the staff you're ready to go to design and program a nice app about the given topic. You or your team has 24 hours to get the app running or at least a prototype of it.</p>
      <p>If the time is over, everyone can choose freely to present his app.</p>
    </article>
  </section>
  <section id="costs">
    <article>
      <h1>Costs and price?</h1>
      <p>To let #Maincode grow, each hackday will cost a view coins but will provide you with other cool geeks, a cool location and at least some equipment to get started.</p>
      <p>If we are able to get some sponsors or money, we will defenitely give out prices to the best app after 24 hours.</p>
    </article>
  </section>
  <section id="sponsorus">
    <article>
      <h1>Sponsor us</h1>
      <p>You got some items or money to provide the winners? Perfect! Sponsor our #Maincode events and make our devs and designers happy :)</p>
      <p>Just drop a line to <a href="mailto:#">sponsor@maincode.io</a>.</p>
    </article>
  </section>
</div>

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700);
@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

$color-alpha: #eeeeee;
$color-beta: #2ecc71;
$color-gamma: #333333;

@mixin cover($i, $url) {
  &:nth-child(#{$i}) {
    &:after {
      background-image: url($url);
    }
  }
}

* {
  border: 0;
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  color: $color-gamma;
}

h1 {
  text-align: center;
  font-weight: 300;
  font-size: 2em;
  border-bottom: 2px solid $color-beta;
  margin-bottom: 1em;
}

a {
  text-decoration: none;
  color: $color-beta;
  border-bottom: 1px solid $color-gamma;
  transition: all .4s ease;
  &:hover {
    color: $color-gamma;
    border-bottom: 1px solid $color-beta;
  }
}

nav {
  width: 30%;
  height: 100%;
  position: fixed;
  left: -30%;
  background-image: url(http://r.myxotod.de/codepen.io/maincode/ubuntu-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  a {
    display: block;
    width: 100%;
    padding: 2em;
    box-sizing: border-box;
    background: rgba($color-gamma, 0.5);
    border-bottom: 2px solid $color-beta;
    text-transform: uppercase;
    &:hover {
      border-bottom: 2px solid $color-beta;
      background: rgba($color-alpha, 0.5);
    }
  }
}

.toggle-nav {
  font-size: 3em;
  background: transparent;
  color: $color-beta;
  line-height: 1em;
  padding-left: 0.2em;
  padding-right: 0.2em;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0%;
  z-index: 100;
  background: $color-alpha;
}

.wrapper {
  position: relative;
  box-shadow: 0 0 1em $color-gamma;
  section {
    position: relative;
    background: $color-alpha;
    article {
      width: 50%;
      margin: 0 auto;
      padding: 2em 0;
      p {
        margin-bottom: 1em;
        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
    &:after {
      content: "";
      display: block;
      position: relative;
      background-attachment: fixed;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      height: 30em;
      width: 100%;
    }
    @include cover(1, "http://cdn.eyeem.com/thumb/h/800/24778877c8ba7a9bb6318b660b8a2e47d374d43f-1370105135");
    @include cover(2, "http://cdn.eyeem.com/thumb/h/800/4f488e1db3960b9ba1246125e8181e7741564b62-1370076361");
    @include cover(3, "http://cdn.eyeem.com/thumb/h/800/8484e67f9b7bef4b2e00ddf0f353f036b4b0e9e6-1348396364");
    @include cover(4, "http://cdn.eyeem.com/thumb/h/800/704e38b95cb808b0df338a9661007f93ce3bed98-1348321831");
    @include cover(5, "http://cdn.eyeem.com/thumb/h/800/20b3440516db8c8df4490b17ba3109d91c07f839-1348321287");
    @include cover(6, "http://cdn.eyeem.com/thumb/h/800/d90429ba407c439beae9d23e468dc9c1deb7efdd-1348357036");
  }
}

@media only screen and (max-width: 600px) {
  .wrapper {
    section {
      article {
        width: 80%;
      }
      &:after {
        height: 15em;
      }
    }
  }
}

$(document).ready(function() {
  var navOpen = false;
  $('.toggle-nav').click(function() {
    if (navOpen == false) {
      $('.wrapper').css("position", "absolute").animate({
        left: "30%"
      });
      $(this).animate({
        left: "30%"
      }).removeClass("entypo-menu").addClass("entypo-cancel");
      $('nav').animate({
        left: "0%"
      });
      navOpen = true;
    } else {
      $('.wrapper').animate({
        left: "0%"
      }, function() {
        $(this).css("position", "relative");
      });
      $(this).animate({
        left: "0%"
      }).removeClass("entypo-cancel").addClass("entypo-menu");
      $('nav').animate({
        left: "-30%"
      });
      navOpen = false;
    }
  });
  
  // Smooth Anchor Scrolling
  $('a').click(function(){
    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500);
    return false;
  });
});