-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (120 loc) · 6.02 KB
/
index.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
---
layout: main
active: index
---
<script type="text/javascript">
$(function(){
$('.email-click-preview span[data-show]').click(function(){
$('.email-click-preview span[data-show]').removeClass('active');
$(this).addClass('active');
$('#desktop-email-img').attr('src', 'img/emails/product-hunt/' + $(this).data('show') + '.png');
});
$('.mobile-email-click-preview span[data-show]').click(function(){
$('.mobile-email-click-preview span[data-show]').removeClass('active');
$(this).addClass('active');
$('#mobile-email-img').attr('src', 'img/emails/product-hunt/' + $(this).data('show') + '.png');
});
});
</script>
<header class="bg-primary-docs">
<div class="container">
<h1 class="mighty-4 text-center-block font-weight-bold mt-4">Bootstrap Email</h1>
<p class="text-fluid text-indent mb-5">If you know Bootstrap, you know Bootstrap Email. Ever wish you could just write HTML emails with Bootstrap and have it actually work? Well now you can. With syntax you know and love you can write simpler code and compile it so it works in every email client.</p>
<div class="row" style="font-size: 14px;">
<div class="col-sm-3 mb-1 px-4">
<!-- http://cssdevices.io -->
<div class="cd-iphone-6 cd-fill-parent">
<div class="cd-body">
<div class="cd-sound"></div>
<div class="cd-sleep"></div>
<div class="cd-camera"></div>
<div class="cd-ear"></div>
<div class="cd-home"></div>
<div class="cd-screen cd-screen-scrolling">
<img id="mobile-email-img" src="img/emails/product-hunt/ios.png">
</div>
</div>
</div>
<div class="mobile-email-click-preview text-center mt-2 mb-3 mb-md-0"><span>Click to show on:</span> <span class="active" data-show="ios">iOS Mail</span><span> - </span><span data-show="android">Android Mail</span><span> - </span><span data-show="gmail-android">Gmail Android</span></div>
</div>
<div class="col-sm-9">
<!-- http://cssdevices.io -->
<div class="cd-mac cd-pro cd-fill-parent">
<div class="cd-top"></div>
<div class="cd-bottom"></div>
<div class="cd-camera"></div>
<div class="cd-notch"></div>
<div class="cd-screen cd-screen-scrolling cd-no-slideshow">
<img id="desktop-email-img" src="img/emails/product-hunt/apple-mail.png">
</div>
</div>
<div class="email-click-preview text-center mt-2"><span>Click to show in:</span> <span class="active" data-show="apple-mail">Apple Mail</span><span> - </span><span data-show="outlook-2000">Outlook 2000</span><span> - </span><span data-show="outlook-2007">Outlook 2007</span><span> - </span><span data-show="yahoo">Yahoo!</span><span> - </span><span data-show="gmail">Gmail</span><span> - </span><span data-show="aol">AOL</span> </div>
<div class="text-center text-white mt-1" style="opacity: 0.5;">Actual renderings of Bootstrap Email in email clients. Scrollable content.</div>
</div>
</div>
</div>
</header>
<div class="bg-dark text-white p-4">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Supported Email Clients</h3>
<ul class="supported-client-list">
<li><img src="/img/icons/check-green.svg" />Apple Mail macOS</li>
<li><img src="/img/icons/check-green.svg" />Apple Mail iOS</li>
<li><img src="/img/icons/check-green.svg" />Outlook 2000 - 2003 (IE Render)</li>
<li><img src="/img/icons/check-green.svg" />Outlook 2007 - 2013 (MS Word Render)</li>
<li><img src="/img/icons/check-green.svg" />Outlook 2016</li>
<li><img src="/img/icons/check-green.svg" />Outlook.com (the new Hotmail)</li>
<li><img src="/img/icons/check-green.svg" />Windows 10 Mail</li>
<li><img src="/img/icons/check-green.svg" />Yahoo!</li>
<li><img src="/img/icons/check-green.svg" />AOL Mail</li>
<li><img src="/img/icons/check-green.svg" />Android Mail</li>
<li><img src="/img/icons/check-green.svg" />Gmail</li>
<li><img src="/img/icons/check-green.svg" />Gmail App</li>
<li><img src="/img/icons/check-green.svg" />Inbox by Gmail</li>
<li><img src="/img/icons/check-green.svg" />Modern Email Clients</li>
<li><img src="/img/icons/check-green.svg" />Any many more...</li>
</ul>
</div>
<div class="col-md-6 d-flex justify-content-center align-items-center">
<!-- <i class="fa fa-envelope-o" style="color: #51d88a;font-size: 20rem;"></i> -->
<img class="w-100" src="img/icons/bootstrap-email-support.png" />
</div>
</div>
</div>
</div>
<div class="container p-4">
<a name="features"></a>
<h3 class="mb-3">Features</h3>
<div class="row">
<div class="col-sm-6">
<div class="why-pressure-item">
<img src="img/icons/lisa.svg">
<h3>All Clients</h3>
<p class="text-left">Different email clients implement HTML differently from one another. Bootstrap Email takes care of the hard part and compiles for all clients.</p>
</div>
</div>
<div class="col-sm-6">
<div class="why-pressure-item">
<img src="img/icons/school-material.svg">
<h3>Custom CSS</h3>
<p class="text-left">CSS built from the ground up to work with email "technology" like using tables for layout and structure.</p>
</div>
</div>
<div class="col-sm-6">
<div class="why-pressure-item">
<img src="img/icons/layers.svg">
<h3>Simple Syntax</h3>
<p class="text-left">Use syntax just like regular Bootstrap classes and the compiler will process that into something the emails can render consistently.</p>
</div>
</div>
<div class="col-sm-6">
<div class="why-pressure-item">
<img src="img/icons/flask.svg">
<h3>Tested</h3>
<p class="text-left">You should feel comfortable knowing if an email looks right in the browser, it will in your emails too.</p>
</div>
</div>
</div>
</div>