-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
146 lines (135 loc) · 7.74 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
---
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="py-lg-5">
<div class="py-lg-5">
<div class="container py-5">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="display-5 text-center-block mt-3 mb-3" style="font-weight: 700">Build HTML emails faster than you can say "Outlook"</h1>
<p class="text-muted" style="font-size: 22px;">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. Inspired by syntax you know and love you can write simpler code and compile it so it works in every email client.</p>
<p class="text-muted">Currently <strong class="me-3">v1.5.1</strong><iframe src="https://ghbtns.com/github-btn.html?user=bootstrap-email&repo=bootstrap-email&type=star&count=true" frameborder="0" scrolling="0" width="150" height="20" title="GitHub" style="margin-bottom: -3px;"></iframe></p>
</div>
<div class="col-lg-6">
<!-- http://cssdevices.com -->
<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 text-muted 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-muted mt-1" style="opacity: .75;">Actual renderings of Bootstrap Email in email clients. Scrollable content.</div>
</div>
</div>
</div>
<!-- <div class="row" style="font-size: 14px;">
<div class="col-sm-3 mb-1 px-4">
<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">
<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 class="display-5 fw-bold mt-4">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="display-5 fw-bold mb-3">Features</h3>
<div class="row align-items-stretch g-5">
<div class="col-md-6 d-flex align-items-stretch">
<div class="bg-primary-docs text-white rounded-lg p-5">
<h3 class="fw-bold">All Clients</h3>
<p style="font-size: 20px;">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-md-6 d-flex align-items-stretch">
<div class="bg-primary-docs text-white rounded-lg p-5">
<h3 class="fw-bold">Custom CSS</h3>
<p style="font-size: 20px;">CSS built from the ground up to work with email "technology" like using tables for layout and structure.</p>
</div>
</div>
<div class="col-md-6 d-flex align-items-stretch">
<div class="bg-primary-docs text-white rounded-lg p-5">
<h3 class="fw-bold">Simple Syntax</h3>
<p style="font-size: 20px;">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-md-6 d-flex align-items-stretch">
<div class="bg-primary-docs text-white rounded-lg p-5">
<h3 class="fw-bold">Tested</h3>
<p style="font-size: 20px;">You should feel comfortable knowing if an email looks right in the browser, it will in your emails too.</p>
</div>
</div>
</div>
</div>