├── Code Examples ├── images │ ├── bg.jpg │ ├── hero.jpg │ ├── logo.jpg │ └── bg-dark.jpg ├── Starter.html ├── Hybrid Examples │ ├── single.html │ ├── 2columnunequalwidths.html │ ├── 2columnfluid.html │ ├── 2columnunequalreversestack.html │ ├── 2columnfluidgutters.html │ ├── 2columnfluidreversestack.html │ ├── 2columnfluidguttersreversestack.html │ ├── 3columnfluid.html │ ├── 3columnfluidreversestack.html │ ├── 3columnfluidgutter.html │ ├── 3columnfluidgutterreversestack.html │ └── 4column.html ├── Single-Column-Hybrid.html ├── CSS-Animations.html ├── Single-Column-Tables.html ├── Background-Image.html ├── Buttons.html ├── Interactivity.html ├── Multiple-Columns-Tables.html └── Multiple-Columns-Hybrid.html └── README.md /Code Examples/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rodriguezcommaj/frontendmasters/HEAD/Code Examples/images/bg.jpg -------------------------------------------------------------------------------- /Code Examples/images/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rodriguezcommaj/frontendmasters/HEAD/Code Examples/images/hero.jpg -------------------------------------------------------------------------------- /Code Examples/images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rodriguezcommaj/frontendmasters/HEAD/Code Examples/images/logo.jpg -------------------------------------------------------------------------------- /Code Examples/images/bg-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rodriguezcommaj/frontendmasters/HEAD/Code Examples/images/bg-dark.jpg -------------------------------------------------------------------------------- /Code Examples/Starter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Code Examples/Hybrid Examples/single.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |

16 | 21 | 22 | 23 | 32 | 33 |

24 | 25 | 26 | 27 |

CENTER

28 | 29 | 30 | 31 |

34 | 39 |

47 | 48 | 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML Email v2 2 | ## A Frontend Masters Workshop 3 | 4 | Thanks for hanging out with me during our Frontend Masters workshop! This repo contains the ode examples for HTML Email v2 including examples for single and multiple column emails using traditional responsive techniques and hybrid coding, as well as some basic examples for CSS animations, interactivity, and a few other things. 5 | 6 | **Feel free to open issues if you find them, or submit a pull request!** 7 | 8 | There's a lot to learn about HTML email, so below you'll find a few additional resources worth checking out. 9 | 10 | ## Learning More 11 | 12 | Check these out to dig deeper into different aspects of email development: 13 | 14 | - [The Better Email course](https://thebetter.email/design) 15 | - [The Better Email resources directory](https://thebetter.email/resources) 16 | - [The Litmus blog](https://litmus.com/blog/) 17 | - [The Litmus Community](https://litmus.com/community) 18 | - [The Fresh Inbox blog](https://freshinbox.com/blog/) 19 | - [Email Marketing Rules book](http://www.emailmarketingrules.com/email-marketing-rules/) 20 | - [Litmus Live conference](https://litmus.com/conference) 21 | - [Really Good Emails](https://reallygoodemails.com/) 22 | - [Can I email?](https://www.caniemail.com/) 23 | - [Campaign Monitor's Ultimate Guide to CSS](https://www.campaignmonitor.com/css/) 24 | 25 | ## Helpful Tools 26 | 27 | - [Litmus email testing and dev tools](https://litmus.com) 28 | - [PutsMail](https://putsmail.com/) 29 | - [MJML: Mailjet Markup Language](https://mjml.io/) 30 | - [Foundation for Emails](https://foundation.zurb.com/emails.html) 31 | - [Maizzle email framework](https://maizzle.com/) 32 | - [Tota11y accessibility tool](https://khan.github.io/tota11y/) 33 | - [Silktide disability simulator](https://silktide.com/resources/toolbar) 34 | - [Campaign Monitor CSS inliner](https://www.campaignmonitor.com/resources/tools/css-inliner/) 35 | - [Mailchimp CSS inliner](https://templates.mailchimp.com/resources/inline-css/) 36 | - [Bulletproof Buttons generator](https://buttons.cm/) 37 | - [Bulletproof Backgrounds generator](https://backgrounds.cm/) 38 | 39 | ## Connecting with Email Folks 40 | 41 | - [#EmailGeeks Slack channel](https://email.geeks.chat/) 42 | - [The Litmus Community](https://litmus.com/community) 43 | - [Some good people to follow](https://thebetter.email/resources#people) 44 | 45 | ## Email Me 46 | 47 | If you ever want to chat email, [shoot me an email](mailto:jason@rodriguezcommaj.com)! -------------------------------------------------------------------------------- /Code Examples/Single-Column-Hybrid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Single Column Hybrid 5 | 6 | 7 | 8 | 61 | 62 | 63 | 64 | 65 | 68 | 69 | 72 | 73 |

