skill-assessment-app/vendor/assets/foundation-emails/templates/sidebar-hero.html

<style type="text/css">
  .header {
    background: #8a8a8a;
  }

  .header .columns {
    padding-bottom: 0;
  }

  .header p {
    color: #fff;
    padding-top: 15px;
  }

  .header .wrapper-inner {
    padding: 20px;
  }

  .header .container {
    background: transparent;
  }

  table.button.facebook table td {
    background: #3B5998 !important;
    border-color: #3B5998;
  }

  table.button.twitter table td {
    background: #1daced !important;
    border-color: #1daced;
  }

  table.button.google table td {
    background: #DB4A39 !important;
    border-color: #DB4A39;
  }

  .wrapper.secondary {
    background: #f3f3f3;
  }

  .sidebar .menu .menu-item {
    border-top: 1px solid #777777;
  }
</style>



<wrapper class="header">
  <container>
    <row class="collapse">
      <columns small="6">
        <img src="http://placehold.it/200x50/663399">
      </columns>
      <columns small="6">
        <p class="text-right">SIDEBAR HERO</p>
      </columns>
    </row>
  </container>
</wrapper>

<container>

  <spacer size="16"></spacer>

  <row>
    <columns>
      <h1>Hi, Elijah Baily</h1>
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
      <center>
        <img src="http://placehold.it/570x300" alt="">
      </center>
      <callout class="primary">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. <a href="#">Click it!</a></p>
      </callout>
    </columns>
  </row>
  <row>
    <columns large="7">
      <h3>Hello, Han Fastolfe</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nobis velit, aliquid pariatur at fugit. Omnis at quae, libero iusto quisquam animi blanditiis neque, alias minima corporis, ab in explicabo?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dignissimos voluptas minus, cupiditate voluptatem, voluptatum iste molestiae consectetur temporibus quae dolore nam possimus reprehenderit blanditiis laborum iusto sit. Perspiciatis, dolor.</p>
      <callout class="secondary">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quas optio totam quidem, placeat sunt, sit iusto fugit. Harum omnis deleniti enim nihil iure, quis laudantium veniam velit animi debitis. <a href="#">Click It!</a>
      </callout>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores minus eius amet alias odit accusantium, fugit perspiciatis nulla suscipit nisi. Laborum aliquid, voluptatum consectetur fugiat maxime architecto enim molestias aperiam!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eveniet veritatis, magnam ipsam et vero necessitatibus. Deserunt facilis impedit, adipisci illo laboriosam assumenda fugiat dolorum nam odio aliquid, sit est.</p>
      <button class="expand" href="#">Click Me!</button>
    </columns>
    <columns large="5" class="sidebar">
      <callout class="secondary">
        <h5>Header</h5>
        <p class="lead">Sub-header</p>
        <menu class="vertical">
          <item href="#">Just a Plain Link &raquo;</item>
          <item href="#">Just a Plain Link &raquo;</item>
          <item href="#">Just a Plain Link &raquo;</item>
          <item href="#">Just a Plain Link &raquo;</item>
          <item href="#">Just a Plain Link &raquo;</item>
          <item href="#">Just a Plain Link &raquo;</item>
          <item href="#">Just a Plain Link &raquo;</item>
        </menu>
      </callout>
      <callout class="secondary">
        <h6>CONNECT WITH US:</h6>
        <button class="facebook expand" href="#">Facebook</button>
        <button class="twitter expand" href="#">Twitter</button>
        <button class="google expand" href="#">Google+</button>
        <p>CONTACT INFO:</p>
        <p>Phone: 408-341-0600</p>
        <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
      </callout>
    </columns>
  </row>
  
  <center>
    <menu>
      <item href="#">Terms</item>
      <item href="#">Privacy</item>
      <item href="#">Unsubscribe</item>
    </menu>
  </center>

</container>