Update demo
This commit is contained in:
Dan Mindru
parent
59804bd735
commit
03ab7366de
223
demo/index.html
223
demo/index.html
|
|
@ -0,0 +1,223 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Responsive HTML emails & emails signature</title>
|
||||||
|
<meta name="description" content="Automate the creation of HTML emails and email signatures. Generate multiple emails for your colleagues, friends or enemies too!">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 12px;
|
||||||
|
background-color: rgb(21, 21, 21);
|
||||||
|
}
|
||||||
|
|
||||||
|
body, h1, h2, h3, h4, h5, h6, p {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
color: white;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { font-size: 3em; }
|
||||||
|
h2 { font-size: 2.2em; }
|
||||||
|
h3 { font-size: 1.8em; margin-bottom: 0.3em; }
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark { min-height: 430px; }
|
||||||
|
.light { min-height: 350px; }
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 5em;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a {
|
||||||
|
opacity: 0.7;
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 300;
|
||||||
|
border: 1px solid white;
|
||||||
|
border-radius: 4px;
|
||||||
|
max-width: 280px;
|
||||||
|
margin-top: 2em;
|
||||||
|
padding: 1em 2em;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1.2em;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a:hover,
|
||||||
|
header a:focus {
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin-top: -60px;
|
||||||
|
display: flex;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
figure svg { height: 60px; width: 40px; }
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
opacity: 0.7;
|
||||||
|
font-size: 1em;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 300;
|
||||||
|
border: 1px solid white;
|
||||||
|
border-radius: 4px;
|
||||||
|
max-width: 280px;
|
||||||
|
margin-top: 2em;
|
||||||
|
padding: 0.6em 1em;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1.2em;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:hover,
|
||||||
|
footer a:focus {
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 767px) {
|
||||||
|
header {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>HTML emails & email signatures should be easier than this.</h1>
|
||||||
|
<a href="https://github.com/fadeit/responsive-html-email-signature">Get started on Github</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<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">
|
||||||
|
<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
|
||||||
|
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
|
||||||
|
c1.5-1.5,2.3-3.6,2.3-5.7C352,325.8,351.2,323.8,349.7,322.2z"/>
|
||||||
|
</svg>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<img src="https://cloud.githubusercontent.com/assets/1515742/10591901/139c4954-76b9-11e5-80f7-5b0ccaf5af81.png" alt="Email / email signature HTML template dark">
|
||||||
|
<img src="https://cloud.githubusercontent.com/assets/1515742/10591900/13889d32-76b9-11e5-8dc0-b89d80189e93.png" alt="Email / email signature HTML template white">
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<h3>HTML emails, please.</h3>
|
||||||
|
<p>
|
||||||
|
Grab the code on Github to simplify how HTML emails are built.
|
||||||
|
</p>
|
||||||
|
<a href="https://github.com/fadeit/responsive-html-email-signature">Get started on Github</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- can do demos later! -->
|
||||||
|
<!-- <iframe class="dark" src="./dist/dark/signature-dark.html"></iframe>
|
||||||
|
<iframe class="light" src="./dist/light/signature-light.html"></iframe> -->
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.27/webfontloader.js"></script>
|
||||||
|
<script>
|
||||||
|
WebFontLoader.load({
|
||||||
|
active () {
|
||||||
|
const body = document.querySelector('body')
|
||||||
|
if (body) body.style.fontFamily = 'Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif'
|
||||||
|
}
|
||||||
|
google: {
|
||||||
|
families: ['Roboto:300,400']
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue