1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="x-ua-compatible" content="ie=edge">
  6.         <title>Flatiron</title>
  7.         <meta name="description" content="This is my HTML5 boilerplate.">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.         <meta name="msapplication-TileColor" content="#e85e00">
  10.         <meta name="theme-color" content="#e85e00">
  11.  
  12.         <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
  13.         <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
  14.         <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
  15.         <link rel="manifest" href="site.webmanifest">
  16.         <link rel="mask-icon" href="safari-pinned-tab.svg" color="#3e3ea8">
  17.         <meta name="msapplication-TileColor" content="#3e3ea8">
  18.         <meta name="theme-color" content="#3e3ea8">
  19.         <link rel="stylesheet" href="css/normalize.css">
  20.         <link rel="stylesheet" href="css/screen.css">
  21.     </head>
  22.     <body>
  23.         <header class="o-row">
  24.             <div class="o-container">
  25.                 <h1>
  26.                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 40">
  27.                       <title>Flatiron</title>
  28.                       <path fill="#3887f7" d="M15.659,19.25v20l16.929-10v-20Z" transform="translate(1.27 0.75)"/>
  29.                       <path fill="#5051db" d="M16.929,0,0,10V30L16.929,20Z"/>
  30.                       <path fill="#231f20" d="M57.537,13.551a7.061,7.061,0,1,1,14.119,0,7.061,7.061,0,1,1-14.119,0Zm3.64,0c0,2.532,1.641,3.853,3.42,3.853s3.42-1.294,3.42-3.853S66.375,9.7,64.6,9.7,61.177,10.992,61.177,13.551ZM17.441,16.634c0-2.422,1.778-3.771,4.023-4.1l3.31-.5c.766-.109,1.012-.495,1.012-.962,0-.964-.738-1.762-2.27-1.762A2.394,2.394,0,0,0,20.973,11.3l-3.23-.689c.326-2.058,2.256-4.24,5.747-4.24,4.268,0,5.854,2.422,5.854,5.146v6.659a15.308,15.308,0,0,0,.165,2.147H26.169a9.242,9.242,0,0,1-.137-1.624,4.49,4.49,0,0,1-3.967,2.009C19.193,20.706,17.441,18.752,17.441,16.634Zm5.308-1.927a1.706,1.706,0,0,0-1.67,1.706,1.584,1.584,0,0,0,1.751,1.569c1.533,0,2.956-.743,2.956-3.137v-.606Zm10.2,1.623v-6.3h-2.2V6.781h2.2V2.735h3.611V6.781h2.709v3.247H36.565V15.7c0,1.184.547,1.569,1.588,1.569a5.26,5.26,0,0,0,1.12-.109v3.027a5.976,5.976,0,0,1-2.264.33A4.067,4.067,0,0,1,32.954,16.33Zm49.288,3.991v-7.9c0-1.514-.74-2.7-2.491-2.7a2.544,2.544,0,0,0-2.516,2.808v7.788h-3.64V6.781h3.529V8.459A4.469,4.469,0,0,1,81.01,6.422c3.338,0,4.87,2.395,4.87,5.367v8.532Zm-33.967,0V6.781H51.8V8.72a4.026,4.026,0,0,1,3.519-2.05c.3,0,.887.029,1.161.056v3.687A5.451,5.451,0,0,0,55.39,10.3c-1.86,0-3.475.908-3.475,3.824v6.193Zm-6.7,0V6.781h3.638V20.321Zm-29.866,0v-20h3.64v20Zm-9.271,0V10.036H0V6.788H2.435V4.182A4.061,4.061,0,0,1,6.61,0a9.549,9.549,0,0,1,3,.424V3.451a9.55,9.55,0,0,0-1.978-.2c-1.039,0-1.586.386-1.586,1.569V6.788h3.43v3.248H6.048V20.321ZM41.572,4.773V1.3h3.638V4.773Z" transform="translate(43.8 9.679)"/>
  31.                   </svg>
  32.                     Flatiron
  33.                 </h1>
  34.                 <nav>
  35.                     <ul>
  36.                         <li><a href="#!">Technology</a></li>
  37.                         <li><a href="#!">Company</a></li>
  38.                         <li><a href="#!">Publications</a></li>
  39.                     </ul>
  40.                 </nav>
  41.                 <nav>
  42.                     <ul>
  43.                         <li><a href="#!">Careers</a></li>
  44.                         <li><a href="#!">Blog</a></li>
  45.                     </ul>
  46.                 </nav>
  47.             </div>
  48.         </header>
  49.         <section class="o-row">
  50.             <div class="o-container">
  51.                 <div class="u-max-width-md">
  52.                     <h1>
  53.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto odio ipsa quas at iste
  54.                     </h1>
  55.                     <h2>
  56.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur labore, in culpa.
  57.                     </h2>
  58.                     <h3>
  59.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur labore, in culpa.
  60.                     </h3>
  61.                     <p>
  62.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam sapiente quo modi odio odit provident dolores nobis nulla quam, earum repellendus, voluptate? Distinctio neque corporis dolorum quos quasi, ducimus perspiciatis?
  63.                     </p>
  64.                 </div>
  65.             </div>
  66.         </section>
  67.         <section class="o-row o-row--lg">
  68.             <div class="o-container">
  69.                 <figure>
  70.                     <img src="img/jpg/intro-img.jpg" alt="Dr. James Hamrick & Sarika Vora in their weekly team stand-up">
  71.                 </figure>
  72.                 <h1>
  73.                     Cancer is smart.
  74.                     Together, we can
  75.                     be smarter.
  76.                 </h1>
  77.                 <p>
  78.                     Accelerating the fight against cancer requires the entire industry to work together. Our products connect community oncologists, academics, hospitals, life science researchers and regulators on a shared technology platform. <br>
  79.                     Together, we can learn from the experience of every patient.
  80.                 </p>
  81.             </div>
  82.         </section>
  83.         <section class="o-row o-row--lg">
  84.             <div class="o-container">
  85.                 <article>
  86.                     <figure>
  87.                         <picture>
  88.                             <source srcset="img/jpg/img-1.jpg" media="(min-width: 992px)">
  89.                             <source srcset="img/jpg/img-1-landscape@2x.jpg" media="(min-width: 576px)">
  90.                             <img src="img/jpg/img-1-landscape.jpg" alt="Dr. Jeremy McDuffie, Tennessee Oncology">
  91.                         </picture>
  92.                         <figcaption>Dr. Jeremy McDuffie, Tennessee Oncology</figcaption>
  93.                     </figure>
  94.                     <header>
  95.                         <h2>
  96.                             For Community <br>
  97.                             Oncology
  98.                         </h2>
  99.                     </header>
  100.                     <p>
  101.                         OncoCloud is the most comprehensive suite of software and services in community oncology. Using our technology, community clinics are providing better care for patients while remaining efficient, independent and financially successful.
  102.                     </p>
  103.                     <p>
  104.                         <a href="#!">Learn more</a>
  105.                     </p>
  106.                 </article>
  107.                 <article>
  108.                     <figure>
  109.                         <picture>
  110.                             <source srcset="img/jpg/img-2.jpg" media="(min-width: 992px)">
  111.                             <source srcset="img/jpg/img-2-landscape@2x.jpg" media="(min-width: 576px)">
  112.                             <img src="img/jpg/img-2-landscape.jpg" alt="Dr. Jeremy McDuffie, Tennessee Oncology">
  113.                         </picture>
  114.                         <figcaption>The lab at New York Cancer & Blood Specialists</figcaption>
  115.                    </figure>
  116.                    <header>
  117.                        <h2>
  118.                            For Life <br>
  119.                            Sciences
  120.                        </h2>
  121.                    </header>
  122.                    <p>
  123.                        With access to billions of data points on millions of cancer patients treated across our network, Flatiron is changing the way life science companies are using real-world data to accelerate research and generate evidence.
  124.                    </p>
  125.                    <p>
  126.                        <a href="#!">Learn more</a>
  127.                    </p>
  128.                </article>
  129.                <article>
  130.                    <figure>
  131.                        <picture>
  132.                            <source srcset="img/jpg/img-3.jpg" media="(min-width: 992px)">
  133.                            <source srcset="img/jpg/img-3-landscape@2x.jpg" media="(min-width: 576px)">
  134.                            <img src="img/jpg/img-3-landscape.jpg" alt="Dr. Jeremy McDuffie, Tennessee Oncology">
  135.                        </picture>
  136.                        <figcaption>The lab at New York Cancer & Blood Specialists</figcaption>
  137.                    </figure>
  138.                    <header>
  139.                        <h2>
  140.                            For Academics <br>
  141.                            &amp; Hospitals
  142.                         </h2>
  143.                     </header>
  144.                     <p>
  145.                         Flatiron’s enriched data infrastructure helps hospitals and academic centers unlock the promise of their EHR data. Researchers and clinicians now have access to research-grade insights from within and beyond the walls of their institution.
  146.                     </p>
  147.                     <p>
  148.                         <a href="#!">Learn more</a>
  149.                     </p>
  150.                 </article>
  151.             </div>
  152.         </section>
  153.         <section class="o-row o-row--lg">
  154.             <div class="o-container">
  155.                 <header>
  156.                     <h2>
  157.                         Do well by doing good. Join the leading tech company in the fight against cancer.
  158.                     </h2>
  159.                 </header>
  160.                 <p>
  161.                     <a href="#!">Our story</a>
  162.                 </p>
  163.                 <p>
  164.                     <a href="#!">Our values</a>
  165.                 </p>
  166.                 <p>
  167.                     <a href="#!">Join our team</a>
  168.                 </p>
  169.             </div>
  170.             <div class="o-container">
  171.                 <figure>
  172.                     <img src="img/jpg/img-4.jpg" alt="Dr. James Hamrick & Sarika Vora in their weekly team stand-up">
  173.                 </figure>
  174.             </div>
  175.             <div class="o-container">
  176.                 <h3>
  177.                     Life at Flatiron
  178.                 </h3>
  179.  
  180.                 <p>
  181.                     The talent and dedication of the people working at Flatiron makes everything we do possible. If you’re passionate about having an impact on accelerating cancer research and improving patient care, we’d love to hear from you.
  182.                 </p>
  183.                 <p>
  184.                     <a href="#!">Open positions</a>
  185.                 </p>
  186.             </div>
  187.         </section>
  188.         <section class="o-row o-row--lg">
  189.             <div class="o-container">
  190.                 <div class="u-max-width-xs">
  191.                     <h2>
  192.                         Let us tell you more.
  193.                     </h2>
  194.                     <p>
  195.                         We will email you to start the conversation. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  196.                     </p>
  197.                     <p>
  198.                         <a href="#!">Sign me up</a>
  199.                     </p>
  200.                 </div>
  201.             </div>
  202.         </section>
  203.         <footer class="o-row">
  204.             <div class="o-container">
  205.                 <p>
  206.                     Flatiron
  207.                 </p>
  208.                 <nav>
  209.                     <ul>
  210.                         <li><a href="#!">Contact</a></li>
  211.                         <li><a href="#!">Legal</a></li>
  212.                         <li><a href="#!">Privacy</a></li>
  213.                     </ul>
  214.                 </nav>
  215.  
  216.                 <nav>
  217.                     <ul>
  218.                         <li><a href="#!">Facebook</a></li>
  219.                         <li><a href="#!">Twitter</a></li>
  220.                         <li><a href="#!">LinkedIn</a></li>
  221.                     </ul>
  222.                 </nav>
  223.             </div>
  224.         </footer>
  225.     </body>
  226. </html>