74 | 75 | 76 | 77 | 78 |

79 | 80 | 81 | 82 |

Who loves HTML email?

83 | 84 | 85 | A cheerful looking mailbox in front of green plants and flowers.

86 | 87 | 88 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit eos totam blanditiis sunt quis vel repellendus animi quam ea quasi, eveniet id asperiores. Voluptates beatae exercitationem, odio culpa quasi maiores.

89 | 90 | 91 | 92 |

93 | 98 | This is a button 99 | 103 |

104 | 105 | 106 |

107 |

You're receiving this email because you're trying to make email better for everyone. Good on you! Don't worry, you can unsubscribe here if you'd like.

108 |

Email Sender - 48372 Murphy St., Someplace, MI 93827

109 |

110 | 111 |

112 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /Code Examples/Hybrid Examples/2columnunequalwidths.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 90 | 91 | 92 | 93 | 94 | 95 | 96 |

15 | 20 | 21 | 22 | 82 | 83 |

23 | 30 | 31 | 36 |

37 | 41 | 42 | 43 | 44 | 51 | 52 |

45 | 46 | 47 |

LEFT

48 | 49 | 50 |

53 |

54 | 58 |

59 | 63 | 64 | 65 | 66 | 73 | 74 |

67 | 68 | 69 |

RIGHT

70 | 71 | 72 |

75 |

76 | 81 |

84 | 89 |

97 | 98 | 99 | -------------------------------------------------------------------------------- /Code Examples/Hybrid Examples/2columnfluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 90 | 91 | 92 | 93 | 94 | 95 | 96 |

16 | 21 | 22 | 23 | 82 | 83 |

24 | 29 | 30 | 35 |

36 | 46 | 47 | 48 | 49 | 56 | 57 |

50 | 51 | 52 |

LEFT

53 | 54 | 55 |

58 |

59 | 63 |

64 | 65 | 66 | 73 | 74 |

67 | 68 | 69 |

RIGHT

70 | 71 | 72 |

75 |

76 | 81 |

84 | 89 |

97 | 98 | 99 | -------------------------------------------------------------------------------- /Code Examples/Hybrid Examples/2columnunequalreversestack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 91 | 92 | 93 | 94 | 95 | 96 | 97 |

16 | 21 | 22 | 23 | 83 | 84 |

24 | 31 | 32 | 37 |

38 | 42 | 43 | 44 | 45 | 52 | 53 |

46 | 47 | 48 |

RIGHT

49 | 50 | 51 |

54 |

55 | 59 |

60 | 64 | 65 | 66 | 67 | 74 | 75 |

68 | 69 | 70 |

LEFT

71 | 72 | 73 |

76 |

77 | 82 |

85 | 90 |

98 | 99 | 100 | -------------------------------------------------------------------------------- /Code Examples/CSS-Animations.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS Animations 5 | 6 | 7 | 8 | 75 | 76 | 77 | 78 | 79 | 82 | 83 | 86 | 87 |

88 | 89 | 90 | 91 | 92 |

93 | 94 | 95 | 96 |

Who loves HTML email?

97 | 98 | 99 | A cheerful looking mailbox in front of green plants and flowers.

100 | 101 | 102 |

103 | 104 | 105 | 106 |

107 | 112 | This is a button 113 | 117 |

118 | 119 | 120 |

121 |

You're receiving this email because you're trying to make email better for everyone. Good on you! Don't worry, you can unsubscribe here if you'd like.

122 |

Email Sender - 48372 Murphy St., Someplace, MI 93827

123 |

124 | 125 |

126 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /Code Examples/Hybrid Examples/2columnfluidgutters.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 88 | 89 | 90 | 91 |

13 | 18 | 19 | 20 | 80 | 81 |

21 | 26 | 27 | 32 |

33 | 43 | 44 | 45 | 46 | 53 | 54 |

