Here you'll find a collection of HTML Email Templates!
Everything was built using
HTLM ,
CSS and Bootstrap 5.
Like what you see? Let's chat!
Email
Below you'll find a couple of examples of html emails I created. I designed it using basic html construction combined with some pictures to add a pro look to it. Pictures, text, colors and format are all customizable. At the end of this page you'll find a basic HTML Email template along with its code.
HTML Email - Spring Menu!
|
HTML Email - New Bike Launch
|
Below you'll find a basic html email template I created. I intentionally chose the pictures to be centralized to avoid resizing issues. The abundance of device screen sizes available can pose a big challenge when trying to customize breakpoints so a given html email displays properly across devices.
HTML Email Template
|
HTML & CSS code
<center class="wrapper">
<!--Title-->
<table class="main" role="presentation"
style="width:100%; border-collapse:collapse; border:0; border-spacing:0; background:#ffffff;">
<tr>
<td align="center" style="padding:0;">
<table width="100%">
<tr>
<td
style="background-color:rgb(56, 114, 222); padding: 8px 0 5px; text-align: center; color: #ffffff;">
<h2 width="100px"> Add title + Logo + Social icons </h2>
</td>
</tr>
<!--Banner-->
<tr>
<td align="center" style="padding:0;">
<a href="#"><img src="../images/bannerhtmlemail.jpg" alt="description" width="600px"
style="max-width:100%;">
</a>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td style="text-align:center; padding:15px">
<p style="font-size:large; color:#121D2F; text-align:left">Hello ..., </p>
<p
style="color:#121D2F; text-align:center; padding: 5px 0 15px; line-height: 22px;">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem adipisci
praesentium
qui officiis consequatur nostrum voluptatem. Quae, natus rerum laudantium
aut quia eaque
accusamus, nesciunt obcaecati cum alias repellat atque, non amet dicta vitae
itaque! Velit atque
laudantium itaque sequi facere aliquam, fugit aperiam sunt.
</p>
</td>
</tr>
</table>
</td>
</tr>
<!--Border 1-->
<tr>
<td height="4" style="background-color:rgb(56, 114, 222)"></td>
</tr>
<!--First picture section-->
<tr>
<td align="center" style="color:black">
<br>
<h2> Add Title </h2>
<br>
<a href="#"><img src="../images/example1.jpg" alt="description" width="260px"
style="max-width:100%;">
</a>
<br>
<br>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, mollitia alias.
Vero consequuntur totam in fuga est natus consectetur quibusdam. </p>
</td>
<</tr>
<!--Border 2-->
<tr>
<td align="center" height="50" style="background-color:rgb(56, 114, 222)"> Add call to action
</td>
</tr>
<!--Second picture section-->
<tr>
<td align="center" style="color:black">
<br>
<h2>Add Title</h2>
<br>
<a href="#"><img src="../images/example2.jpg" alt="description" width="260px"
style="max-width:100%;">
</a>
<br>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, mollitia alias.
Vero consequuntur totam in fuga est natus consectetur quibusdam. </p>
</td>
</tr>
<!--Border 3-->
<tr>
<td align="center" height="50" style="background-color:rgb(56, 114, 222)">Add call to action
</td>
</tr>
<!--Last section-->
<tr>
<td>
<table width="100%" style="padding-bottom:15px">
<tr>
<td style="text-align:center; padding:15px;">
<p
style="color:#121D2F; text-align:center; padding: 5px 0 15px; line-height: 22px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, mollitia
alias.
Vero consequuntur totam in fuga est natus consectetur quibusdam.
</p>
<a href="#" class="button-email"
style="background-color:rgb(56, 114, 222)">Button name</a>
</td>
</tr>
</table>
</td>
</tr>
<!--Footer-->
<tr>
<td>
<table width="100%">
<tr>
<td
style="padding: 30px 10px; text-align:center; background-color: rgb(56, 114, 222); color:#ffffff">
<p>Footer - Add your text here -</p>
<p><a href="#">Your email</a></p>
<p><a href="#">Phone number</a></p>
<p>© copyright.</p>
<br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
