├── LitmusLiveLondon ├── README.md ├── example.html ├── font-size-experiment.html ├── height-experiment.html └── img │ ├── email.jpg │ ├── html.jpg │ └── logo.png ├── README.md ├── html-goodies-guest-post ├── img │ ├── email.jpg │ ├── html.jpg │ └── logo.png ├── step01.html ├── step01.png ├── step02.html ├── step02.png ├── step03.html ├── step03.png ├── step04.html ├── step04.png ├── step05.html ├── step05.png ├── step06.html └── step06.png ├── lesson01 ├── GregComments.txt ├── step-00 │ ├── README.md │ └── index.html ├── step-01 │ ├── README.md │ ├── defaults.css │ └── index.html ├── step-02 │ ├── README.md │ ├── colors.css │ ├── defaults.css │ └── index.html ├── step-03 │ ├── README.md │ ├── colors.css │ ├── defaults.css │ ├── img │ │ ├── logo2.png │ │ └── logo3.png │ ├── index.html │ └── layout.css ├── step-04 │ ├── README.md │ ├── colors.css │ ├── defaults.css │ ├── img │ │ ├── logo2.png │ │ └── logo3.png │ ├── index.html │ └── layout.css ├── step-05 │ ├── README.md │ ├── colors.css │ ├── defaults.css │ ├── img │ │ ├── logo2.png │ │ └── logo3.png │ ├── index.html │ └── layout.css ├── step-06 │ ├── README.md │ ├── colors.css │ ├── defaults.css │ ├── img │ │ ├── logo2.png │ │ └── logo3.png │ ├── index.html │ └── layout.css ├── step-07 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── img │ │ ├── logo2.png │ │ └── logo3.png │ ├── index.html │ └── layout.css ├── step-08 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── img │ │ ├── logo2.png │ │ └── logo3.png │ ├── index.html │ └── layout.css ├── step-09 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── img │ │ ├── logo2.png │ │ └── logo3.png │ ├── index.html │ └── layout.css └── step-10 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ ├── logo2.png │ └── logo3.png │ ├── index.html │ └── layout.css ├── lesson02 ├── step-00 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── logo2.png │ │ └── logo3.png │ ├── index.html │ └── layout.css ├── step-01 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── logo2.png │ │ └── logo3.png │ ├── index.html │ └── layout.css ├── step-02 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── logo2.png │ │ └── logo3.png │ ├── index.html │ └── layout.css ├── step-03 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── logo2.png │ │ └── logo3.png │ ├── index.html │ └── layout.css ├── step-04 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── logo.png │ │ ├── logo2.png │ │ └── logo3.png │ ├── index.html │ └── layout.css ├── step-05 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── logo.png │ │ ├── logo2.png │ │ └── logo3.png │ ├── index.html │ └── layout.css ├── step-06 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── logo.png │ │ ├── logo2.png │ │ └── logo3.png │ ├── index.html │ └── layout.css ├── step-07 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── logo.png │ │ ├── logo2.png │ │ ├── logo3.png │ │ ├── product01.jpg │ │ ├── product02.jpg │ │ └── product03.jpg │ ├── index.html │ └── layout.css ├── step-08 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── logo.png │ │ ├── logo2.png │ │ ├── logo3.png │ │ ├── product01.jpg │ │ ├── product02.jpg │ │ ├── product03.jpg │ │ └── product04.jpg │ ├── index.html │ └── layout.css ├── step-09 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── logo.png │ │ ├── logo2.png │ │ ├── logo3.png │ │ ├── product01.jpg │ │ ├── product02.jpg │ │ ├── product03.jpg │ │ └── product04.jpg │ ├── index.html │ ├── layout.css │ └── main.css ├── step-10 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── logo.png │ │ ├── logo2.png │ │ ├── logo3.png │ │ ├── product01.jpg │ │ ├── product02.jpg │ │ ├── product03.jpg │ │ └── product04.jpg │ ├── index.html │ ├── layout.css │ └── main.css ├── step-11 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── logo.png │ │ ├── logo2.png │ │ ├── logo3.png │ │ ├── product01.jpg │ │ ├── product02.jpg │ │ ├── product03.jpg │ │ └── product04.jpg │ ├── index.html │ ├── layout.css │ ├── main.css │ └── main.js ├── step-12 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── email-pattern-white.png │ │ ├── logo.png │ │ ├── logo2.png │ │ ├── logo3.png │ │ ├── product01.jpg │ │ ├── product02.jpg │ │ ├── product03.jpg │ │ └── product04.jpg │ ├── index.html │ ├── layout.css │ ├── main.css │ └── main.js ├── step-13 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── code.jpg │ │ ├── code2.jpg │ │ ├── email-pattern-white.png │ │ ├── logo.png │ │ ├── logo2.png │ │ ├── logo3.png │ │ ├── product01.jpg │ │ ├── product02.jpg │ │ ├── product03.jpg │ │ └── product04.jpg │ ├── index.html │ ├── layout.css │ ├── main.css │ └── main.js ├── step-14 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── code.jpg │ │ ├── code2.jpg │ │ ├── email-pattern-white.png │ │ ├── logo.png │ │ ├── logo2.png │ │ ├── logo3.png │ │ ├── new.png │ │ ├── product01.jpg │ │ ├── product02.jpg │ │ ├── product03.jpg │ │ └── product04.jpg │ ├── index.html │ ├── layout.css │ ├── main.css │ └── main.js ├── step-15 │ ├── README.md │ ├── button.css │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ ├── code.jpg │ │ ├── code2.jpg │ │ ├── email-pattern-white.png │ │ ├── logo.png │ │ ├── logo2.png │ │ ├── logo3.png │ │ ├── new.png │ │ ├── product01.jpg │ │ ├── product02.jpg │ │ ├── product03.jpg │ │ ├── product04.jpg │ │ └── socials.png │ ├── index.html │ ├── layout.css │ ├── main.css │ └── main.js └── step-16 │ ├── README.md │ ├── colors.css │ ├── components.css │ ├── defaults.css │ ├── images.css │ ├── img │ ├── code.jpg │ ├── code2.jpg │ ├── email-pattern-white.png │ ├── logo.png │ ├── logo2.png │ ├── logo3.png │ ├── new.png │ ├── product01.jpg │ ├── product02.jpg │ ├── product03.jpg │ ├── product04.jpg │ └── socials.png │ ├── index.html │ ├── layout.css │ ├── main.css │ ├── main.js │ └── spacings.css ├── lesson03 ├── img │ └── logo.png ├── step-00 │ ├── README.md │ ├── colors.css │ ├── defaults.css │ ├── images.css │ ├── img │ │ └── logo.png │ ├── index.html │ ├── layout.css │ ├── litmus-results │ │ ├── androidgmailapp-vertical-allowed-1366.png │ │ ├── aolonline-vertical-allowed-1366.png │ │ ├── appmail10-vertical-allowed-1366.png │ │ ├── appmail9-vertical-allowed-1366.png │ │ ├── chromeaolonline-vertical-allowed-1366.png │ │ ├── chromecomcast-vertical-allowed-1366.png │ │ ├── chromefreenetde-vertical-allowed-1366.png │ │ ├── chromegmailnew-vertical-allowed-1366.png │ │ ├── chromegoogleapps-vertical-allowed-1366.png │ │ ├── chromegoogleinbox-vertical-allowed-1366.png │ │ ├── chromemailru-vertical-allowed-1366.png │ │ ├── chromeoffice365-vertical-allowed-1366.png │ │ ├── chromeoutlookcom-vertical-allowed-1366.png │ │ ├── chromeyahoo-vertical-allowed-1366.png │ │ ├── comcast-vertical-allowed-1366.png │ │ ├── ffaolonline-vertical-allowed-1366.png │ │ ├── ffcomcast-vertical-allowed-1366.png │ │ ├── fffreenetde-vertical-allowed-1366.png │ │ ├── ffgmailnew-vertical-allowed-1366.png │ │ ├── ffgmxde-vertical-allowed-1366.png │ │ ├── ffgoogleapps-vertical-allowed-1366.png │ │ ├── ffgoogleinbox-vertical-allowed-1366.png │ │ ├── ffmailru-vertical-allowed-1366.png │ │ ├── ffoffice365-vertical-allowed-1366.png │ │ ├── ffoutlookcom-vertical-allowed-1366.png │ │ ├── ffwebde-vertical-allowed-1366.png │ │ ├── ffyahoo-vertical-allowed-1366.png │ │ ├── freenetde-vertical-allowed-1366.png │ │ ├── gmailnew-vertical-allowed-1366.png │ │ ├── gmxde-vertical-allowed-1366.png │ │ ├── googleapps-vertical-allowed-1366.png │ │ ├── images.js │ │ ├── index.html │ │ ├── ipad-vertical-allowed-1366.png │ │ ├── ipadmini-vertical-allowed-1366.png │ │ ├── iphone5s-vertical-allowed-1366.png │ │ ├── iphone5sios8-vertical-allowed-1366.png │ │ ├── iphone6-vertical-allowed-1366.png │ │ ├── iphone6plus-vertical-allowed-1366.png │ │ ├── iphone6s-vertical-allowed-1366.png │ │ ├── iphone6splus-vertical-allowed-1366.png │ │ ├── iphone7-vertical-allowed-1366.png │ │ ├── iphone7plus-vertical-allowed-1366.png │ │ ├── mailru-vertical-allowed-1366.png │ │ ├── notes7-vertical-allowed-1366.png │ │ ├── notes8-vertical-allowed-1366.png │ │ ├── notes85-vertical-allowed-1366.png │ │ ├── notes9-vertical-allowed-1366.png │ │ ├── office365-vertical-allowed-1366.png │ │ ├── ol2000-vertical-allowed-1366.png │ │ ├── ol2002-vertical-allowed-1366.png │ │ ├── ol2003-vertical-allowed-1366.png │ │ ├── ol2007-vertical-allowed-1366.png │ │ ├── ol2010-vertical-allowed-1366.png │ │ ├── ol2011-vertical-allowed-1366.png │ │ ├── ol2013-vertical-allowed-1366.png │ │ ├── ol2013dpi120-vertical-allowed-1366.png │ │ ├── ol2015-vertical-allowed-1366.png │ │ ├── ol2016-vertical-allowed-1366.png │ │ ├── outlookcom-vertical-allowed-1366.png │ │ ├── thunderbirdlatest-vertical-allowed-1366.png │ │ ├── webde-vertical-allowed-1366.png │ │ ├── windows10mail-vertical-allowed-1366.png │ │ └── yahoo-vertical-allowed-1366.png │ ├── main.css │ └── spacings.css ├── step-01 │ ├── README.md │ └── index.html ├── step-02 │ ├── README.md │ └── index.html ├── step-03 │ ├── README.md │ └── index.html ├── step-04 │ ├── README.md │ └── index.html ├── step-05 │ ├── README.md │ └── index.html └── step-06 │ ├── README.md │ └── index.html ├── lesson04 └── index.html ├── lesson05 ├── step00 │ └── index.html ├── step01 │ └── index.html └── step02 │ └── index.html ├── lesson06 ├── img │ ├── androidgmailimap-vertical-allowed-1366 .png │ ├── aolie10test.png │ ├── edmlogo.gif │ ├── logo2green.jpg │ ├── logo2yellow.jpg │ └── yahoo-vertical-allowed-1366.png ├── step-00 │ ├── README.md │ └── index.html ├── step-01 │ ├── README.md │ └── index.html ├── step-02 │ ├── README.md │ └── index.html ├── step-03 │ ├── README.md │ └── index.html ├── step-04 │ ├── README.md │ └── index.html ├── step-05 │ ├── README.md │ └── index.html ├── step-06 │ ├── README.md │ └── index.html ├── step-07 │ ├── README.md │ └── index.html ├── step-08 │ ├── README.md │ └── index.html ├── step-09 │ ├── README.md │ └── index.html └── step-10 │ ├── README.md │ └── index.html ├── lesson07 ├── img │ ├── android6-vertical-allowed-1366.png │ ├── aolpadding.gif │ ├── mailbird.gif │ ├── ol2007-vertical-allowed-1366.png │ ├── ol2007.gif │ ├── outlook.gif │ ├── win10.gif │ ├── win10mail.gif │ ├── yahoofine.gif │ └── yahoopad.gif ├── step-00 │ ├── README.md │ └── index.html ├── step-01 │ ├── README.md │ └── index.html ├── step-02 │ ├── README.md │ └── index.html ├── step-03 │ ├── README.md │ └── index.html └── step-04 │ ├── README.md │ └── index.html ├── lesson08 ├── img │ ├── Screenshot_2017-03-09-13-02-21.jpg │ ├── eoa-android6-gmail.png │ ├── logo.png │ ├── pattern.jpg │ └── windows10mail-vertical-allowed-1366.png ├── step-00 │ ├── README.md │ └── index.html ├── step-01 │ ├── README.md │ └── index.html ├── step-02 │ ├── README.md │ └── index.html ├── step-03 │ ├── README.md │ └── index.html ├── step-04 │ ├── README.md │ └── index.html ├── step-05 │ ├── README.md │ └── index.html └── step-06 │ ├── README.md │ └── index.html ├── lesson09 ├── fonts │ ├── playfairdisplay-regular-webfont.eot │ ├── playfairdisplay-regular-webfont.svg │ ├── playfairdisplay-regular-webfont.ttf │ ├── playfairdisplay-regular-webfont.woff │ ├── playfairdisplay-regular-webfont.woff2 │ ├── playfairdisplay-regular.css │ ├── raleway-regular-webfont.eot │ ├── raleway-regular-webfont.svg │ ├── raleway-regular-webfont.ttf │ ├── raleway-regular-webfont.woff │ ├── raleway-regular-webfont.woff2 │ └── ralewayregular.css ├── img │ ├── Builderpreview.png │ ├── adroid5_1.png │ ├── android4-lists.png │ ├── android5-lists.png │ ├── android6-vertical-allowed-1366 .png │ ├── android6gmailapp.png │ ├── androidgmail-blockquote.jpg │ ├── androidgmailimap-comp-step1.png │ ├── androidgmailimap-comp-step2.png │ ├── androidgmailimap-vertical-allowed-1366.png │ ├── chromemailru-lists.png │ ├── chromeoutlookcom-lists.png │ ├── ffyahoo-lists.png │ ├── iphone6+.png │ ├── iphone6s-customfont.png │ ├── iphone7-vertical-allowed-1366.png │ ├── logo.png │ ├── notes7-vertical-allowed-1366 (1).png │ ├── notes7-vertical-allowed-1366.png │ ├── notes85-spacing1.png │ ├── notes85-spacing2.png │ ├── notes9-comparison-step1.png │ ├── notes9-comparison-step2.png │ ├── notes9-vertical-allowed-1366.png │ ├── ol2007-fixsection1.png │ ├── ol2007-fixsection2.png │ ├── ol2007-vertical-allowed-1366 (1).png │ ├── ol2007-vertical-allowed-1366.png │ ├── ol2010-arial.png │ ├── ol2010-customfont.png │ ├── ol2010-timesnew.png │ ├── ol2010-vertical-allowed-1366.png │ ├── ol2013dpi120-lists.png │ ├── ol2015-customfont.png │ ├── ol2015-lists.png │ ├── terra-step1.png │ ├── terra-step2.png │ ├── terra-vertical-allowed-1366.png │ ├── windows10mail-customfont.png │ ├── windows10mail-spacing1.png │ ├── windows10mail-spacing2.png │ ├── windows10mail-vertical-allowed-1.png │ ├── windows10mail-vertical-allowed-2.png │ └── yahoo-vertical-allowed-1366.png ├── step-00 │ ├── README.md │ └── index.html ├── step-01 │ ├── README.md │ └── index.html ├── step-02 │ ├── README.md │ └── index.html ├── step-03 │ ├── README.md │ └── index.html ├── step-04 │ ├── README.md │ └── index.html ├── step-05 │ ├── README.md │ └── index.html ├── step-06 │ ├── README.md │ └── index.html └── step-07 │ ├── README.md │ └── index.html ├── lesson10 ├── img │ ├── edmlogo120.jpg │ ├── logo.png │ ├── step00-lotesnotes8.png │ ├── step00-ol2007.png │ ├── step01-ol2003.png │ ├── step01-ol2010.png │ ├── step02-lotusnotes8.png │ └── step02-ol2010.png ├── step-00 │ ├── README.md │ └── index.html ├── step-01 │ ├── README.md │ └── index.html ├── step-02 │ ├── README.md │ └── index.html └── step-03 │ ├── README.md │ ├── index-bad.html │ └── index.html ├── lesson11 ├── img │ ├── EMMT02q.jpg │ ├── Screenshot_step02.jpg │ ├── Screenshot_step03.jpg │ ├── Screenshot_step04.jpg │ ├── acer-liquid-z630-16gb-4g-black.jpg │ ├── android4-cardlayout.png │ ├── android4-fail-responsive.png │ ├── android4-vertical-allowed-1366.png │ ├── android6-step02.png │ ├── android6-vertical-allowed-1366.png │ ├── androidgmailimap-vertical-allowed-1366.png │ ├── blackberry-leap-white-grey.jpg │ ├── iphone5s-vertical-allowed-1366.png │ ├── iphone6plus-vertical-allowed-1366.png │ ├── iphone7plus-cardlayout.png │ ├── iphone7plus-responsive.png │ ├── logo.png │ ├── notes85--step03.png │ ├── notes9-cardlayout.png │ ├── notes9-fail-responsive.png │ ├── ol2015-cardlayout.png │ ├── ol2015-responsive.png │ ├── unas_361921.jpg │ ├── yahoo-cardlayout.png │ └── yahoo-responsive.png ├── step-00 │ ├── README.md │ └── index.html ├── step-01 │ ├── README.md │ └── index.html ├── step-02 │ ├── README.md │ └── index.html ├── step-03 │ ├── README.md │ └── index.html └── step-04 │ ├── README.md │ └── index.html ├── litmus-previews └── index.html ├── scripts ├── chapters.js └── preivew.js └── toc ├── toc-test.html └── toc.js /LitmusLiveLondon/README.md: -------------------------------------------------------------------------------- 1 | # Litmus Test Results: 2 | 3 | ## Example 4 | 5 | https://litmus.com/builder/9d4f02e 6 | 7 | ## Height Experiment 8 | 9 | https://litmus.com/builder/19c7d1e 10 | 11 | ## Font-size Experiment 12 | 13 | https://litmus.com/builder/bdb18ff 14 | -------------------------------------------------------------------------------- /LitmusLiveLondon/img/email.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/LitmusLiveLondon/img/email.jpg -------------------------------------------------------------------------------- /LitmusLiveLondon/img/html.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/LitmusLiveLondon/img/html.jpg -------------------------------------------------------------------------------- /LitmusLiveLondon/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/LitmusLiveLondon/img/logo.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # modern-html-email-tutorial 2 | 3 | Resources for the [Modern HTML Email Tutorial](http://blog.edmdesigner.com/tag/modern-html-email-tutorial/). 4 | -------------------------------------------------------------------------------- /html-goodies-guest-post/img/email.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/html-goodies-guest-post/img/email.jpg -------------------------------------------------------------------------------- /html-goodies-guest-post/img/html.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/html-goodies-guest-post/img/html.jpg -------------------------------------------------------------------------------- /html-goodies-guest-post/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/html-goodies-guest-post/img/logo.png -------------------------------------------------------------------------------- /html-goodies-guest-post/step01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/html-goodies-guest-post/step01.png -------------------------------------------------------------------------------- /html-goodies-guest-post/step02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/html-goodies-guest-post/step02.png -------------------------------------------------------------------------------- /html-goodies-guest-post/step03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/html-goodies-guest-post/step03.png -------------------------------------------------------------------------------- /html-goodies-guest-post/step04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/html-goodies-guest-post/step04.png -------------------------------------------------------------------------------- /html-goodies-guest-post/step05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/html-goodies-guest-post/step05.png -------------------------------------------------------------------------------- /html-goodies-guest-post/step06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/html-goodies-guest-post/step06.png -------------------------------------------------------------------------------- /lesson01/step-00/README.md: -------------------------------------------------------------------------------- 1 | We start from a simple HTML file. I use what sublime text generated for me when I started to enter 2 | 3 | 4 | Simple page layout 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /lesson01/step-01/README.md: -------------------------------------------------------------------------------- 1 | We have added some CSS resets. -------------------------------------------------------------------------------- /lesson01/step-01/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | } 41 | 42 | img { 43 | width: 100%; 44 | height: auto; 45 | 46 | display: block; 47 | 48 | margin: 0; 49 | } -------------------------------------------------------------------------------- /lesson01/step-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simple page layout 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /lesson01/step-02/README.md: -------------------------------------------------------------------------------- 1 | We added the basic html structure and colors.css. -------------------------------------------------------------------------------- /lesson01/step-02/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | -------------------------------------------------------------------------------- /lesson01/step-02/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | } 41 | 42 | img { 43 | width: 100%; 44 | height: auto; 45 | 46 | display: block; 47 | 48 | margin: 0; 49 | } -------------------------------------------------------------------------------- /lesson01/step-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simple page layout 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

