<style>
  @media (max-width: 600px) { .flex--size { width: 100% !important; } .flex--stripe { height: 3px !important; } }
</style>
<!-- / Content with Gutter -->
<table border='0' cellpadding='0' cellspacing='0' class='flex--size' width='100%'>
  <tr>
    <td bgcolor='#125662' class='flex--stripe' height='5'></td>
  </tr>
  <tr>
    <td align='center' bgcolor='#1b6a75'>
      <table border='0' cellpadding='0' cellspacing='0' class='flex--size' width='600'>
        <tr>
          <td width='20'></td>
          <td>
            <img alt='illustration of ribbon top' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/140/banner--orientation-top.png' style='display: block;' width='100%' />
          </td>
          <td width='20'></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align='center' bgcolor='#278897'>
      <table border='0' cellpadding='0' cellspacing='0' class='flex--size' width='600'>
        <tr>
          <td width='20'></td>
          <td>
            <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/140/banner--orientation-bottom.png' style='display: block;' width='100%' />
          </td>
          <td width='20'></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js