index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Music &middot; Urturn</title>
    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-11892994-8']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

      </script>
    <link rel="stylesheet" type="text/css" href="stylesheets/all.css">
  </head>

  <body>

    <header class="site-header">
      <div class="main-wrapper">
        <div class="cf">
          <a href="http://urturn.com" class="logo pull-left" title="Urturn">Urturn</a>
        </div>

        <div class="cf in-b">
          <h1>Go Viral With Your Fans In A Minute</h1>
          <a href="http://urturn.com/factory" class="pull-right get-started-link">Get Started ></a>
        </div>
      </div>
    </header>

    <section class="artists artist-4">
      <div class="artists__nav-container">
        <ul class="artists__nav nav--fit nav main-wrapper">
          <li><a href="#highlight_artist" data-key="1" class="artist__name">Britney Spears</a></li>
          <li><a href="#highlight_artist" data-key="2" class="artist__name">Green Day</a></li>
          <li><a href="#highlight_artist" data-key="3" class="artist__name">Miley Cyrus</a></li>
          <li><a href="#highlight_artist" data-key="4" class="artist__name is-selected">Kendrick Lamar</a></li>
          <li><a href="#highlight_artist" data-key="5" class="artist__name">Demi Lovato</a></li>
          <li><a href="#highlight_artist" data-key="6" class="artist__name">Ellie Goulding</a></li>
        </ul>
      </div>
      <div class="artist__main-container main-wrapper">
        <div class="artist__picture pull-left in-b"></div>
        <div class="artist__cta pull-left in-b">
          <h2>Be A Good Kid! It's Ur Turn!</h2>
          <p>Made by <a class="artist__link" href="http://www.urturn.com/kendricklamar/gkmc_cover">Kendrick Lamar</a></p>
        </div>
        <div class="artist__campaign in-b pull-right"></div>
      </div>
      <div class="artist__mosaic"></div>
    </section>

    <section class="engagement shift-above shift-below">
      <div class="main-wrapper">
        <h1>Give a voice to your fans! <br />Get incredible engagement and millions of impressions</h1>
        <ul class="engagement__rating horizontal index">
          <li>
            <span class="rating">+30%</span>
            <p>Posts / Views conversion</p>
          </li>
          <li>
            <span class="rating">+50%</span>
            <p>Shares</p>
          </li>
          <li>
            <span class="rating">100%</span>
            <p>Happiness</p>
          </li>
        </ul>
      </div>
    </section>

    <section class="engage-everywhere shift-above">
      <div class="main-wrapper">
        <h1>Engage within your<br />favorite social networks</h1>
        <div class="engage-everywhere__image"></div>
      </div>
    </section>

    <section class="engage-fans shift-above">
      <div class="main-wrapper">
        <h1>It's ur turn, get started now<br />It's fast, easy and free</h1>
        <ul class="step-list horizontal index cf in-b">
          <li class="circle step-list--red pull-left">
            <span>1</span>
          </li>
          <li class="line pull-left"></li>
          <li class="circle">
            <span>2</span>
          </li>
          <li class="line"></li>
          <li class="circle pull-right">
            <span>3</span>
          </li>
        </ul>
        <ul class="step-text-list horizontal index cf in-b">
          <li class="pull-left">Choose how you want<br />to engage</li>
          <li>Share it with your<br />audience</li>
          <li class="pull-right">Let your fan<br />go crazy</li>
        </ul>
        <div class="engage-fans__footer">
          <a href="http://urturn.com/factory" class="giant_button level1_button button">Get started</a>
        </div>
      </div>
    </section>

    <footer class="site-footer">
      <div class="main-wrapper">
        <p>Do you have a killer idea?</p>
        <p>Want to hang out?</p>
        <p>Just want somebody to talk to?</p>
        <ul class="nav">
          <li><a class="icon spaced-right icon-email" href="mailto:music@urturn.com">music@urturn.com</a></li>
          <li><a class="icon spaced-right icon-twitter" href="http://twitter.com/urturnofficial" target="_blank">@urturnofficial</a></li>
        </ul>
      </div>
    </footer>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="javascripts/ui.js"></script>
  </body>
</html>