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 / flexbox-emails-laposte.html
Last active January 13, 2016 10:17
Flexbox in an email (La Poste)
<div style="display:flex; flex-wrap:wrap;">
<span class="Object" id="OBJ_PREFIX_DWT100_com_zimbra_url">
<a style="flex:1 1 auto;" href="https://flic.kr/p/9sT8ev"><img src="bed2bb71f0.jpg" alt="" /></a>
</span>
<span class="Object" id="OBJ_PREFIX_DWT101_com_zimbra_url">
<a style="flex:1 1 auto;" href="https://flic.kr/p/npQD9i"><img src="c16031076e.jpg" alt="" /></a>
</span>
</div>
@hteumeuleu
hteumeuleu / ted16-basic-super-mail-forward.html
Created August 2, 2016 15:44
Example code from my TEDC16 talk of a basic Super Mail Forward version
<style>
* [aria-labelledby="step1"],
.step2,
.step4 {
background:grey!important;
}
@media yahoo {
.step2 {
background:green!important;
@hteumeuleu
hteumeuleu / gmail-display.html
Created September 2, 2016 14:12
Gmail display Test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gmail display Test</title>
<style>
.box, * [aria-labelledby="box"] {
display:inline-block; width:50px; height:50px; padding:10px; margin:5px; background:#e4505d; font:bold 1em sans-serif; color:#fff; vertical-align:top;
}
</style>
@hteumeuleu
hteumeuleu / the-fab-four.html
Created December 22, 2016 10:57
The Fab Four (fixed for iOS 9 and 10)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Fab Four</title>
<style>
html, body { min-width:260px; min-height:100%; padding:0; Margin:0 auto; background:#fff; }
a img { border:none; }
.ReadMsgBody { width:100%; }
.ExternalClass { width:100%; }
@hteumeuleu
hteumeuleu / outlook-com-latest-bug.html
Created April 10, 2017 11:02
Outlook.com's latest bug
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outlook.com Latest Bug</title>
</head>
<body>
<div style="max-width:480px; background:red;">
<img src="http://i.imgur.com/FmqnwPj.jpg" alt="" style="display:block; max-width:100%;" />
<img src="http://i.imgur.com/AXc8vRn.jpg" alt="" style="display:block; max-width:100%;" />
@hteumeuleu
hteumeuleu / outlook-com-latest-bug-fixed.html
Created April 10, 2017 12:29
Outlook.com's latest bug - Fixed !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outlook.com Latest Bug</title>
</head>
<body>
<div style="max-width:480px; background:red;">
<img src="http://pm1.narvii.com/6368/5b069d9f23264f59d4b53b98be7c457223e12ad4_hq.jpg" alt="" style="display:block; max-width:100%;" id="OWATemporaryImageDivContainer1" />
</div>
@hteumeuleu
hteumeuleu / iOS10-video.html
Created September 12, 2016 11:56
Video Player example for Apple Mail in iOS 10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>iOS 10 video</title>
<style type="text/css">
@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
.video-player { display:block !important; }
.video-fallback { display:none !important; }
}
@hteumeuleu
hteumeuleu / fake-background.html
Created July 18, 2017 19:52
Fake background 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 / 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