47 | 48 | 49 |

LEFT

50 | 51 | 52 |

55 |

56 | 61 |

62 | 63 | 64 | 71 | 72 |

65 | 66 | 67 |

RIGHT

68 | 69 | 70 |

73 |

74 | 79 |

82 | 87 |

92 | 93 | 94 | -------------------------------------------------------------------------------- /Code Examples/Hybrid Examples/2columnfluidreversestack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 90 | 91 | 92 | 93 | 94 | 95 | 96 |

16 | 21 | 22 | 23 | 82 | 83 |

24 | 29 | 30 | 35 |

36 | 37 | 38 | 45 | 46 |

39 | 40 | 41 |

RIGHT

42 | 43 | 44 |

47 |

48 | 52 |

53 | 63 | 64 | 65 | 66 | 73 | 74 |

67 | 68 | 69 |

LEFT

70 | 71 | 72 |

75 |

76 | 81 |

84 | 89 |

97 | 98 | 99 | -------------------------------------------------------------------------------- /Code Examples/Hybrid Examples/2columnfluidguttersreversestack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 91 | 92 | 93 | 94 | 95 | 96 | 97 |

16 | 21 | 22 | 23 | 83 | 84 |

24 | 29 | 30 | 35 |

36 | 37 | 38 | 45 | 46 |

39 | 40 | 41 |

RIGHT

42 | 43 | 44 |

47 |

48 | 53 |

54 | 64 | 65 | 66 | 67 | 74 | 75 |

68 | 69 | 70 |

LEFT

71 | 72 | 73 |

76 |

77 | 82 |

85 | 90 |

98 | 99 | 100 | -------------------------------------------------------------------------------- /Code Examples/Single-Column-Tables.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Single Column with Tables 5 | 6 | 7 | 8 | 62 | 63 | 64 | 65 | 66 | 69 | 70 | 71 | 72 | 134 | 135 |

73 | 74 | 75 | 76 | 77 | 80 | 81 | 82 | 83 | 84 | 87 | 88 | 89 | 90 | 91 | 94 | 95 | 96 | 97 | 98 | 103 | 104 | 105 | 106 | 107 | 122 | 123 | 124 | 125 | 126 | 130 | 131 | 132 |

78 |

79 |

85 |

Who loves HTML email?

86 |

92 |

93 |

99 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi necessitatibus quidem nesciunt quas adipisci, cupiditate ad a dicta illo sit quaerat expedita ipsam ut rerum repellendus, cum porro, maxime animi!

100 |

101 |

102 |

108 | 109 |

110 | 115 | This is a button 116 | 120 |

121 |

127 |

You're receiving this email because you're trying to make email better for everyone. Good on you! Don't worry, you can unsubscribe here if you'd like.

128 |

Email Sender - 48372 Murphy St., Someplace, MI 93827

129 |

133 |

136 | 137 | 138 | -------------------------------------------------------------------------------- /Code Examples/Background-Image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Background Images 5 | 6 | 7 | 8 | 62 | 63 | 64 | 65 | 66 | 69 | 70 | 71 | 72 | 134 | 135 |

73 | 74 | 75 | 76 | 77 | 80 | 81 | 82 | 83 | 84 | 87 | 88 | 89 | 90 | 91 | 94 | 95 | 96 | 97 | 98 | 103 | 104 | 105 | 106 | 107 | 122 | 123 | 124 | 125 | 126 | 130 | 131 | 132 |

78 |

79 |

85 |

Who loves HTML email?

86 |

92 |

93 |

99 |

100 |

101 |

102 |

108 | 109 |

110 | 115 | This is a button 116 | 120 |

121 |

127 |

You're receiving this email because you're trying to make email better for everyone. Good on you! Don't worry, you can unsubscribe here if you'd like.

128 |

Email Sender - 48372 Murphy St., Someplace, MI 93827

129 |

133 |

136 | 137 | 138 | -------------------------------------------------------------------------------- /Code Examples/Buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Single Columns Hybrid 5 | 6 | 7 | 8 | 61 | 62 | 63 | 64 | 65 | 68 | 69 | 72 | 73 |

74 | 75 | 76 |

This is a VML-based button:

77 | 78 | 79 | 80 |

81 | 86 | This is a button 87 | 91 |

92 | 93 | 94 |

This is a padding-based button:

95 | 96 | 97 | 98 | 99 | 106 | 107 |