14 | Pre-header 15 |

16 |
17 | 22 |
23 |

24 | Content 25 |

26 |
27 | 32 | 33 | -------------------------------------------------------------------------------- /lesson01/step-03/README.md: -------------------------------------------------------------------------------- 1 | We added the basic html structure and colors.css. -------------------------------------------------------------------------------- /lesson01/step-03/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | -------------------------------------------------------------------------------- /lesson01/step-03/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | } 41 | 42 | img { 43 | width: 100%; 44 | height: auto; 45 | 46 | display: block; 47 | 48 | margin: 0; 49 | } -------------------------------------------------------------------------------- /lesson01/step-03/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-03/img/logo2.png -------------------------------------------------------------------------------- /lesson01/step-03/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-03/img/logo3.png -------------------------------------------------------------------------------- /lesson01/step-03/layout.css: -------------------------------------------------------------------------------- 1 | .container600 { 2 | width: 600px; 3 | margin: 0 auto; 4 | } -------------------------------------------------------------------------------- /lesson01/step-04/README.md: -------------------------------------------------------------------------------- 1 | Column related css added. Clear both element added. -------------------------------------------------------------------------------- /lesson01/step-04/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | -------------------------------------------------------------------------------- /lesson01/step-04/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | } 41 | 42 | img { 43 | width: 100%; 44 | height: auto; 45 | 46 | display: block; 47 | 48 | margin: 0; 49 | } -------------------------------------------------------------------------------- /lesson01/step-04/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-04/img/logo2.png -------------------------------------------------------------------------------- /lesson01/step-04/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-04/img/logo3.png -------------------------------------------------------------------------------- /lesson01/step-04/layout.css: -------------------------------------------------------------------------------- 1 | .container600 { 2 | width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .cols .w200 { 7 | width: 200px; 8 | float: left; 9 | } 10 | 11 | .cols .w400 { 12 | width: 400px; 13 | float: left; 14 | } 15 | 16 | .clr { 17 | clear: both; 18 | } -------------------------------------------------------------------------------- /lesson01/step-05/README.md: -------------------------------------------------------------------------------- 1 | Column related css added. Clear both element added. -------------------------------------------------------------------------------- /lesson01/step-05/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | -------------------------------------------------------------------------------- /lesson01/step-05/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | } 41 | 42 | img { 43 | width: 100%; 44 | height: auto; 45 | 46 | display: block; 47 | 48 | margin: 0; 49 | } -------------------------------------------------------------------------------- /lesson01/step-05/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-05/img/logo2.png -------------------------------------------------------------------------------- /lesson01/step-05/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-05/img/logo3.png -------------------------------------------------------------------------------- /lesson01/step-05/layout.css: -------------------------------------------------------------------------------- 1 | .container600 { 2 | width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .cols .w200 { 7 | width: 200px; 8 | float: left; 9 | } 10 | 11 | .cols .w400 { 12 | width: 400px; 13 | float: left; 14 | } 15 | 16 | .clr { 17 | clear: both; 18 | } 19 | 20 | .padding30 { 21 | padding: 30px; 22 | } 23 | 24 | .center { 25 | text-align: center; 26 | } -------------------------------------------------------------------------------- /lesson01/step-06/README.md: -------------------------------------------------------------------------------- 1 | We change the pixel based column definitions to percentage based. Adding margin/padding to the right columns ruins the layout again! -------------------------------------------------------------------------------- /lesson01/step-06/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | -------------------------------------------------------------------------------- /lesson01/step-06/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | } 41 | 42 | img { 43 | width: 100%; 44 | height: auto; 45 | 46 | display: block; 47 | 48 | margin: 0; 49 | } -------------------------------------------------------------------------------- /lesson01/step-06/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-06/img/logo2.png -------------------------------------------------------------------------------- /lesson01/step-06/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-06/img/logo3.png -------------------------------------------------------------------------------- /lesson01/step-06/layout.css: -------------------------------------------------------------------------------- 1 | .container600 { 2 | width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .cols .w33p { 7 | width: 33.33%; 8 | float: left; 9 | } 10 | 11 | .cols .w66p { 12 | width: 66.66%; 13 | float: left; 14 | } 15 | 16 | .clr { 17 | clear: both; 18 | } 19 | 20 | .marginTop100 { 21 | margin-top: 100px; 22 | } 23 | 24 | .padding30 { 25 | padding: 30px; 26 | } 27 | 28 | .paddingLeft10 { 29 | padding-left: 10px; 30 | } 31 | 32 | .center { 33 | text-align: center; 34 | } -------------------------------------------------------------------------------- /lesson01/step-07/README.md: -------------------------------------------------------------------------------- 1 | Button component added. -------------------------------------------------------------------------------- /lesson01/step-07/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 20px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | 20 | transition: all .5s; 21 | } -------------------------------------------------------------------------------- /lesson01/step-07/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson01/step-07/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | } 41 | 42 | img { 43 | width: 100%; 44 | height: auto; 45 | 46 | display: block; 47 | 48 | margin: 0; 49 | } -------------------------------------------------------------------------------- /lesson01/step-07/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-07/img/logo2.png -------------------------------------------------------------------------------- /lesson01/step-07/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-07/img/logo3.png -------------------------------------------------------------------------------- /lesson01/step-07/layout.css: -------------------------------------------------------------------------------- 1 | .container600 { 2 | width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .cols .w33p { 7 | width: 33.33%; 8 | float: left; 9 | } 10 | 11 | .cols .w66p { 12 | width: 66.66%; 13 | float: left; 14 | } 15 | 16 | .clr { 17 | clear: both; 18 | } 19 | 20 | .marginTop100 { 21 | margin-top: 100px; 22 | } 23 | 24 | .padding30 { 25 | padding: 30px; 26 | } 27 | 28 | .center { 29 | text-align: center; 30 | } -------------------------------------------------------------------------------- /lesson01/step-08/README.md: -------------------------------------------------------------------------------- 1 | Spacings + text lengths. -------------------------------------------------------------------------------- /lesson01/step-08/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 20px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } -------------------------------------------------------------------------------- /lesson01/step-08/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson01/step-08/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | } 41 | 42 | img { 43 | width: 100%; 44 | height: auto; 45 | 46 | display: block; 47 | 48 | margin: 0; 49 | } -------------------------------------------------------------------------------- /lesson01/step-08/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-08/img/logo2.png -------------------------------------------------------------------------------- /lesson01/step-08/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-08/img/logo3.png -------------------------------------------------------------------------------- /lesson01/step-08/layout.css: -------------------------------------------------------------------------------- 1 | .container600 { 2 | width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .cols .w33p { 7 | width: 33.33%; 8 | float: left; 9 | } 10 | 11 | .cols .w66p { 12 | width: 66.66%; 13 | float: left; 14 | } 15 | 16 | .clr { 17 | clear: both; 18 | } 19 | 20 | .marginTop100 { 21 | margin-top: 100px; 22 | } 23 | 24 | .padding30 { 25 | padding: 30px; 26 | } 27 | 28 | .paddingLeft10 { 29 | padding-left: 10px; 30 | } 31 | 32 | .center { 33 | text-align: center; 34 | } -------------------------------------------------------------------------------- /lesson01/step-09/README.md: -------------------------------------------------------------------------------- 1 | Spacings + text lengths. -------------------------------------------------------------------------------- /lesson01/step-09/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 20px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } -------------------------------------------------------------------------------- /lesson01/step-09/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson01/step-09/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | } 41 | 42 | img { 43 | width: 100%; 44 | height: auto; 45 | 46 | display: block; 47 | 48 | margin: 0; 49 | } -------------------------------------------------------------------------------- /lesson01/step-09/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-09/img/logo2.png -------------------------------------------------------------------------------- /lesson01/step-09/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-09/img/logo3.png -------------------------------------------------------------------------------- /lesson01/step-09/layout.css: -------------------------------------------------------------------------------- 1 | .container600 { 2 | width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .cols .w33p { 7 | width: 33.33%; 8 | float: left; 9 | } 10 | 11 | .cols .w66p { 12 | width: 66.66%; 13 | float: left; 14 | } 15 | 16 | .clr { 17 | clear: both; 18 | } 19 | 20 | .marginTop100 { 21 | margin-top: 100px; 22 | } 23 | 24 | .padding30 { 25 | padding: 30px; 26 | } 27 | 28 | .paddingLeft10 { 29 | padding-left: 10px; 30 | } 31 | 32 | .center { 33 | text-align: center; 34 | } 35 | 36 | @media all and (max-width: 599px) { 37 | .container600 { 38 | width: 100%; 39 | } 40 | 41 | .reorder .w33p { 42 | width: 100%; 43 | } 44 | 45 | .reorder .w66p { 46 | width: 100%; 47 | } 48 | } -------------------------------------------------------------------------------- /lesson01/step-10/README.md: -------------------------------------------------------------------------------- 1 | Spacings + text lengths. -------------------------------------------------------------------------------- /lesson01/step-10/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | @media all and (max-width: 599px) { 22 | .button { 23 | display: block; 24 | margin: 30px 50px; 25 | padding: 20px; 26 | 27 | text-align: center; 28 | } 29 | } -------------------------------------------------------------------------------- /lesson01/step-10/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson01/step-10/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | } 41 | -------------------------------------------------------------------------------- /lesson01/step-10/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson01/step-10/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-10/img/logo2.png -------------------------------------------------------------------------------- /lesson01/step-10/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson01/step-10/img/logo3.png -------------------------------------------------------------------------------- /lesson01/step-10/layout.css: -------------------------------------------------------------------------------- 1 | .container600 { 2 | width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .cols .w33p { 7 | width: 33.33%; 8 | float: left; 9 | } 10 | 11 | .cols .w66p { 12 | width: 66.66%; 13 | float: left; 14 | } 15 | 16 | .clr { 17 | clear: both; 18 | } 19 | 20 | .marginTop100 { 21 | margin-top: 100px; 22 | } 23 | 24 | .padding30 { 25 | padding: 30px; 26 | } 27 | 28 | .paddingLeft10 { 29 | padding-left: 10px; 30 | } 31 | 32 | .center { 33 | text-align: center; 34 | } 35 | 36 | @media all and (max-width: 599px) { 37 | .container600 { 38 | width: 100%; 39 | } 40 | 41 | .reorder .w33p { 42 | width: 100%; 43 | } 44 | 45 | .reorder .w66p { 46 | width: 100%; 47 | } 48 | } -------------------------------------------------------------------------------- /lesson02/step-00/README.md: -------------------------------------------------------------------------------- 1 | Defaults from lesson01 - step-10. 2 | 3 | Georgia font-family added to paragraphs. -------------------------------------------------------------------------------- /lesson02/step-00/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | @media all and (max-width: 599px) { 22 | .button { 23 | display: block; 24 | margin: 30px 50px; 25 | padding: 20px; 26 | 27 | text-align: center; 28 | } 29 | } -------------------------------------------------------------------------------- /lesson02/step-00/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-00/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-00/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-00/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-00/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-00/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-00/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-00/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simple page layout 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | Content 19 | 20 | -------------------------------------------------------------------------------- /lesson02/step-00/layout.css: -------------------------------------------------------------------------------- 1 | .container600 { 2 | width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .cols .w33p { 7 | width: 33.33%; 8 | float: left; 9 | } 10 | 11 | .cols .w66p { 12 | width: 66.66%; 13 | float: left; 14 | } 15 | 16 | .clr { 17 | clear: both; 18 | } 19 | 20 | .marginTop100 { 21 | margin-top: 100px; 22 | } 23 | 24 | .padding30 { 25 | padding: 30px; 26 | } 27 | 28 | .paddingLeft10 { 29 | padding-left: 10px; 30 | } 31 | 32 | .center { 33 | text-align: center; 34 | } 35 | 36 | @media all and (max-width: 599px) { 37 | .container600 { 38 | width: 100%; 39 | } 40 | 41 | .reorder .w33p { 42 | width: 100%; 43 | } 44 | 45 | .reorder .w66p { 46 | width: 100%; 47 | } 48 | } -------------------------------------------------------------------------------- /lesson02/step-01/README.md: -------------------------------------------------------------------------------- 1 | Adding new container: .container800 -------------------------------------------------------------------------------- /lesson02/step-01/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | @media all and (max-width: 599px) { 22 | .button { 23 | display: block; 24 | margin: 30px 50px; 25 | padding: 20px; 26 | 27 | text-align: center; 28 | } 29 | } -------------------------------------------------------------------------------- /lesson02/step-01/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-01/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-01/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-01/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-01/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-01/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-01/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simple full-width stripes layout 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | wide container 20 |
21 |
22 | narrow container 23 |
24 | 25 | -------------------------------------------------------------------------------- /lesson02/step-01/layout.css: -------------------------------------------------------------------------------- 1 | .container600 { 2 | width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .container800 { 7 | width: 800px; 8 | margin: 0 auto; 9 | } 10 | 11 | .cols .w33p { 12 | width: 33.33%; 13 | float: left; 14 | } 15 | 16 | .cols .w66p { 17 | width: 66.66%; 18 | float: left; 19 | } 20 | 21 | .clr { 22 | clear: both; 23 | } 24 | 25 | .marginTop100 { 26 | margin-top: 100px; 27 | } 28 | 29 | .padding30 { 30 | padding: 30px; 31 | } 32 | 33 | .paddingLeft10 { 34 | padding-left: 10px; 35 | } 36 | 37 | .center { 38 | text-align: center; 39 | } 40 | 41 | @media all and (max-width: 799px) { 42 | .container800 { 43 | width: 100%; 44 | } 45 | } 46 | 47 | @media all and (max-width: 599px) { 48 | .container600 { 49 | width: 100%; 50 | } 51 | 52 | .reorder .w33p { 53 | width: 100%; 54 | } 55 | 56 | .reorder .w66p { 57 | width: 100%; 58 | } 59 | } -------------------------------------------------------------------------------- /lesson02/step-02/README.md: -------------------------------------------------------------------------------- 1 | Adding full width colored rows. -------------------------------------------------------------------------------- /lesson02/step-02/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | @media all and (max-width: 599px) { 22 | .button { 23 | display: block; 24 | margin: 30px 50px; 25 | padding: 20px; 26 | 27 | text-align: center; 28 | } 29 | } -------------------------------------------------------------------------------- /lesson02/step-02/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-02/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-02/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-02/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-02/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-02/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-02/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simple full-width stripes layout 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | wide container 21 |
22 |
23 |
24 |
25 | narrow container 26 |
27 |
28 | 29 | -------------------------------------------------------------------------------- /lesson02/step-02/layout.css: -------------------------------------------------------------------------------- 1 | .container600 { 2 | width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .container800 { 7 | width: 800px; 8 | margin: 0 auto; 9 | } 10 | 11 | .cols .w33p { 12 | width: 33.33%; 13 | float: left; 14 | } 15 | 16 | .cols .w66p { 17 | width: 66.66%; 18 | float: left; 19 | } 20 | 21 | .clr { 22 | clear: both; 23 | } 24 | 25 | .marginTop100 { 26 | margin-top: 100px; 27 | } 28 | 29 | .padding30 { 30 | padding: 30px; 31 | } 32 | 33 | .paddingLeft10 { 34 | padding-left: 10px; 35 | } 36 | 37 | .center { 38 | text-align: center; 39 | } 40 | 41 | @media all and (max-width: 799px) { 42 | .container800 { 43 | width: 100%; 44 | } 45 | } 46 | 47 | @media all and (max-width: 599px) { 48 | .container600 { 49 | width: 100%; 50 | } 51 | 52 | .reorder .w33p { 53 | width: 100%; 54 | } 55 | 56 | .reorder .w66p { 57 | width: 100%; 58 | } 59 | } -------------------------------------------------------------------------------- /lesson02/step-03/README.md: -------------------------------------------------------------------------------- 1 | Adding more col types to layout.css 2 | Modifying the markup to show the new rows. 3 | 4 | under 800px -> cols are fluid 5 | under 600px -> cols are 100% wide + .w25p -> 50% wide -------------------------------------------------------------------------------- /lesson02/step-03/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | @media all and (max-width: 599px) { 22 | .button { 23 | display: block; 24 | margin: 30px 50px; 25 | padding: 20px; 26 | 27 | text-align: center; 28 | } 29 | } -------------------------------------------------------------------------------- /lesson02/step-03/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-03/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-03/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-03/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-03/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-03/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-03/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-03/layout.css: -------------------------------------------------------------------------------- 1 | .container600 { 2 | width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .container800 { 7 | width: 800px; 8 | margin: 0 auto; 9 | } 10 | 11 | .cols .w33p { 12 | width: 33.33%; 13 | float: left; 14 | } 15 | 16 | .cols .w66p { 17 | width: 66.66%; 18 | float: left; 19 | } 20 | 21 | .cols .w50p { 22 | width: 50%; 23 | float: left; 24 | } 25 | 26 | .cols .w25p { 27 | width: 25%; 28 | float: left; 29 | } 30 | 31 | .cols:after { 32 | content: ""; 33 | display: block; 34 | clear: both; 35 | } 36 | 37 | .clr { 38 | clear: both; 39 | } 40 | 41 | .marginTop100 { 42 | margin-top: 100px; 43 | } 44 | 45 | .padding30 { 46 | padding: 30px; 47 | } 48 | 49 | .paddingLeft10 { 50 | padding-left: 10px; 51 | } 52 | 53 | .center { 54 | text-align: center; 55 | } 56 | 57 | @media all and (max-width: 799px) { 58 | .container800 { 59 | width: 100%; 60 | } 61 | } 62 | 63 | @media all and (max-width: 599px) { 64 | .container600 { 65 | width: 100%; 66 | } 67 | 68 | .reorder .w33p { 69 | width: 100%; 70 | } 71 | 72 | .reorder .w66p { 73 | width: 100%; 74 | } 75 | 76 | .reorder .w50p { 77 | width: 100%; 78 | } 79 | 80 | .reorder .w25p { 81 | width: 50%; 82 | } 83 | } -------------------------------------------------------------------------------- /lesson02/step-04/README.md: -------------------------------------------------------------------------------- 1 | .w25p -> 50% wide is not a good approach... use proper markup instead without reorder 2 | 3 | .reorder .w50p in the media queries part won't be okay... should use the first children selector instead: .reorder > .w50p -------------------------------------------------------------------------------- /lesson02/step-04/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | @media all and (max-width: 599px) { 22 | .button { 23 | display: block; 24 | margin: 30px 50px; 25 | padding: 20px; 26 | 27 | text-align: center; 28 | } 29 | } -------------------------------------------------------------------------------- /lesson02/step-04/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-04/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-04/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-04/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-04/img/logo.png -------------------------------------------------------------------------------- /lesson02/step-04/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-04/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-04/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-04/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-05/README.md: -------------------------------------------------------------------------------- 1 | .w25p -> 50% wide is not a good approach... use proper markup instead without reorder 2 | 3 | .reorder .w50p in the media queries part won't be okay... should use the first children selector instead: .reorder > .w50p -------------------------------------------------------------------------------- /lesson02/step-05/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | @media all and (max-width: 599px) { 22 | .button { 23 | display: block; 24 | margin: 30px 50px; 25 | padding: 20px; 26 | 27 | text-align: center; 28 | } 29 | } -------------------------------------------------------------------------------- /lesson02/step-05/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-05/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-05/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-05/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-05/img/logo.png -------------------------------------------------------------------------------- /lesson02/step-05/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-05/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-05/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-05/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-06/README.md: -------------------------------------------------------------------------------- 1 | creating header-buttons in buttons.css -------------------------------------------------------------------------------- /lesson02/step-06/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | .header-button { 22 | display: block; 23 | 24 | color: #58585A; 25 | 26 | font-size: 20px; 27 | line-height: 35px; 28 | 29 | text-align: center; 30 | text-decoration: none; 31 | 32 | transition: all .5s; 33 | } 34 | 35 | .header-button:hover { 36 | background: #C72518; 37 | color: #FFFFFF; 38 | transition: all .5s; 39 | } 40 | 41 | @media all and (max-width: 599px) { 42 | .button { 43 | display: block; 44 | margin: 30px 50px; 45 | padding: 20px; 46 | 47 | text-align: center; 48 | } 49 | } -------------------------------------------------------------------------------- /lesson02/step-06/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-06/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-06/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-06/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-06/img/logo.png -------------------------------------------------------------------------------- /lesson02/step-06/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-06/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-06/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-06/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-07/README.md: -------------------------------------------------------------------------------- 1 | Let's create some product blocks. -------------------------------------------------------------------------------- /lesson02/step-07/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | .header-button { 22 | display: block; 23 | 24 | color: #58585A; 25 | 26 | font-size: 20px; 27 | line-height: 35px; 28 | 29 | text-align: center; 30 | text-decoration: none; 31 | 32 | transition: all .5s; 33 | } 34 | 35 | .header-button:hover { 36 | background: #C72518; 37 | color: #FFFFFF; 38 | transition: all .5s; 39 | } 40 | 41 | @media all and (max-width: 599px) { 42 | .button { 43 | display: block; 44 | margin: 30px 50px; 45 | padding: 20px; 46 | 47 | text-align: center; 48 | } 49 | } -------------------------------------------------------------------------------- /lesson02/step-07/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-07/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-07/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-07/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-07/img/logo.png -------------------------------------------------------------------------------- /lesson02/step-07/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-07/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-07/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-07/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-07/img/product01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-07/img/product01.jpg -------------------------------------------------------------------------------- /lesson02/step-07/img/product02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-07/img/product02.jpg -------------------------------------------------------------------------------- /lesson02/step-07/img/product03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-07/img/product03.jpg -------------------------------------------------------------------------------- /lesson02/step-08/README.md: -------------------------------------------------------------------------------- 1 | Let's add other products and some random content. -------------------------------------------------------------------------------- /lesson02/step-08/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | .header-button { 22 | display: block; 23 | 24 | color: #58585A; 25 | 26 | font-size: 20px; 27 | line-height: 35px; 28 | 29 | text-align: center; 30 | text-decoration: none; 31 | 32 | transition: all .5s; 33 | } 34 | 35 | .header-button:hover { 36 | background: #C72518; 37 | color: #FFFFFF; 38 | transition: all .5s; 39 | } 40 | 41 | @media all and (max-width: 599px) { 42 | .button { 43 | display: block; 44 | margin: 30px 50px; 45 | padding: 20px; 46 | 47 | text-align: center; 48 | } 49 | } -------------------------------------------------------------------------------- /lesson02/step-08/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-08/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-08/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-08/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-08/img/logo.png -------------------------------------------------------------------------------- /lesson02/step-08/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-08/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-08/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-08/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-08/img/product01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-08/img/product01.jpg -------------------------------------------------------------------------------- /lesson02/step-08/img/product02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-08/img/product02.jpg -------------------------------------------------------------------------------- /lesson02/step-08/img/product03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-08/img/product03.jpg -------------------------------------------------------------------------------- /lesson02/step-08/img/product04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-08/img/product04.jpg -------------------------------------------------------------------------------- /lesson02/step-09/README.md: -------------------------------------------------------------------------------- 1 | Let's add other products and some random content. -------------------------------------------------------------------------------- /lesson02/step-09/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | .header-button { 22 | display: block; 23 | 24 | color: #58585A; 25 | 26 | font-size: 20px; 27 | line-height: 35px; 28 | 29 | text-align: center; 30 | text-decoration: none; 31 | 32 | transition: all .5s; 33 | } 34 | 35 | .header-button:hover { 36 | background: #C72518; 37 | color: #FFFFFF; 38 | transition: all .5s; 39 | } 40 | 41 | @media all and (max-width: 599px) { 42 | .button { 43 | display: block; 44 | margin: 30px 50px; 45 | padding: 20px; 46 | 47 | text-align: center; 48 | } 49 | } -------------------------------------------------------------------------------- /lesson02/step-09/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-09/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | margin-top: 80px; 8 | 9 | font-size:10px; 10 | line-height:10px; 11 | } 12 | 13 | h1, h2, h3, h4, h5, h6 { 14 | font-family: "Roboto", sans-serif; 15 | } 16 | 17 | 18 | h1 { 19 | font-size: 28px; 20 | line-height: 32px; 21 | 22 | margin-bottom: 24px; 23 | } 24 | 25 | h2 { 26 | font-size: 24px; 27 | line-height: 28px; 28 | 29 | margin-bottom: 20px; 30 | } 31 | 32 | h3 { 33 | font-size: 20px; 34 | line-height: 24px; 35 | 36 | margin-bottom: 16px; 37 | } 38 | 39 | p { 40 | font-size: 16px; 41 | line-height: 20px; 42 | 43 | font-family: Georgia, Arial, sans-serif; 44 | } 45 | -------------------------------------------------------------------------------- /lesson02/step-09/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-09/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-09/img/logo.png -------------------------------------------------------------------------------- /lesson02/step-09/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-09/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-09/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-09/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-09/img/product01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-09/img/product01.jpg -------------------------------------------------------------------------------- /lesson02/step-09/img/product02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-09/img/product02.jpg -------------------------------------------------------------------------------- /lesson02/step-09/img/product03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-09/img/product03.jpg -------------------------------------------------------------------------------- /lesson02/step-09/img/product04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-09/img/product04.jpg -------------------------------------------------------------------------------- /lesson02/step-09/main.css: -------------------------------------------------------------------------------- 1 | #menu { 2 | position: fixed; 3 | 4 | width: 100%; 5 | 6 | top: 0; 7 | left: 0; 8 | } -------------------------------------------------------------------------------- /lesson02/step-10/README.md: -------------------------------------------------------------------------------- 1 | Let's add other products and some random content. -------------------------------------------------------------------------------- /lesson02/step-10/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | .header-button { 22 | display: block; 23 | 24 | color: #58585A; 25 | 26 | font-size: 20px; 27 | line-height: 35px; 28 | 29 | text-align: center; 30 | text-decoration: none; 31 | 32 | transition: all .5s; 33 | } 34 | 35 | .header-button:hover { 36 | background: #C72518; 37 | color: #FFFFFF; 38 | transition: all .5s; 39 | } 40 | 41 | @media all and (max-width: 599px) { 42 | .button { 43 | display: block; 44 | margin: 30px 50px; 45 | padding: 20px; 46 | 47 | text-align: center; 48 | } 49 | } -------------------------------------------------------------------------------- /lesson02/step-10/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-10/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-10/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-10/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-10/img/logo.png -------------------------------------------------------------------------------- /lesson02/step-10/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-10/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-10/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-10/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-10/img/product01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-10/img/product01.jpg -------------------------------------------------------------------------------- /lesson02/step-10/img/product02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-10/img/product02.jpg -------------------------------------------------------------------------------- /lesson02/step-10/img/product03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-10/img/product03.jpg -------------------------------------------------------------------------------- /lesson02/step-10/img/product04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-10/img/product04.jpg -------------------------------------------------------------------------------- /lesson02/step-10/main.css: -------------------------------------------------------------------------------- 1 | #menu { 2 | position: fixed; 3 | 4 | width: 100%; 5 | 6 | top: 0; 7 | left: 0; 8 | } 9 | 10 | #hero { 11 | margin-top: 30px; 12 | 13 | text-align: center; 14 | } -------------------------------------------------------------------------------- /lesson02/step-11/README.md: -------------------------------------------------------------------------------- 1 | Let's add other products and some random content. -------------------------------------------------------------------------------- /lesson02/step-11/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | .header-button { 22 | display: block; 23 | 24 | color: #58585A; 25 | 26 | font-size: 20px; 27 | line-height: 35px; 28 | 29 | text-align: center; 30 | text-decoration: none; 31 | 32 | transition: all .5s; 33 | } 34 | 35 | .header-button:hover { 36 | background: #C72518; 37 | color: #FFFFFF; 38 | transition: all .5s; 39 | } 40 | 41 | @media all and (max-width: 599px) { 42 | .button { 43 | display: block; 44 | margin: 30px 50px; 45 | padding: 20px; 46 | 47 | text-align: center; 48 | } 49 | } -------------------------------------------------------------------------------- /lesson02/step-11/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-11/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-11/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-11/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-11/img/logo.png -------------------------------------------------------------------------------- /lesson02/step-11/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-11/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-11/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-11/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-11/img/product01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-11/img/product01.jpg -------------------------------------------------------------------------------- /lesson02/step-11/img/product02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-11/img/product02.jpg -------------------------------------------------------------------------------- /lesson02/step-11/img/product03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-11/img/product03.jpg -------------------------------------------------------------------------------- /lesson02/step-11/img/product04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-11/img/product04.jpg -------------------------------------------------------------------------------- /lesson02/step-11/main.css: -------------------------------------------------------------------------------- 1 | #header { 2 | z-index: 2; 3 | } 4 | 5 | #header #menu { 6 | position: absolute; 7 | 8 | width: 100%; 9 | 10 | top: 0; 11 | left: 0; 12 | } 13 | 14 | #header #hero { 15 | padding-top: 130px; 16 | 17 | text-align: center; 18 | } 19 | 20 | #content { 21 | z-index: 1; 22 | } 23 | 24 | #footer { 25 | z-index: 1; 26 | } -------------------------------------------------------------------------------- /lesson02/step-12/README.md: -------------------------------------------------------------------------------- 1 | Let's add other products and some random content. -------------------------------------------------------------------------------- /lesson02/step-12/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | .header-button { 22 | display: block; 23 | 24 | color: #58585A; 25 | 26 | font-size: 20px; 27 | line-height: 35px; 28 | 29 | text-align: center; 30 | text-decoration: none; 31 | 32 | transition: all .5s; 33 | } 34 | 35 | .header-button:hover { 36 | background: #C72518; 37 | color: #FFFFFF; 38 | transition: all .5s; 39 | } 40 | 41 | @media all and (max-width: 599px) { 42 | .button { 43 | display: block; 44 | margin: 30px 50px; 45 | padding: 20px; 46 | 47 | text-align: center; 48 | } 49 | } -------------------------------------------------------------------------------- /lesson02/step-12/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-12/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-12/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-12/img/email-pattern-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-12/img/email-pattern-white.png -------------------------------------------------------------------------------- /lesson02/step-12/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-12/img/logo.png -------------------------------------------------------------------------------- /lesson02/step-12/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-12/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-12/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-12/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-12/img/product01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-12/img/product01.jpg -------------------------------------------------------------------------------- /lesson02/step-12/img/product02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-12/img/product02.jpg -------------------------------------------------------------------------------- /lesson02/step-12/img/product03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-12/img/product03.jpg -------------------------------------------------------------------------------- /lesson02/step-12/img/product04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-12/img/product04.jpg -------------------------------------------------------------------------------- /lesson02/step-12/main.css: -------------------------------------------------------------------------------- 1 | #header { 2 | z-index: 2; 3 | 4 | background-image: url(img/email-pattern-white.png); 5 | } 6 | 7 | #header #menu { 8 | position: absolute; 9 | 10 | width: 100%; 11 | 12 | top: 0; 13 | left: 0; 14 | 15 | transition: 1s all; 16 | } 17 | 18 | #header #hero { 19 | padding-top: 130px; 20 | 21 | text-align: center; 22 | } 23 | 24 | #content { 25 | z-index: 1; 26 | } 27 | 28 | #footer { 29 | z-index: 1; 30 | } -------------------------------------------------------------------------------- /lesson02/step-13/README.md: -------------------------------------------------------------------------------- 1 | Let's add other products and some random content. -------------------------------------------------------------------------------- /lesson02/step-13/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | .header-button { 22 | display: block; 23 | 24 | color: #58585A; 25 | 26 | font-size: 20px; 27 | line-height: 35px; 28 | 29 | text-align: center; 30 | text-decoration: none; 31 | 32 | transition: all .5s; 33 | } 34 | 35 | .header-button:hover { 36 | background: #C72518; 37 | color: #FFFFFF; 38 | transition: all .5s; 39 | } 40 | 41 | @media all and (max-width: 599px) { 42 | .button { 43 | display: block; 44 | margin: 30px 50px; 45 | padding: 20px; 46 | 47 | text-align: center; 48 | } 49 | } -------------------------------------------------------------------------------- /lesson02/step-13/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-13/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-13/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-13/img/code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-13/img/code.jpg -------------------------------------------------------------------------------- /lesson02/step-13/img/code2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-13/img/code2.jpg -------------------------------------------------------------------------------- /lesson02/step-13/img/email-pattern-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-13/img/email-pattern-white.png -------------------------------------------------------------------------------- /lesson02/step-13/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-13/img/logo.png -------------------------------------------------------------------------------- /lesson02/step-13/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-13/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-13/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-13/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-13/img/product01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-13/img/product01.jpg -------------------------------------------------------------------------------- /lesson02/step-13/img/product02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-13/img/product02.jpg -------------------------------------------------------------------------------- /lesson02/step-13/img/product03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-13/img/product03.jpg -------------------------------------------------------------------------------- /lesson02/step-13/img/product04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-13/img/product04.jpg -------------------------------------------------------------------------------- /lesson02/step-13/main.css: -------------------------------------------------------------------------------- 1 | #header { 2 | z-index: 2; 3 | 4 | background-image: url(img/email-pattern-white.png); 5 | } 6 | 7 | #header #menu { 8 | position: absolute; 9 | 10 | width: 100%; 11 | 12 | top: 0; 13 | left: 0; 14 | 15 | transition: 1s all; 16 | } 17 | 18 | #header #hero { 19 | padding-top: 130px; 20 | 21 | text-align: center; 22 | } 23 | 24 | #content { 25 | z-index: 1; 26 | } 27 | 28 | #footer { 29 | z-index: 1; 30 | } -------------------------------------------------------------------------------- /lesson02/step-14/README.md: -------------------------------------------------------------------------------- 1 | New decorator added. I needed to add z-index to the menu as well. -------------------------------------------------------------------------------- /lesson02/step-14/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | .header-button { 22 | display: block; 23 | 24 | color: #58585A; 25 | 26 | font-size: 20px; 27 | line-height: 35px; 28 | 29 | text-align: center; 30 | text-decoration: none; 31 | 32 | transition: all .5s; 33 | } 34 | 35 | .header-button:hover { 36 | background: #C72518; 37 | color: #FFFFFF; 38 | transition: all .5s; 39 | } 40 | 41 | @media all and (max-width: 599px) { 42 | .button { 43 | display: block; 44 | margin: 30px 50px; 45 | padding: 20px; 46 | 47 | text-align: center; 48 | } 49 | } -------------------------------------------------------------------------------- /lesson02/step-14/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-14/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-14/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-14/img/code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-14/img/code.jpg -------------------------------------------------------------------------------- /lesson02/step-14/img/code2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-14/img/code2.jpg -------------------------------------------------------------------------------- /lesson02/step-14/img/email-pattern-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-14/img/email-pattern-white.png -------------------------------------------------------------------------------- /lesson02/step-14/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-14/img/logo.png -------------------------------------------------------------------------------- /lesson02/step-14/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-14/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-14/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-14/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-14/img/new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-14/img/new.png -------------------------------------------------------------------------------- /lesson02/step-14/img/product01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-14/img/product01.jpg -------------------------------------------------------------------------------- /lesson02/step-14/img/product02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-14/img/product02.jpg -------------------------------------------------------------------------------- /lesson02/step-14/img/product03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-14/img/product03.jpg -------------------------------------------------------------------------------- /lesson02/step-14/img/product04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-14/img/product04.jpg -------------------------------------------------------------------------------- /lesson02/step-14/main.css: -------------------------------------------------------------------------------- 1 | #header { 2 | z-index: 2; 3 | 4 | background-image: url(img/email-pattern-white.png); 5 | } 6 | 7 | #header #menu { 8 | position: absolute; 9 | 10 | width: 100%; 11 | 12 | top: 0; 13 | left: 0; 14 | 15 | transition: 1s all; 16 | } 17 | 18 | #header #hero { 19 | padding-top: 130px; 20 | 21 | text-align: center; 22 | } 23 | 24 | #content { 25 | z-index: 1; 26 | } 27 | 28 | #footer { 29 | z-index: 1; 30 | } 31 | 32 | .new-decorator { 33 | position: absolute; 34 | 35 | width: 100px; 36 | height: 100px; 37 | margin-left: -7px; 38 | margin-top: -5px; 39 | } -------------------------------------------------------------------------------- /lesson02/step-15/README.md: -------------------------------------------------------------------------------- 1 | New decorator added. I needed to add z-index to the menu as well. -------------------------------------------------------------------------------- /lesson02/step-15/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | 4 | padding: 10px; 5 | margin-top: 15px; 6 | 7 | border-radius: 30px; 8 | 9 | font-size: 16px; 10 | line-height: 16px; 11 | 12 | text-decoration: none; 13 | 14 | transition: all .5s; 15 | } 16 | 17 | .button:hover { 18 | box-shadow: 2px 2px 5px #888888; 19 | } 20 | 21 | .header-button { 22 | display: block; 23 | 24 | color: #58585A; 25 | 26 | font-size: 20px; 27 | line-height: 35px; 28 | 29 | text-align: center; 30 | text-decoration: none; 31 | 32 | transition: all .5s; 33 | } 34 | 35 | .header-button:hover { 36 | background: #C72518; 37 | color: #FFFFFF; 38 | transition: all .5s; 39 | } 40 | 41 | @media all and (max-width: 599px) { 42 | .button { 43 | display: block; 44 | margin: 30px 50px; 45 | padding: 20px; 46 | 47 | text-align: center; 48 | } 49 | } -------------------------------------------------------------------------------- /lesson02/step-15/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | .bg-white { 6 | background-color: #FFFFFF; 7 | color: #58585A; 8 | } 9 | 10 | .bg-brown { 11 | background-color: #F8F7F0; 12 | color: #58585A; 13 | } 14 | 15 | .bg-gray { 16 | background-color: #58585A; 17 | color: #FFFFFF; 18 | } 19 | 20 | .bg-red { 21 | background-color: #C92C1E; 22 | color: #FFFFFF; 23 | } 24 | 25 | .bg-blue { 26 | background-color: #2879CB; 27 | color: #FFFFFF; 28 | } 29 | 30 | .bg-dark-brown { 31 | background-color: #E8E3CE; 32 | color: #58585A; 33 | } 34 | -------------------------------------------------------------------------------- /lesson02/step-15/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-15/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-15/img/code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-15/img/code.jpg -------------------------------------------------------------------------------- /lesson02/step-15/img/code2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-15/img/code2.jpg -------------------------------------------------------------------------------- /lesson02/step-15/img/email-pattern-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-15/img/email-pattern-white.png -------------------------------------------------------------------------------- /lesson02/step-15/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-15/img/logo.png -------------------------------------------------------------------------------- /lesson02/step-15/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-15/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-15/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-15/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-15/img/new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-15/img/new.png -------------------------------------------------------------------------------- /lesson02/step-15/img/product01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-15/img/product01.jpg -------------------------------------------------------------------------------- /lesson02/step-15/img/product02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-15/img/product02.jpg -------------------------------------------------------------------------------- /lesson02/step-15/img/product03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-15/img/product03.jpg -------------------------------------------------------------------------------- /lesson02/step-15/img/product04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-15/img/product04.jpg -------------------------------------------------------------------------------- /lesson02/step-15/img/socials.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-15/img/socials.png -------------------------------------------------------------------------------- /lesson02/step-16/README.md: -------------------------------------------------------------------------------- 1 | bg-red-hover 2 | link color declaration 3 | padding classes to separate spacings.css 4 | - classes with numbers in their name --- removed 5 | - center class --- removed -> need to add it to footer 6 | 7 | button.css -> components.css 8 | - .new-decorator added from main.css 9 | - social icons added from main.css 10 | -------------------------------------------------------------------------------- /lesson02/step-16/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | a { 6 | color: #58585A; 7 | } 8 | 9 | .bg-white { 10 | background-color: #FFFFFF; 11 | color: #58585A; 12 | } 13 | 14 | .bg-brown { 15 | background-color: #F8F7F0; 16 | color: #58585A; 17 | } 18 | 19 | .bg-gray { 20 | background-color: #58585A; 21 | color: #FFFFFF; 22 | } 23 | 24 | .bg-red { 25 | background-color: #C92C1E; 26 | color: #FFFFFF; 27 | } 28 | 29 | .bg-red-hover:hover { 30 | background-color: #C92C1E; 31 | color: #FFFFFF; 32 | } 33 | 34 | .bg-blue { 35 | background-color: #2879CB; 36 | color: #FFFFFF; 37 | } 38 | 39 | .bg-blue-hover:hover { 40 | background-color: #2879CB; 41 | color: #FFFFFF; 42 | } 43 | 44 | .bg-dark-brown { 45 | background-color: #E8E3CE; 46 | color: #58585A; 47 | } 48 | -------------------------------------------------------------------------------- /lesson02/step-16/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson02/step-16/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | 10 | .w200 { 11 | max-width: 200px; 12 | } 13 | 14 | @media all and (max-width: 599px) { 15 | .w200 { 16 | margin-bottom: 20px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson02/step-16/img/code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-16/img/code.jpg -------------------------------------------------------------------------------- /lesson02/step-16/img/code2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-16/img/code2.jpg -------------------------------------------------------------------------------- /lesson02/step-16/img/email-pattern-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-16/img/email-pattern-white.png -------------------------------------------------------------------------------- /lesson02/step-16/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-16/img/logo.png -------------------------------------------------------------------------------- /lesson02/step-16/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-16/img/logo2.png -------------------------------------------------------------------------------- /lesson02/step-16/img/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-16/img/logo3.png -------------------------------------------------------------------------------- /lesson02/step-16/img/new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-16/img/new.png -------------------------------------------------------------------------------- /lesson02/step-16/img/product01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-16/img/product01.jpg -------------------------------------------------------------------------------- /lesson02/step-16/img/product02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-16/img/product02.jpg -------------------------------------------------------------------------------- /lesson02/step-16/img/product03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-16/img/product03.jpg -------------------------------------------------------------------------------- /lesson02/step-16/img/product04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-16/img/product04.jpg -------------------------------------------------------------------------------- /lesson02/step-16/img/socials.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson02/step-16/img/socials.png -------------------------------------------------------------------------------- /lesson02/step-16/main.css: -------------------------------------------------------------------------------- 1 | #header { 2 | position: relative; 3 | z-index: 2; 4 | 5 | background-image: url(img/email-pattern-white.png); 6 | } 7 | 8 | #header #menu { 9 | position: absolute; 10 | 11 | width: 100%; 12 | 13 | top: 0; 14 | left: 0; 15 | 16 | transition: 1s all; 17 | } 18 | 19 | #header #hero { 20 | padding-top: 130px; 21 | 22 | text-align: center; 23 | } 24 | 25 | #content { 26 | position: relative; 27 | z-index: 1; 28 | } 29 | 30 | #footer { 31 | position: relative; 32 | z-index: 1; 33 | 34 | text-align: center; 35 | } 36 | -------------------------------------------------------------------------------- /lesson02/step-16/spacings.css: -------------------------------------------------------------------------------- 1 | .sm-padding { 2 | padding: 10px; 3 | } 4 | 5 | .sm-padding-tb { 6 | padding-top: 10px; 7 | padding-bottom: 10px; 8 | } 9 | 10 | .m-padding-tb { 11 | padding-top: 30px; 12 | padding-bottom: 30px; 13 | } 14 | 15 | .l-padding-tb { 16 | padding-top: 100px; 17 | padding-bottom: 100px; 18 | } 19 | -------------------------------------------------------------------------------- /lesson03/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/img/logo.png -------------------------------------------------------------------------------- /lesson03/step-00/README.md: -------------------------------------------------------------------------------- 1 | ## One Column Layout in Classic HTML 2 | 3 | This is how I build it in classic HTML. -------------------------------------------------------------------------------- /lesson03/step-00/colors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F4F4F4; 3 | } 4 | 5 | a { 6 | color: #58585A; 7 | } 8 | 9 | .bg-white { 10 | background-color: #FFFFFF; 11 | color: #58585A; 12 | } 13 | 14 | .bg-brown { 15 | background-color: #F8F7F0; 16 | color: #58585A; 17 | } 18 | 19 | .bg-gray { 20 | background-color: #58585A; 21 | color: #FFFFFF; 22 | } 23 | -------------------------------------------------------------------------------- /lesson03/step-00/defaults.css: -------------------------------------------------------------------------------- 1 | html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-size:10px; 8 | line-height:10px; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | 16 | h1 { 17 | font-size: 28px; 18 | line-height: 32px; 19 | 20 | margin-bottom: 24px; 21 | } 22 | 23 | h2 { 24 | font-size: 24px; 25 | line-height: 28px; 26 | 27 | margin-bottom: 20px; 28 | } 29 | 30 | h3 { 31 | font-size: 20px; 32 | line-height: 24px; 33 | 34 | margin-bottom: 16px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | line-height: 20px; 40 | 41 | font-family: Georgia, Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /lesson03/step-00/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | 5 | display: block; 6 | 7 | margin: 0; 8 | } 9 | -------------------------------------------------------------------------------- /lesson03/step-00/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/img/logo.png -------------------------------------------------------------------------------- /lesson03/step-00/layout.css: -------------------------------------------------------------------------------- 1 | .container600 { 2 | width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | @media all and (max-width: 599px) { 7 | .container600 { 8 | width: 100%; 9 | } 10 | } -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/androidgmailapp-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/androidgmailapp-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/aolonline-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/aolonline-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/appmail10-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/appmail10-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/appmail9-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/appmail9-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/chromeaolonline-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/chromeaolonline-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/chromecomcast-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/chromecomcast-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/chromefreenetde-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/chromefreenetde-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/chromegmailnew-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/chromegmailnew-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/chromegoogleapps-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/chromegoogleapps-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/chromegoogleinbox-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/chromegoogleinbox-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/chromemailru-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/chromemailru-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/chromeoffice365-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/chromeoffice365-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/chromeoutlookcom-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/chromeoutlookcom-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/chromeyahoo-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/chromeyahoo-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/comcast-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/comcast-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ffaolonline-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ffaolonline-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ffcomcast-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ffcomcast-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/fffreenetde-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/fffreenetde-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ffgmailnew-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ffgmailnew-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ffgmxde-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ffgmxde-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ffgoogleapps-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ffgoogleapps-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ffgoogleinbox-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ffgoogleinbox-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ffmailru-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ffmailru-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ffoffice365-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ffoffice365-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ffoutlookcom-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ffoutlookcom-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ffwebde-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ffwebde-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ffyahoo-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ffyahoo-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/freenetde-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/freenetde-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/gmailnew-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/gmailnew-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/gmxde-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/gmxde-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/googleapps-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/googleapps-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ipad-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ipad-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ipadmini-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ipadmini-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/iphone5s-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/iphone5s-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/iphone5sios8-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/iphone5sios8-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/iphone6-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/iphone6-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/iphone6plus-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/iphone6plus-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/iphone6s-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/iphone6s-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/iphone6splus-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/iphone6splus-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/iphone7-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/iphone7-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/iphone7plus-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/iphone7plus-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/mailru-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/mailru-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/notes7-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/notes7-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/notes8-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/notes8-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/notes85-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/notes85-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/notes9-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/notes9-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/office365-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/office365-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ol2000-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ol2000-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ol2002-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ol2002-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ol2003-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ol2003-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ol2007-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ol2007-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ol2010-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ol2010-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ol2011-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ol2011-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ol2013-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ol2013-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ol2013dpi120-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ol2013dpi120-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ol2015-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ol2015-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/ol2016-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/ol2016-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/outlookcom-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/outlookcom-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/thunderbirdlatest-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/thunderbirdlatest-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/webde-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/webde-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/windows10mail-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/windows10mail-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/litmus-results/yahoo-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson03/step-00/litmus-results/yahoo-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson03/step-00/main.css: -------------------------------------------------------------------------------- 1 | #header img { 2 | width: 210px; 3 | } 4 | 5 | #content a { 6 | display: block; 7 | width: 100%; 8 | font-size: 16px; 9 | text-align: center; 10 | } 11 | 12 | #footer { 13 | text-align: center; 14 | } 15 | -------------------------------------------------------------------------------- /lesson03/step-00/spacings.css: -------------------------------------------------------------------------------- 1 | .sm-padding { 2 | padding: 10px; 3 | } 4 | 5 | .m-padding { 6 | padding: 30px; 7 | } 8 | 9 | .m-padding-tb { 10 | padding-top: 30px; 11 | padding-bottom: 30px; 12 | } 13 | 14 | -------------------------------------------------------------------------------- /lesson03/step-01/README.md: -------------------------------------------------------------------------------- 1 | ## Don't use outer resources 2 | - no fonts 3 | - no css files 4 | - use style tag 5 | - script tag removed 6 | 7 | failed on: 8 | - Lotus Notes 7 9 | - Outlook 2007, Outlook 2010, Outlook 2013, Outlook 2016 on Windows, Windows 10 Mail 10 | - Gmail App (Android) 11 | - Yahoo mail 12 | - Mail.ru is horrible 13 | 14 | Acceptable on: 15 | - Lotus Notes 8 16 | 17 | Background color is not applied on many web based email clients. 18 | - Gmail, Inbox 19 | - Office 365, Outlook.com 20 | 21 | 22 | Let's see how far we can go without tables! :) 23 | -------------------------------------------------------------------------------- /lesson03/step-02/README.md: -------------------------------------------------------------------------------- 1 | First, let's fix the small web-based email client bugs. Except Mail.ru... that is simply horrible. 2 | Wrapper added -> background issues fixed... 3 | 4 | On Yahoo! Mail it is 100% wide! -------------------------------------------------------------------------------- /lesson03/step-03/README.md: -------------------------------------------------------------------------------- 1 | First, let's fix the small web-based email client bugs. Except Mail.ru... that is simply horrible. 2 | Wrapper added -> background issues fixed... 3 | 4 | On Yahoo! Mail it is 100% wide! -------------------------------------------------------------------------------- /lesson03/step-04/README.md: -------------------------------------------------------------------------------- 1 | First, let's fix the small web-based email client bugs. Except Mail.ru... that is simply horrible. 2 | Wrapper added -> background issues fixed... 3 | 4 | On Yahoo! Mail it is 100% wide! -------------------------------------------------------------------------------- /lesson03/step-05/README.md: -------------------------------------------------------------------------------- 1 | We go back to step-02 and modify it to support: 2 | - Outlook 2007 3 | - Outlook 2010 4 | - Outlook 2013 5 | - Outlook 2016 on Windows -------------------------------------------------------------------------------- /lesson03/step-06/README.md: -------------------------------------------------------------------------------- 1 | We go back to step-02 and modify it to support: 2 | - Outlook 2007 3 | - Outlook 2010 4 | - Outlook 2013 5 | - Outlook 2016 on Windows -------------------------------------------------------------------------------- /lesson06/img/androidgmailimap-vertical-allowed-1366 .png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson06/img/androidgmailimap-vertical-allowed-1366 .png -------------------------------------------------------------------------------- /lesson06/img/aolie10test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson06/img/aolie10test.png -------------------------------------------------------------------------------- /lesson06/img/edmlogo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson06/img/edmlogo.gif -------------------------------------------------------------------------------- /lesson06/img/logo2green.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson06/img/logo2green.jpg -------------------------------------------------------------------------------- /lesson06/img/logo2yellow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson06/img/logo2yellow.jpg -------------------------------------------------------------------------------- /lesson06/img/yahoo-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson06/img/yahoo-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson06/step-00/README.md: -------------------------------------------------------------------------------- 1 | ## Content images in Modern HTML Emails 2 | 3 | This is the initial setup for testing images in HTML Email. The code here gets modified on each steps, based on what is being tested. 4 | 5 | You can check the Litmus test results following this URL: 6 | https://litmus.com/checklist/emails/public/8721d88 7 | -------------------------------------------------------------------------------- /lesson06/step-01/README.md: -------------------------------------------------------------------------------- 1 | ## Content images in Modern HTML Emails 2 | 3 | The two sample images in the project setup got a "100" percentage width dimension: 4 | - one as an HTML attribute, and 5 | - one as an inline CSS style property 6 | which resolved image display for: 7 | 8 | **Both works on:** 9 | 10 | Desktop: 11 | - Apple Mail 9, 10 12 | - Outlook 2011 13 | - Outlook 2016 14 | - Thunderbird 15 | 16 | Mobile clients: 17 | All looked nice. 18 | 19 | Web clients: 20 | Almost all clients looked nice. 21 | 22 | 23 | **Width applied as attribute works:** 24 | Windows 10 Mail (desktop) 25 | 26 | **Both method failed for:** 27 | - Outlook 2000, 2002, 2003, 2007, 2010, 2013, 2013 120 DPI 28 | - Lotus Notes 7, 8, 8.5 29 | - IBM Notes 9 30 | 31 | https://litmus.com/checklist/emails/public/aacbd43 -------------------------------------------------------------------------------- /lesson06/step-02/README.md: -------------------------------------------------------------------------------- 1 | ## Content images in Modern HTML Emails 2 | 3 | The two sample images in the project setup got a "600px" width dimension: 4 | - one as an HTML attribute, and 5 | - one as an inline CSS style property 6 | which resolved image display for: 7 | 8 | **Both works on:** 9 | 10 | Desktop: 11 | - Apple Mail 9, 10 12 | - Outlook 2000, 2002, 2003, 2011, 2016 13 | - Lotus Notes 8, 8.5 14 | - IBM Notes 9 15 | - Thunderbird 16 | 17 | Mobile clients: 18 | All clients, but Android 4.4 looked nice. 19 | 20 | Web clients: 21 | All clients, but Terra Mail looked nice. 22 | 23 | **Width applied as attribute works:** 24 | 25 | Desktop: 26 | - Outlook 2007, 2010, 2013, 2013 120 DPI 27 | - Windows 10 Mail 28 | 29 | Mobile clients: 30 | - Android 4.4 31 | 32 | https://litmus.com/checklist/emails/public/dc07b14 -------------------------------------------------------------------------------- /lesson06/step-03/README.md: -------------------------------------------------------------------------------- 1 | ## Content images in Modern HTML Emails 2 | 3 | The two sample images in the project setup got one CSS class each, width a dimension: 4 | - one with width given in pixels (600px), and 5 | - one with width given in percentage (100%) 6 | which resolved image display for: 7 | 8 | **Both works on:** 9 | 10 | Desktop: 11 | - Apple Mail 9, 10 12 | - Outlook 2011, 2016 13 | - Thunderbird 14 | 15 | Web clients: 16 | - AOL Mails 17 | - Comcasts 18 | - freenet.de 19 | - G Suite 20 | - Gmail 21 | - Yahoo! Mail 22 | - Web.de 23 | - Outlook clients 24 | etc. 25 | 26 | **Online attribute applied percent width works:** 27 | 28 | Desktop: 29 | - Outlook 2000, 2002, 2003 30 | - Lotus Notes 8 31 | 32 | 33 | **Both method failed for:** 34 | 35 | Desktop: 36 | - Outlook 2007, 2010, 2013, 2013 120 DPI 37 | - Windows 10 Mail 38 | - Lotus Notes 8.5 39 | - IBM Notes 9 40 | 41 | Mobile clients: 42 | - Android 4.4 43 | 44 | Web client: 45 | - Terra Mail 46 | - Mail.ru 47 | 48 | 49 | https://litmus.com/checklist/emails/public/dc07b14 -------------------------------------------------------------------------------- /lesson06/step-04/README.md: -------------------------------------------------------------------------------- 1 | ## Content images in Modern HTML Emails 2 | 3 | We have the following image dimensioning properties defined: 4 | - 600px width applied as an attribute, 5 | - display: block; applied as CSS inline style, 6 | - width: 100%; applied in a media query for mobiles, 7 | which resolved image display for: 8 | 9 | **Correct display for:** 10 | 11 | Desktop: 12 | - Apple Mail 9, 10 13 | - All of Outlooks 14 | - Thunderbird 15 | - Lotus Notes 8, 8.5 16 | - IBM Notes 9 17 | 18 | Mobile clients: 19 | - All of them. 20 | 21 | Web clients: 22 | - AOL Mails 23 | - Comcasts 24 | - freenet.de 25 | - G Suite 26 | - Gmail 27 | - Yahoo! Mail 28 | - Web.de 29 | - Outlook clients 30 | etc. 31 | 32 | **Problems occur for:** 33 | 34 | Desktop: 35 | - Windows 10 Mail - red vertical line 36 | - Lotus Notes 7 - no image display 37 | 38 | Web client: 39 | - Terra Mail - no email display (Explorer), additional spacing (Chrome) 40 | . Outlook.com and Outlook 365 - horizontal line at the bottom sometimes appear, not in every test case 41 | 42 | 43 | https://litmus.com/checklist/emails/public/91e246f -------------------------------------------------------------------------------- /lesson06/step-05/README.md: -------------------------------------------------------------------------------- 1 | ## Content images in Modern HTML Emails 2 | 3 | We have the following image dimensioning properties defined: 4 | - **div tag with width="600" height="auto" surrounding the image tag,** 5 | - 600px width applied as an attribute, 6 | - display: block; applied as CSS inline style, 7 | - width: 100%; applied in a media query for mobiles, 8 | which resolved image display for almost all clients. 9 | 10 | **Problems occur for:** 11 | 12 | Desktop: 13 | - Windows 10 Mail - red vertical line 14 | - Lotus Notes 7 - no image display 15 | 16 | Web client: 17 | - Terra Mail - no email display (Explorer), additional spacing (Chrome) 18 | 19 | https://litmus.com/checklist/emails/public/a2ad7eb -------------------------------------------------------------------------------- /lesson06/step-06/README.md: -------------------------------------------------------------------------------- 1 | ## Content images in Modern HTML Emails 2 | 3 | We have two separated container component. Inside them two section components each. 4 | One contains the `h2` tag, the other contains a `multicol` component with two images. 5 | The images are sized equally as the `multicol`s size, so it is visible if they apply the 6 | the following properties unexpectedly: 7 | 8 | - "width: 100%;" as CSS inline style, in the first `multicol` 9 | - "max-width: 100%;" as CSS inline style in the second `multicol`. 10 | 11 | 12 | **Both max-width and width applied:** 13 | 14 | - Apple Mail 9, 10 15 | - Outlook 2007, 2010, 2011, 2013, 2013 120 DPI, 2016 16 | - Windows 10 Mail 17 | - Thunderbird 18 | 19 | - Android 4.4 20 | - all iPhones 21 | - iPad (Retina, Mini) 22 | 23 | - all Web clients 24 | 25 | **Only width applied:** 26 | - Gmail App IMAP (Android) 27 | - Android 5.1, 6.0 28 | 29 | 30 | 31 | **Only max-width applied:** 32 | 33 | - Lotus Notes 8, 8.5 34 | - IBM Notes 9 35 | - Outlook 2000, 2002, 2003 36 | 37 | 38 | Lotus Notes 7 - no image display 39 | 40 | https://litmus.com/checklist/emails/public/3ddf28e -------------------------------------------------------------------------------- /lesson06/step-07/README.md: -------------------------------------------------------------------------------- 1 | ## Content images in Modern HTML Emails 2 | 3 | We have a container component. Inside that there are two section components. One contains the `h2` tag, the other contains a `multicol` component with two images. 4 | The images are sized equally as the `multicol`s size, so it is visible if they apply the 5 | the following properties unexpectedly: 6 | 7 | - "width: 100%;" and "max-width: 100%;" both as CSS inline style. 8 | 9 | 10 | All clients renders correctly, except small issues: 11 | 12 | * Android apps have a glaring sub-pixel border 13 | * in Windows 10 Mail vertical line at right border, 14 | * Lotus Notes 7 15 | * Outlook 2013 (120 DPI) resizes the image. 16 | 17 | 18 | https://litmus.com/checklist/emails/public/de3ddf2 -------------------------------------------------------------------------------- /lesson06/step-08/README.md: -------------------------------------------------------------------------------- 1 | ## Content images in Modern HTML Emails 2 | 3 | We make test for ALT text support investigation. By not defining 4 | the src attribute and setting height on images, it becomes possible 5 | to examine the client support. 6 | 7 | 8 | **Styled ALT text supported:** 9 | Desktop: 10 | - Apple Mail 9, 10 11 | - Lotus Notes 8 12 | - IBM Notes 9 13 | - Outlook 2000, 2002, 2011, 2016 14 | - Thunderbird 45 15 | 16 | Mobile: 17 | - iPhone 6, (iOS 8) 18 | - iPhone 6 Plus (iOS 8) 19 | - iPhone 6s Plus (iOS 9) 20 | - iPhone 7, 7Plus (iOS 10.2) 21 | - iPad (Retina, Mini) 22 | 23 | web clients: 24 | - AOL Mails 25 | - Comcasts 26 | - freenet.de 27 | - G Suite 28 | - Gmail 29 | - Inbox by Gmail 30 | - Mail.ru 31 | - Office 365 32 | - Outlook.com 33 | - Yahoo! Mail 34 | 35 | **Only ALT text supported:** 36 | - Lotus Notes 7 37 | 38 | **ALT text not supported:** 39 | - Outlook 2007, 2010, 2013 (+120 DPI version) 40 | - Windows 10 Mail 41 | - Android 4.4 42 | - Gmail App IMAP (Android 4.4) 43 | - Android 5.1 44 | - Android 6.0 45 | - iPhone 5s (iOS 7) 46 | - iPhone 5s (iOS 8) 47 | 48 | **Display problems** 49 | - GMX.de 50 | - Web.de 51 | 52 | https://litmus.com/checklist/emails/public/4e623e1 -------------------------------------------------------------------------------- /lesson06/step-10/README.md: -------------------------------------------------------------------------------- 1 | ## Content images in Modern HTML Emails 2 | 3 | GIF animation is tested for client support. 4 | The test suite features Litmus tests. If the second (yellow image) 5 | shows, then the animation happened, if the first (grey image) shows, 6 | then the client only displays the first frame. 7 | 8 | 9 | **Animation is supported** 10 | - Apple Mail 9, 10 11 | - Lotus Notes 8, 8.5 12 | - IBM Notes 9 13 | - Outlook 2000, 2002, 2003, 2011, 2016 14 | - Thunderbird 45 15 | - Android 5.1, 6.0 16 | - all iPhones 17 | - iPad (Retina, Mini) 18 | - all Web clients (but Yahoo! Mail on Explorer) 19 | 20 | 21 | **First frame is supported** 22 | - Outlook 2007, 2010, 2013 (+120 DPI version) 23 | - Windows 10 Mail 24 | - Android 4.4 25 | - Gmail App IMAP (Android) 26 | - Yahoo! Mail on Explorer 27 | 28 | 29 | **GIF format is not supported** 30 | - Lotus Notes 7 31 | 32 | https://litmus.com/checklist/emails/public/78e4347 33 | 34 | 35 | 36 | [You can view the project's initial source code on Github](https://github.com/EDMdesigner/modern-html-email-tutorial/blob/master/lesson06/step-00/index.html) 37 | 38 | [You can view this step's previews on Litmus](https://litmus.com/checklist/emails/public/8721d88) -------------------------------------------------------------------------------- /lesson07/img/android6-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson07/img/android6-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson07/img/aolpadding.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson07/img/aolpadding.gif -------------------------------------------------------------------------------- /lesson07/img/mailbird.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson07/img/mailbird.gif -------------------------------------------------------------------------------- /lesson07/img/ol2007-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson07/img/ol2007-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson07/img/ol2007.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson07/img/ol2007.gif -------------------------------------------------------------------------------- /lesson07/img/outlook.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson07/img/outlook.gif -------------------------------------------------------------------------------- /lesson07/img/win10.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson07/img/win10.gif -------------------------------------------------------------------------------- /lesson07/img/win10mail.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson07/img/win10mail.gif -------------------------------------------------------------------------------- /lesson07/img/yahoofine.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson07/img/yahoofine.gif -------------------------------------------------------------------------------- /lesson07/img/yahoopad.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson07/img/yahoopad.gif -------------------------------------------------------------------------------- /lesson07/step-00/README.md: -------------------------------------------------------------------------------- 1 | ## Bulletproof buttons in Modern HTML Emails 2 | 3 | In this lesson we are testing first having a look at the Litmus recommended bulletproof email buttons: 4 | - VML-based button, 5 | - Padding-based button, 6 | - Border-based button, 7 | - Padding + Border-based button. 8 | 9 | [Litmus previews for this step](https://litmus.com/checklist/emails/public/7a87b3e) -------------------------------------------------------------------------------- /lesson07/step-01/README.md: -------------------------------------------------------------------------------- 1 | ## Bulletproof buttons in Modern HTML Emails 2 | 3 | In this lesson we are testing first having a look at the Litmus recommended bulletproof email buttons: 4 | - VML-based button, 5 | - Padding-based button, 6 | - Border-based button, 7 | - Padding + Border-based button. 8 | 9 | We are adding `style="font-size:16px;font-family:sans-serif;color:#ffffff;text-decoration:none;"` and 10 | also setting `line-height` property to `30px` or `54px`, to have a standardised way on how the buttons look. 11 | 12 | [Litmus previews for this step](https://litmus.com/checklist/emails/public/183f705) -------------------------------------------------------------------------------- /lesson07/step-02/README.md: -------------------------------------------------------------------------------- 1 | ## Bulletproof buttons in Modern HTML Emails 2 | 3 | In this lesson we are testing 8 concept for bulletproof email buttons: 4 | - VML-based button, 5 | - Padding-based button, 6 | - Border-based button, 7 | - Padding + Border-based button, 8 | - VML + Lineheight-based button, (This is the one as a new recommended method) 9 | - Native button, (native button element inside an "anchor" tag) 10 | - Table-based button. (a table element inside an "anchor" tag). 11 | 12 | [Litmus previews for this step](https://litmus.com/checklist/emails/public/d061bd1) 13 | 14 | We add wrap the button's text in a `p` tag, and apply the styles, set on 15 | the `a` tag, so the text displays correctly. Adding this `p` element, the display is 16 | fixed on **IE-based Outlooks**. -------------------------------------------------------------------------------- /lesson07/step-03/README.md: -------------------------------------------------------------------------------- 1 | ## Bulletproof buttons in Modern HTML Emails 2 | 3 | In this lesson we are testing 8 concept for bulletproof email buttons: 4 | - VML-based button, 5 | - Padding-based button, 6 | - Border-based button, 7 | - Padding + Border-based button, 8 | - VML + Lineheight-based button, (This is the one as a new recommended method) 9 | - Native button, (native button element inside an "anchor" tag) 10 | - Table-based button. (a table element inside an "anchor" tag). 11 | 12 | [Litmus previews for this step](https://litmus.com/checklist/emails/public/6b01a0e) 13 | 14 | We add `bgcolor="# HEX-COLOR " attribute to the `td` parent element of the button component. 15 | This fixes Lotus Notes display problems (bare links without style, and missing buttons). -------------------------------------------------------------------------------- /lesson07/step-04/README.md: -------------------------------------------------------------------------------- 1 | ## Bulletproof buttons in Modern HTML Emails 2 | 3 | In this lesson we are testing 8 concept for bulletproof email buttons: 4 | - VML-based button, 5 | - Padding-based button, 6 | - Border-based button, 7 | - Padding + Border-based button, 8 | - VML + Lineheight-based button, (This is the one as a new recommended method) 9 | - Native button, (native button element inside an "anchor" tag) 10 | - Table-based button. (a table element inside an "anchor" tag). 11 | 12 | [Litmus previews for this step](https://litmus.com/checklist/emails/public/1b89599) 13 | 14 | Web and mobile clients shows almost every button in a nice concise way. 15 | There is a huge difference for desktop clients. 16 | 17 | The most stable buttons on desktop Outlooks are the VML-based and VML + Lineheight-based 18 | buttons. -------------------------------------------------------------------------------- /lesson08/img/Screenshot_2017-03-09-13-02-21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson08/img/Screenshot_2017-03-09-13-02-21.jpg -------------------------------------------------------------------------------- /lesson08/img/eoa-android6-gmail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson08/img/eoa-android6-gmail.png -------------------------------------------------------------------------------- /lesson08/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson08/img/logo.png -------------------------------------------------------------------------------- /lesson08/img/pattern.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson08/img/pattern.jpg -------------------------------------------------------------------------------- /lesson08/img/windows10mail-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson08/img/windows10mail-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson08/step-00/README.md: -------------------------------------------------------------------------------- 1 | ## Background images in Modern HTML Emails 2 | 3 | This is the initial setup for testing background images in HTML email. The code here gets modified on each step, based on what is being tested. 4 | 5 | In this initial step, we test a few different combinations of common HTML tags and styling approaches. The black border around each background container will help us to find the differences. 6 | 7 | You can check the Litmus test results following this URL: 8 | https://litmus.com/checklist/emails/public/6909240 -------------------------------------------------------------------------------- /lesson08/step-01/README.md: -------------------------------------------------------------------------------- 1 | ## Background images in Modern HTML Emails - step 01 2 | 3 | This is the second step of this lesson. Here we would test the TABLE tag and related child elements with background image. 4 | 5 | You can check the Litmus test results following this URL: 6 | ![](https://litmus.com/checklist/emails/public/a634119) -------------------------------------------------------------------------------- /lesson08/step-02/README.md: -------------------------------------------------------------------------------- 1 | ## Background images in Modern HTML Emails - step 02 2 | 3 | In the previous steps we tested out the most common options to show the desired background image. Now we going to select the best approach, and introduce VML to support the missing Outlooks too. 4 | 5 | You can check the Litmus test results following this URL: 6 | ![](https://litmus.com/checklist/emails/public/8a995d1) -------------------------------------------------------------------------------- /lesson08/step-03/README.md: -------------------------------------------------------------------------------- 1 | ## Background images in Modern HTML Emails - step 03 2 | 3 | In this lesson, we prepare background image for the BODY tag using 4 | `background` attribute. 5 | 6 | 7 | ** Background image shows up:** 8 | 9 | * Apple Mails 10 | * All Outlooks 11 | * Lotus Notes 8, 8.5, 9 12 | * Thunderbird 13 | 14 | * Android 4.4 15 | * iPhones 16 | * iPads 17 | 18 | * GMX.de 19 | * Web.de 20 | 21 | ** No background image shows up:** 22 | 23 | * Windows 10 Mail 24 | * Lotus Notes 7 25 | 26 | * Android clients besides Android 4.4 27 | 28 | * AOL Mail 29 | * Comcast 30 | * freenet.de 31 | * G Suite 32 | * Gmail 33 | * Inbox 34 | * Mail.ru 35 | * Office 365 36 | * Outlook.com 37 | * Yahoo! Mail 38 | * Terra Mail 39 | 40 | 41 | You can check the Litmus test results following this URL: 42 | ![](https://litmus.com/checklist/emails/public/5695d89) -------------------------------------------------------------------------------- /lesson08/step-04/README.md: -------------------------------------------------------------------------------- 1 | ## Background images in Modern HTML Emails - step 04 2 | 3 | In this lesson, we prepare background image for the BODY tag, 4 | using indivual background properties. 5 | 6 | 7 | ** Background image shows up:** 8 | 9 | * Apple Mails 10 | * All Outlooks 11 | * Thunderbird 12 | 13 | * Android 4.4 14 | * iPhones 15 | * iPads 16 | 17 | * AOL Mail 18 | * Comcast 19 | * G Suite 20 | * Gmail 21 | * Inbox 22 | * GMX.de 23 | * Web.de 24 | 25 | ** No background image shows up:** 26 | 27 | * Windows 10 Mail 28 | * Lotus Notes 7, 8, 8.5, 9 29 | 30 | * Android clients besides Android 4.4 31 | 32 | * freenet.de 33 | * Mail.ru 34 | * Office 365 35 | * Outlook.com 36 | * Yahoo! Mail 37 | * Terra Mail 38 | 39 | 40 | You can check the Litmus test results following this URL: 41 | ![](https://litmus.com/checklist/emails/public/e88b4a4) -------------------------------------------------------------------------------- /lesson08/step-05/README.md: -------------------------------------------------------------------------------- 1 | ## Background images in Modern HTML Emails - step 05 2 | 3 | In this lesson, we prepare background image for the BODY tag, 4 | using `background` shorthand property. 5 | 6 | 7 | ** Background image shows up:** 8 | 9 | * Apple Mails 10 | * All Outlooks 11 | * Thunderbird 12 | 13 | * Android 4.4 14 | * iPhones 15 | * iPads 16 | 17 | * AOL Mail 18 | * Comcast 19 | * G Suite 20 | * Gmail 21 | * Inbox 22 | * GMX.de 23 | * Web.de 24 | 25 | ** No background image shows up:** 26 | 27 | * Windows 10 Mail 28 | * Lotus Notes 7, 8, 8.5, 9 29 | 30 | * Android clients besides Android 4.4 31 | 32 | * freenet.de 33 | * Mail.ru 34 | * Office 365 35 | * Outlook.com 36 | * Yahoo! Mail 37 | * Terra Mail 38 | 39 | 40 | You can check the Litmus test results following this URL: 41 | ![](https://litmus.com/checklist/emails/public/435c204) -------------------------------------------------------------------------------- /lesson08/step-06/README.md: -------------------------------------------------------------------------------- 1 | ## Background images in Modern HTML Emails - step 06 2 | 3 | In this lesson, we add a body wrapper table to fix BODY background image in web-based clients. 4 | 5 | 6 | ** Background image shows up:** 7 | 8 | * Apple Mails 9 | * All Outlooks 10 | * Thunderbird 11 | 12 | * Android 4.4 13 | * iPhones 14 | * iPads 15 | 16 | * AOL Mail 17 | * Comcast 18 | * G Suite 19 | * Gmail 20 | * Inbox 21 | * GMX.de 22 | * Web.de 23 | * freenet.de 24 | * Mail.ru 25 | * Office 365 26 | * Outlook.com 27 | * Yahoo! Mail 28 | * Terra Mail 29 | 30 | 31 | ** No background image shows up:** 32 | 33 | * Windows 10 Mail 34 | * Lotus Notes 7 35 | 36 | * Android clients besides Android 4.4 37 | 38 | 39 | You can check the Litmus test results following this URL: 40 | ![](https://litmus.com/checklist/emails/public/435c204) -------------------------------------------------------------------------------- /lesson09/fonts/playfairdisplay-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/fonts/playfairdisplay-regular-webfont.eot -------------------------------------------------------------------------------- /lesson09/fonts/playfairdisplay-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/fonts/playfairdisplay-regular-webfont.ttf -------------------------------------------------------------------------------- /lesson09/fonts/playfairdisplay-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/fonts/playfairdisplay-regular-webfont.woff -------------------------------------------------------------------------------- /lesson09/fonts/playfairdisplay-regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/fonts/playfairdisplay-regular-webfont.woff2 -------------------------------------------------------------------------------- /lesson09/fonts/playfairdisplay-regular.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face { 3 | font-family: 'playfair_displayregular'; 4 | src: url('https://edmdesigner.github.io/modern-html-email-tutorial/lesson09/fonts/playfairdisplay-regular-webfont.eot'); 5 | src: url('https://edmdesigner.github.io/modern-html-email-tutorial/lesson09/fonts/playfairdisplay-regular-webfont.eot?#iefix') format('embedded-opentype'), 6 | url('https://edmdesigner.github.io/modern-html-email-tutorial/lesson09/fonts/playfairdisplay-regular-webfont.woff2') format('woff2'), 7 | url('https://edmdesigner.github.io/modern-html-email-tutorial/lesson09/fonts/playfairdisplay-regular-webfont.woff') format('woff'), 8 | url('https://edmdesigner.github.io/modern-html-email-tutorial/lesson09/fonts/playfairdisplay-regular-webfont.ttf') format('truetype'), 9 | url('https://edmdesigner.github.io/modern-html-email-tutorial/lesson09/fonts/playfairdisplay-regular-webfont.svg#playfair_displayregular') format('svg'); 10 | font-weight: normal; 11 | font-style: normal; 12 | 13 | } -------------------------------------------------------------------------------- /lesson09/fonts/raleway-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/fonts/raleway-regular-webfont.eot -------------------------------------------------------------------------------- /lesson09/fonts/raleway-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/fonts/raleway-regular-webfont.ttf -------------------------------------------------------------------------------- /lesson09/fonts/raleway-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/fonts/raleway-regular-webfont.woff -------------------------------------------------------------------------------- /lesson09/fonts/raleway-regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/fonts/raleway-regular-webfont.woff2 -------------------------------------------------------------------------------- /lesson09/fonts/ralewayregular.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'ralewayregular'; 3 | src: url('raleway-regular-webfont.eot'); 4 | src: url('raleway-regular-webfont.eot?#iefix') format('embedded-opentype'), 5 | url('raleway-regular-webfont.woff2') format('woff2'), 6 | url('raleway-regular-webfont.woff') format('woff'), 7 | url('raleway-regular-webfont.ttf') format('truetype'), 8 | url('raleway-regular-webfont.svg#ralewayregular') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | 12 | } -------------------------------------------------------------------------------- /lesson09/img/Builderpreview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/Builderpreview.png -------------------------------------------------------------------------------- /lesson09/img/adroid5_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/adroid5_1.png -------------------------------------------------------------------------------- /lesson09/img/android4-lists.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/android4-lists.png -------------------------------------------------------------------------------- /lesson09/img/android5-lists.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/android5-lists.png -------------------------------------------------------------------------------- /lesson09/img/android6-vertical-allowed-1366 .png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/android6-vertical-allowed-1366 .png -------------------------------------------------------------------------------- /lesson09/img/android6gmailapp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/android6gmailapp.png -------------------------------------------------------------------------------- /lesson09/img/androidgmail-blockquote.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/androidgmail-blockquote.jpg -------------------------------------------------------------------------------- /lesson09/img/androidgmailimap-comp-step1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/androidgmailimap-comp-step1.png -------------------------------------------------------------------------------- /lesson09/img/androidgmailimap-comp-step2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/androidgmailimap-comp-step2.png -------------------------------------------------------------------------------- /lesson09/img/androidgmailimap-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/androidgmailimap-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson09/img/chromemailru-lists.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/chromemailru-lists.png -------------------------------------------------------------------------------- /lesson09/img/chromeoutlookcom-lists.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/chromeoutlookcom-lists.png -------------------------------------------------------------------------------- /lesson09/img/ffyahoo-lists.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/ffyahoo-lists.png -------------------------------------------------------------------------------- /lesson09/img/iphone6+.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/iphone6+.png -------------------------------------------------------------------------------- /lesson09/img/iphone6s-customfont.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/iphone6s-customfont.png -------------------------------------------------------------------------------- /lesson09/img/iphone7-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/iphone7-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson09/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/logo.png -------------------------------------------------------------------------------- /lesson09/img/notes7-vertical-allowed-1366 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/notes7-vertical-allowed-1366 (1).png -------------------------------------------------------------------------------- /lesson09/img/notes7-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/notes7-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson09/img/notes85-spacing1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/notes85-spacing1.png -------------------------------------------------------------------------------- /lesson09/img/notes85-spacing2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/notes85-spacing2.png -------------------------------------------------------------------------------- /lesson09/img/notes9-comparison-step1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/notes9-comparison-step1.png -------------------------------------------------------------------------------- /lesson09/img/notes9-comparison-step2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/notes9-comparison-step2.png -------------------------------------------------------------------------------- /lesson09/img/notes9-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/notes9-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson09/img/ol2007-fixsection1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/ol2007-fixsection1.png -------------------------------------------------------------------------------- /lesson09/img/ol2007-fixsection2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/ol2007-fixsection2.png -------------------------------------------------------------------------------- /lesson09/img/ol2007-vertical-allowed-1366 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/ol2007-vertical-allowed-1366 (1).png -------------------------------------------------------------------------------- /lesson09/img/ol2007-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/ol2007-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson09/img/ol2010-arial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/ol2010-arial.png -------------------------------------------------------------------------------- /lesson09/img/ol2010-customfont.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/ol2010-customfont.png -------------------------------------------------------------------------------- /lesson09/img/ol2010-timesnew.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/ol2010-timesnew.png -------------------------------------------------------------------------------- /lesson09/img/ol2010-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/ol2010-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson09/img/ol2013dpi120-lists.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/ol2013dpi120-lists.png -------------------------------------------------------------------------------- /lesson09/img/ol2015-customfont.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/ol2015-customfont.png -------------------------------------------------------------------------------- /lesson09/img/ol2015-lists.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/ol2015-lists.png -------------------------------------------------------------------------------- /lesson09/img/terra-step1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/terra-step1.png -------------------------------------------------------------------------------- /lesson09/img/terra-step2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/terra-step2.png -------------------------------------------------------------------------------- /lesson09/img/terra-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/terra-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson09/img/windows10mail-customfont.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/windows10mail-customfont.png -------------------------------------------------------------------------------- /lesson09/img/windows10mail-spacing1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/windows10mail-spacing1.png -------------------------------------------------------------------------------- /lesson09/img/windows10mail-spacing2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/windows10mail-spacing2.png -------------------------------------------------------------------------------- /lesson09/img/windows10mail-vertical-allowed-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/windows10mail-vertical-allowed-1.png -------------------------------------------------------------------------------- /lesson09/img/windows10mail-vertical-allowed-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/windows10mail-vertical-allowed-2.png -------------------------------------------------------------------------------- /lesson09/img/yahoo-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson09/img/yahoo-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson09/step-00/README.md: -------------------------------------------------------------------------------- 1 | ## Typography in Modern HTML Emails 2 | 3 | This is the initial setup to showcase Typogaphy in HTML email. The code here gets modified on each step, based on what is being tested. 4 | 5 | The layout HTML should be familiar from Lesson 03. It contains the most common typography elements. Headings, paragraphs and basic formattings. Also the basic CSS formating of these elements is added to the HEAD style. Most styles come from the default stylesheet of the email clients. 6 | 7 | Some elements disappear on a lot of clients. Big differences are in visual appearence between mobile and desktop clients. Links are unformatted. 8 | 9 | [You can check the Litmus test results following this URL.](https://litmus.com/checklist/emails/public/f2baa0f) -------------------------------------------------------------------------------- /lesson09/step-02/README.md: -------------------------------------------------------------------------------- 1 | ## Typography in Modern HTML Emails 2 | 3 | Inline styles added for Headings and Paragraphs. 4 | 5 | **There is still no spacings** 6 | Desktop: 7 | - Lotus Notes 7, 8 | - Outlook 2007, 2010, 2013 a 9 | - Windows 10 Mail 10 | 11 | Lot of inconsistencies on webmails. 12 | 13 | [You can check the Litmus test results following this URL.](https://litmus.com/checklist/emails/public/67ab994) -------------------------------------------------------------------------------- /lesson09/step-03/README.md: -------------------------------------------------------------------------------- 1 | ## Typography in Modern HTML Emails 2 | 3 | Some inline tags are added to showcase regular tag based formatting (`b`, `i`, `u`). 4 | 5 | Hyperlink gets inline `span` wrapper, and inline styles to keep the right color, and remove underline. 6 | 7 | `Ul`, `ol` elements get inline styles. 8 | 9 | Also added head styles and inlined styles for PRE element. 10 | 11 | **Still not the desired visual on** 12 | 13 | Desktop: 14 | - Lotus Notes 7, 8.5, IBM Notes 9 15 | - Outlook 2007, 2010, 2013, Windows 10 Mail 16 | 17 | 18 | [You can check the Litmus test results following this URL.](https://litmus.com/checklist/emails/public/ef8679f) -------------------------------------------------------------------------------- /lesson09/step-04/README.md: -------------------------------------------------------------------------------- 1 | ## Typography in Modern HTML Emails 2 | 3 | Heading, paragraphs, blockquote and .sectionHeading get table wrappers and styles are reorganized. 4 | 5 | ** Fixed spacings on all Outlooks and most legacy desktop clients** 6 | 7 | 8 | 9 | Border width with 16px becomes only 8px in Word-based Outlooks. 10 | 11 | 12 | [You can check the Litmus test results following this URL.](https://litmus.com/checklist/emails/public/4e18ce2) -------------------------------------------------------------------------------- /lesson09/step-05/README.md: -------------------------------------------------------------------------------- 1 | ## Typography in Modern HTML Emails 2 | 3 | After the reasonable fixes, let's introduce custom fonts linked from secure URLs. 4 | 5 | Three test cases included: 6 | - Google Fonts in link tag (Lobster) 7 | - linked custom, self-hosted font-face css, with relative font urls in css (Raleway) 8 | - linked custom, self-hosted font-face css, with absolute font urls in css (Playfair Display) 9 | 10 | **Google fonts and absolute linked fonts with self-hosted CSS works in:** 11 | Desktop: 12 | - Apple Mail 9, 10, Outlook 2011, Outlook 2016 13 | - Thunderbird at EmailonAcid (while fails on Thunderbird at Litmus) 14 | 15 | Mobile: 16 | - all IOS 17 | 18 | **Relative linked font files with self-hosted CSS works in:** 19 | Desktop: 20 | - Windows 10 Mail 21 | 22 | **Fails on** 23 | Desktop: 24 | - Lotus Notes 25 | - Outlook 2000, 2002, 2003, 2007, 2010, 2013, 2013 120 dpi 26 | 27 | ** Fails to display fallback font** 28 | Desktop: 29 | - Outlook 2007, 2010, 2013, 2013 120 dpi 30 | 31 | [You can check the Litmus test results following this URL](https://litmus.com/checklist/emails/public/3f8bf39) 32 | -------------------------------------------------------------------------------- /lesson09/step-07/README.md: -------------------------------------------------------------------------------- 1 | ## Typography in Modern HTML Emails 2 | 3 | We still include fonts with @import approach. We only add `font-family` to custom targeted 4 | Word-based Outlooks. 5 | 6 | 7 | [You can check the Litmus test results following this URL](https://litmus.com/checklist/emails/public/60e5980) -------------------------------------------------------------------------------- /lesson10/img/edmlogo120.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson10/img/edmlogo120.jpg -------------------------------------------------------------------------------- /lesson10/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson10/img/logo.png -------------------------------------------------------------------------------- /lesson10/img/step00-lotesnotes8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson10/img/step00-lotesnotes8.png -------------------------------------------------------------------------------- /lesson10/img/step00-ol2007.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson10/img/step00-ol2007.png -------------------------------------------------------------------------------- /lesson10/img/step01-ol2003.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson10/img/step01-ol2003.png -------------------------------------------------------------------------------- /lesson10/img/step01-ol2010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson10/img/step01-ol2010.png -------------------------------------------------------------------------------- /lesson10/img/step02-lotusnotes8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson10/img/step02-lotusnotes8.png -------------------------------------------------------------------------------- /lesson10/img/step02-ol2010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson10/img/step02-ol2010.png -------------------------------------------------------------------------------- /lesson10/step-00/README.md: -------------------------------------------------------------------------------- 1 | ## Paddings, Margins and Borders in Modern HTML Emails 2 | 3 | This is the initial setup to showcase how mentioned properties can be used in Modern HTML Emails. The code here gets modified on each step, based on what is being tested. 4 | 5 | 6 | The layout HTML should be familiar from previous lessons. It contains a one column structure. 7 | In this step, it contains a regular IMG and P tags. Both elements has 20px margins, 10px paddings, and 2px dashed borders. 8 | While IMG represent the native inline-block behavior, the P tag behaves as a block element. 9 | 10 | 11 | ** It fails to render the paddings on:** 12 | - Lotus Notes 8 13 | - Word-based Outlooks drops borders, paddings and background from the IMG tag 14 | 15 | ** P lost its margin-left/right 20px** 16 | - Word-based Outlooks 17 | 18 | 19 | You can check the Litmus test results following this URL: 20 | https://litmus.com/checklist/emails/public/90ef8c4 -------------------------------------------------------------------------------- /lesson10/step-01/README.md: -------------------------------------------------------------------------------- 1 | ## Paddings, Margins and Borders in Modern HTML Emails 2 | 3 | This is the 1st step to showcase how mentioned properties can be used in Modern HTML Emails. The code here gets modified on each step, based on what is being tested. 4 | 5 | 6 | In this step, the IMG tag gets a DIV wrapper, while P was replaced to a DIV tag. This new DIV element has 20px margins, 10px paddings, and 2px dashed borders. 7 | 8 | 9 | ** It fails to render the correct paddings on IMG:** 10 | - Lotus Notes 8 11 | - Legacy outlooks, Word-based outlooks and clients without display:inline-block support will fail... 12 | 13 | ** the DIV imitating P lost its margins, and inherits other spacings** 14 | - Word-based Outlooks 15 | 16 | 17 | You can check the Litmus test results following this URL: 18 | (https://litmus.com/checklist/emails/public/8b846b8 -------------------------------------------------------------------------------- /lesson10/step-02/README.md: -------------------------------------------------------------------------------- 1 | ## Paddings, Margins and Borders in Modern HTML Emails 2 | 3 | This is the 2nd step to showcase how mentioned properties can be used in Modern HTML Emails. The code here gets modified on each step, based on what is being tested. 4 | 5 | 6 | In this step, the IMG tag gets a Table wrapper, while P was replaced to a Table. This new parent of the Table element has 20px paddings, which will imitate the needed margins. The Table gets 2px dashed borders. Finally the new Table's inner TD gets the padding:10px; 7 | 8 | 9 | ** All clients are OK** 10 | 11 | 12 | You can check the Litmus test results following this URL: 13 | (https://litmus.com/checklist/emails/public/8767297 -------------------------------------------------------------------------------- /lesson10/step-03/README.md: -------------------------------------------------------------------------------- 1 | ## Paddings, Margins and Borders in Modern HTML Emails 2 | 3 | This is the 3rd step to showcase how mentioned properties can be used in Modern HTML Emails. The code here gets modified on each step, based on what is being tested. 4 | 5 | 6 | In this step,we'll see how to make the right workaround for big margins/paddings which needs to disappear on mobile. Instead of adding margins/paddings, we wrap our content with a Table, which has an empty cell on the left, before the content cell. Set the needed left-margin/left-padding as a width on this empty cell. Also we add the same empty cell to the right side, and class them as .fakeMargin. This '.fakeMargin' class will help us to hide these cells on mobile. 7 | 8 | 9 | ** All clients are OK** 10 | 11 | 12 | You can check the Litmus test results following this URL: 13 | (https://litmus.com/checklist/emails/public/315f843 -------------------------------------------------------------------------------- /lesson11/img/EMMT02q.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/EMMT02q.jpg -------------------------------------------------------------------------------- /lesson11/img/Screenshot_step02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/Screenshot_step02.jpg -------------------------------------------------------------------------------- /lesson11/img/Screenshot_step03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/Screenshot_step03.jpg -------------------------------------------------------------------------------- /lesson11/img/Screenshot_step04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/Screenshot_step04.jpg -------------------------------------------------------------------------------- /lesson11/img/acer-liquid-z630-16gb-4g-black.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/acer-liquid-z630-16gb-4g-black.jpg -------------------------------------------------------------------------------- /lesson11/img/android4-cardlayout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/android4-cardlayout.png -------------------------------------------------------------------------------- /lesson11/img/android4-fail-responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/android4-fail-responsive.png -------------------------------------------------------------------------------- /lesson11/img/android4-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/android4-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson11/img/android6-step02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/android6-step02.png -------------------------------------------------------------------------------- /lesson11/img/android6-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/android6-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson11/img/androidgmailimap-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/androidgmailimap-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson11/img/blackberry-leap-white-grey.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/blackberry-leap-white-grey.jpg -------------------------------------------------------------------------------- /lesson11/img/iphone5s-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/iphone5s-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson11/img/iphone6plus-vertical-allowed-1366.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/iphone6plus-vertical-allowed-1366.png -------------------------------------------------------------------------------- /lesson11/img/iphone7plus-cardlayout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/iphone7plus-cardlayout.png -------------------------------------------------------------------------------- /lesson11/img/iphone7plus-responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/iphone7plus-responsive.png -------------------------------------------------------------------------------- /lesson11/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/logo.png -------------------------------------------------------------------------------- /lesson11/img/notes85--step03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/notes85--step03.png -------------------------------------------------------------------------------- /lesson11/img/notes9-cardlayout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/notes9-cardlayout.png -------------------------------------------------------------------------------- /lesson11/img/notes9-fail-responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/notes9-fail-responsive.png -------------------------------------------------------------------------------- /lesson11/img/ol2015-cardlayout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/ol2015-cardlayout.png -------------------------------------------------------------------------------- /lesson11/img/ol2015-responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/ol2015-responsive.png -------------------------------------------------------------------------------- /lesson11/img/unas_361921.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/unas_361921.jpg -------------------------------------------------------------------------------- /lesson11/img/yahoo-cardlayout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/yahoo-cardlayout.png -------------------------------------------------------------------------------- /lesson11/img/yahoo-responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EDMdesigner/modern-html-email-tutorial/c113fc4289ef2a38f3a2b3a69b2f10f00d176930/lesson11/img/yahoo-responsive.png -------------------------------------------------------------------------------- /lesson11/step-00/README.md: -------------------------------------------------------------------------------- 1 | ## Tabular Data in Modern HTML Emails 2 | 3 | This is the initial setup for organizing tabular data in Modern HTML Emails in a table. The code here gets modified in the following steps. 4 | 5 | 6 | The layout HTML should be familiar from previous lessons. It contains a one column structure. We insert a fluid table inside it. We only set font properties and padding, so our table looks acceptable. 7 | 8 | [You can check the Litmus test results following this URL.](https://litmus.com/checklist/emails/public/ef7235a) -------------------------------------------------------------------------------- /lesson11/step-01/README.md: -------------------------------------------------------------------------------- 1 | ## Tabular Data in Modern HTML Emails 2 | 3 | This step contains the fluid table from the previous step, we update it, so it becomes responsive. 4 | 5 | In the HTML, we update our table for mobile views. We hide the table headers and set "display:block;" for table rows. Some other styling is used for better looks. 6 | 7 | [You can check the Litmus test results following this URL.](https://litmus.com/checklist/emails/public/b342347) -------------------------------------------------------------------------------- /lesson11/step-02/README.md: -------------------------------------------------------------------------------- 1 | ## Tabular Data in Modern HTML Emails 2 | 3 | This step contains the responsive table from the previous step. 4 | 5 | In this example, we test how pseudo elements and data-* attributes are supported across email clients. We apply the column labels by these two only. 6 | 7 | 8 | [You can check the Litmus test results following this URL.](https://litmus.com/checklist/emails/public/882f1c6) -------------------------------------------------------------------------------- /lesson11/step-03/README.md: -------------------------------------------------------------------------------- 1 | ## Tabular Data in Modern HTML Emails 2 | 3 | This step contains the responsive table from the previous step. 4 | 5 | In this example, we created a shopping cart based on a responsive table. We created it for comparison with the card layout method. That is shown in the next example. 6 | 7 | [You can check the Litmus test results following this URL.](https://litmus.com/checklist/emails/public/1557fbc) -------------------------------------------------------------------------------- /lesson11/step-04/README.md: -------------------------------------------------------------------------------- 1 | ## Tabular Data in Modern HTML Emails 2 | 3 | This step contains the responsive table from the previous step. 4 | 5 | In this example,we test a new approach. We use multi-column components to structure our data. We created it for comparison with the responsive table shopping cart example from the previous step. 6 | 7 | In this example, we test a new approach. We use multi-column components to structure our data. 8 | 9 | [You can check the Litmus test results following this URL.](https://litmus.com/checklist/emails/public/f99a42c) --------------------------------------------------------------------------------