webslides
Version:
Making HTML presentations easy
389 lines (362 loc) • 16.1 kB
HTML
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/webslides/webslides
Thanks!
-->
<!-- SEO -->
<title>Netflix's Culture · WebSlides</title>
<meta name="description" content="Patty McCord wrote the document called 'Netflix Culture: Freedom & Responsibility'.It's one of the most important documents ever to come out of Silicon Valley.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
<!-- CSS Base -->
<link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<!-- EDIT -->
<meta property="og:url" content="http://your-url.com/permalink">
<!-- EDIT -->
<meta property="og:type" content="article">
<meta property="og:title" content="WebSlides: Netflix's Culture" />
<meta property="og:description" content="Patty McCord created Netflix's culture. This is a homage.">
<!-- EDIT -->
<meta property="og:updated_time" content="2017-04-16T16:24:56">
<!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" >
<!-- EDIT -->
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="429">
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides">
<!-- EDIT -->
<meta name="twitter:creator" content="@jlantunez">
<!-- EDIT -->
<meta name="twitter:title" content="WebSlides: Netflix's Culture">
<!-- EDIT -->
<meta name="twitter:description" content="Patty McCord created Netflix's culture. This is a homage.">
<!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg">
<!-- EDIT -->
<!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
<link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
<link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
</head>
<body>
<header role="banner">
<nav role="navigation">
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
<ul>
<li class="github">
<a rel="external" href="https://github.com/webslides/webslides" title="Github">
<svg class="fa-github">
<use xlink:href="#fa-github"></use>
</svg>
<em>WebSlides</em>
</a>
</li>
<li class="twitter">
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
<em>@WebSlides</em>
</a>
</li>
<!-- <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
</ul>
</nav>
</header>
<main role="main">
<article id="webslides">
<!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
-->
<section class="bg-red">
<span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800')"></span>
<!--.wrap = container (width: 90%) -->
<div class="wrap aligncenter">
<h1>
<strong>Netflix's Culture</strong>
</h1>
<p class="text-symbols">* * * </p>
<p><a class="button ghost" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free">
<svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg> WebSlides</a>
</p>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap size-50 bg-white">
<h2>
<svg class="fa-info-circle large">
<use xlink:href="#fa-info-circle"></use>
</svg>
<strong>A bit of context</strong>
</h2>
<hr>
<p><a href="http://firstround.com/review/The-woman-behind-the-Netflix-Culture-doc/">Patty McCord</a> created <a href="https://jobs.netflix.com/life-at-netflix">Netflix's culture</a>. She wrote the document called <strong>"Netflix Culture: Freedom & Responsibility."</strong> (2009). So far, it's been shared over 16 million times on <a href="https://www.slideshare.net/reed2001/culture-1798664">Slideshare</a> and has been called "the most important document ever to come out of the Valley" by Sheryl Sandberg.</p>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<h3><strong>We seek excellence</strong></h3>
</div>
<div class="column">
<p class="text-intro">We value candor, transparency, and courage. <strong>We embrace context and avoid control</strong>, seeking insight and understanding to make sound decisions.
</p>
</div>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-red">
<span class="background" style="background-image:url('https://source.unsplash.com/BYYu5nvQoUM/1600x800')"></span>
<!--.wrap = container (width: 90%) -->
<div class="wrap aligncenter fadeInUp">
<h3><strong>Diversity & Inclusiveness</strong></h3>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50">
<h2><strong>7 Aspects</strong> of our Culture</h2>
<hr>
<ol class="text-cols">
<li><strong>Values are what we Value</strong></li>
<li>High Performance</li>
<li>Freedom & Responsibility</li>
<li>Context, not Control</li>
<li>Highly Alined, Loosely Coupled</li>
<li>Pay Top of Market</li>
<li>Promotions & Development</li>
</ol>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50 bg-white">
<h3><strong>1/7 Values are what we value</strong></h3>
<p class="text-intro">Make your values mean something.</p>
<hr>
<p>Many companies have nice sounding value statements displayed in the lobby. Enron, whose leaders went to jail, and which went <strong>bankrupt from <a href="https://www.youtube.com/watch?v=jrEf8uabe7E">fraud</a></strong> had these values displayed in their lobby: <strong>integrity, communication, respect, and excellence</strong>.</p>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50">
<h2><strong>9 Behaviors</strong></h2>
<p class="text-intro">At Netflix, we particularly value the following nine behaviors and skills. We hire and promote people who demonstrate these nine.</p>
<hr>
<ol class="text-cols">
<li>Judgment</li>
<li>Communication</li>
<li>Impact</li>
<li>Curiosity</li>
<li>Innovation</li>
<li>Courage</li>
<li>Passion</li>
<li>Honesty</li>
<li>Selflessness</li>
</ol>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50">
<h2><strong>7 Aspects</strong> of our Culture</h2>
<hr>
<ol class="text-cols">
<li><strong>Values are what we Value</strong></li>
<li><strong>High Performance</strong></li>
<li>Freedom & Responsibility</li>
<li>Context, not Control</li>
<li>Highly Alined, Loosely Coupled</li>
<li>Pay Top of Market</li>
<li>Promotions & Development</li>
</ol>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-black">
<span class="background dark" style="background-image:url('https://source.unsplash.com/8lUTnkZXZSA/1600x800')"></span>
<div class="wrap">
<h3><strong>2/7 High Performance</strong></h3>
<ul class="flexblock features">
<li>
<div>
<h2>
<svg class="fa-users">
<use xlink:href="#fa-users"></use>
</svg>
We're a team
</h2>
not a family.
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-trophy">
<use xlink:href="#fa-trophy"></use>
</svg>
We're a pro sports team
</h2>
not a kid's recreational team.
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-star">
<use xlink:href="#fa-star"></use>
</svg>
We have stars
</h2>
in every position.
</div>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<span class="background" style="background-image:url('https://source.unsplash.com/M-H70CDJnDI/1600x800')"></span>
<div class="wrap size-60 bg-trans-dark">
<h4><strong>Why are we so manic on high performance?</strong></h4>
<p class="text-intro">In procedural work, the best are 2x better than the average.</p>
<hr>
<p class="text-intro">In creative work, the best are 10x better than the average, so huge premium on creating effective teams of the best.</p>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-black">
<span class="background" style="background-image:url('https://source.unsplash.com/26qZsuRwm0c/1600x800')"></span>
<div class="wrap aligncenter">
<h2><strong>Content that people love</strong></h2>
</div>
<!-- .end .wrap -->
</section>
<section class="fullscreen">
<div class="embed">
<video autoplay loop poster="https://webslides.tv/static/images/netflix.jpg">
<source src="https://webslides.tv/static/videos/netflix.mp4" type="video/mp4">
</video>
</div>
<!-- .end .embed -->
</section>
<section>
<div class="wrap size-50">
<h3><strong>3/7 Freedom & Responsibility</strong></h3>
<p class="text-intro">Most companies have complex policies around what you can expense, how you travel, what gifts you can accept, etc.</p>
<hr>
<p class="text-intro"><strong>Netflix's Policy</strong>: "Act in Netflix's best interest" (5 words long).</p>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h3><strong>"Act in Netflix's best interest"</strong> generally means...</h3>
<ul class="flexblock border">
<li>
Expense only what you would otherwise not spend.
</li>
<li>
Travel as you would if it were your own money.
</li>
<li>
What gifts you can accept?
Disclose non-trivial vendor gifts.
</li>
<li>
Take from Netflix only when it is inefficient to not take (calls...)
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap size-50 bg-white">
<h4><strong>Summary of Freedom & Responsibility</strong></h4>
<hr>
<ol>
<li>As we grow, minimize rules.</li>
<li>Inhibit chaos with ever more high performance people.</li>
<li><strong>Flexibility is more important than efficiency</strong> in the long term.</li>
</ol>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<div class="grid">
<div class="column">
<p class="text-context">
This is a homage.
</p>
<p class="text-intro"><a href="http://firstround.com/review/The-woman-behind-the-Netflix-Culture-doc/">Patty McCord</a> wrote <strong>"Netflix Culture: Freedom & Responsibility"</strong>. Go to <a href="https://www.slideshare.net/reed2001/culture-1798664">Slideshare</a> to read the whole document.</p>
</div>
<div class="column">
<div>
<div class="embed">
<iframe width="560" height="315" src="https://www.youtube.com/embed/uvG0aCbuG60?rel=0&controls=0" allowfullscreen></iframe>
</div>
<!-- normalize flexbox -->
</div>
<!-- end .embed -->
</div>
<!-- end .column -->
</div>
<!-- end .grid -->
</div>
<!-- .end .wrap -->
</section>
</article>
</main>
<!--main-->
<footer>
<div class="wrap">
<p>
<span class="alignright"><a href="http://netflix.com" title="Netflix"><img src="../static/images/logos/netflix.svg" alt="Netflix"></a></span>
</p>
</div>
</footer>
<!-- Required -->
<script src="../static/js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script> <!-- Autoslide? window.ws = new WebSlides({ autoslide: 8000 }); -->
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>
</html>