100 | 101 | 102 | 103 | 104 |

This is a button

105 |

108 | 109 | 110 |

This is a border-based button:

111 | 112 | 113 | 114 | 115 | 124 | 125 |

116 | 117 | 118 | 121 | 122 |

119 | This is a button 120 |

123 |

126 | 127 | 128 |

This is a padding + border-based button:

129 | 130 | 131 | 132 | 133 | 140 | 141 |

134 | 135 | 136 | 137 | 138 |

This is a button

139 |

142 | 143 |

144 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /Code Examples/Interactivity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Interactivity 5 | 6 | 7 | 8 | 92 | 93 | 94 | 95 | 96 | 99 | 100 | 103 | 104 |

105 | 106 | 107 | 108 | 109 |

110 | 111 | 112 | 113 |

Who loves HTML email?

114 | 115 | 116 | 117 | 118 | 119 | 120 |

121 | Slide 1 122 | Slide 2 123 | Slide 3 124 |

125 | 126 | 127 |

128 |

This is slide 1

129 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

130 |

131 |

132 |

This is slide 2

133 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

134 |

135 |

136 |

This is slide 3

137 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

138 |

139 | 140 | 141 |

142 | 143 | 144 | 145 |

146 | 151 | This is a button 152 | 156 |

157 | 158 | 159 |

160 |

You're receiving this email because you're trying to make email better for everyone. Good on you! Don't worry, you can unsubscribe here if you'd like.

161 |

Email Sender - 48372 Murphy St., Someplace, MI 93827

162 |

163 | 164 |

165 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /Code Examples/Hybrid Examples/3columnfluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 119 | 120 | 121 | 122 | 123 | 124 | 125 |

16 | 21 | 22 | 23 | 111 | 112 |

24 | 32 | 33 | 38 |

39 | 58 | 59 | 60 | 61 | 68 | 69 |

62 | 63 | 64 |

LEFT

65 | 66 | 67 |

70 |

71 | 75 |

76 | 77 | 78 | 85 | 86 |

79 | 80 | 81 |

CENTER

82 | 83 | 84 |

87 |

88 | 92 |

93 | 94 | 95 | 102 | 103 |

96 | 97 | 98 |

RIGHT

99 | 100 | 101 |

104 |

105 | 110 |

113 | 118 |

126 | 127 | 128 | -------------------------------------------------------------------------------- /Code Examples/Multiple-Columns-Tables.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Multiple Columns with Tables 5 | 6 | 7 | 8 | 63 | 64 | 65 | 66 | 67 | 70 | 71 | 72 | 73 | 165 | 166 |

74 | 75 | 76 | 77 | 78 | 81 | 82 | 83 | 84 | 85 | 88 | 89 | 90 | 91 | 92 | 95 | 96 | 97 | 98 | 99 | 104 | 105 | 106 | 107 | 108 | 123 | 124 | 125 | 126 | 127 | 153 | 154 | 155 | 156 | 157 | 161 | 162 | 163 |

79 |

80 |

86 |

Who loves HTML email?

87 |

93 |

94 |

100 |

101 |

102 |

103 |

109 | 110 |

111 | 116 | This is a button 117 | 121 |

122 |

128 | 129 | 130 | 150 | 151 |

131 | 132 | 133 | 134 | 138 | 139 |

135 |

Heading Time

136 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae obcaecati illo atque impedit est dolores enim fuga, saepe recusandae consequuntur voluptatum aut alias, nam temporibus, provident cupiditate eligendi quis voluptas?

137 |

140 | 141 | 142 | 143 | 147 | 148 |

144 |

Heading Time

145 |

146 |

149 |

152 |

158 |

You're receiving this email because you're trying to make email better for everyone. Good on you! Don't worry, you can unsubscribe here if you'd like.

159 |

Email Sender - 48372 Murphy St., Someplace, MI 93827

160 |

164 |

167 | 168 | 169 | -------------------------------------------------------------------------------- /Code Examples/Hybrid Examples/3columnfluidreversestack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 119 | 120 | 121 | 122 | 123 | 124 | 125 |

16 | 21 | 22 | 23 | 111 | 112 |

24 | 32 | 33 | 38 |

39 | 40 | 41 | 48 | 49 |

42 | 43 | 44 |

RIGHT

45 | 46 | 47 |

50 |

