TEDC15 building interactive email

Developer
Mark Robbins
Size
7,094 Kb
Views
22,264
  1. TEDC15 building interactive email Previews
  2. TEDC15 building interactive email HTML Codes
  3. TEDC15 building interactive email JS Codes

How do I make an tedc15 building interactive email?

What is a tedc15 building interactive email? How do you make a tedc15 building interactive email? This script and codes were developed by Mark Robbins on 06 September 2022, Tuesday.

TEDC15 building interactive email Previews
IQ Test

TEDC15 building interactive email - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>TEDC15 building interactive email</title>
</head>
<body> <!DOCTYPE html> <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head background="https://staging-api.rebelmail.com/v0/emails/555cca3c0019921100d11589/track.gif?type=separator&amp;separator=A" style="background-image:url(https://staging-api.rebelmail.com/v0/emails/555cca3c0019921100d11589/track.gif?type=separator&amp;separator=B)">
<!--[if source]>- , _
/|/_) o |\_|_ |) | \| | | |/ | |/\_| | |(_/ \/|_/|/|_/|_/ \/ \/|/... (| RebelmailReb RebelmailRebelmailR RebelmailRebelmailRebel Rebelma Rebelma Rebelm Rebelm Rebel RebelmailRebe Rebel Rebel RebelmailRebelm Rebel Rebe RebelmailRebelma Rebe Rebel Rebel Rebe Rebe Rebe Rebe Rebe Rebe Rebe RebelmailRebelmai Rebel Rebe RebelmailRebelma Rebel Rebe Rebe Rebe Rebel Rebe Rebe Rebe Rebe Rebel Rebe Rebel Rebel Rebel Rebel Rebel Rebelm Rebel RebelmailRe Rebel Rebelmail Rebelm Rebelmail Rebelmail RebelmailRebelmailRebe RebelmailRebelma __ __ _ __ ________ / /_ ___ / /___ ___ ____ _(_) / / ___/ _ \/ __ \/ _ \/ / __ `__ \/ __ `/ / / / / / __/ /_/ / __/ / / / / / / /_/ / / /
/_/ \___/_.___/\___/_/_/ /_/ /_/\__,_/_/_/
-<![endif]--> <meta name="author" content="Rebelmail.com"> <!--[if source]>- This interactive email was built by Rebelmail.com
-<![endif]--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="date=no"> <meta name="format-detection" content="address=no"> <meta name="format-detection" content="email=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]--> <title> TEDC15 Boston </title> <style>
#mb-email-wrapper,body{margin:0!important;padding:0!important;-webkit-transform:scale(1)!important;background:}*{text-size-adjust:none!important;-ms-text-size-adjust:none!important;-webkit-text-size-adjust:none!important;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.ExternalClass *{line-height:100%}p{margin:0;padding:0}table{table-layout:fixed;margin:0 auto}table table table{table-layout:auto;border-collapse:collapse}table,td{mso-table-lspace:0;mso-table-rspace:0}img{-ms-interpolation-mode:bicubic;display:block}:focus{outline:0}a,a *,button,label,label+*+*{cursor:pointer!important}del{color:inherit}a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important}
</style><style>.ExternalClass input[type=checkbox]+label,.ExternalClass input[type=radio]+label{background:0 0;padding:0;height:auto}@media screen and (max-width:600px){.outer{width:100%}.img-100{width:100%;height:auto}.hide-mobile{display:none!important}}</style><style>
:root,body,html{background:#333;margin:0;padding:0}body{padding-top:5vw!important}img{background:rgba(0,0,0,.1)}#xz,#xz~[type=radio]{position:absolute;top:-5vw;display:none}#xz:checked,#xz:checked~[type=radio]{position:relative;display:inline-block}#xz:checked~* label:hover{background:rgba(0,0,0,.2)}#xz~.bjm{display:none}#xz:checked~.bjm{display:block}.jqa{width:98vw;height:55vw;overflow:hidden;margin:0 auto 5vw auto}.rkj{width:98vw;max-height:0;overflow:hidden;height:55vw;float:left;background:#f99839;-webkit-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);-webkit-transition:all 1s;transition:all 1s;box-shadow:0vw 1vw 5vw rgba(0,0,0,.8);border-radius:1vw;position:relative}.kom{background:#333}#wk:checked~* .ode{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#en:checked~* .wlk{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#km:checked~* .enn{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#dj:checked~* .lwb{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#yw:checked~* .bqm{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#qr:checked~* .myg{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#lb:checked~* .xnz{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#zo:checked~* .kmm{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#nd:checked~* .oxe{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#bm:checked~* .aoe{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#ja:checked~* .xkz{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#rj:checked~* .wek{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#oe:checked~* .exn{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}.gad,.meg{display:block;width:25%;height:55vw;position:absolute}.gad{left:0}.meg{right:0}*{font-family:open sans,helvetica neue,arial;text-align:center;color:#fff;font-weight:100;line-height:1.25}strong{font-weight:400}h1,h2,p{margin:0}h1{font-size:5vw;margin-top:.75em}h2{font-size:3.5vw}p{font-size:2.5vw}ul{margin:5vw 0 0 5vw;width:40vw;float:left}li{text-align:left;font-size:3.5vw}li.ade{list-style:none;font-weight:400;margin:0 0 .25em -3vw}blockquote{font-size:6vw;width:90%;display:inline-block}blockquote::before{content:open-quote}blockquote::after{content:close-quote}cite{font-size:2.5vw;text-align:right;width:90%;display:inline-block;position:relative}code:after{content:attr(lang);color:#888;background:#444;display:block;font-size:.5em;text-align:right}code{background:#272822;border:.25em solid #444;display:inline-block;margin:1em 0;vertical-align:top}.doj,code,code *{font-family:Consolas,Monaco,"Courier New",Courier,monospace!important}code span{color:#a6e22e;-webkit-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:initial}code ol{margin:0;padding:0;padding-right:.25em;list-style:none}code li{font-size:2vw;counter-increment:line 1;overflow:hidden;padding-left:2em}code li:before{content:counter(line);display:block;height:1em;width:1.2em;text-align:center;margin-left:-2em;padding:0 .25em;background:#444;color:#888;float:left;clear:both;box-shadow:-1em 1em 0 1em #444}.aye{width:25vw;height:25vw;display:block;margin:1vw auto;border-radius:50%;border:.5vw solid #fff}.xoz{position:absolute;bottom:1.5vw;right:1.5vw;width:20vw}.mwg,.gjd{width:45vw;margin:2vw;float:left}.kxm{width:45vw;float:left;font-size:3vw}.kxm:first-of-type{margin-left:5vw}.wzk{width:30vw;float:left;font-size:3vw}.wzk:first-of-type{margin-left:5vw}.wzk h2{font-weight:400}.wzk .egn{font-weight:400;font-size:5vw;margin:.5em 0}[for=xz]{font-size:8vw}button.ydw{padding:1em 0;margin:2em auto;width:30vw;display:block;background:#399af9;color:#fff;text-align:center;text-transform:uppercase;font-weight:700;border-radius:10px;border:4px ridge rgba(44,44,44,.5);font-size:2vw}button.ydw:hover{border:4px groove rgba(44,44,44,.5);color:#ddd;text-shadow:-1px -1px rgba(0,0,0,.5);background:#f9393a}button.ydw:focus{background:#229595}button.ydw:active{background:#952222}.qor{width:30vw;height:22.9vw;background-image:url(https://s3.amazonaws.com/rebelmail-templates/presentations/TEDC15/images/RedSox.jpg);background-size:100%;background-position:25% 50%;margin:0 auto;-webkit-transition:all .5s;transition:all .5s;-webkit-transition-delay:3s;transition-delay:3s}.qor:hover{background-size:500%;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition:all 15s;transition:all 15s}.nqd,.zqo{text-align:left;padding:.5em;background:#fff;color:#000;border:.2em solid rgba(0,0,0,.5);font-size:2vw;position:relative}.zqo{border-bottom:1px solid rgba(0,0,0,.5);border-radius:.25em .25em 0 0}.nqd{display:block;max-height:.5em;overflow:hidden;border-top-width:0;border-radius:0 0 .25em .25em;-webkit-transition:max-height 1s,box-shadow 1.5s;transition:max-height 1s,box-shadow 1.5s}#ymw:checked~.nqd{max-height:7em}.nqd:after{content:'';width:100%;position:absolute;bottom:0;height:2em;box-shadow:inset 0 -1em 1em rgba(255,255,255,.8);left:0}#ymw:checked~.nqd:after{box-shadow:inset 0 0 0 rgba(255,255,255,.8)}.grd,.oke,.roj{display:none;font-size:5vw}#zzo:checked~.grd,#ldb:checked~.oke,#qyr:checked~.roj{display:block}.jra{width:6vw;display:inline-block;position:relative;z-index:100}#zzo:checked~[for=zzo] img,#ldb:checked~[for=ldb] img,#qyr:checked~[for=qyr] img{outline:.12em solid #000}.qar,.yyw,.dgj{width:27vw;height:27vw;background-size:cover;margin:0 auto}.dgj{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg);position:relative}.dgj:hover{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}[for=gd]{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg);height:6vw;width:6vw;background-size:cover;display:inline-block;margin-top:1vw}[for=mg]{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg);height:6vw;width:6vw;background-size:cover;display:inline-block;margin-top:1vw}[for=ae]{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg);height:6vw;width:6vw;background-size:cover;display:inline-block;margin-top:1vw}[for=xdz]{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg);height:6vw;width:6vw;background-size:cover;display:inline-block;margin-top:1vw}#gd:checked~* .yyw{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}#mg:checked~* .yyw{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}#ae:checked~* .yyw{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}#xdz:checked~* .yyw{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}#gd:checked~* [for=gd],#mg:checked~* [for=mg],#ae:checked~* [for=ae],#xdz:checked~* [for=xdz]{outline:.25vw solid #8b0000}.qar{-webkit-transition:background-image 1s;transition:background-image 1s;position:relative}#wkk:checked~* .qar{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}#eln:checked~* .qar{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}#kkm:checked~* .qar{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}#dbj:checked~* .qar{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}[name=interactive]~* .zyo{display:block}[name=interactive]:checked~* .zyo{display:none}#wkk:checked~* .zyo{display:block}#eln:checked~* .bgm{display:block}#kkm:checked~* .jma{display:block}#dbj:checked~* .rbj{display:block}.qar{-webkit-animation:image-fade 30s infinite;animation:image-fade 30s infinite}[name=interactive]:checked~* .qar{-webkit-animation:none;animation:none}.lxb,.ned{display:none;width:3.5vw;height:50%;padding-top:50%;position:relative;font-size:2vw}.lxb{float:left}.ned{float:right}.lxb::after,.ned::after{content:'';border:.15em solid #333;height:1em;width:1em;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);display:block;margin-top:-.5em;position:absolute}.ned::after{border-bottom-color:transparent;border-left-color:transparent;box-shadow:3px -3px 4px rgba(255,255,255,.3),inset -3px 3px 4px rgba(255,255,255,.3)}.test{color:inherit}.lxb::after{margin-left:1vw;border-top-color:transparent;border-right-color:transparent;box-shadow:-3px 3px 5px rgba(255,255,255,.3),inset 3px -3px 5px rgba(255,255,255,.3)}.gallery-nav0{display:block}@-webkit-keyframes image-fade{0%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}23%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}25%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}47%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}50%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}73%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}75%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}98%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}}@keyframes image-fade{0%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}23%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}25%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}47%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}50%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}73%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}75%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}98%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}}
</style></head><body bgcolor="" style="background:"> <input type="checkbox" id="xz"> <div class="bjm"></div> <input type="radio" name="page" id="wk" checked> <input type="radio" name="page" id="en"> <input type="radio" name="page" id="km"> <input type="radio" name="page" id="dj"> <input type="radio" name="page" id="yw"> <input type="radio" name="page" id="qr"> <input type="radio" name="page" id="lb"> <input type="radio" name="page" id="zo"> <input type="radio" name="page" id="nd"> <input type="radio" name="page" id="bm"> <input type="radio" name="page" id="ja"> <input type="radio" name="page" id="rj"> <input type="radio" name="page" id="oe"> <div class="bjm"></div> <input type="radio" name="limited" id="gd" checked> <input type="radio" name="limited" id="mg"> <input type="radio" name="limited" id="ae"> <input type="radio" name="limited" id="xdz"> <div class="bjm"></div> <input type="radio" name="interactive" id="wkk"> <input type="radio" name="interactive" id="eln"> <input type="radio" name="interactive" id="kkm"> <input type="radio" name="interactive" id="dbj"> <div class="jqa"> <div class="rkj ode"> <label for="oe" class="gad"></label> <label for="en" class="meg"></label> <h1>Building interactive email</h1> <img src="https://s3.amazonaws.com/presentations-fronttrends/mark.jpg" class="aye"> <h2 style="font-weight:400">Mark Robbins</h2> <p> Email Developer / CSS Hacker </p> <p> @M_J_Robbins &#xA0; &#xA0; &#xA0; @GoRebelmail </p> <img src="https://s3.amazonaws.com/presentations-fronttrends/rebelmail.png" class="xoz"> </div> <div class="rkj wlk"> <label for="wk" class="gad"></label> <label for="km" class="meg"></label> <h1>What is interactive <span style="font-size:90%;font-style:italic">(kinetic)</span> email</h1> <blockquote> An action taken in an email that triggers an event within the same email. </blockquote> <cite>Mark Robbins - TEDC15 Boston</cite> </div> <div class="rkj enn"> <label for="en" class="gad"></label> <label for="dj" class="meg"></label> <h1>Basic interactions</h1> <div class="kxm"> <h2 class="doj" style="text-align:left;padding:0 3em"> :hover<br> :active<br> :focus </h2> <code lang="css"> <ol> <li><span>.cta</span>:<span>hover</span>{</li> <li> &#xA0; <span>background</span>:<span>red</span>;</li> <li>}</li> </ol> </code> </div> <div class="kxm"> <button class="ydw" tabindex="0">Hover over me</button> <div class="qor"></div> </div> </div> <div class="rkj lwb"> <label for="km" class="gad"></label> <label for="yw" class="meg"></label> <h1>
Intermediate interactions checkbox<span class="doj">:checked</span></h1> <div class="kxm"> <code lang="html" style="margin-bottom:0"> <ol> <li>&lt;<span>label</span>&gt; &lt;<span>input type=</span>&quot;<span>checkbox</span>&quot; <span>id=</span>&quot;<span>expand</span>&quot;&gt;</li> <li>&lt;<span>div class=</span>&quot;<span>title</span>&quot;&gt;...&lt;/<span>div</span>&gt;</li> <li>&lt;<span>label class=</span>&quot;<span>content</span>&quot; <span>for=</span>&quot;<span>null</span>&quot;&gt; &lt;/<span>label</span>&gt; &lt;/<span>label</span>&gt;
</li> </ol> </code> <code lang="css"> <ol> <li><span>#expand</span>:<span>checked</span> + <span>.title</span> + <span>.content</span>{</li> <li> &#xA0; <span>max-height</span>:<span>300px</span>;</li> <li>}</li> </ol> </code> </div> <div class="kxm"> <label> <input type="checkbox" id="ymw"> <div class="zqo">The Email Design Conference</div> <label for="nad" class="nqd"> The Email Design Conference brings the email community together to celebrate their craft and give marketers and designers a platform to learn, share, and grow. </label> </label> </div> </div> <div class="rkj bqm"> <label for="dj" class="gad"></label> <label for="qr" class="meg"></label> <h1>Advanced interactions radio<span class="doj">:checked</span></h1> <div class="kxm"> <code lang="html" style="margin-bottom:0"> <ol> <li>&lt;<span>input type=</span>&quot;<span>radio</span>&quot;<span>id=</span>&quot;<span>
welsh</span>&quot;&gt;</li> <li>&lt;<span>input type=</span>&quot;<span>radio</span>&quot;<span>id=</span>&quot;<span>irish</span>&quot;&gt;</li> <li>&lt;<span>input type=</span>&quot;<span>radio</span>&quot;<span>id=</span>&quot;<span>english</span>&quot;&gt;</li> <li>&lt;<span>label for=</span>&quot;<span>welsh</span>&quot;&gt;...&lt;/<span>label</span>&gt;</li> <li>&lt;<span>label for=</span>&quot;<span>irish</span>&quot;&gt;...&lt;/<span>label</span>&gt;</li> <li>&lt;<span>label for=</span>&quot;<span>english</span>&quot;&gt;...&lt;/<span>label</span>&gt;</li> <li>&lt;<span>
div class=</span>&quot;<span>welsh</span>&quot;&gt;...&lt;/<span>div</span>&gt;</li> <li>&lt;<span>div class=</span>&quot;<span>irish</span>&quot;&gt;...&lt;/<span>div</span>&gt;</li> <li>&lt;<span>div class=</span>&quot;<span>english</span>&quot;&gt;...&lt;/<span>div</span>&gt;</li> </ol> </code> <code lang="css"> <ol> <li><span>#welsh</span>:<span>checked</span> ~ <span>*</span> <span>.welsh</span>{</li> <li> &#xA0; <span>display</span>:<span>block</span>;</li> <li>}</li> </ol> </code> </div> <div class="kxm"> <input type="radio" name="translation" id="qyr" checked> <input type="radio" name="translation" id="ldb"> <input type="radio" name="translation" id="zzo"><br> <label for="qyr"><img src="https://s3.amazonaws.com/rebelmail-templates/presentations/TEDC15/images/welsh.png" class="jra"></label> <label for="ldb"><img src="https://s3.amazonaws.com/rebelmail-templates/presentations/TEDC15/images/irish.gif" class="jra"></label> <label for="zzo"><img src="https://s3.amazonaws.com/rebelmail-templates/presentations/TEDC15/images/english.png" class="jra"></label> <div class="roj">Yr wyf yn cyfieithu hyn ar-lein, mae&apos;n debyg yn anghywir</div> <div class="oke">Aistrithe m&#xE9; an l&#xED;ne, is d&#xF3;cha m&#xED;cheart</div> <div class="grd">I translated this online, it&apos;s probably wrong</div> <br><br> <label for="qyr"><img src="https://s3.amazonaws.com/rebelmail-templates/presentations/TEDC15/images/welsh.png" class="jra"></label> <label for="ldb"><img src="https://s3.amazonaws.com/rebelmail-templates/presentations/TEDC15/images/irish.gif" class="jra"></label> <label for="zzo"><img src="https://s3.amazonaws.com/rebelmail-templates/presentations/TEDC15/images/english.png" class="jra"></label> </div> </div> <div class="rkj myg"> <label for="yw" class="gad"></label> <label for="lb" class="meg"></label> <h1>Example</h1> <ul> <li class="ade">Game Concept</li> <li>6 Radio buttons</li> <li>Score counter</li> <li>Progressively faster</li> <li>Prize at the end</li> </ul> </div> <div class="rkj xnz"> <label for="qr" class="gad"></label> <label for="zo" class="meg"></label> <h1>Support</h1> <div class="wzk"> <h2>Static</h2> <div class="egn">23%</div> Gmail app<br> Outlook (win)<br> Outlook.com </div> <div class="wzk"> <h2>Limited</h2> <div class="egn">21%</div> Gmail (webmail)<br> Yahoo!<br> Aol </div> <div class="wzk"> <h2>Interactive</h2> <div class="egn">56%</div> iOS<br> Apple Mail<br> Mailbox </div> <p style="position:absolute;bottom:2vw;width:100%">Based on <strong>1.06 BILLION</strong> open in July tracked by Litmus.com</p> </div> <div class="rkj kmm"> <label for="lb" class="gad"></label> <label for="nd" class="meg"></label> <h1>Support</h1> <div class="wzk"> <h2>Static</h2> <div class="dgj"></div> </div> <div class="wzk"> <h2>Limited</h2> <div class="yyw"></div> <label for="gd"></label> <label for="mg"></label> <label for="ae"></label> <label for="xdz"></label> </div> <div class="wzk"> <h2>Interactive</h2> <div class="qar"> <label for="dbj" class="lxb zyo">
</label> <label for="eln" class="ned zyo"></label> <label for="wkk" class="lxb bgm"></label> <label for="kkm" class="ned bgm"></label> <label for="eln" class="lxb jma"></label> <label for="dbj" class="ned jma"></label> <label for="kkm" class="lxb rbj"></label> <label for="wkk" class="ned rbj"></label> </div> </div> </div> <div class="rkj oxe"> <label for="zo" class="gad"></label> <label for="bm" class="meg"></label> <h1>Ridiculous interactions <br><span class="doj">punched card coding</span></h1> <img src="https://s3.amazonaws.com/presentations-fronttrends/radiocard.png" class="gjd"> <img src="https://s3.amazonaws.com/presentations-fronttrends/punchedcard.jpg" class="mwg"> <code lang="css" style="margin:1em"> <ol> <li><span>#itemA-3</span>:<span>checked</span> ~ <span>#itemB-6</span>:<span>checked</span> ~ <span>#itemC-2</span>:<span>checked</span> ~ <span>#itemD-11</span>:<span>checked
</span> ~ <span>#itemE-5</span>:<span>not</span>:(<span>checked</span>)~ <span>#itemF-2</span>:<span>checked</span> ~ <span>#itemG-5</span>:<span>checked</span> ~ <span>* .div1</span>{</li> <li> &#xA0; <span>display</span>:<span>block</span>;</li> <li>}</li> </ol> </code> </div> <div class="rkj aoe"> <label for="nd" class="gad"></label> <label for="ja" class="meg"></label> <h1>Example 2</h1> <ul> <li class="ade">Shopping Cart Concept</li> <li>117 Radio buttons</li> <li>4 Checkboxes</li> <li>
Multi page layout</li> <li>Add/remove products</li> <li>Calculate prices</li> <li>Form validation</li> </ul> </div> <div class="rkj xkz"> <label for="bm" class="gad"></label> <label for="rj" class="meg"></label> <h1>Example 3</h1> <ul> <li class="ade">3D product view</li> <li>3D design</li> <li>3 axis rotation</li> <li>Zoom control</li> </ul> </div> <div class="rkj wek"> <label for="ja" class="gad"></label> <label for="oe" class="meg"></label> <h1>Example 4</h1> <br><br><br><br>
<label for="xz">this</label> </div> <div class="rkj exn kom"> <label for="rj" class="gad"></label> <label for="wk" class="meg"></label> <h1>Thank you</h1> <img src="https://s3.amazonaws.com/presentations-fronttrends/mark.jpg" class="aye" style="opacity:.9"> <h2 style="font-weight:400">Mark Robbins</h2> <p> Email Developer / CSS Hacker </p> <p> @M_J_Robbins &#xA0; &#xA0; &#xA0; @GoRebelmail </p> </div> <div lang="x-track2" class="djj" onload="null"></div> <img src="https://staging-api.rebelmail.com/v0/emails/555cca3c0019921100d11589/track.gif?type=forward&amp;forward=D" style="display:none!important;overflow:hidden;height:0;width:0" height="1" width="1"> <table class="yxw" lang="x-forward" border="0" cellspacing="0" cellpadding="0" style="overflow:hidden;background-image:url(https://staging-api.rebelmail.com/v0/emails/555cca3c0019921100d11589/track.gif?type=forward&amp;forward=A);height:0;width:0" background="https://staging-api.rebelmail.com/v0/emails/555cca3c0019921100d11589/track.gif?type=forward&amp;forward=A" height="1" width="1"></table> <div class="qjr" lang="x-forward2"></div> </div></body> </html> <script src="js/index.js"></script>
</body>
</html>

TEDC15 building interactive email - Script Codes JS Codes

/*Slides from my talk at TEDC15
Click left/right of the slide the move back/forwards*/
TEDC15 building interactive email - Script Codes
TEDC15 building interactive email - Script Codes
Home Page Home
Developer Mark Robbins
Username M_J_Robbins
Uploaded September 06, 2022
Rating 3
Size 7,094 Kb
Views 22,264
Do you need developer help for TEDC15 building interactive email?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Robbins (M_J_Robbins) Script Codes
Name
Facebook feed
CSS summit 2015 - Interactive email
Animated images off pixel art
TEDC15 London - slides
SVG email test
A Pen by Mark Robbins
CSS quick load images
CSS triangles for email
X-wing
CSS Day slides - Mark Robbins
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!