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.

            
              
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <!-- If you delete this meta tag, Half Life 3 will never be released. -->
  <meta name="viewport" content="width=device-width" />
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Mapbox Email</title>

  <style>

  /* -------------------------------------
  GLOBAL
  ------------------------------------- */
  * {
    margin:0;
    padding:0;
  }
  * { font-family: Arial,sans-serif; }

  img {
    max-width: 100%;
  }

  .a5q {display: none !important;}
  .a6S {display: none !important;}

  a img.no-border {
    text-dectoration: none;
    border: none;
  }
  a.no-border {
    text-decoration: none;
  }

  img.round { border-radius: 4px;}

  .collapse {
    margin:0;
    padding:0;
  }
  body {
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:none;
    width: 100%!important;
    height: 100%;
    font-size:18px;
    line-height:20px;
    background-color: #F8F8F8;
  }

  hr {
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #eee;
  }

  .a6S {
    display: none !important;
  }



  /* Code Blocks & Pre */
  .code,
  code,
  em code,
  code em,
  code strong,
  strong code,
  pre,
  em pre,
  pre em,
  pre strong,
  strong pre {
    font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace;
    white-space: pre-wrap;
  }

  strong code,
  code strong,
  code.strong,
  strong.code,
  .strong.code,
  .code .strong,
  code .strong,
  pre strong,
  strong pre,
  pre.strong,
  .strong pre,
  pre .strong {
    font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace;
    font-weight:bold;
  }

  code em,
  em code,
  pre em,
  em pre {
    font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace;
    font-style:italic;
  }

  code,
  pre {
    background:rgba(0,0,0,0.025);
    font-size:12px;
    line-height:20px;
    padding:3px;
    border-radius: 3px;
  }
  pre {
    display:block;
    padding:10px;
    word-break:break-all;
    word-wrap:break-word;
    white-space:pre;
    white-space:pre-wrap;
    -moz-tab-size:4;
    tab-size:4;
  }
  pre code {
    background:transparent;
    padding:0;
  }

  .pre-scrollable {
    max-height:300px;
    overflow-y:scroll;
  }

  /* sub/superscripts */
  sup,
  sub {
    height:0;
    line-height:1;
    vertical-align:baseline;
    _vertical-align:bottom;
    position:relative;
    font-size:75%;
  }
  sup {
    bottom:1ex;
  }
  sub {
    top:.5ex;
  }

  /* -------------------------------------
  ELEMENTS
  ------------------------------------- */
  a { color: #4264fb;}

  .btn {
    background: #40bde7;
    padding-top: 20px;
    padding-right: 40px;
    padding-bottom: 20px;
    padding-left: 40px;
    border-bottom: 3px solid #2399c1;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-size: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  img.center {
    display: block;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  p.callout {
    padding:15px;
    background-color:#DEDFE1;
    margin-bottom: 25px;
    color: #8C8D8F;
    text-align: center;
  }

  p.caption {
    color: #9aadb7;
    font-size: 13px;
    margin-top: 10px;
  }

  p.caption a {
    font-size: 13px;
  }

  p.footer {
    color: #979797;
    font-size: 12px;
    text-align: left;
  }

  p.footer span {
    color: #d7d7d7;
  }


  a.footer {
    font-size: 15px;
    text-align: left;
    display: block;
    float: left;
    padding-top: 20px;
    padding-left: 20px;
    text-decoration: none;
    font-weight: bold;
  }
  img.footer {
    float:left;
  }
  p.no-float a {
    display: block;
    float: clear;
    text-align: center;
    color: #b0acb2;
  }

  p.footer.address {
    text-align: center;
    font-size: 10px;
  }

  span.appleAddress {
    font-size: 10px !important;
    -webkit-text-size-adjust: none !important;
  }

  hr.footer {
    border: 0;
    color: #D1D1D1;
    background-color: #D1D1D1;
    height: 3px;
    margin-bottom: 10px;
  }

  .button {
    background: #4264fb;
    padding-top: 15px;
    padding-right: 40px;
    padding-bottom: 15px;
    padding-left: 30px;
    /* border-bottom: 3px solid #4264fb; */
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    width: auto;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
  }

  .button.no-arrow {
    padding-right: 30px !important;
  }


  .button.fill-pink {background: #ee4e8b;}

  .button.stroke {
    background-color: transparent;
    box-shadow: 0px 0px 0px 2px #4264fb inset;
    color: #4264fb;
  }

  .button.stroke.no-arrow {
    background-color: transparent;
    box-shadow: 0px 0px 0px 2px #4264fb inset;
    padding-right: 30px;
    color: #4264fb;
  }

  .button.short {
    padding: 5px 30px;
  }


  a.button img.arrow {
    width:12px;min-height:12px;border:0;line-height:100%;outline:none;text-decoration:none;display:inline;margin-left:5px;
  }

  a.button img.small-button-mobile-no-arrow {
    width:12px;min-height:12px;border:0;line-height:100%;outline:none;text-decoration:none;display:inline;margin-left:5px;
  }


  a.button {
    color: #fff;
  }

  table.social {
    /*  padding:15px; */
    background-color: #ebebeb;

  }
  .social .soc-btn {
    padding: 3px 7px;
    font-size:12px;
    margin-bottom:10px;
    text-decoration:none;
    color: #FFF;font-weight:bold;
    display:block;
    text-align:center;
  }
  a.fb { background-color: #3B5998!important; }
  a.tw { background-color: #1daced!important; }
  a.gp { background-color: #DB4A39!important; }
  a.ms { background-color: #000!important; }

  .sidebar .soc-btn {
    display:block;
    width:100%;
  }

  .code-example {
    background-color: #f8f8f8;
    border: 1px solid #c8c8c8;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 20px;
    font-size: 14px;
    font-family: "Courier New", Courier, monospace;
    margin-bottom: 30px;
  }

  .code-example div {
    padding-left: 40px;
    font-size: 14px;
    font-family: "Courier New", Courier, monospace;
  }
  .code-example  a, .code-example  div {
    font-size: 14px;
    font-family: "Courier New", Courier, monospace;
  }



  /* -------------------------------------
  HEADER
  ------------------------------------- */
  table.head-wrap { width: 100%;}

  .header.container table td.logo { padding: 15px; }
  .header.container table td.label { padding: 15px; padding-left:9px;}
  .header.container table td a img { margin-left: 20px; }


  /* -------------------------------------
  BODY
  ------------------------------------- */
  table.body-wrap { width: 100%;}


  /* -------------------------------------
  FOOTER
  ------------------------------------- */
  table.footer-wrap { width: 100%;  clear:both!important; margin-top: 20px;
  }
  .footer-wrap .container td.content  p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}
  .footer-wrap .container td.content p {
    font-size:10px;
    font-weight: bold;

  }
  .center p.footer {
    text-align: center;
  }

  a.footer {
    width: 130px;
    line-height: 24px;
  }
  p.footer a {
    color:#d7d7d7;
  }

  /* -------------------------------------
  TYPOGRAPHY
  ------------------------------------- */
  h1,h2,h3,h4,h5,h6 {
    font-family: "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    line-height: 1.4; margin-top: 30px;
    margin-bottom: 10px; color:#1f3349;
  }
  h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }

  h1 { font-weight:600; font-size: 30px; margin-bottom: 15px;}
  h2 { font-weight:600; font-size: 26px; margin-bottom: 12px;}
  h3 { font-weight:500; font-size: 20px; margin-bottom: 12px;}
  h4 { font-weight:500; font-size: 18px; margin-bottom: 10px; }
  h5 { font-weight:400; font-size: 16px; margin-bottom: 8px; }
  h6 { font-weight:600; font-size: 14px; text-transform: uppercase; letter-spacing: 2px}

  .collapse { margin:0!important;}

  body .dark {color: white;}

  p, a, ul, ol {
    font-family: "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-bottom: 10px;
    font-weight: normal;
    color: #1f3349;
    font-size:15px;
    line-height:1.6;
  }
  p.lead { font-size:22px; }
  p.last { margin-bottom:0px;}
  p.center {text-align: center;}


  ul li {
    margin-left:24px;
    margin-bottom: 14px;
  }

  ol li {
    margin-left:32px;
    /*list-style-position: outside;*/
    margin-bottom: 14px;
  }

  a {
    color: #4264fb;
    text-decoration: none;
  }

  a:hover {
    color: #314ccd;
  }

  a.button:hover { color: rgba(249, 255, 244, 0.785);}
  a.button.stroke:hover { color: #314ccd;}

  blockquote {
    margin: 30px 0;
    border: 4px solid #F6F6F6;
    padding: 10px;
  }

  blockquote p{
    color: #3c4e5a;
    font-weight: 200;
    line-height: 26px;
    font-size: 18px;
    margin: 0;
  }

  cite {
    display: block;
  }

  .small { font-size: 12px; }
  .grey { color: #929ca3;}

  /* Keylines
  ------------------------------------------------------- */
  .keyline-all    { border:1px dotted rgba(0,0,0,0.20); }
  .keyline-top    { border-top:1px dotted rgba(0,0,0,0.20); }
  .keyline-right  { border-right:1px dotted rgba(0,0,0,0.20); }
  .keyline-bottom { border-bottom:1px dotted rgba(0,0,0,0.20); }
  .keyline-left   { border-left:1px dotted rgba(0,0,0,0.20); }

  .dark .keyline-all    { border:1px dotted rgba(255,255,255,0.25); }
  .dark .keyline-top    { border-top:1px dotted rgba(255,255,255,0.25); }
  .dark .keyline-right  { border-right:1px dotted rgba(255,255,255,0.25); }
  .dark .keyline-bottom { border-bottom:1px dotted rgba(255,255,255,0.25); }
  .dark .keyline-left   { border-left:1px dotted rgba(255,255,255,0.25); }

  .spacer {
    margin-top: 40px;
    margin-bottom: 40px;
    clear:both;
  }

  .spacer-small {
    margin-top: 20px;
    margin-bottom: 20px;
    clear:both;
  }

  .spacer-bottom {
    margin-top: 0px;
    margin-bottom: 40px;
  }

  .spacer-top {
    margin-top: 40px;
    margin-bottom: 0px;
  }

  /* Margins
  ------------------------------------------------------- */

  .space-left0  { margin-left:    5px;}
  .space-left1  { margin-left:   10px;}
  .space-left2  { margin-left:   20px;}
  .space-left3  { margin-left:   30px;}
  .space-left4  { margin-left:   40px;}
  .space-left8  { margin-left:   80px;}
  .space-left12 { margin-left:  120px;}
  .space-left16 { margin-left:  160px;}
  .space-left20 { margin-left:  200px;}
  .space-left24 { margin-left:  240px;}

  .space-right0  { margin-right:   5px;}
  .space-right1  { margin-right:  10px;}
  .space-right2  { margin-right:  20px;}
  .space-right3  { margin-right:  30px;}
  .space-right4  { margin-right:  40px;}
  .space-right8  { margin-right:  80px;}
  .space-right12 { margin-right: 120px;}
  .space-right16 { margin-right: 160px;}
  .space-right20 { margin-right: 200px;}
  .space-right24 { margin-right: 240px;}

  .space-bottom0                { margin-bottom:  5px;}
  .space-bottom1                { margin-bottom: 10px;}
  .space-bottom, /* deprecated, use space-bottom2 */
  .space-bottom2                { margin-bottom: 20px;}
  .space-bottom4                { margin-bottom: 40px;}
  .space-bottom8                { margin-bottom: 80px;}

  .space-top0                   { margin-top:  5px;}
  .space-top1                   { margin-top: 10px;}
  .space-top2                   { margin-top: 20px;}
  .space-top4                   { margin-top: 40px;}
  .space-top8                   { margin-top: 80px;}

  /* Padding
  ------------------------------------------------------- */
  .pad0  { padding:5px; }
  .pad0y { padding-top:5px; padding-bottom:5px; }
  .pad0x { padding-right:5px; padding-left:5px; }

  .pad1    { padding:10px; }
  .pad2    { padding:20px; }
  .pad4    { padding:40px; }

  .pad1x { padding-left: 10px; padding-right: 10px;}
  .pad2x { padding-left: 20px; padding-right: 20px;}
  .pad4x { padding-left: 40px; padding-right: 40px;}

  .pad1y { padding-top: 10px; padding-bottom: 10px;}
  .pad2y { padding-top: 20px; padding-bottom: 20px;}
  .pad4y { padding-top: 40px; padding-bottom: 40px;}

  .pad8 {  padding: 80px; }
  .pad8y { padding-top: 80px; padding-bottom: 80px;}
  .pad8x { padding-left: 80px; padding-right: 80px;}


  /* Additional Utility Classes
  ------------------------------------------------------- */
  .fr                           { float:right; }
  .fl                           { float:left; }
  .unfloat                      { float:none; }
  .dot                          { border-radius:50%; }
  .quiet                        { color:#7f7f7f; color: rgba(0,0,0,.5); }
  .dark .quiet                  { color: #7f7f7f; color: rgba(255,255,255,.5);}
  .center                       { text-align:center; }
  .contain                      { position:relative; }
  .clip                         { overflow:hidden; }
  .hidden.hidden                { display:none; }
  .text-left                    { text-align:left; }
  .text-right                   { text-align:right; }
  .space > *                    { margin-right:5px; }
  .hide-tablet, .hide-mobile    { display:block; }
  .show-tablet, .show-mobile    { display:none; }
  .show-mobile                  { display:none; }
  .show-mobile.inline           { display:none; }
  img.inline, .inline           { display:inline-block; }
  .break-word                   { word-wrap:break-word; }
  .align-middle                 { vertical-align: middle;}
  .align-top                    { vertical-align: top;}
  .block                        { display:block; }

  .dark { color: white !important;}

  /* ---------------------------------------------------
  RESPONSIVENESS
  Nuke it from orbit. It's the only way to be sure.
  ------------------------------------------------------ */

  /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
  .container {
    display:block!important;
    max-width:600px!important;
    margin:0 auto!important; /* makes it centered */
    clear:both!important;
  }

  /* This should also be a block element, so that it will fill 100% of the .container */
  .content {
    max-width:600px;
    margin:0 auto;
    display:block;
  }

  .inner-content {
    padding-left: 40px;
    padding-right: 40px;
    max-width: 465px;
  }

  .dark-section {
    background-color: #223b53;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 30px;
    margin-bottom: 30px;
    color: white !important;
  }
  img.bleed.top {
    border-radius: 5px 5px 0px 0px;
    /*max-width:545px;*/
  }

  /* Let's make sure tables in the content area are 100% wide */
  .content table { width: 100%; }


  /* Odds and ends */
  .column {
    width: 300px;
    float:left;
  }
  .column tr td { padding: 15px; }
  .column-wrap {
    padding:0!important;
    margin:0 auto;
    max-width:600px!important;
  }
  .column table { width:100%;}
  .social .column {
    width: 280px;
    min-width: 279px;
    float:left;
  }

  .margin0  { margin-left:04.1666%; }
  .margin1  { margin-left:08.3333%; }
  .margin2  { margin-left:16.6666%; }
  .margin3  { margin-left:25.0000%; }
  .margin4  { margin-left:33.3333%; }
  .margin5  { margin-left:41.6666%; }
  .margin6  { margin-left:50.0000%; }
  .margin7  { margin-left:58.3333%; }
  .margin8  { margin-left:66.6666%; }
  .margin9  { margin-left:75.0000%; }
  .margin10 { margin-left:83.3333%; }
  .margin11 { margin-left:91.6666%; }
  .margin12 { margin-left:100.0000%; }

  /* reverse margins on right-floated elements */
  .margin0r  { margin-right:04.1666%; }
  .margin1r  { margin-right:08.3333%; }
  .margin2r  { margin-right:16.6666%; }
  .margin3r  { margin-right:25.0000%; }
  .margin4r  { margin-right:33.3333%; }
  .margin5r  { margin-right:41.6666%; }
  .margin6r  { margin-right:50.0000%; }
  .margin7r  { margin-right:58.3333%; }
  .margin8r  { margin-right:66.6666%; }
  .margin9r  { margin-right:75.0000%; }
  .margin10r { margin-right:83.3333%; }
  .margin11r { margin-right:91.6666%; }
  .margin12r { margin-right:100.0000%; }
  /* Be sure to place a .clear element after each set of columns, just to be safe */
  .clear { display: block; clear: both; }

  .col0    { float:left; width:04.1666%; max-width:50px; }
  .col1    { float:left; width:08.3333%; max-width:100px; }
  .col2    { float:left; width:16.6666%; max-width:200px; }
  .col3    { float:left; width:25.0000%; max-width:300px; }
  .col4    { float:left; width:33.3333%; max-width:400px; }
  .col5    { float:left; width:41.6666%; max-width:500px; }
  .col6    { float:left; width:50.0000%; max-width:600px; }
  .col7    { float:left; width:58.3333%; max-width:700px; }
  .col8    { float:left; width:66.6666%; max-width:800px; }
  .col9    { float:left; width:75.0000%; max-width:900px; }
  .col10   { float:left; width:83.3333%; max-width:1000px; }
  .col11   { float:left; width:91.6666%; max-width:1100px; }
  .col12   { width:100%; display:block; }

  a img {
    border: none !important;
    text-decoration: none;
  }
  @media only screen and (max-width:640px) {
    .col1,
    .col2,
    .col3,
    .col4,
    .col5,
    .col6,
    .col7,
    .col8,
    .col9,
    .col10,
    .col11,
    .col12 { width:100%; max-width:100%; margin-bottom: 20px; }

    .col1 img,
    .col2 img,
    .col3 img,
    .col4 img,
    .col5 img,
    .col6 img,
    .col7 img,
    .col8 img,
    .col9 img,
    .col10 img,
    .col11 img,
    .col12 img { width:80%; max-width:80%; margin-bottom: 20px; margin-left: 10%; margin-right: 10%; }

  }
  .clearfix { display:block; clear:both; padding-top:10px; padding-bottom:10px;}
  .clearfix:after {
    content:'';
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
  }


  p.loud { color:#1f3349; font-size: 16px;}


  .enterprise-form {
    background-color: #f5f5f5;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    margin-top: 20px;
    padding-top: 10px;
    margin-bottom: 20px;
  }

  .enterprise-form table {
    font-family: "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-bottom: 10px;
    font-weight: normal;
    color: #96a6b0;
    font-size:15px;
    line-height:1.6;
  }

  .enterprise-form table thead tr th {
    font-weight: bold;
    color: #294869;
    text-align: left;
  }

  .enterprise-form table thead tr td:first-of-type {
    color: #294869;
    text-align: left;
  }


  /* -------------------------------------------
  PHONE
  For clients that support media queries.
  Nothing fancy.
  -------------------------------------------- */
  @media only screen and (max-width: 600px) {

    p, a {
      font-size: 18px;
    }

    a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}

    div[class="column"] { width: auto!important; float:none!important;}

    table.social div[class="column"] {
      width:auto!important;
    }
    .button {
      font-size: 12px;
      margin-top: 10px;
      margin-bottom: 10px;
    }


  }
  </style>

</head>

<body bgcolor="#FFF">

  <!-- HEADER -->
<table class="head-wrap">
    <tr>
      <td></td>
      <td class="header container">

        <div class="content" style="margin-top: 30px;">
          
          </div>

        </td>
        <td></td>
      </tr>
    </table>
<!-- /HEADER -->

    <!-- BODY -->
    <table class="body-wrap">
      <tr>
        
        <td class="container">

          <div class="content" style="background: #FFFFFF; max-width:545px; border-radius: 5px; padding-bottom: 20px;">
            <table>
              <tr>
                <td>
                  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/443424/8Ggt3Bq.gif"> 

<div class="spacer inner-content">
    <p class="loud">Check out <em>Cartogram</em>, a new drag-and-drop tool to create a custom map in seconds.</p> 
    <p class="loud">Upload a picture, select the colors you want, and get a map that fits your brand and style, ready to be used in your website or mobile application, or edited in Studio. </p>
    
     <div class="center">
   <a href="https://www.mapbox.com/cartogram/?utm_source=cartogram-launch&utm_medium=email&utm_content=landing-page-cartogram&utm_campaign=cartogram-launch" class="button no-arrow">Build your map with Cartogram</a>
    </div> 
    
</div>

                </td>


              </tr>
            </table>
          </div><!-- /content -->

        </td>
        <td></td>
      </tr>
    </table><!-- /BODY -->

    <!-- FOOTER -->
    <table class="footer-wrap">
      <tr>
        <td></td>
        <td class="container">

          <!-- content -->
          <div class="content">
            <table>

              <tr>
                <div class="center space-bottom2">
                  <a alt="Follow us on Twitter" href="http://www.twitter.com/mapbox"><img src="https://c1.staticflickr.com/3/2138/32818677921_458dc5321a_o.png"  width="40px;" height="40px"></a>
                  <a alt="Follow us on Facebook"  href="https://www.facebook.com/Mapbox"><img src="https://c2.staticflickr.com/4/3706/32099328674_791ef8aed1_o.png"  width="40px;" height="40px"></a>
                  <a alt="Follow us on Linkedin"  href="https://www.linkedin.com/company/mapbox"><img src="https://c1.staticflickr.com/3/2755/32789134112_f4da4b8d45_o.png"  width="40px;" height="40px"></a>
                  <a alt="Follow us on Instagram"  href="https://www.instagram.com/mapbox/"><img src="https://c1.staticflickr.com/1/463/32099326714_67e65743d0_o.png" width="40px;" height="40px"></a>
                </div>
              </tr>

            </table>


          </div><!-- /content -->

          <div class="center">
            <p class="footer">
              <a href="#" class="untracked"><unsubscribe>Unsubscribe</unsubscribe></a>
              <span class="pad1x">|</span>
              <a href="#" class="untracked">View this email online</a>

            </p>
          </div>


          <p class="address footer center">© 2017 Mapbox | <span class="appleAddress">1509 16th St NW, Second Floor, Washington, DC 20036</span></p>

        </td>
      </tr>
    </table><!-- /FOOTER -->

  </body>


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console