Skip to content

Instantly share code, notes, and snippets.

View hteumeuleu's full-sized avatar

HTeuMeuLeu hteumeuleu

327 followers · 23 following
View GitHub Profile
@hteumeuleu
hteumeuleu / fake-background-image.html
Created July 18, 2017 20:45
Fake background with a real image in email
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<meta charset="UTF-8" />
<title>Fake background in emails</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
@hteumeuleu
hteumeuleu / netflix-stranger-things-2.html
Created October 19, 2017 13:12
Netflix Stranger Things 2 Email
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media yahoo
{
table
@hteumeuleu
hteumeuleu / mailchimp-2018.html
Created January 25, 2018 12:52
What's new in Mailchimp ? (newsletter from January 2018)
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraph.org/schema/"> <head>
<meta property="og:title" content="What’s new in MailChimp?"/>
<meta property="fb:page_id" content="43929265776" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="referrer" content="origin" />
<!-- NAME: FALL COLORS -->
<!--[if gte mso 15]>
<xml>
@hteumeuleu
hteumeuleu / gmail-animation.html
Created April 26, 2018 13:49
The new Gmail loading animation is just HTML and CSS.
<style>
body{margin:0;width:100%;height:100%} body,td,input,textarea,select{font-family:arial,sans-serif} input,textarea,select{font-size:100%} #loading{position:absolute;width:100%;height:100%;z-index:1000;background-color:#fff} .msg{ color: #757575; font: 20px/20px Arial, sans-serif; letter-spacing: .2px; text-align: center } #nlpt{ animation: a-s .5s 2.5s 1 forwards; background-color: #f1f1f1; height: 4px; margin: 56px auto 20px; opacity: 0; overflow: hidden; position: relative; width: 300px } #nlpt::before{ animation: a-lb 20s 3s linear forwards; background-color: #db4437; content: ''; display: block; height: 100%; position: absolute; transform: translateX(-300px); width: 100% } @keyframes a-lb{ 0%{transform:translateX(-300px)}5%{transform:translateX(-240px)}15%{transform:translateX(-30px)}25%{transform:translateX(-30px)}30%{transform:translateX(-20px)}45%{transform:translateX(-20px)}50%{transform:translateX(-15px)}65%{transform:translateX(-15px)}70%{transform:translateX(-10px)}95%{transform:translateX(-1
@hteumeuleu
hteumeuleu / outlook-adaptive-card-flight.html
Created May 7, 2018 20:00
Outlook Adaptive Card - Flight Itinerary Example
<div class="_14Jtf8DbUC3EHtjC4hMK4V"><div class="ac-container" tabindex="0" aria-label="<s>Your flight is confirmed for you and 3 other passengers from San Francisco to Amsterdam on Friday, October 10 8:30 AM</s>" style="display: flex; flex-direction: column; justify-content: flex-start; background-color: rgb(255, 255, 255); box-sizing: border-box; flex: 0 0 auto; padding: 20px;"><div class="ac-columnSet" style="display: flex; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto;"><div class="ac-container" style="display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; min-width: 0px; flex: 1 1 50px;"><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: left; font-size: 17px; line-height: 22.61px; color: rgb(51, 51, 51); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;"><strong>FLIGHT
@hteumeuleu
hteumeuleu / img-video.html
Created June 19, 2018 14:41
Testing support for <img src="video.mp4"> in email clients
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing support for &lt;img src="video.mp4"&gt; in email clients</title>
<style>
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; }
</style>
</head>
<body>
@hteumeuleu
hteumeuleu / mso-allowpng.html
Created July 6, 2018 13:41
Is AllowPNG actually useful ?
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="fr">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
@hteumeuleu
hteumeuleu / gmail.html
Created August 24, 2018 12:11
Gmail Confidential Mode Email
<html>
<head></head>
<body>
<div style="width: 100%; padding: 24px 0 16px 0; background-color: #f5f5f5; text-align: center;">
<div style="display: inline-block; width: 90%; max-width: 680px; min-width: 280px; text-align: left; font-family: Roboto,Arial,Helvetica,sans-serif; font-size: 13px;" dir="ltr">
<div style="display: block; padding: 0 2px;">
<div style="display: block; background: #fff; height: 2px;"></div>
</div>
<div style="border-left: 1px solid f0f0f0; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;">
<div style="padding: 24px 32px 24px 32px; background: #fff; border-right: 1px solid #eaeaea; border-left: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea;">
@hteumeuleu
hteumeuleu / apple-arkit2-ios12-test.html
Created September 26, 2018 15:43
Apple AR Kit 2 in an email test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iOS 12 ARKit 2</title>
<style>
body { font:1em "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; }
a { color:#0070c9; }
</style>
<meta name="x-apple-disable-message-reformatting" />
@hteumeuleu
hteumeuleu / the-fab-four-outlook-com-dark-mode.html
Last active October 24, 2018 19:05
The Fab Four in Outlook.com dark mode
<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%; }