cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
  
  <head>
    <title></title>
    <style type="text/css">
      body {
        padding: 0;
        margin: 0;
        font-family: -apple-system, ".SFNSDisplay-Regular", Roboto, Helvetica, Tahoma, sans-serif; }
      
      a {
        color: #168DD9;
        text-decoration: none; }
      
      figure {
        margin: 0; }
        figure img {
          width: 100%; }
      
      figcaption {
        text-align: right; }
      
      table {
        border: 0;
        border-spacing: 0;
        border-collapse: separate;
        padding: 0; }
      
      #obsession-container {
        max-width: 768px;
        margin: auto;
        background-color: #f1f1f1; }
      
      #obsession-header {
        position: relative;
        background-color: #000;
        background-size: cover;
        width: 100%;
        height: 330px; }
      
      #obsession-header-content {
        height: 100%;
        vertical-align: middle;
        text-align: center;
        color: #fff; }
      
      #obsession-header-date {
        font-size: 14px; }
      
      #obsession-sponsor {
        color: #fff;
        font-size: 10px;
        text-align: right;
        padding: 5px 10px 0 0;
        height: 30px;
        line-height: 30px; }
        #obsession-sponsor img {
          vertical-align: middle;
          width: 70px;
          margin-left: 5px; }
      
      .obsession-hero {
        margin: 0;
        position: relative; }
        .obsession-hero figcaption {
          font-size: 8px;
          text-align: right;
          color: #bebebe;
          padding: 0 6px 5px 0; }
        .obsession-hero table {
          border-top-left-radius: 6px;
          border-top-right-radius: 6px; }
          .obsession-hero table td {
            padding: 0 15%; }
        .poll .obsession-hero td,
        .quiz .obsession-hero td {
          border-top-left-radius: 6px;
          border-top-right-radius: 6px; }
      
      .obsession-hero-title {
        color: #fff;
        margin: 0 auto;
        font-size: 22px; }
      
      .obsession-hero-image {
        width: 100%;
        padding-bottom: 56.56%;
        background-color: #ccc;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px; }
        .poll .obsession-hero-image,
        .quiz .obsession-hero-image,
        .video .obsession-hero-image {
          padding: 0;
          height: 200px; }
          @media screen and (min-width: 376px) {
            .poll .obsession-hero-image,
            .quiz .obsession-hero-image,
            .video .obsession-hero-image {
              height: 282px; } }
        .obsession-hero-image table {
          width: 100%;
          height: 100%; }
          .obsession-hero-image table td {
            text-align: center;
            vertical-align: middle; }
        .obsession-hero-image .play-button {
          height: 100%;
          background-color: rgba(0, 0, 0, 0.4);
          background-position: center;
          background-repeat: no-repeat;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px; }
      
      .obsession-card {
        margin: 20px 15px;
        font-size: 15px;
        max-width: 500px; }
        .obsession-card:first-of-type {
          position: relative;
          margin-top: -25px; }
        @media screen and (min-width: 531px) {
          .obsession-card {
            margin: 20px auto; } }
      
      .obsession-card-kicker {
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        color: #bebebe;
        margin-bottom: 5px; }
      
      .obsession-card-sponsor-label {
        color: #F1A33F; }
      
      .obsession-card-title {
        font-weight: bold;
        font-size: 22px;
        max-width: 50%;
        margin-top: 0; }
        .obsession-card-title hr {
          width: 140px;
          border-bottom: 4px solid #000;
          margin: 10px 0 0 0; }
      
      .obsession-card-content {
        padding: 20px;
        background-color: #fff;
        border-radius: 6px; }
        .obsession-hero + .obsession-card-content {
          border-top-right-radius: 0;
          border-top-left-radius: 0; }
        .obsession-card-content img {
          max-width: 100%; }
        .obsession-card-content figure {
          margin: 0; }
        .obsession-card-content figcaption {
          font-size: 8px;
          text-align: right;
          color: #bebebe; }
        .obsession-card-content p {
          margin: 1em 0;
          line-height: 1.5; }
          .obsession-card-content p.first {
            margin-top: 0; }
          .obsession-card-content p.last {
            margin-bottom: 0; }
        .obsession-card-content ul,
        .obsession-card-content ol {
          padding: 0 0 0 18px; }
        .obsession-card-content li {
          margin: 0 0 5px 0; }
        .obsession-card-content blockquote {
          margin: 1em 0;
          font-family: Georgia, serif;
          font-style: italic; }
        .obsession-card-content .pull-quote {
          margin: 1em 0;
          font-family: Georgia, serif;
          font-style: italic;
          font-size: 21px;
          line-height: 1.5;
          color: #5D5D5D; }
          .obsession-card-content .pull-quote .quote-line {
            display: none; }
      
      .obsession-card-cta {
        display: block;
        background-color: #168DD9;
        color: #fff;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        font-size: 14px;
        text-align: center;
        padding: 18px 0;
        text-decoration: none; }
      
      .obsession-card-share {
        font-size: 12px;
        color: #A7A7A7;
        width: 100%;
        padding: 6px 6px 0 6px; }
        .obsession-card-share .share-buttons {
          text-align: right; }
          .obsession-card-share .share-buttons a {
            margin-left: 10px; }
      
      .obsession-poll-answer,
      .obsession-quiz-answer {
        display: block;
        background-color: #fff;
        margin: 0 15px 3px 15px;
        padding: 15px 20px;
        font-size: 15px;
        font-weight: bold;
        position: relative;
        cursor: pointer; }
        .obsession-poll-answer:first-of-type,
        .obsession-quiz-answer:first-of-type {
          border-top-left-radius: 6px;
          border-top-right-radius: 6px;
          margin-top: -25px; }
        .obsession-poll-answer:last-of-type,
        .obsession-quiz-answer:last-of-type {
          border-bottom-left-radius: 6px;
          border-bottom-right-radius: 6px; }
      
      .poll input {
        display: none; }
      
      .quiz input {
        display: none; }
      
      .quiz .obsession-quiz-message-correct,
      .quiz .obsession-quiz-message-wrong {
        display: none; }
      
      .quiz .obsession-quiz-radio-correct:checked ~ .obsession-quiz-message-correct {
        display: block; }
      
      .quiz .obsession-quiz-radio-wrong:checked ~ .obsession-quiz-message-wrong {
        display: block; }
      
      .quiz .obsession-quiz-radio-wrong:checked ~ .obsession-quiz-answer.correct {
        background: green; }
      
      .quiz .obsession-quiz-answer.correct:hover {
        background: green; }
        .quiz .obsession-quiz-answer.correct:hover ~ .obsession-quiz-message-correct {
          display: block; }
      
      .quiz .obsession-quiz-answer.wrong:hover {
        background: red; }
        .quiz .obsession-quiz-answer.wrong:hover ~ .obsession-quiz-message-wrong {
          display: block; }
      
      .obsession-quiz-message-correct,
      .obsession-quiz-message-wrong,
      .obsession-poll-message {
        display: none;
        font-size: 15px;
        margin: 15px; }
      
      .obsession-quiz-fallback {
        text-align: center;
        color: #bebebe;
        padding: 5px 0 0 0;
        font-size: 10px; }
        @media screen and (max-width: 600px) {
          .obsession-quiz-fallback {
            font-size: 8px; } }
      
      .obsession-quiz-footer-fallback {
        text-align: left;
        color: #bebebe;
        padding: 10px 0;
        font-size: 10px;
        max-width: 460px;
        margin: auto; }
        @media screen and (max-width: 600px) {
          .obsession-quiz-footer-fallback {
            font-size: 8px; } }
      
      .obsession-gallery {
        background-color: #fff;
        text-align: center;
        display: table;
        width: 100%; }
        .obsession-gallery input {
          display: none; }
        .obsession-gallery label {
          display: inline-block;
          margin: 10px 5px;
          cursor: pointer;
          max-width: 50px; }
          .obsession-gallery label img {
            width: 100%; }
      
      .obsession-gallery-images {
        display: table-caption;
        caption-side: top;
        table-layout: fixed; }
        .obsession-gallery-images img {
          width: 100%;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px; }
      
      #obsession-footer {
        background-color: #2B2B2B;
        margin-top: 40px;
        padding: 0 15px; }
        @media screen and (min-width: 531px) {
          #obsession-footer {
            padding: 0; } }
      
      #obsession-share-footer {
        background-color: #000;
        padding: 0 15px; }
        #obsession-share-footer table {
          width: 100%;
          color: #fff;
          font-size: 12px; }
        #obsession-share-footer .share-buttons {
          text-align: right; }
          #obsession-share-footer .share-buttons a {
            margin-left: 10px; }
        #obsession-share-footer .obsession-card-share {
          padding: 0; }
        @media screen and (min-width: 531px) {
          #obsession-share-footer {
            padding: 0; } }
      
      .obsession-footer-content {
        max-width: 460px;
        margin: auto;
        font-size: 12px;
        color: #fff;
        padding: 15px 0; }
        .obsession-footer-content p {
          margin: 0 0 15px 0; }
        .obsession-footer-content .last {
          margin: 0; }
      
      .outlook-card {
        margin-bottom: 20px;
        background-color: #fff; }
        .outlook-card .obsession-card-title {
          max-width: none; }
        .outlook-card hr {
          display: none !important; }
        .outlook-card td {
          padding: 30px; }
        .outlook-card h3 {
          font-size: 15px; }
        .outlook-card .warning {
          color: #ccc;
          font-size: 10px; }
      
      .outlook-cta {
        background-color: #168DD9;
        text-align: center;
        width: 100%; }
        .outlook-cta td {
          padding: 30px; }
        .outlook-cta a {
          color: #fff;
          text-decoration: none; }
      
      .hidden {
        display: none;
        mso-hide: all;
        height: 0;
        line-height: 0;
        font-size: 0px;
        overflow: hidden; }
        .hidden table {
          display: none !important;
          mso-hide: all !important; }
      .play-button { background-image: url(https://s2.wp.com/wp-content/themes/vip/qz-api/lib/plugins/qz-obsession-email/images/play.png); }#quiz-6-answer-radio-correct:checked ~ .obsession-quiz-answer.correct { background: green; }
      #quiz-6-answer-radio-1:checked ~ #qz-6-answer-label-1 { background:red; }
      #quiz-6-answer-radio-2:checked ~ #qz-6-answer-label-2 { background:red; }
      #quiz-6-answer-radio-3:checked ~ #qz-6-answer-label-3 { background:red; }
      #poll-9853149-radio-45105400:checked ~ #poll-9853149-answer-45105400 { background-image: url(https://quartz-obsession.quartz.work/vote?poll_id=9853149&answer_id=45105400) }
      #poll-9853149-radio-45105400:checked ~ #poll-9853149-answer-45105401 { background-image: url(https://quartz-obsession.quartz.work/result?poll_id=9853149&answer_id=45105401) }
      #poll-9853149-radio-45105400:checked ~ #poll-9853149-answer-45105402 { background-image: url(https://quartz-obsession.quartz.work/result?poll_id=9853149&answer_id=45105402) }
      #poll-9853149-radio-45105400:checked ~ #poll-9853149-answer-45105403 { background-image: url(https://quartz-obsession.quartz.work/result?poll_id=9853149&answer_id=45105403) }
      #poll-9853149-radio-45105401:checked ~ #poll-9853149-answer-45105401 { background-image: url(https://quartz-obsession.quartz.work/vote?poll_id=9853149&answer_id=45105401) }
      #poll-9853149-radio-45105401:checked ~ #poll-9853149-answer-45105400 { background-image: url(https://quartz-obsession.quartz.work/result?poll_id=9853149&answer_id=45105400) }
      #poll-9853149-radio-45105401:checked ~ #poll-9853149-answer-45105402 { background-image: url(https://quartz-obsession.quartz.work/result?poll_id=9853149&answer_id=45105402) }
      #poll-9853149-radio-45105401:checked ~ #poll-9853149-answer-45105403 { background-image: url(https://quartz-obsession.quartz.work/result?poll_id=9853149&answer_id=45105403) }
      #poll-9853149-radio-45105402:checked ~ #poll-9853149-answer-45105402 { background-image: url(https://quartz-obsession.quartz.work/vote?poll_id=9853149&answer_id=45105402) }
      #poll-9853149-radio-45105402:checked ~ #poll-9853149-answer-45105400 { background-image: url(https://quartz-obsession.quartz.work/result?poll_id=9853149&answer_id=45105400) }
      #poll-9853149-radio-45105402:checked ~ #poll-9853149-answer-45105401 { background-image: url(https://quartz-obsession.quartz.work/result?poll_id=9853149&answer_id=45105401) }
      #poll-9853149-radio-45105402:checked ~ #poll-9853149-answer-45105403 { background-image: url(https://quartz-obsession.quartz.work/result?poll_id=9853149&answer_id=45105403) }
      #poll-9853149-radio-45105403:checked ~ #poll-9853149-answer-45105403 { background-image: url(https://quartz-obsession.quartz.work/vote?poll_id=9853149&answer_id=45105403) }
      #poll-9853149-radio-45105403:checked ~ #poll-9853149-answer-45105400 { background-image: url(https://quartz-obsession.quartz.work/result?poll_id=9853149&answer_id=45105400) }
      #poll-9853149-radio-45105403:checked ~ #poll-9853149-answer-45105401 { background-image: url(https://quartz-obsession.quartz.work/result?poll_id=9853149&answer_id=45105401) }
      #poll-9853149-radio-45105403:checked ~ #poll-9853149-answer-45105402 { background-image: url(https://quartz-obsession.quartz.work/result?poll_id=9853149&answer_id=45105402) }
      .vote-options { display: none; }
      #poll-13-vote-control:checked ~ .vote-btn { display: none; }
      #poll-13-vote-control:checked ~ .vote-options { display: block; }
      #obsession-header td { background: url(https://s0.wp.com/wp-content/themes/vip/qz-api/lib/plugins/qz-obsession-email/images/1x1-black.png); }
      .obsession-hero-image td { background: url(https://s2.wp.com/wp-content/themes/vip/qz-api/lib/plugins/qz-obsession-email/images/1x1-purple.png); }
    </style>
  </head>
  
  <body>
    <!--[if mso | IE]>
      <table width="600" bgcolor="#f1f1f1" align="center">
        <tr>
          <td>
          <![endif]-->
          <div id="obsession-container">
            <table id="obsession-header" style="background-image: url(https://qzprod.files.wordpress.com/2017/10/giphy-51.gif?w=480)">
              <tr>
                <td id="obsession-header-content">
                  <img src="https://s0.wp.com/wp-content/themes/vip/qz-api/lib/plugins/qz-obsession-email/images/logo.png"
                  alt="Quartz Obsession" />
                  <h1 id="obsession-header-title">Spreadsheets</h1><span id="obsession-header-date">October 17, 2017</span>
                </td>
              </tr>
            </table>
            <!--[if mso | IE]>
              <table class="outlook-card">
                <tr>
                  <td>
                    <div class="obsession-card-content">
                      <h2 class="obsession-card-title">A winning formula<hr /></h2>
                      <p class="first"><span style="font-weight:400;">Freshen up your formulas and pamper those pivot tables—International Spreadsheet Day is Oct. 17. </span>
                      </p>
                      <p><span style="font-weight:400;">On this day in 1979, a computer program called VisiCalc first shipped for the Apple II, marking the birth of the electronic spreadsheet. A few years later, Lotus 1-2-3 for the IBM PC had its moment, and then Microsoft Excel became the dominant spreadsheet program, which it remains today.</span>
                      </p>
                      <p class="last"><span style="font-weight:400;">The spreadsheet was the original killer app—the thing that convinced many people to buy a computer for the first time. Conceived as a simple scratchpad, the now-ubiquitous tool is used to compile everything from grocery lists to multinational company accounts. Its incredible flexibility makes it both powerful and dangerous, loved and loathed in equal measure. </span>
                      </p>
                    </div>
                  </td>
                </tr>
              </table>
              <table class="outlook-cta">
                <tr>
                  <td>
                    <a href="http://email-tracking.qz.com/wf/click?upn=pu9n0ps8hGF44zTMfA2zQU0GkxgAXkprbeX5p14xE2g7bUEi-2FkklDjRfZgCyNN2wF5hjJbk2YEjrh0c-2FKt1D8g-3D-3D_mvz2iKCHyENW-2B9fXEOaXviTIXVtXmq0biYHLH1lypt1tFbENg8of9Z7mfMhiXpapG9BkF0oJdZlEvBJSCZ5sKa1zKCayqdhXK3ICisGF8eIYstxR6yMnmaPnR-2Bbtnw8SSeg7IEcGJIzUpCwINH8Y-2BvEpvR14OL6kPFd5odMqgcmzBocraqabaCAMGHKx2KVKiQPXGP5fDldmFCzsfXADX0EDnOVfe3AoCb4Kn0hhPkvvYateQW4X5rwVEnOF2WkiZdiW8FNTmUo52vJLSTe26RTi9yROI9rr7SuC-2BpYcIswrq2yZY8u5QSUrWxbkJ9n0o7q-2F1P-2BQG9hclP-2BYZNdyxxlUIqVPBr9CpeVL5YwzR91VpMaU0pATxPe9O7Hh3zFPbop8gkJ8-2BE0YDfAL8n-2BUA5k1ar2pd9Ic6jELu7-2FacXnuzwWzQBzP3K1bbxk4figyfNaUZ30M1zC1yQOyCZJJ0XZufxNAs4F2BqB7KA2VRsI-3D">Read the full email</a>
                  </td>
                </tr>
              </table>
              <table class="outlook-card">
                <tr>
                  <td>
                    <h3>Why is my email truncated?</h3>
                    <p class="warning">The interactive elements of this email don't work with all email software. To
                      get the full experience of the Quartz Obsession in your inbox, we recommend using
                      Gmail or Apple Mail.</p>
                  </td>
                </tr>
              </table>
            <![endif]-->
            <!--[if mso | IE]>
              <div class="hidden">
              <![endif]-->
              <div class="first obsession-card auto">
                <div class="obsession-card-content">
                  <h2 class="obsession-card-title">A winning formula<hr /></h2>
                  <p class="first"><span style="font-weight:400;">Freshen up your formulas and pamper those pivot tables—International Spreadsheet Day is Oct. 17. </span>
                  </p>
                  <p><span style="font-weight:400;">On this day in 1979, a computer program called VisiCalc first shipped for the Apple II, marking the birth of the electronic spreadsheet. A few years later, Lotus 1-2-3 for the IBM PC had its moment, and then Microsoft Excel became the dominant spreadsheet program, which it remains today.</span>
                  </p>
                  <p class="last"><span style="font-weight:400;">The spreadsheet was the original killer app—the thing that convinced many people to buy a computer for the first time. Conceived as a simple scratchpad, the now-ubiquitous tool is used to compile everything from grocery lists to multinational company accounts. Its incredible flexibility makes it both powerful and dangerous, loved and loathed in equal measure. </span>
                  </p>
                </div>
              </div>
              <div class="obsession-card auto">
                <figure class="obsession-hero">
                  <div class="obsession-hero-image" style="background-image: url(https://qzprod.files.wordpress.com/2017/10/visicalc-refcard.gif);"></div>
                </figure>
                <div class="obsession-card-content">
                  <div class="obsession-card-kicker">origin story</div>
                  <h2 class="obsession-card-title">Magic powers<hr /></h2>
                  <p class="first"><span style="font-weight:400;">Dan Bricklin dreamt up the idea for VisiCalc in 1978, while a student at Harvard Business School. He used an early prototype to ace an assignment about financial projections for a corporate marketing campaign, wowing his class with breadth, depth, and detail that was unusual in the era of hand-held calculators.</span>
                  </p>
                  <p><span style="font-weight:400;">Early adopters seemed to possess “magic powers,” </span>
                    <a
                    href="https://qz.com/578661/dan-bricklin-invented-the-spreadsheet-but-dont-hold-that-against-him/"><span style="font-weight:400;">Bricklin told Quartz</span></a><span style="font-weight:400;">. The spreadsheet quickly became the lingua franca of finance.</span>
                  </p>
                  <p class="last"><span style="font-weight:400;">Software patents were rare in the 1970s, so VisiCalc relied on trademark and copyright protections to ward off rivals. It didn’t work—copycat programs soon surpassed the original in popularity. </span>
                  </p>
                </div>
              </div>
              <div class="obsession-card auto">
                <div class="obsession-card-content">
                  <div class="obsession-card-kicker">fun fact</div>
                  <h2><span style="font-weight:400;">Other names the founders of VisiCalc—short for “visible calculator”—considered: Electroledger, Calculedger, Calcupaper, and Compulator.</span></h2>

                </div>
              </div>
              <div class="obsession-card video">
                <figure class="obsession-hero">
                  <a href="https://www.youtube.com/watch?v=IU96Pd_npn4">
                    <div class="obsession-hero-image" style="background-image: url(https://qzprod.files.wordpress.com/2017/10/screen-shot-2017-10-16-at-12-27-27-pm1.png);">
                      <div class="play-button"></div>
                    </div>
                  </a>
                </figure>
                <div class="obsession-card-content">
                  <div class="obsession-card-kicker">watch this!</div>
                  <p class="first last"><span style="font-weight:400;"><a href="https://qz.com/1103867/visicalc-and-apple-aapl-steve-jobs-said-that-the-spreadsheet-was-key-to-apples-early-success/">Steve Jobs gives the first spreadsheet program credit</a> for the success of the Apple II, his company’s first mainstream machine.</span>
                  </p>
                </div>
              </div>
              <div class="obsession-card auto">
                <div class="obsession-card-content">
                  <div class="obsession-card-kicker">download this!</div>
                  <p class="first last"><span style="font-weight:400;">The version of VisiCalc released for the IBM PC in 1981 will still run on modern Windows machines. It weighs in at a scant 27.5 kilobytes and can be </span>
                    <a
                    href="http://www.bricklin.com/history/vcexecutable.htm"><span style="font-weight:400;">downloaded here</span></a><span style="font-weight:400;">.</span>
                  </p>
                </div>
              </div>
              <div class="obsession-card auto">
                <div class="obsession-card-content">
                  <div class="obsession-card-kicker">hard cell</div>
                  <h2 class="obsession-card-title">When the sheet hits the fan<hr /></h2>
                  <p class="first last"><span style="font-weight:400;">Spreadsheets are easy to make, and even easier to make badly. In one study, researchers at Dartmouth got access to live spreadsheets from a group of companies. Depressingly, they found that only a third were error-free: Many were minor, but some skewed numbers by as much as $100 million. The list of costly Excel-based snafus is </span>
                    <a
                    href="http://www.eusprig.org/horror-stories.htm"><span style="font-weight:400;">long and cringe-worthy</span></a><span style="font-weight:400;">. Here are few doozies:</span>
                  </p>
                  <ul>
                    <li style="font-weight:400;"><span style="font-weight:400;">The opaque, error-prone system of risk reporting via spreadsheets at JPMorgan allowed a trader known as the “London whale” to rack up </span>
                      <a
                      href="https://robertkugel.ventanaresearch.com/robert-kugel/2013/01/29/the-spreadsheet-and-the-whale"><span style="font-weight:400;">more than $6 billion in losses.</span>
                        </a>
                    </li>
                    <li style="font-weight:400;"><span style="font-weight:400;">A spreadsheet formula error led economists Carmen Reinhart and Kenneth Rogoff to </span>
                      <a
                      href="https://qz.com/75119/how-to-avoid-making-an-excel-mistake-like-rogoff-and-reinhart/"><span style="font-weight:400;">overstate the effects of government debt</span>
                        </a><span style="font-weight:400;"> in an influential paper used by many to justify austerity policies.</span>
                    </li>
                    <li style="font-weight:400;">A single mistaken cell entry led organizers of London’s 2012 Olympics to overbook
                      the synchronized swimming events
                      <a href="http://www.telegraph.co.uk/sport/olympics/8992490/London-2012-Olympics-lucky-few-to-get-100m-final-tickets-after-synchronised-swimming-was-overbooked-by-10000.html">by 10,000 tickets.</a>
                    </li>
                    <li>Years of genomics research is
                      <a href="https://qz.com/768334/years-of-genomics-research-is-riddled-with-errors-thanks-to-a-bunch-of-botched-excel-spreadsheets/">riddled with errors</a> because Excel and other popular spreadsheet applications
                      converted some gene symbols to dates and numbers—like turning the gene MARCH1 into
                      “03/01/2016.”</li>
                  </ul>
                </div>
              </div>
              <div class="obsession-card quiz">
                <figure class="obsession-hero">
                  <div class="obsession-hero-image" style="background-image: url(https://qzprod.files.wordpress.com/2017/10/tips1-2.gif);">
                    <table>
                      <tr>
                        <td>
                          <div class="obsession-card-kicker">pop quiz</div>
                          <h2 class="obsession-hero-title">Which of these is not a formula function in Microsoft Excel?</h2>
                        </td>
                      </tr>
                    </table>
                  </div>
                </figure>
                <input type="radio" name="quiz-6" id="quiz-6-answer-radio-correct" class="obsession-quiz-radio-correct">
                <input type="radio" name="quiz-6" id="quiz-6-answer-radio-1" class="obsession-quiz-radio-wrong">
                <input type="radio" name="quiz-6" id="quiz-6-answer-radio-2" class="obsession-quiz-radio-wrong">
                <input type="radio" name="quiz-6" id="quiz-6-answer-radio-3" class="obsession-quiz-radio-wrong">
                <label for="quiz-6-answer-radio-1" id="qz-6-answer-label-1" class="obsession-quiz-answer wrong">=CONCATENATE</label>
                <label for="quiz-6-answer-radio-2" id="qz-6-answer-label-2"
                class="obsession-quiz-answer wrong">=AGGREGATE</label>
                <label for="quiz-6-answer-radio-3" id="qz-6-answer-label-3"
                class="obsession-quiz-answer wrong">=IMCONJUGATE</label>
                <label for="quiz-6-answer-radio-correct" class="obsession-quiz-answer correct">=APPROXIMATE</label>
                <div class="obsession-quiz-message-correct"><strong>Correct.</strong> 
                </div>
                <div class="obsession-quiz-message-wrong"><strong>Incorrect.</strong> 
                </div>
                <div class="obsession-quiz-fallback">If your inbox doesn’t support this quiz, find the solution at bottom of email.</div>
              </div>
              <div class="obsession-card auto">
                <div class="obsession-card-content">
                  <div class="obsession-card-kicker">quotable</div>
                  <h2><span style="font-weight:400;">“Take her back to the crib and spreadsheets / </span><span style="font-weight:400;">‘Cuz I Microsoft Excel in the bedsheets”</span></h2>

                  <p class="first last"><span style="font-weight:400;">—lyrics from “<a href="https://genius.com/Rtillery-outside-prod-by-rtillery-lyrics">Outside</a>” by Rtillery<br /></span>
                  </p>
                </div>
              </div>
              <div class="obsession-card auto">
                <figure class="obsession-hero">
                  <div class="obsession-hero-image" style="background-image: url(https://qzprod.files.wordpress.com/2017/10/screen-shot-2017-10-16-at-12-12-37-pm.png);"></div>
                </figure>
                <div class="obsession-card-content">
                  <div class="obsession-card-kicker">Art history</div>
                  <h2 class="obsession-card-title">Art meets science<hr /></h2>
                  <p class="first"><span style="font-weight:400;">Spreadsheets aren’t just for creative accounting. Japanese artist Tatsuo Horiuchi uses the program to draw elaborate landscapes. He </span>
                    <a
                    href="http://www2.odn.ne.jp/~cbl97790/kakikataHSK07.htm"><span style="font-weight:400;">explains his technique here</span></a><span style="font-weight:400;">, if you read Japanese and have a lot of spare time on your hands.</span>
                  </p>
                  <p class="last"><span style="font-weight:400;">Another work of spreadsheet art worth checking out is</span>
                    <a
                    href="https://www.youtube.com/watch?v=ax2UBISNv2A"> <span style="font-weight:400;">this stop-motion animation</span>
                      </a><span style="font-weight:400;"> of a scene from Super Mario Bros, made from 1,000 screenshots and, as the anonymous uploader puts it, “some hours of work.”</span>
                  </p>
                </div>
              </div>
              <div class="obsession-card auto">
                <div class="obsession-card-content">
                  <h2 class="obsession-card-title">Back to the future<hr /></h2>
                  <p class="first"><span style="font-weight:400;">In 1863, Jules Verne wrote </span><i><span style="font-weight:400;">Paris in the Twentieth Century</span></i>
                    <span
                    style="font-weight:400;">, a prescient work of speculative fiction. The dystopian capital he imagined 100
                      years in the future was in thrall to greedy financiers, all-powerful corporations,
                      and pervasive automation (“machines advantageously replacing human hands”).</span>
                  </p>
                  <p><span style="font-weight:400;">Office workers were slaves to calculating machines that “looked rather like huge pianos.” The “Great Ledger,” as he described it, was a sort of steampunk proto-spreadsheet:</span>
                  </p>
                  <blockquote>
                    <p class="last"><span style="font-weight:400;">“…by operating a sort of keyboard, sums were instantaneously produced, remainders, products, quotients, rules of proportion, calculations of amortization and of interest compounded for infinite periods and at all possible rates. There were high notes which afforded up to one hundred fifty percent!”</span>
                    </p>
                  </blockquote>
                </div>
              </div>
              <div class="obsession-card auto">
                <figure class="obsession-hero">
                  <div class="obsession-hero-image" style="background-image: url(https://qzprod.files.wordpress.com/2017/10/screen-shot-2017-10-17-at-2-08-40-pm.png);"></div>
                </figure>
                <div class="obsession-card-content">
                  <div class="obsession-card-kicker">person of interest</div>
                  <h2 class="obsession-card-title">Excel-ent<hr /></h2>
                  <p class="first">Every year, students from around the world compete in the Microsoft Office Specialist
                    World Championship. (Yep.) In August, 17-year-old John Dumoulin took home the top
                    prize for Excel mastery, which included
                    <a href="https://www.theverge.com/2017/8/16/16152310/microsoft-office-specialist-mos-world-championship-2017]">$7,000 and an Xbox.</a>
                  </p>
                  <p class="last">At a hotel in Anaheim, contestants were given a set of challenges—tricky equations,
                    obscure formulas, and the like—to complete in 90 minutes, judged by accuracy and
                    speed. Dumoulin says his spreadsheet skills were honed by tracking baseball stats
                    in his spare time. He’s a big fan of conditional formatting, which
                    <a href="https://lifehacker.com/microsoft-offices-teen-champions-share-their-best-trick-1796680111">“can make your data look very enhanced and eye-catching.”</a>
                  </p>
                </div>
              </div>
              <div class="obsession-card auto">
                <figure class="obsession-hero">
                  <div class="obsession-hero-image" style="background-image: url(https://qzprod.files.wordpress.com/2017/10/11.jpg?quality=80&#038;strip=all);"></div>
                </figure>
                <div class="obsession-card-content">
                  <div class="obsession-card-kicker">DIY</div>
                  <h2 class="obsession-card-title">Level up<hr /></h2>
                  <p class="first"><span style="font-weight:400;">Looking to improve your spreadsheet skills? The Corporate Finance Institute highlights</span>
                    <a
                    href="https://corporatefinanceinstitute.com/resources/excel/study/advanced-excel-formulas-must-know/"> <span style="font-weight:400;">10 advanced Excel formulas</span>
                      </a><span style="font-weight:400;"> “every world class financial analyst must know.” For other tips, MrExcel’s many</span>
                      <a
                      href="https://www.youtube.com/user/bjele123/about"> <span style="font-weight:400;">YouTube videos</span>
                        </a><span style="font-weight:400;"> have been watched more than 8 million times. (Or at least look like you&#8217;ve got the skills with <a href="https://www.amazon.co.uk/Paladone-I-Love-Spreadsheets-Mug/dp/B001I3UBKC">this enthusiastic mug.</a>)</span>
                  </p>
                  <p class="last"><span style="font-weight:400;">If after all that your data analysis needs </span><i><span style="font-weight:400;">still</span></i>
                    <span
                    style="font-weight:400;">aren’t satisfied, Quartz’s Dan Kopf ran down</span>
                      <a href="https://qz.com/1063071/the-great-r-versus-python-for-data-science-debate/"> <span style="font-weight:400;">the pros and cons</span>
                      </a><span style="font-weight:400;"> of programming languages you can learn—SAS, Stata, R, Python, and the like—to take things to the next level.</span>
                  </p>
                </div>
              </div>
              <div class="obsession-card text">
                <div class="obsession-card-content">
                  <div class="obsession-card-kicker">take me down this 🐰 hole!</div>
                  <h2>“A virtual cult of the spreadsheet has formed, complete with gurus and initiates, detailed lore, arcane rituals – and an unshakable belief that the way the world works can be embodied in rows and columns of numbers and formulas.”</h2>

                  <p class="first last">—
                    <a href="https://www.wired.com/2014/10/a-spreadsheet-way-of-knowledge/">Steven Levy, “A Spreadsheet Way of Knowledge,” Harper’s, 1984</a>
                  </p>
                </div>
              </div>
              <div class="obsession-card poll">
                <figure class="obsession-hero">
                  <div class="obsession-hero-image" style="background-image: url(https://qzprod.files.wordpress.com/2017/10/screen-shot-2017-10-16-at-2-58-44-pm.png);">
                    <table>
                      <tr>
                        <td>
                          <div class="obsession-card-kicker">talk to us</div>
                          <h2 class="obsession-hero-title">What do you think of spreadsheets?</h2>
                        </td>
                      </tr>
                    </table>
                  </div>
                </figure>
                <input type="checkbox" id="poll-13-vote-control" checked="checked" />
                <div class="vote-btn">
                  <a clicktracking="on" class="obsession-card-cta" href="https://polldaddy.com/poll/9853149/">Click here to vote</a>
                </div>
                <div class="vote-options">
                  <input type="radio" name="poll-9853149" id="poll-9853149-radio-45105400" />
                  <input type="radio" name="poll-9853149" id="poll-9853149-radio-45105401" />
                  <input type="radio" name="poll-9853149" id="poll-9853149-radio-45105402" />
                  <input type="radio" name="poll-9853149" id="poll-9853149-radio-45105403" />
                  <label for="poll-9853149-radio-45105400" id="poll-9853149-answer-45105400" class="obsession-poll-answer first">Love them!</label>
                  <label for="poll-9853149-radio-45105401" id="poll-9853149-answer-45105401"
                  class="obsession-poll-answer">Hate them!</label>
                  <label for="poll-9853149-radio-45105402" id="poll-9853149-answer-45105402"
                  class="obsession-poll-answer">Love to hate them!</label>
                  <label for="poll-9853149-radio-45105403" id="poll-9853149-answer-45105403"
                  class="obsession-poll-answer last">A life without pivot tables is not worth living.</label>
                </div>
              </div>
              <div class="obsession-card auto">
                <div class="obsession-card-content">
                  <div class="obsession-card-kicker">the fine print</div>
                  <p class="first">In yesterday’s poll about the
                    <a href="https://qz.com/email/quartz-obsession/1103436/">kilonova</a>, 84% of you said you were “humbled by the awesomeness of the universe.”
                    🌠</p>
                  <p>Today’s email was reported and written by
                    <a href="https://twitter.com/jkaraian">Jason Karaian</a>.</p>
                  <p class="last"><em>Images: Certiport (Dumoulin)</em>
                  </p>
                </div>
              </div>
              <!--[if mso | IE]>
              </div>
            <![endif]-->
            <div id="obsession-footer">
              <div class="obsession-footer-content">
                <p>The correct answer to the quiz is <em>=APPROXIMATE</em>.</p>
                <p>Enjoying the Quartz Obsession?
                  <a href="https://qz.com/quartz-obsession/" target="_blank">Send this link</a> to a friend!</p>
                <p>Not enjoying it? No worries.
                  <a href="#"
                  target="_blank">Click here</a> to unsubscribe.</p>
                <p class="last">Quartz | 675 Avenue of the Americas, 4th Fl | New York, NY 10011 | United States</p>
              </div>
            </div>
            <div id="obsession-share-footer">
              <div class="obsession-footer-content">
                <table class="obsession-card-share">
                  <tr>
                    <td>Share this email</td>
                    <td class="share-buttons">
                      <a class="icon" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fqz.com%2Femail%2Fquartz-obsession%2F1103346%2F&text=Spreadsheets&via=qz">
                        <img src="https://s2.wp.com/wp-content/themes/vip/qz-api/lib/plugins/qz-obsession-email/images/icons/twitter.png">
                      </a>
                      <a class="icon" href="https://www.facebook.com/login.php?skip_api_login=1&api_key=966242223397117&signed_next=1&next=https%3A%2F%2Fwww.facebook.com%2Fsharer.php%3Fu%3Dhttps%253A%252F%252Fqz.com%252Femail%252Fquartz-obsession%252F1103346%252F&cancel_url=https%3A%2F%2Fwww.facebook.com%2Fdialog%2Freturn%2Fclose%3Ferror_code%3D4201%26error_message%3DUser%2Bcanceled%2Bthe%2BDialog%2Bflow%23_%3D_&display=popup&locale=en_US">
                        <img src="https://s0.wp.com/wp-content/themes/vip/qz-api/lib/plugins/qz-obsession-email/images/icons/facebook.png">
                      </a>
                      <a class="icon" href="https://www.pinterest.com/?next=/pin/create/button/%3Fdescription%3DSpreadsheets%26url%3Dhttps%253A%252F%252Fqz.com%252Femail%252Fquartz-obsession%252F1103346%252F">
                        <img src="https://s2.wp.com/wp-content/themes/vip/qz-api/lib/plugins/qz-obsession-email/images/icons/pinterest.png">
                      </a>
                      <a class="icon" href="whatsapp://send?text=Spreadsheets">
                        <img src="https://s2.wp.com/wp-content/themes/vip/qz-api/lib/plugins/qz-obsession-email/images/icons/whatsapp.png">
                      </a>
                      <a class="icon" href="mailto:?subject=Spreadsheets&body=https%3A%2F%2Fqz.com%2Femail%2Fquartz-obsession%2F1103346%2F">
                        <img src="https://s2.wp.com/wp-content/themes/vip/qz-api/lib/plugins/qz-obsession-email/images/icons/email.png">
                      </a>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <!--[if mso | IE]>
          </td>
        </tr>
      </table>
    <![endif]-->
    
  </body>

</html>
            
          
!
999px
Loading ..................

Console