Pre-rendered source of Floating Contrast

<div class="floating"></div>
<div role="main">
  <div class="contrast-helper" style="background-image:url(/assets/example/contrast.jpg)">
    <header class="banner">
      <div class="mid-align">
        <h1>
          One defining choice.<br />Only at Melbourne
        </h1>
        <a class="button-hero-inverse" href="">Graduate Study at Melbourne</a>
      </div>
    </header>
  </div>
  <div class="tabbed-nav" data-tabbed="" id="nav">
    <div class="full-width">
      <nav role="tablist">
        <a href="#study" role="tab">Study</a><a href="#today" role="tab">Today</a><a href="#research" role="tab">Research</a><a href="#about" role="tab">About</a>
      </nav>
    </div>
    <div class="tab" id="study" role="tabpanel">
      <section class="lead">
        <p>
          To compete on the world stage, you need a world-standard education. At the University of Melbourne, you’ll gain an internationally recognised degree that will open doors to an outstanding future.
        </p>
      </section>
      <ul class="pathfinder-3">
        <li>
          <a href=""><strong><span>Undergraduate</span></strong>
            <p>
              An undergraduate course is your first degree at university. Search here if you’re a secondary school student, or looking to start your first degree at University.
            </p>
            <span class="button-small brand">View courses</span></a>
        </li>
        <li>
          <a href=""><strong><span>Graduate coursework</span></strong>
            <p>
              Our graduate courses are ideal if you’re looking to continue your professional development, change your career or pursue a passion.
            </p>
            <span class="button-small brand">View courses</span></a>
        </li>
        <li>
          <a href=""><strong><span>PhD & research programs</span></strong>
            <p>
              This challenging and dynamic degree involves a sustained piece of independent research and writing examining a specific problem, issue or topic.
            </p>
            <span class="button-small brand">View courses</span></a>
        </li>
      </ul>
      <section class="alt">
        <div class="half">
          <section>
            <div class="video">
              <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/ngG3raoqSxY" title="video player" width="560"></iframe>
            </div>
          </section>
          <section>
            <h1>
              Create your own Melbourne
            </h1>
            <p>
              The Melbourne experience is more than just lectures and study sessions. As a University of Melbourne student, you can get involved in the many campus activities on offer, enjoy amazing new experiences and make lifelong friends along the way.
            </p>
          </section>
        </div>
      </section>
    </div>
    <div class="tab" id="today" role="tabpanel">
      <ul class="block-listing">
        <li class="news">
          <div class="block-container">
            <strong>Dicunt audiam aliquam eu sed, te mei decore</strong>
            <p>
              Ex debet appellantur eam, nam an case nemore mnesarchum. Sed porro iuvaret in, per eu natum conceptam, nam at essent petentium. Qui ut mucius fuisset oporteat, mei ea malis offendit periculis, mazim.
            </p>
            <div class="meta">
              <time class="meta-left" datetime="2015-02-30"> 30 Feb 2015</time><em class="meta-right">News</em>
            </div>
          </div>
        </li>
        <li class="event double" style="background-image: url(http://placeimg.com/680/590/arch);">
          <a class="block-container" href=""><strong>Apeirian nominati partiendo</strong>
            <p>
              Ullum ornatus intellegam in sea
            </p>
            <span class="button-hero-inverse" href=""> Call to Action</span></a>
        </li>
        <li class="event">
          <div class="block-container">
            <div class="when range">
              <time datetime="2014-03-18"> 18 March</time><time datetime="2014-05-04"> 4 May 2014</time>
            </div>
            <strong>Sed porro iuvaret in 2014</strong><img alt="" src="http://placeimg.com/640/320/animals" />
            <div class="meta">
              <span class="meta-left">Location</span><em class="meta-right">Event</em>
            </div>
          </div>
        </li>
        <li class="news">
          <div class="block-container">
            <strong>Cu idque nulla eos, modus sensibus constituam et quo. Ne mel duis simul, quo ad euismod partiendo</strong>
            <p>
              Ex debet appellantur eam, nam an case nemore mnesarchum. Sed porro iuvaret in, per eu natum conceptam, nam at essent petentium. Dicunt audiam aliquam eu sed, te mei decore maiorum.
            </p>
            <div class="meta">
              <time class="meta-left" datetime="2015-02-30"> 30 Feb 2015</time><em class="meta-right">News</em>
            </div>
          </div>
        </li>
        <li class="news">
          <a class="block-container" href=""><img alt="" src="http://placeimg.com/640/320/tech" /><strong>Apeirian nominati partiendo vel at, qui cu saperet imperdiet necessitatibus</strong>
            <p>
              Cu nam integre copiosae lobortis. Qui ut mucius fuisset oporteat, mei ea malis
            </p>
            <div class="meta">
              <time class="meta-left" datetime="2015-02-30"> 30 Feb 2015</time><em class="meta-right">News</em>
            </div>
          </a>
        </li>
        <li class="event">
          <div class="block-container">
            <div class="when">
              Wednesday<time datetime="2014-05-28"> 28 May 2014</time>5:00 pm - 1:00 am
            </div>
            <strong>Dicunt audiam aliquam eu sed</strong><img alt="" src="http://placeimg.com/640/320/nature" />
            <div class="meta">
              <span class="meta-left">Location</span><em class="meta-right">Event</em>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="tab" id="research" role="tabpanel">
      <section class="lead">
        <p>
          The University of Melbourne is a globally engaged, comprehensive, research-intensive university uniquely positioned to respond to the major social, economic and environmental challenges of our time.
        </p>
      </section>
      <ul class="pathfinder-3">
        <li>
          <a href=""><strong><span>Faculty and graduate school research areas</span></strong>
            <p>
              We have established a series of cross-disciplinary research institutes and our faculties and graduate schools are affiliated with many research centres, institutes and hospitals, placing us at the heart of biomedical research in Victoria and Australia.
            </p>
            <span class="button-small brand">View courses</span></a>
        </li>
        <li>
          <a href=""><strong><span>Research Institutes</span></strong>
            <p>
              The University of Melbourne is Australia's No. 1 university and a national leader for research income and social impact indicators.
            </p>
            <span class="button-small brand">View courses</span></a>
        </li>
        <li>
          <a href=""><strong><span>Research Centres</span></strong>
            <p>
              The University of Melbourne has discipline specific faculties, and is affiliated with many research institutes and hospitals, putting the University at the heart of biomedical research in Melbourne and Australia.
            </p>
            <span class="button-small brand">View courses</span></a>
        </li>
      </ul>
      <section class="alt">
        <div class="half">
          <section>
            <div class="video">
              <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/ngG3raoqSxY" title="video player" width="560"></iframe>
            </div>
          </section>
          <section>
            <h1>
              Research at The University of Melbourne
            </h1>
            <p>
              Every faculty and graduate school actively engages in research, with many affiliated with hospitals, other research entities, or one of our many cross-disciplinary research institutes.
            </p>
            <ul>
              <li>
                <a href="">Learn more about Research at Melbourne</a>
              </li>
              <li>
                <a href="">Meet our Graduate Researchers</a>
              </li>
            </ul>
          </section>
        </div>
      </section>
    </div>
    <div class="tab" id="about" role="tabpanel">
      <section class="lead">
        <p>
          Established in 1853, the University of Melbourne makes distinctive contributions to society in research, learning and teaching and engagement.
        </p>
      </section>
    </div>
  </div>
</div>