mypapers/webslides/demos/netflix-culture.html

   1 <!doctype html>
   2 <html lang="en" prefix="og: http://ogp.me/ns#">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1">
   6
   7     <!-- CLEAN MARKUP = GOOD KARMA.
   8       Hi source code lover,
   9
  10       you're a curious person and a fast learner ;)
  11       Let's make something beautiful together. Contribute on Github:
  12       https://github.com/webslides/webslides
  13
  14       Thanks!
  15     -->
  16
  17     <!-- SEO -->
  18     <title>Netflix's Culture &middot; WebSlides</title>
  19     <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.">
  20
  21     <!-- URL CANONICAL -->
  22     <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
  23
  24     <!-- Google Fonts -->
  25     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
  26
  27     <!-- CSS Base -->
  28     <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
  29
  30     <!-- Optional - CSS SVG Icons (Font Awesome) -->
  31     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
  32
  33     <!-- SOCIAL CARDS (ADD YOUR INFO) -->
  34
  35     <!-- FACEBOOK -->
  36     <!-- EDIT -->
  37     <meta property="og:url" content="http://your-url.com/permalink">
  38
  39     <!-- EDIT -->
  40     <meta property="og:type" content="article">
  41     <meta property="og:title" content="WebSlides: Netflix's Culture" />
  42     <meta property="og:description" content="Patty McCord created Netflix's culture. This is a homage.">
  43
  44     <!-- EDIT -->
  45     <meta property="og:updated_time" content="2017-04-16T16:24:56">
  46     <!-- EDIT -->
  47     <meta property="og:image" content="../static/images/share-webslides.jpg" >
  48     <!-- EDIT -->
  49     <meta property="og:image:width" content="800">
  50     <meta property="og:image:height" content="429">
  51
  52     <!-- TWITTER -->
  53     <meta name="twitter:card" content="summary_large_image">
  54     <meta name="twitter:site" content="@webslides">
  55
  56     <!-- EDIT -->
  57     <meta name="twitter:creator" content="@jlantunez">
  58     <!-- EDIT -->
  59     <meta name="twitter:title" content="WebSlides: Netflix's Culture">
  60     <!-- EDIT -->
  61     <meta name="twitter:description" content="Patty McCord created Netflix's culture. This is a homage.">
  62     <!-- EDIT -->
  63     <meta name="twitter:image" content="../static/images/share-webslides.jpg">
  64
  65     <!-- EDIT -->
  66
  67     <!-- FAVICONS -->
  68     <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
  69     <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
  70     <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
  71     <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
  72     <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
  73     <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
  74     <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
  75
  76     <!-- Android -->
  77     <meta name="mobile-web-app-capable" content="yes">
  78     <meta name="theme-color" content="#333333">
  79   </head>
  80
  81   <body>
  82     <header role="banner">
  83       <nav role="navigation">
  84         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
  85         <ul>
  86           <li class="github">
  87             <a rel="external" href="https://github.com/webslides/webslides" title="Github">
  88               <svg class="fa-github">
  89                 <use xlink:href="#fa-github"></use>
  90               </svg>
  91               <em>WebSlides</em>
  92             </a>
  93           </li>
  94           <li class="twitter">
  95             <a rel="external" href="https://twitter.com/webslides" title="Twitter">
  96               <svg class="fa-twitter">
  97                 <use xlink:href="#fa-twitter"></use>
  98               </svg>
  99               <em>@WebSlides</em>
 100             </a>
 101           </li>
 102           <!--  <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> -->
 103         </ul>
 104       </nav>
 105     </header>
 106
 107     <main role="main">
 108       <article id="webslides">
 109
 110         <!-- Quick Guide
 111           - Each parent <section> in the <article id="webslides"> element is an individual slide.
 112           - Vertical sliding = <article id="webslides" class="vertical">
 113           - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
 114         -->
 115
 116         <section class="bg-red">
 117           <span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800')"></span>
 118           <!--.wrap = container (width: 90%) -->
 119           <div class="wrap aligncenter">
 120             <h1>
 121               <strong>Netflix's Culture</strong>
 122             </h1>
 123             <p class="text-symbols">* * * </p>
 124             <p><a class="button ghost" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free">
 125               <svg class="fa-cloud-download">
 126                 <use xlink:href="#fa-cloud-download"></use>
 127               </svg> WebSlides</a>
 128             </p>
 129           </div>
 130           <!-- .end .wrap -->
 131         </section>
 132         <section>
 133           <div class="wrap size-50 bg-white">
 134             <h2>
 135               <svg class="fa-info-circle large">
 136                 <use xlink:href="#fa-info-circle"></use>
 137               </svg>
 138               <strong>A bit of context</strong>
 139             </h2>
 140             <hr>
 141             <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>
 142           </div>
 143           <!-- .end .wrap -->
 144         </section>
 145         <section>
 146           <!--.wrap = container (width: 90%) -->
 147           <div class="wrap">
 148             <div class="grid vertical-align">
 149               <div class="column">
 150                 <h3><strong>We seek excellence</strong></h3>
 151               </div>
 152               <div class="column">
 153                 <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.
 154                 </p>
 155               </div>
 156             </div>
 157           </div>
 158           <!-- .end .wrap -->
 159         </section>
 160         <section class="bg-red">
 161           <span class="background" style="background-image:url('https://source.unsplash.com/BYYu5nvQoUM/1600x800')"></span>
 162           <!--.wrap = container (width: 90%) -->
 163           <div class="wrap aligncenter fadeInUp">
 164             <h3><strong>Diversity & Inclusiveness</strong></h3>
 165           </div>
 166           <!-- .end .wrap -->
 167         </section>
 168         <section>
 169           <!--.wrap = container (width: 90%) -->
 170           <div class="wrap size-50">
 171             <h2><strong>7 Aspects</strong> of our Culture</h2>
 172             <hr>
 173             <ol class="text-cols">
 174               <li><strong>Values are what we Value</strong></li>
 175               <li>High Performance</li>
 176               <li>Freedom & Responsibility</li>
 177               <li>Context, not Control</li>
 178               <li>Highly Alined, Loosely Coupled</li>
 179               <li>Pay Top of Market</li>
 180               <li>Promotions & Development</li>
 181             </ol>
 182           </div>
 183           <!-- .end .wrap -->
 184         </section>
 185         <section>
 186           <!--.wrap = container (width: 90%) -->
 187           <div class="wrap size-50 bg-white">
 188             <h3><strong>1/7 Values are what we value</strong></h3>
 189             <p class="text-intro">Make your values mean something.</p>
 190             <hr>
 191             <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>
 192           </div>
 193           <!-- .end .wrap -->
 194         </section>
 195         <section>
 196           <!--.wrap = container (width: 90%) -->
 197           <div class="wrap size-50">
 198             <h2><strong>9 Behaviors</strong></h2>
 199             <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>
 200             <hr>
 201             <ol class="text-cols">
 202               <li>Judgment</li>
 203               <li>Communication</li>
 204               <li>Impact</li>
 205               <li>Curiosity</li>
 206               <li>Innovation</li>
 207               <li>Courage</li>
 208               <li>Passion</li>
 209               <li>Honesty</li>
 210               <li>Selflessness</li>
 211             </ol>
 212           </div>
 213           <!-- .end .wrap -->
 214         </section>
 215         <section>
 216           <!--.wrap = container (width: 90%) -->
 217           <div class="wrap size-50">
 218             <h2><strong>7 Aspects</strong> of our Culture</h2>
 219             <hr>
 220             <ol class="text-cols">
 221               <li><strong>Values are what we Value</strong></li>
 222               <li><strong>High Performance</strong></li>
 223               <li>Freedom & Responsibility</li>
 224               <li>Context, not Control</li>
 225               <li>Highly Alined, Loosely Coupled</li>
 226               <li>Pay Top of Market</li>
 227               <li>Promotions & Development</li>
 228             </ol>
 229           </div>
 230           <!-- .end .wrap -->
 231         </section>
 232         <section class="bg-black">
 233           <span class="background dark" style="background-image:url('https://source.unsplash.com/8lUTnkZXZSA/1600x800')"></span>
 234           <div class="wrap">
 235             <h3><strong>2/7 High Performance</strong></h3>
 236             <ul class="flexblock features">
 237               <li>
 238                 <div>
 239                   <h2>
 240                     <svg class="fa-users">
 241                       <use xlink:href="#fa-users"></use>
 242                     </svg>
 243                     We're a team
 244                   </h2>
 245                   not a family.
 246                 </div>
 247               </li>
 248               <li>
 249                 <div>
 250                   <h2>
 251                     <svg class="fa-trophy">
 252                       <use xlink:href="#fa-trophy"></use>
 253                     </svg>
 254                     We're a pro sports team
 255                   </h2>
 256                   not a kid's recreational team.
 257                 </div>
 258               </li>
 259               <li>
 260                 <div>
 261                   <h2>
 262                     <svg class="fa-star">
 263                       <use xlink:href="#fa-star"></use>
 264                     </svg>
 265                     We have stars
 266                   </h2>
 267                   in every position.
 268                 </div>
 269               </li>
 270             </ul>
 271           </div>
 272           <!-- .end .wrap -->
 273         </section>
 274         <section>
 275           <span class="background" style="background-image:url('https://source.unsplash.com/M-H70CDJnDI/1600x800')"></span>
 276           <div class="wrap size-60 bg-trans-dark">
 277             <h4><strong>Why are we so manic on high performance?</strong></h4>
 278             <p class="text-intro">In procedural work, the best are 2x better than the average.</p>
 279             <hr>
 280             <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>
 281           </div>
 282           <!-- .end .wrap -->
 283         </section>
 284         <section class="bg-black">
 285           <span class="background" style="background-image:url('https://source.unsplash.com/26qZsuRwm0c/1600x800')"></span>
 286           <div class="wrap aligncenter">
 287             <h2><strong>Content that people love</strong></h2>
 288           </div>
 289           <!-- .end .wrap -->
 290         </section>
 291         <section class="fullscreen">
 292           <div class="embed">
 293             <video autoplay loop poster="https://webslides.tv/static/images/netflix.jpg">
 294               <source src="https://webslides.tv/static/videos/netflix.mp4" type="video/mp4">
 295             </video>
 296           </div>
 297           <!-- .end .embed -->
 298         </section>
 299         <section>
 300           <div class="wrap size-50">
 301             <h3><strong>3/7 Freedom & Responsibility</strong></h3>
 302             <p class="text-intro">Most companies have complex policies around what you can expense, how you travel, what gifts you can accept, etc.</p>
 303             <hr>
 304             <p class="text-intro"><strong>Netflix's Policy</strong>: "Act in Netflix's best interest" (5 words long).</p>
 305           </div>
 306           <!-- .end .wrap -->
 307         </section>
 308         <section>
 309           <div class="wrap">
 310             <h3><strong>"Act in Netflix's best interest"</strong> generally means...</h3>
 311             <ul class="flexblock border">
 312             <li>
 313               Expense only what you would otherwise not spend.
 314             </li>
 315             <li>
 316               Travel as you would if it were your own money.
 317             </li>
 318             <li>
 319               What gifts you can accept?
 320               Disclose non-trivial vendor gifts.
 321             </li>
 322             <li>
 323               Take from Netflix only when it is inefficient to not take (calls...)
 324             </li>
 325             </ul>
 326           </div>
 327           <!-- .end .wrap -->
 328         </section>
 329         <section>
 330           <div class="wrap size-50 bg-white">
 331             <h4><strong>Summary of Freedom & Responsibility</strong></h4>
 332             <hr>
 333             <ol>
 334               <li>As we grow, minimize rules.</li>
 335               <li>Inhibit chaos with ever more high performance people.</li>
 336               <li><strong>Flexibility is more important than efficiency</strong> in the long term.</li>
 337             </ol>
 338           </div>
 339           <!-- .end .wrap -->
 340         </section>
 341         <section>
 342           <div class="wrap">
 343             <div class="grid">
 344               <div class="column">
 345                 <p class="text-context">
 346                   This is a homage.
 347                 </p>
 348                 <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>
 349               </div>
 350               <div class="column">
 351                <div>
 352                 <div class="embed">
 353                   <iframe width="560" height="315" src="https://www.youtube.com/embed/uvG0aCbuG60?rel=0&amp;controls=0"  allowfullscreen></iframe>
 354                 </div>
 355                 <!-- normalize flexbox -->
 356                </div>
 357                <!-- end .embed -->
 358               </div>
 359               <!-- end .column -->
 360             </div>
 361             <!-- end .grid -->
 362           </div>
 363           <!-- .end .wrap -->
 364         </section>
 365
 366       </article>
 367     </main>
 368     <!--main-->
 369
 370     <footer>
 371       <div class="wrap">
 372         <p>
 373           <span class="alignright"><a href="http://netflix.com" title="Netflix"><img src="../static/images/logos/netflix.svg" alt="Netflix"></a></span>
 374         </p>
 375       </div>
 376     </footer>
 377
 378     <!-- Required -->
 379     <script src="../static/js/webslides.js"></script>
 380     <script>
 381       window.ws = new WebSlides();
 382     </script> <!-- Autoslide? window.ws = new WebSlides({ autoslide: 8000 }); -->
 383
 384     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
 385     <script defer src="../static/js/svg-icons.js"></script>
 386
 387   </body>
 388 </html>