A Pen by Muhammad Ali Rizwan on CodePen.
Created
July 29, 2019 22:13
-
-
Save fivedesigns/27cbe0e49cd8ecbe2ca67109c9e9a6b1 to your computer and use it in GitHub Desktop.
TEDC15 building interactive email
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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&separator=A" style="background-image:url(https://staging-api.rebelmail.com/v0/emails/555cca3c0019921100d11589/track.gif?type=separator&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       @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>   <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><<span>label</span>> <<span>input type=</span>"<span>checkbox</span>" <span>id=</span>"<span>expand</span>"></li> <li><<span>div class=</span>"<span>title</span>">...</<span>div</span>></li> <li><<span>label class=</span>"<span>content</span>" <span>for=</span>"<span>null</span>"> </<span>label</span>> </<span>label</span>> | |
| </li> </ol> </code> <code lang="css"> <ol> <li><span>#expand</span>:<span>checked</span> + <span>.title</span> + <span>.content</span>{</li> <li>   <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><<span>input type=</span>"<span>radio</span>"<span>id=</span>"<span> | |
| welsh</span>"></li> <li><<span>input type=</span>"<span>radio</span>"<span>id=</span>"<span>irish</span>"></li> <li><<span>input type=</span>"<span>radio</span>"<span>id=</span>"<span>english</span>"></li> <li><<span>label for=</span>"<span>welsh</span>">...</<span>label</span>></li> <li><<span>label for=</span>"<span>irish</span>">...</<span>label</span>></li> <li><<span>label for=</span>"<span>english</span>">...</<span>label</span>></li> <li><<span> | |
| div class=</span>"<span>welsh</span>">...</<span>div</span>></li> <li><<span>div class=</span>"<span>irish</span>">...</<span>div</span>></li> <li><<span>div class=</span>"<span>english</span>">...</<span>div</span>></li> </ol> </code> <code lang="css"> <ol> <li><span>#welsh</span>:<span>checked</span> ~ <span>*</span> <span>.welsh</span>{</li> <li>   <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'n debyg yn anghywir</div> <div class="oke">Aistrithe mé an líne, is dócha mícheart</div> <div class="grd">I translated this online, it'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>   <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       @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&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&forward=A);height:0;width:0" background="https://staging-api.rebelmail.com/v0/emails/555cca3c0019921100d11589/track.gif?type=forward&forward=A" height="1" width="1"></table> <div class="qjr" lang="x-forward2"></div> </div></body> </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*Slides from my talk at TEDC15 | |
| Click left/right of the slide the move back/forwards*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment