Generated by SassMeister.com.

SassMeister-input-HTML.haml

%html
  %title
    gna
  %body
    %section#banner
      .row
        %header.page-nav
          %ul.nav-items
            %li.nav-item
              Startups
            %li.nav-item
              Unternehmen
            %li.nav-item
              Crowdfunding
            %li.nav-item
              Rails
            %li.nav-item
              Angular
            %li.nav-item
              Team
            %li.nav-item
              Process
            %li.nav-item
              
        .claim
          %h1.claim--logo
            bitcrowd
          %h2.claim--header
            In the trenches since 2010 and still going strong - aiming for tanztee in 2022
    
    %section.episode#episode-one
      .row
        .dashing
          Startups
    
    %section.episode#episode-two
      .row
        .dashing
          Unternehmen
    
    %section.episode#episode-three
      .row
        wtf
        .dashing
          Crowdfunding
    
    %section.episode#episode-four
      .row
        .dashing
          Rails
    
    %section.episode#episode-five
      .row
        .dashing
          Angular

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.4)
// Compass (v1.0.0.alpha.18)
// ----

#banner
  height: 1000px
  // border: 1px solid red
  background-image: url(http://bitcrowd.net/assets/background-sky-gradient.jpg)
  background-repeat: no-repeat
  background-size: cover
  color: white

.nav-items
  display: block
  margin: 0 auto
  width: 80%
  text-align: center
  line-height: 3em
  //border: 1px solid yellow
  
.nav-item
  display: inline-block
  padding: 0px 20px
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif, sans-serif
  text-rendering: optimizelegibility
  text-transform: uppercase
  
.row
  position: relative
  text-align: center
  // border: 1px solid green
  max-width: 71.25em
  margin-left: auto
  margin-right: auto
  
#claim
  position: relative

.claim--header
  color: #d3d3d4
  font-size: 3em
  
.claim--logo
  //height: 250px
  // hide text
  // text-indent: -7000px
  
  padding: 150px 0 50px
  //border: 1px solid red !important

  
h1, h2
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif, sans-serif
  text-rendering: optimizelegibility
  line-height: 1.3em
  text-transform: uppercase

h1
  height: 125px
  font-size: 3em
  font-weight: 700
  text-shadow: 0 1px 3px rgba(0,0,0,0.5)

.dashing
  position: absolute
  top: 50% 
  margin-top: -0.5em
  border: 1px solid grey
  
.episode
  height: 1000px
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif, sans-serif
  text-rendering: optimizelegibility
  font-size: 3em
  
#episode-one
  background: #FFFFFF
  color: #333333
#episode-two
  background: #333333
  color: #CCCCCC
#episode-three
  background: #8C3130
  color: #CCCCCC
#episode-four
  background: #CCCCCC
  color: #8C3130
#episode-five
  background: #FFFFFF
  color: #333333

SassMeister-output.css

#banner {
  height: 1000px;
  background-image: url(http://bitcrowd.net/assets/background-sky-gradient.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}

.nav-items {
  display: block;
  margin: 0 auto;
  width: 80%;
  text-align: center;
  line-height: 3em;
}

.nav-item {
  display: inline-block;
  padding: 0px 20px;
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif, sans-serif;
  text-rendering: optimizelegibility;
  text-transform: uppercase;
}

.row {
  position: relative;
  text-align: center;
  max-width: 71.25em;
  margin-left: auto;
  margin-right: auto;
}

#claim {
  position: relative;
}

.claim--header {
  color: #d3d3d4;
  font-size: 3em;
}

.claim--logo {
  padding: 150px 0 50px;
}

h1, h2 {
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif, sans-serif;
  text-rendering: optimizelegibility;
  line-height: 1.3em;
  text-transform: uppercase;
}

h1 {
  height: 125px;
  font-size: 3em;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.dashing {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  border: 1px solid gray;
}

.episode {
  height: 1000px;
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif, sans-serif;
  text-rendering: optimizelegibility;
  font-size: 3em;
}

#episode-one {
  background: white;
  color: #333333;
}

#episode-two {
  background: #333333;
  color: #cccccc;
}

