-
Notifications
You must be signed in to change notification settings - Fork 105
/
Interactivity.html
170 lines (139 loc) · 6.57 KB
/
Interactivity.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<title>Interactivity</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
html { box-sizing: border-box; height: 100%; width: 100%; }
*, *:before, *:after { box-sizing: inherit; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* GMAIL BLUE LINKS */
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* SAMSUNG MAIL BLUE LINKS */
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* Universal styles for links and stuff */
a { color: #229efd; font-weight: bold; }
a:hover { color: #fd6350; text-decoration: none; }
a.button:hover { background-color: #fd6350 !important; }
/* Responsive styles */
@media screen and (max-width: 600px) {
h1 { font-size: 24px !important; }
/* Hide labels and display content by default on mobile */
label { display: none !important; }
.slide { display: block !important; max-width: 600px !important; width: 100% !important; }
}
/* Interactivity */
/* Hide inputs */
input { display: none; }
/* Make labels look clickable */
label { cursor: pointer; }
/* Hide slides */
.slide { display: none; }
/* Show checked slide */
#slide1:checked ~ .slide1,
#slide2:checked ~ .slide2,
#slide3:checked ~ .slide3 {
display: block;
}
/* Make the label look active */
#slide1:checked ~ .slide-label1 {
border: 2px solid red !important;
}
</style>
</head>
<body id="body" style="margin: 0 !important; padding: 0 !important;">
<!-- Preview text for the inbox -->
<div style="display: none; max-height: 0; overflow: hidden;">
This will be displayed underneath the subject line. Use it wisely.
</div>
<!--[if (gte mso 9)|(IE)]>
<table cellspacing="0" cellpadding="0" border="0" width="600" align="center" role="presentation"><tr><td>
<![endif]-->
<div style="background-color: white; color: #000000; font-family: sans-serif; font-size: 18px; line-height: 36px; margin: 0 auto; max-width: 600px; padding: 40px 20px 40px 20px;">
<!-- Logo image -->
<center>
<img src="images/logo.jpg" alt="" width="40" border="0" style="border-radius: 40px; display: block; margin: 20px auto 20px auto;">
</center>
<!-- Headline -->
<h1 style="margin: 60px auto 60px auto; text-align: center;">Who loves HTML email?</h1>
<!-- Triggers for switching content -->
<input type="radio" name="slides" id="slide1" checked>
<input type="radio" name="slides" id="slide2">
<input type="radio" name="slides" id="slide3">
<div style="margin-bottom: 20px; text-align: center;">
<label class="slide-label1" for="slide1" style="border: 2px solid #000000; display: inline-block; margin: 10px; padding: 4px 20px;">Slide 1</label>
<label class="slide-label" for="slide2" style="border: 2px solid #000000; display: inline-block; margin: 10px; padding: 4px 20px;">Slide 2</label>
<label class="slide-label" for="slide3" style="border: 2px solid #000000; display: inline-block; margin: 10px; padding: 4px 20px;">Slide 3</label>
</div>
<!-- Content to be switched -->
<div class="slide slide1" style="background-color: #eaeaea; padding: 20px;">
<h2 style="margin: 0 0 20px 0;">This is slide 1</h2>
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="slide slide2" style="background-color: #cdcdcd; padding: 20px;">
<h2 style="margin: 0 0 20px 0;">This is slide 2</h2>
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="slide slide3" style="background-color: #aeaeae; padding: 20px;">
<h2 style="margin: 0 0 20px 0;">This is slide 3</h2>
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<!-- Body copy -->
<p style="margin: 60px 0 20px 0;">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.</p>
<!-- Button -->
<!-- CTA generated by buttons.com -->
<div style="margin: 60px 0 60px 0; text-align: center;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://thebetter.email" style="height:60px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fillcolor="#229efd">
<w:anchorlock/>
<center>
<![endif]-->
<a class="button" href="http://thebetter.email" style="background-color:#229efd;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:18px;font-weight:bold;line-height:60px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">This is a button</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
<!-- Footer information. Always include an unsubscribe link! -->
<div style="color: #888888; font-size: 16px; margin: 2em 0 0 0;">
<p style="margin: 0 0 20px 0;">You're receiving this email because you're trying to make email better for everyone. Good on you! Don't worry, <a href="#">you can unsubscribe here</a> if you'd like.</p>
<p style="margin: 0 0 20px 0;">Email Sender - 48372 Murphy St., Someplace, MI 93827</p>
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</body>
</html>