51 | 55 |

56 | 57 | 58 | 65 | 66 |

59 | 60 | 61 |

CENTER

62 | 63 | 64 |

67 |

68 | 72 |

73 | 92 | 93 | 94 | 95 | 102 | 103 |

96 | 97 | 98 |

LEFT

99 | 100 | 101 |

104 |

105 | 110 |

113 | 118 |

126 | 127 | 128 | -------------------------------------------------------------------------------- /Code Examples/Hybrid Examples/3columnfluidgutter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 121 | 122 | 123 | 124 | 125 | 126 | 127 |

16 | 21 | 22 | 23 | 113 | 114 |

24 | 32 | 33 | 38 |

39 | 58 | 59 | 60 | 61 | 68 | 69 |

62 | 63 | 64 |

LEFT

65 | 66 | 67 |

70 |

71 | 76 |

77 | 78 | 79 | 86 | 87 |

80 | 81 | 82 |

CENTER

83 | 84 | 85 |

88 |

89 | 94 |

95 | 96 | 97 | 104 | 105 |

98 | 99 | 100 |

RIGHT

101 | 102 | 103 |

106 |

107 | 112 |

115 | 120 |

128 | 129 | 130 | -------------------------------------------------------------------------------- /Code Examples/Hybrid Examples/3columnfluidgutterreversestack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 121 | 122 | 123 | 124 | 125 | 126 | 127 |

16 | 21 | 22 | 23 | 113 | 114 |

24 | 32 | 33 | 38 |

39 | 40 | 41 | 48 | 49 |

42 | 43 | 44 |

RIGHT

45 | 46 | 47 |

50 |

51 | 56 |

57 | 58 | 59 | 66 | 67 |

60 | 61 | 62 |

CENTER

63 | 64 | 65 |

68 |

69 | 74 |

75 | 94 | 95 | 96 | 97 | 104 | 105 |

98 | 99 | 100 |

LEFT

101 | 102 | 103 |

106 |

107 | 112 |

115 | 120 |

128 | 129 | 130 | -------------------------------------------------------------------------------- /Code Examples/Multiple-Columns-Hybrid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Multiple Columns Hybrid 5 | 6 | 7 | 8 | 62 | 63 | 64 | 65 | 66 | 69 | 70 | 73 | 74 |

75 | 76 | 77 | 78 | 79 |

80 | 81 | 82 | 83 |

Who loves HTML email?

84 | 85 | 86 | A cheerful looking mailbox in front of green plants and flowers.

87 | 88 | 89 |

90 | 91 | 92 | 93 |

94 | 99 | This is a button 100 | 104 |

105 | 106 | 107 | 108 | 109 | 110 | 162 | 163 | 164 |

111 | 116 | 117 | 118 | 154 | 155 |

119 | 124 |

125 | 126 | 127 | 131 | 132 |

128 |

Heading Time

129 |

130 |

133 |

134 | 138 |

139 | 140 | 141 | 145 | 146 |

142 |

Heading Time

143 |

144 |

147 |

148 | 153 |

156 | 161 |

165 | 166 | 167 |

168 |

You're receiving this email because you're trying to make email better for everyone. Good on you! Don't worry, you can unsubscribe here if you'd like.

169 |

Email Sender - 48372 Murphy St., Someplace, MI 93827

170 |

171 | 172 |

173 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /Code Examples/Hybrid Examples/4column.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 147 | 148 | 149 | 150 | 151 | 152 | 153 |

14 | 19 | 20 | 21 | 139 | 140 |

22 | 27 | 28 | 33 |

34 | 45 | 46 | 51 |

52 | 53 | 54 | 61 | 62 |

55 | 56 | 57 |

ONE

58 | 59 | 60 |

63 |

64 | 68 |

69 | 70 | 71 | 78 | 79 |

72 | 73 | 74 |

TWO

75 | 76 | 77 |

80 |

81 | 86 |

87 | 91 |

92 | 97 |

98 | 99 | 100 | 107 | 108 |

101 | 102 | 103 |

THREE

104 | 105 | 106 |

109 |

110 | 114 |

115 | 116 | 117 | 124 | 125 |

118 | 119 | 120 |

FOUR

121 | 122 | 123 |

126 |

127 | 132 |

133 | 138 |

141 | 146 |

154 | 155 | 156 | --------------------------------------------------------------------------------