#episode-three {
  background: #8c3130;
  color: #cccccc;
}

#episode-four {
  background: #cccccc;
  color: #8c3130;
}

#episode-five {
  background: white;
  color: #333333;
}

SassMeister-rendered.html

<html>
  <title>
    gna
  </title>
  <body>
    <section id='banner'>
      <div class='row'>
        <header class='page-nav'>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-2.newrelic.com","errorBeacon":"jserror.newrelic.com","licenseKey":"44dddd5607","applicationID":"2515490","transactionName":"Jl5bQEIOCQpWFk5jXwtQQUZRTi0SXggiX1sVWFlRQiAVFhw0LmNiRQ==","queueTime":78,"applicationTime":40,"ttGuid":"","agentToken":null,"agent":"js-agent.newrelic.com/nr-314.min.js","extra":""}</script>
<script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function a(b,c,d){function e(f){if(!c[f]){var g=c[f]={exports:{}};b[f][0].call(g.exports,function(a){var c=b[f][1][a];return e(c?c:a)},g,g.exports,a,b,c,d)}return c[f].exports}for(var f=0;f<d.length;f++)e(d[f]);return e}({"4O2Y62":[function(a,b){function c(a,b){var c=d[a];return c?c.apply(this,b):(e[a]||(e[a]=[]),void e[a].push(b))}var d={},e={};b.exports=c,c.queues=e,c.handlers=d},{}],handle:[function(a,b){b.exports=a("4O2Y62")},{}],YLUGVp:[function(a,b){function c(){var a=m.info=NREUM.info;if(a&&a.agent&&a.licenseKey&&a.applicationID){m.proto="https"===l.split(":")[0]||a.sslForHttp?"https://":"http://",g("mark",["onload",f()]);var b=i.createElement("script");b.src=m.proto+a.agent,i.body.appendChild(b)}}function d(){"complete"===i.readyState&&e()}function e(){g("mark",["domContent",f()])}function f(){return(new Date).getTime()}var g=a("handle"),h=window,i=h.document,j="addEventListener",k="attachEvent",l=(""+location).split("?")[0],m=b.exports={offset:f(),origin:l};i[j]?(i[j]("DOMContentLoaded",e,!1),h[j]("load",c,!1)):(i[k]("onreadystatechange",d),h[k]("onload",c)),g("mark",["firstbyte",f()])},{handle:"4O2Y62"}],loader:[function(a,b){b.exports=a("YLUGVp")},{}]},{},["YLUGVp"]);</script>
          <ul class='nav-items'>
            <li class='nav-item'>
              Startups
            </li>
            <li class='nav-item'>
              Unternehmen
            </li>
            <li class='nav-item'>
              Crowdfunding
            </li>
            <li class='nav-item'>
              Rails
            </li>
            <li class='nav-item'>
              Angular
            </li>
            <li class='nav-item'>
              Team
            </li>
            <li class='nav-item'>
              Process
            </li>
            <li class='nav-item'></li>
          </ul>
        </header>
        <div class='claim'>
          <h1 class='claim--logo'>
            bitcrowd
          </h1>
          <h2 class='claim--header'>
            In the trenches since 2010 and still going strong - aiming for tanztee in 2022
          </h2>
        </div>
      </div>
    </section>
    <section class='episode' id='episode-one'>
      <div class='row'>
        <div class='dashing'>
          Startups
        </div>
      </div>
    </section>
    <section class='episode' id='episode-two'>
      <div class='row'>
        <div class='dashing'>
          Unternehmen
        </div>
      </div>
    </section>
    <section class='episode' id='episode-three'>
      <div class='row'>
        wtf
        <div class='dashing'>
          Crowdfunding
        </div>
      </div>
    </section>
    <section class='episode' id='episode-four'>
      <div class='row'>
        <div class='dashing'>
          Rails
        </div>
      </div>
    </section>
    <section class='episode' id='episode-five'>
      <div class='row'>
        <div class='dashing'>
          Angular
        </div>
      </div>
    </section>
  </body>
</html>