Sunrun email

In this example below you will see how to do a Sunrun email with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by TimJKStrickland, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright TimJKStrickland ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Sunrun email</title>
  
  
  
  
  
</head>

<body>

  <style>
  /* Naiv */
   @font-face{
        font-family:'Naiv';
        font-style:normal;
        font-weight:400;
        src:local('Naiv'),
            local('Naiv'),
            url('https://dl.dropboxusercontent.com/s/spn9stwfv15i4ve/Naiv-NormalText.otf?dl=0') format('otf');
    }
/* Droid Sans */
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Sans'), local('DroidSans'), url(https://fonts.gstatic.com/s/droidsans/v6/s-BiyweUPV0v-yRb-cjciAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

table {
  border-radius: 5px;
  margin: 0 auto;
  width: 550px;
}

table, tr, td {
  font-family: "Droid Sans", Arial;
}

td {
  width: 50px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
/*   border: 1px solid #00ADE6; */
/*   padding: 10px; */
  margin: 0;
  height: 100px;
}
h1 {
  font-family: "Naiv", "Droid Sans", Arial;
}
.header {
  padding: 10px;
  background: url(https://dl.dropboxusercontent.com/s/onzd53hunjjezzl/Moonlight-01.png?dl=0);
  background-repeat: no-repeat;
  background-size: contain;
  color: #FFF;
  font-weight: 700;
  text-align: left;
/*   padding-left: 40px; */
  vertical-align: top;
  
}
</style>
<table>
  <tr>
    <td class="header" colspan ='3'><img src="http://solar.sunrun.com/assets/desktop-a/images/logo.svg" width="120px" height="50px" alt="" /></td>
  </tr>
  <tr>
    <td colspan="3">
      <h1>What if you could harness the power of the sun at night?</h1>
    </td>
  </tr>
  <tr>
    <td>As the largest dedicated residential solar company in the country, you could say we know a thing or two about the sun and daylight. What may surprise you is that we also know a thing or two about the night and darkness. In fact, you’ll probably be floored to know that we’ve spent countless hours trying to power your home all day and all night.
    </td>
  </tr>
  <tr>
    <td colspan="3">As the largest dedicated residential solar company in the country, you could say we know a thing or two about the sun and daylight. What may surprise you is that we also know a thing or two about the night and darkness. In fact, you’ll probably be floored to know that we’ve spent countless hours trying to power your home all day and all night.

Did you know that lunar energy makes up about 95% of the known universe? Other things — like solar energy, buildings, puppies, and you — all make up the other 5%!

With all that potential energy lying around, we couldn’t let it go to waste.

That’s why we’re excited to announce our new product: lunar energy panels!

That’s right — with the help of a lot of exciting research, sleepless nights, and some of the greatest thinkers in the world, Sunrun has developed the first ever lunar energy panel systems in the world.

With our patented LunarLight technology, your home can absorb tons of lunar energy and convert it into clean, renewable power for your home. Combined with our daytime solar system, you can save money every hour of the day, and then some!

But you don’t have to believe us — see for yourself today. Reach out to Sunrun and one of our expert lunar energy consultants will provide you with a free, personalized quote

Happy April Fools!

Power Forward, – The Sunrun Team</td>
  </tr>
</table>
  
  

</body>

</html>

Comments