Skip to content

Instantly share code, notes, and snippets.

@hteumeuleu

hteumeuleu/the-fab-four-outlook-com-dark-mode.html

Last active October 24, 2018 19:05
Show Gist options
  • Save hteumeuleu/257b0ccd3e28f2cfbf89fa8ad23de46e to your computer and use it in GitHub Desktop.
Save hteumeuleu/257b0ccd3e28f2cfbf89fa8ad23de46e to your computer and use it in GitHub Desktop.
Download ZIP
The Fab Four in Outlook.com dark mode
Raw
the-fab-four-outlook-com-dark-mode.html
<div class="rps_ef59"><style type="text/css"><!-- .rps_ef59 html, .rps_ef59 body
{ min-width: 260px; min-height: 100%; padding: 0; margin: 0 auto; background: #fff; }
.rps_ef59 a img
{ border: none; }
.rps_ef59 .x_ReadMsgBody
{ width: 100%; }
.rps_ef59 .x_ExternalClass
{ width: 100%; }
.rps_ef59 .x_ExternalClass *
{ line-height: 100%; }
.rps_ef59 table, .rps_ef59 td
{ border-collapse: collapse; }
--></style><style type="text/css"><!-- --></style>
<div>
<div>
<div style="margin: 0px auto; max-width: 800px; min-width: 260px; font: 16px sans-serif, serif, EmojiFont;">
<div style="text-align:center; font-size:0">
<div style="width:190px; max-width:100%">
<h1 style="margin: 20px auto; color: rgb(232, 226, 227); font: bold 32px sans-serif; text-align: left; width: 190px; letter-spacing: -0.05em;" color="rgb(232, 226, 227)">
The Fab Four</h1>
</div>
</div>
<div style="text-align:center; font-size:0">
<div style="display: inline-block; font-size: 16px; text-align: left; color: rgb(232, 226, 227); background: rgb(0, 126, 178); vertical-align: top; width: 25%; min-width: 120px; max-width: 50%;" color="rgb(232, 226, 227)" bgcolor="rgb(0, 126, 178)">
<a href="https://dribbble.com/shots/2012212-Ringo-John" target="_blank" rel="noopener noreferrer" data-auth="NotApplicable" color="rgb(207, 142, 255)" style="color: rgb(207, 142, 255);"><img data-imagetype="External" src="/actions/ei?u=http%3A%2F%2Femails.hteumeuleu.fr%2Fwp-content%2Fuploads%2F2016%2F02%2Fringo.png&amp;d=2018-10-24T19%3A05%3A31.552Z" originalsrc="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/ringo.png" data-connectorsauthtoken="1" data-imageproxyendpoint="/actions/ei" data-imageproxyid="" alt="" width="200" border="0" style="display:block; width:100%; height:auto; max-width:240px"></a> </div>
<div style="display: inline-block; font-size: 16px; text-align: left; color: rgb(232, 226, 227); background: rgb(227, 79, 55); vertical-align: top; width: 25%; min-width: 120px; max-width: 50%;" color="rgb(232, 226, 227)" bgcolor="rgb(227, 79, 55)">
<a href="https://dribbble.com/shots/2012212-Ringo-John" target="_blank" rel="noopener noreferrer" data-auth="NotApplicable" color="rgb(207, 142, 255)" style="color: rgb(207, 142, 255);"><img data-imagetype="External" src="/actions/ei?u=http%3A%2F%2Femails.hteumeuleu.fr%2Fwp-content%2Fuploads%2F2016%2F02%2Fjohn.png&amp;d=2018-10-24T19%3A05%3A31.557Z" originalsrc="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/john.png" data-connectorsauthtoken="1" data-imageproxyendpoint="/actions/ei" data-imageproxyid="" alt="" width="200" border="0" style="display:block; width:100%; height:auto; max-width:240px"></a> </div>
<div style="display: inline-block; font-size: 16px; text-align: left; color: rgb(232, 226, 227); background: rgb(100, 76, 0); vertical-align: top; width: 25%; min-width: 120px; max-width: 50%;" color="rgb(232, 226, 227)" bgcolor="rgb(100, 76, 0)">
<a href="https://dribbble.com/shots/2012203-Paul-George" target="_blank" rel="noopener noreferrer" data-auth="NotApplicable" color="rgb(207, 142, 255)" style="color: rgb(207, 142, 255);"><img data-imagetype="External" src="/actions/ei?u=http%3A%2F%2Femails.hteumeuleu.fr%2Fwp-content%2Fuploads%2F2016%2F02%2Fgeorge.png&amp;d=2018-10-24T19%3A05%3A31.563Z" originalsrc="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/george.png" data-connectorsauthtoken="1" data-imageproxyendpoint="/actions/ei" data-imageproxyid="" alt="" width="200" border="0" style="display:block; width:100%; height:auto; max-width:240px"></a> </div>
<div style="display: inline-block; font-size: 16px; text-align: left; color: rgb(232, 226, 227); background: rgb(204, 65, 148); vertical-align: top; width: 25%; min-width: 120px; max-width: 50%;" color="rgb(232, 226, 227)" bgcolor="rgb(204, 65, 148)">
<a href="https://dribbble.com/shots/2012203-Paul-George" target="_blank" rel="noopener noreferrer" data-auth="NotApplicable" color="rgb(207, 142, 255)" style="color: rgb(207, 142, 255);"><img data-imagetype="External" src="/actions/ei?u=http%3A%2F%2Femails.hteumeuleu.fr%2Fwp-content%2Fuploads%2F2016%2F02%2Fpaul.png&amp;d=2018-10-24T19%3A05%3A31.566Z" originalsrc="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/paul.png" data-connectorsauthtoken="1" data-imageproxyendpoint="/actions/ei" data-imageproxyid="" alt="" width="200" border="0" style="display:block; width:100%; height:auto; max-width:240px"></a> </div>
</div>
<div style="text-align:center; font-size:0">
<div style="display: inline-block; font-size: 16px; text-align: left; color: rgb(232, 226, 227); background: rgb(0, 126, 178); vertical-align: top; width: 25%; min-width: 120px; max-width: 100%;" color="rgb(232, 226, 227)" bgcolor="rgb(0, 126, 178)">
<p style="margin:16px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<div style="display: inline-block; font-size: 16px; text-align: left; color: rgb(232, 226, 227); background: rgb(227, 79, 55); vertical-align: top; width: 25%; min-width: 120px; max-width: 100%;" color="rgb(232, 226, 227)" bgcolor="rgb(227, 79, 55)">
<p style="margin:16px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<div style="display: inline-block; font-size: 16px; text-align: left; color: rgb(232, 226, 227); background: rgb(100, 76, 0); vertical-align: top; width: 25%; min-width: 120px; max-width: 100%;" color="rgb(232, 226, 227)" bgcolor="rgb(100, 76, 0)">
<p style="margin:16px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<div style="display: inline-block; font-size: 16px; text-align: left; color: rgb(232, 226, 227); background: rgb(204, 65, 148); vertical-align: top; width: 25%; min-width: 120px; max-width: 100%;" color="rgb(232, 226, 227)" bgcolor="rgb(204, 65, 148)">
<p style="margin:16px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<div style="text-align: center; font-size: 0px; background: rgb(100, 76, 0);" bgcolor="rgb(100, 76, 0)">
<div style="display: inline-block; font-size: 16px; text-align: left; color: rgb(232, 226, 227); background: rgb(100, 76, 0); vertical-align: top; width: 40%; min-width: 120px; max-width: 100%;" color="rgb(232, 226, 227)" bgcolor="rgb(100, 76, 0)">
<p style="margin:16px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<div style="display: inline-block; font-size: 16px; text-align: left; color: rgb(232, 226, 227); background: rgb(0, 126, 178); vertical-align: top; width: 60%; min-width: 120px; max-width: 100%;" color="rgb(232, 226, 227)" bgcolor="rgb(0, 126, 178)">
<p style="margin:16px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente error quisquam facere ex harum dolores qui. </p>
</div>
</div>
<div style="text-align: center; font-size: 0px; background: rgb(227, 79, 55);" bgcolor="rgb(227, 79, 55)">
<div style="display: inline-block; font-size: 16px; text-align: left; color: rgb(232, 226, 227); background: rgb(204, 65, 148); vertical-align: top; width: 33%; min-width: 160px; max-width: 100%;" color="rgb(232, 226, 227)" bgcolor="rgb(204, 65, 148)">
<p style="margin:16px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<div style="display: inline-block; font-size: 16px; text-align: left; color: rgb(232, 226, 227); background: rgb(227, 79, 55); vertical-align: top; width: 34%; min-width: 160px; max-width: 100%;" color="rgb(232, 226, 227)" bgcolor="rgb(227, 79, 55)">
<p style="margin:16px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<div style="display: inline-block; font-size: 16px; text-align: left; color: rgb(232, 226, 227); background: rgb(100, 76, 0); vertical-align: top; width: 33%; min-width: 160px; max-width: 100%;" color="rgb(232, 226, 227)" bgcolor="rgb(100, 76, 0)">
<p style="margin:16px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<p style="margin:10px 0; color:#aaa; font:13px/1.5 sans-serif; text-align:right">
Illustrations by <a href="https://dribbble.com/elias" target="_blank" rel="noopener noreferrer" data-auth="NotApplicable" style="color:#aaa">Elias Stein</a> </p>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment