<div class="ct-wrapper scroll">
  {{! Nav bar }}
  <div class="ct-bar ct-bar--active anim-fade anim--delay-1">
    <div class="ct-bar__left">
      {{#link-to 'directory.creative'}}
        <figure>
          <img src="https://s3-us-west-2.amazonaws.com/twitch-creative-assets/public/TwitchCreativeLogo_Big.png" style="width: 198px; min-width: 198px; height: 36px" alt="Twitch Creative">
        </figure>
      {{/link-to}}
    </div>
    <div class="ct-bar__right">
      <div class="ct-bar__item balloon-wrapper">
        {{#link-to 'directory.creative'}}
          {{i18n "Watch"}}
        {{/link-to}}
      </div>
      <div class="ct-bar__item balloon-wrapper">
        <a href="http://help.twitch.tv/customer/portal/articles/2176641-creative-faq" class="balloon__link" target="_blank" rel="noopener noreferrer">
          {{t 'general.common.faq'}}
        </a>
      </div>
      <div class="ct-bar__item balloon-wrapper">
        <a href="mailto:creativehelp@twitch.tv" class="balloon__link">
          {{i18n "Contact"}}
        </a>
      </div>
    </div>
  </div>
  {{! Header content }}
  <div class="tse-scroll-content">
    <div class="ct-shadow-grey-lg pd-t-10 pd-b-10">
      <div class="container align-center">
        {{! pencil }}
        {{! TODO: Inline CSS here to do a bug fix without a Styles release. Will be included in a Styles release next. }}
        <figure class="container ct-layer anim-fade anim--delay-1" alt="Twitch Creative Pencil" style="width: 234px; height: 300px">
          <img class="anim-float anim--delay-1" src="https://s3-us-west-2.amazonaws.com/twitch-creative-assets/public/TwitchCreative_Pencil_Shadow.png">
          <img class="anim-float anim--delay-1" src="https://s3-us-west-2.amazonaws.com/twitch-creative-assets/public/TwitchCreative_Glow_Purple.png">
          <img class="anim-float anim--delay-1" src="https://s3-us-west-2.amazonaws.com/twitch-creative-assets/public/TwitchCreative_Dots1.png">
          <img class="anim-float anim--delay-2" src="https://s3-us-west-2.amazonaws.com/twitch-creative-assets/public/TwitchCreative_Dots2.png">
          <img class="anim-float anim--delay-3" src="https://s3-us-west-2.amazonaws.com/twitch-creative-assets/public/TwitchCreative_Dots3.png">
          <div class="anim-fade anim--delay-2">
            <img class="anim-float" src="https://s3-us-west-2.amazonaws.com/twitch-creative-assets/public/TwitchCreative_Pencil.png">
          </div>
        </figure>
        {{! header }}
        <figure class="mg-t-5 mg-b-1 container" style="width: 413px; height: 23px">
          <img src="https://s3-us-west-2.amazonaws.com/twitch-creative-assets/public/TwitchCreativeHeader_1.png" alt="Watch Creativity Happen">
        </figure>
        <figure class="container" style="width: 386px; height: 12px">
          <img src="https://s3-us-west-2.amazonaws.com/twitch-creative-assets/public/TwitchCreativeHeader_2.png" alt="Livestream what you do best to the world">
        </figure>
      </div>
    </div>
    {{! Everything Else}}
    <div class="brick brick--theme-purple brick--sharp pd-b-10">
      {{! TODO: Inline CSS here to do a bug fix without a Styles release. Will be included in a Styles release next. }}
      <div class="container" style="width: 768px">
        <div class="aspect">
          <div class="js-player" id="player">
            {{twitch-player2
              playerName='vod'
              video='v94933288'
              showTheatre=false
              isTheatreMode=false
              canGenerateClips=false
              showCompanionAds=false
            }}
          </div>
        </div>
        <div class="anim-fade anim--delay-2">
          <div class="align-center mg-t-6 mg-b-6">
            <h3 class="ct-type-1 ct-type-white">Share your passion with an engaged audience</h3>
            <p class="ct-type-p align-left">Twitch Creative is a place to share your creative process live with a like-minded audience. From robotics to cooking, sculpting to game development, music to drawing there are so many unique forms of art that our creators share on Twitch Creative. To broadcast, all you need is a computer, a webcam, and a project to share. You can find basic articles on how to <a class="ct-type-white" href="http://help.twitch.tv/customer/portal/topics/301257-getting-started/articles" target="_blank" rel="noopener noreferrer">get started here</a>. To start being Creative, set your currently playing game to “Creative”, add a #hashtag to your title to join a community, and go live with <a class="ct-type-white" href="http://help.twitch.tv/customer/portal/topics/358640-broadcast-hardware-and-software/articles">broadcasting software.</a></p>
          </div>
          <a href="/directory/game/Creative/communities">
            <div class="ct-shadow-grey-lg brick brick--theme-purple brick--pd-none brick--overlay">
              <figure>
                <img src="https://s3-us-west-2.amazonaws.com/twitch-creative-assets/public/TwitchCreative_Browser.png">
                <img src="https://s3-us-west-2.amazonaws.com/twitch-creative-assets/public/TwitchCreative_Preview_2.png">
              </figure>
              <div class="brick__overlay">
                <div class="button button--large">Learn About Communities</div>
              </div>
            </div>
          </a>
          <div class="align-center mg-t-6">
            <h3 class="ct-type-1 ct-type-white">Discover communities of unique artists and makers</h3>
            <p class="ct-type-p align-left">A Community is a place for Creative broadcasters to create an identity for what they do. Viewers and broadcasters are able to browse through active Communities, discover new content, and find people to follow. Don’t see a Community that represents your passion? You can also create your own Community by submitting a customized banner which will be reviewed by Twitch staff for inclusion in our list of Communities.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="anim-fade anim--delay-2">
      <div class="brick ct-color-white brick--sharp pd-t-10 pd-b-10">
        {{! TODO: Inline CSS here to do a bug fix without a Styles release. Will be included in a Styles release next. }}
        <div class="container align-center" style="width: 768px">
          <h3 class="ct-type-1 ct-type-grey">Bob Ross, Julia Child, and robots that shoot fire</h3>
          <p class="ct-type-p ct-type-grey-light align-left">We officially launched Twitch Creative in October 2015 with an all episodes marathon of “The Joy of Painting” with Bob Ross. <a href="https://blog.twitch.tv/monday-night-is-bob-ross-night-35bff8b8171f#.855vk8n36" target="_blank" rel="noopener noreferrer">We weren’t entirely sure what would happen</a>, but we knew that Bob Ross would be loved by our Creative community. Working with the great people at <a href="http://www.janson.com/" target="_blank" rel="noopener noreferrer">Janson Media</a> and <a href="https://www.bobross.com/" target="_blank" rel="noopener noreferrer">Bob Ross Inc</a>, “The Joy of Painting” has brought in <strong>5.8M viewers</strong> since the channel started. The incredible reception to Bob Ross also inspired us to create a 24/7 food channel to celebrate cooking, baking, and all things food. The all-episode marathon of Julia Child’s “The French Chef” and our library of food shows have brought in <strong>5.4M viewers.</strong></p>
          <div class="tower tower--xs-1-1 tower--sm-1-3 mg-t-3 tower--bleed tower--gutter-sm">
            <div>
              <div class="tower tower--xs-1-2 tower--sm-1-1 flex--verticalCenter mg-t-1">
                <figure><img src="https://s3-us-west-2.amazonaws.com/twitch-creative-assets/public/BobRoss.png"></figure>
                <p class="ct-type-p ct-type-grey-light align-left"><strong>Start your week with a happy accident.</strong> Catch a mini-marathon of “The Joy Of Painting” on <a href="https://www.twitch.tv/bobross" target="_blank" rel="noopener noreferrer">twitch.tv/bobross</a> every Monday.</p>
              </div>
            </div>
            <div>
              <div class="tower tower--xs-1-2 tower--sm-1-1 flex--verticalCenter mg-t-1">
                <figure><img src="https://s3-us-west-2.amazonaws.com/twitch-creative-assets/public/TwitchCreativeMakerFaire.png"></figure>
                <p class="ct-type-p ct-type-grey-light align-left"><strong>Make something great.</strong> Follow <a href="https://www.twitch.tv/make" target="_blank" rel="noopener noreferrer">twitch.tv/make</a> for the best inspiration from the DIY community, including live Maker Faire coverage.</p>
              </div>
            </div>
            <div>
              <div class="tower tower--xs-1-2 tower--sm-1-1 flex--verticalCenter mg-t-1">
                <figure><img src="https://s3-us-west-2.amazonaws.com/twitch-creative-assets/public/JuliaChild.png"></figure>
                <p class="ct-type-p ct-type-grey-light align-left"><strong>Love the nom noms?</strong> Tune into  24/7 food content on <a href="https://www.twitch.tv/food" target="_blank" rel="noopener noreferrer">twitch.tv/food</a>, including a marathon of Julia Child’s “The French Chef.”</p>
              </div>
            </div>
          </div>
          <a href="mailto:creativehelp@twitch.tv" class="button button--large mg-t-3">Contact us</a>
        </div>
      </div>
      <div class="ct-color-white-dark pd-t-10 pd-b-10">
        {{! TODO: Inline CSS here to do a bug fix without a Styles release. Will be included in a Styles release next. }}
        <div class="container align-center" style="width: 768px">
          <h3 class="ct-type-1 ct-type-grey">Share with just a computer and your project</h3>
          <p class="ct-type-p ct-type-grey-light align-left">It's super easy to start sharing your work on Twitch Creative. All you need is a computer and whatever project you're working on. Configure your settings on your <a href="/dashboard" target="_blank" rel="noopener noreferrer">dashboard</a> to <strong>Playing Creative</strong>, add a <strong>#hashtag</strong> to your title to join a Community, and go live with software like <a href="https://obsproject.com/" target="_blank" rel="noopener noreferrer">Open Broadcaster Software</a>.</p>
          <a href="http://s.jtvnw.net/jtv_user_pictures/hosted_images/StreamingGuidePC.pdf" class="button button--large mg-t-3">Learn how to broadcast</a>
        </div>
      </div>
      <div class="brick brick--sharp ct-color-white pd-t-10 pd-b-10">
        {{! TODO: Inline CSS here to do a bug fix without a Styles release. Will be included in a Styles release next. }}
        <div class="container" style="width: 768px">
          <h3 class="ct-type-1 ct-type-grey align-center">Frequently Asked Questions</h3>
          <ul class="ct-type-p mg-t-3 ct-type-grey-light">
            <li>
              <div class="strong mg-t-2">Q. What is Twitch?</div>
              A. Twitch is the world’s leading live social video platform and community for gamers with 9.6M daily active users with an average of 106 minutes watched per person per day and 1.7+ million unique broadcasters per month.
            </li>
            <li>
              <div class="strong mg-t-2">Q. What is Twitch Creative?</div>
              A. At Twitch, the goal is to support broadcasters that share their passion, whether they are gaming or being Creative. Broadcasters can share the process of their creations on Twitch Creative. From painting to music production, cooking to robotics, you can find a non exhaustive list of approved examples and general questions on the <a href="http://help.twitch.tv/customer/portal/articles/2176641-creative-faq"  target="_blank" rel="noopener noreferrer">Creative FAQ</a>.
            </li>
            <li>
              <div class="strong mg-t-2">Q. What is the Spotlight on Twitch Creative?</div>
              A. At the top of Twitch Creative there is a carousel featuring broadcasters from the directory curated by staff. This list changes to highlight creators in all media, whether or not they have a partnership.
            </li>
            <li>
              <div class="strong mg-t-2">Q. What is a Community?</div>
              A. There are many different forms of art shared on Twitch Creative and we want to make sure users can find the content that they want to watch. When broadcasting, add a hashtag in your title to group your content together in a category to aid with discoverability. Users can also submit a custom Community banner which can be added to a list of autocompleted.
            </li>
          </ul>
        </div>
      </div>
      {{site-footer class='brick--theme-dark'}}
    </div>
  </div>
</div>

{{outlet}}
