Skip to content

Commit 03ab736

Browse files
danmindrudanmindru
committed
Update demo
1 parent 59804bd commit 03ab736

File tree

1 file changed

+223
-0
lines changed

1 file changed

+223
-0
lines changed

‎demo/index.html‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Responsive HTML emails & emails signature</title>
6+
<meta name="description" content="Automate the creation of HTML emails and email signatures. Generate multiple emails for your colleagues, friends or enemies too!">
7+
8+
<style>
9+
html, body, div, span, applet, object, iframe,
10+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
11+
a, abbr, acronym, address, big, cite, code,
12+
del, dfn, em, img, ins, kbd, q, s, samp,
13+
small, strike, strong, sub, sup, tt, var,
14+
b, u, i, center,
15+
dl, dt, dd, ol, ul, li,
16+
fieldset, form, label, legend,
17+
table, caption, tbody, tfoot, thead, tr, th, td,
18+
article, aside, canvas, details, embed,
19+
figure, figcaption, footer, header, hgroup,
20+
menu, nav, output, ruby, section, summary,
21+
time, mark, audio, video {
22+
margin: 0;
23+
padding: 0;
24+
border: 0;
25+
font-size: 100%;
26+
font: inherit;
27+
vertical-align: baseline;
28+
box-sizing: border-box;
29+
}
30+
/* HTML5 display-role reset for older browsers */
31+
article, aside, details, figcaption, figure,
32+
footer, header, hgroup, menu, nav, section {
33+
display: block;
34+
}
35+
body {
36+
line-height: 1;
37+
}
38+
ol, ul {
39+
list-style: none;
40+
}
41+
blockquote, q {
42+
quotes: none;
43+
}
44+
blockquote:before, blockquote:after,
45+
q:before, q:after {
46+
content: '';
47+
content: none;
48+
}
49+
table {
50+
border-collapse: collapse;
51+
border-spacing: 0;
52+
}
53+
54+
body {
55+
font-size: 12px;
56+
background-color: rgb(21, 21, 21);
57+
}
58+
59+
body, h1, h2, h3, h4, h5, h6, p {
60+
font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
61+
font-weight: 300;
62+
color: white;
63+
margin: 0;
64+
}
65+
66+
p {
67+
line-height: 1.3em;
68+
}
69+
70+
h1 { font-size: 3em; }
71+
h2 { font-size: 2.2em; }
72+
h3 { font-size: 1.8em; margin-bottom: 0.3em; }
73+
74+
img {
75+
max-width: 100%;
76+
}
77+
78+
.dark { min-height: 430px; }
79+
.light { min-height: 350px; }
80+
81+
iframe {
82+
border: 0;
83+
}
84+
85+
header {
86+
min-height: 100vh;
87+
padding: 5em;
88+
display: -webkit-box;
89+
display: -ms-flexbox;
90+
display: flex;
91+
-webkit-box-pack: center;
92+
-ms-flex-pack: center;
93+
justify-content: center;
94+
-webkit-box-orient: vertical;
95+
-webkit-box-direction: normal;
96+
-ms-flex-direction: column;
97+
flex-direction: column;
98+
-ms-flex-wrap: wrap;
99+
flex-wrap: wrap;
100+
}
101+
102+
header h1 {
103+
max-width: 600px;
104+
}
105+
106+
header a {
107+
opacity: 0.7;
108+
font-size: 1.2em;
109+
color: white;
110+
text-decoration: none;
111+
font-weight: 300;
112+
border: 1px solid white;
113+
border-radius: 4px;
114+
max-width: 280px;
115+
margin-top: 2em;
116+
padding: 1em 2em;
117+
text-align: center;
118+
display: inline-block;
119+
line-height: 1.2em;
120+
transition: opacity 0.3s;
121+
}
122+
123+
header a:hover,
124+
header a:focus {
125+
opacity: 1;
126+
transition: opacity 0.3s;
127+
}
128+
129+
figure {
130+
margin-top: -60px;
131+
display: flex;
132+
display: -webkit-box;
133+
display: -ms-flexbox;
134+
display: flex;
135+
-webkit-box-align: center;
136+
-ms-flex-align: center;
137+
align-items: center;
138+
-webkit-box-orient: vertical;
139+
-webkit-box-direction: normal;
140+
-ms-flex-direction: column;
141+
flex-direction: column;
142+
}
143+
figure svg { height: 60px; width: 40px; }
144+
145+
footer {
146+
padding: 5em;
147+
}
148+
149+
footer a {
150+
opacity: 0.7;
151+
font-size: 1em;
152+
color: white;
153+
text-decoration: none;
154+
font-weight: 300;
155+
border: 1px solid white;
156+
border-radius: 4px;
157+
max-width: 280px;
158+
margin-top: 2em;
159+
padding: 0.6em 1em;
160+
text-align: center;
161+
display: inline-block;
162+
line-height: 1.2em;
163+
transition: opacity 0.3s;
164+
}
165+
166+
footer a:hover,
167+
footer a:focus {
168+
opacity: 1;
169+
transition: opacity 0.3s;
170+
}
171+
172+
@media only screen and (min-width: 767px) {
173+
header {
174+
font-size: 16px;
175+
}
176+
}
177+
</style>
178+
</head>
179+
<body>
180+
<header>
181+
<h1>HTML emails & email signatures should be easier than this.</h1>
182+
<a href="https://github.com/fadeit/responsive-html-email-signature">Get started on Github</a>
183+
</header>
184+
185+
<figure>
186+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
187+
<path fill="white" d="M349.7,322.2c-3.1-3.1-8-3-11.3,0L264,388.6V104c0-4.4-3.6-8-8-8c-4.4,0-8,3.6-8,8v284.6l-74.4-66.3
188+
c-3.4-2.9-8.1-3.2-11.2-0.1c-3.1,3.1-3.3,8.5-0.1,11.4c0,0,87,79.2,88,80s2.8,2.4,5.7,2.4s4.9-1.6,5.7-2.4s88-80,88-80
189+
c1.5-1.5,2.3-3.6,2.3-5.7C352,325.8,351.2,323.8,349.7,322.2z"/>
190+
</svg>
191+
</figure>
192+
193+
<main>
194+
<img src="https://cloud.githubusercontent.com/assets/1515742/10591901/139c4954-76b9-11e5-80f7-5b0ccaf5af81.png" alt="Email / email signature HTML template dark">
195+
<img src="https://cloud.githubusercontent.com/assets/1515742/10591900/13889d32-76b9-11e5-8dc0-b89d80189e93.png" alt="Email / email signature HTML template white">
196+
</main>
197+
198+
<footer>
199+
<h3>HTML emails, please.</h3>
200+
<p>
201+
Grab the code on Github to simplify how HTML emails are built.
202+
</p>
203+
<a href="https://github.com/fadeit/responsive-html-email-signature">Get started on Github</a>
204+
</footer>
205+
206+
<!-- can do demos later! -->
207+
<!-- <iframe class="dark" src="./dist/dark/signature-dark.html"></iframe>
208+
<iframe class="light" src="./dist/light/signature-light.html"></iframe> -->
209+
210+
<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.27/webfontloader.js"></script>
211+
<script>
212+
WebFontLoader.load({
213+
active () {
214+
const body = document.querySelector('body')
215+
if (body) body.style.fontFamily = 'Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif'
216+
}
217+
google: {
218+
families: ['Roboto:300,400']
219+
}
220+
})
221+
</script>
222+
</body>
223+
</html>

0 commit comments

Comments
 (0)