Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Build-an-html-email-template-from-scratch #3

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Build-an-html-email-template-from-scratch #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8f933e0
Justify the text, Add background image and color
kesha99 Oct 15, 2019
ef729fe
update readme
kesha99 Oct 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Tuts+ Tutorial: [Build an HTML Email Template From Scratch](https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770)
**Instructor: Nicole Merlin**

The best way to understand any process is to carry it out yourself, from the ground up. In this tutorial, we’re going to do just that with email design, by building an HTML email template from scratch.
The best way to understand any process is to carry it out yourself, from the ground up. In this tutorial, we’re going to do just that with the email design, by building an HTML email template from scratch.

**Editor’s note:** this tutorial was originally written by Nicole in June 2013. Since then it’s become the go-to reference for industry leaders all over the world, and has been used by millions of beginners as a starting point for their adventures in email. It’s as relevant today as it was when it was first published.

Expand Down
17 changes: 9 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
<title>Demystifying Email Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<body style="margin: 0; padding: 0;" background="https://www.siarza.com/wp-content/uploads/2017/12/webplunder-background-image-technology-online-website-solutions.jpg">

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 10px 0 30px 0;">
Expand All @@ -24,7 +25,7 @@
</td>
</tr>
<tr>
<td style="padding: 20px 0 30px 0; color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;">
<td style="padding: 20px 0 30px 0; color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
Expand All @@ -40,7 +41,7 @@
</td>
</tr>
<tr>
<td style="padding: 25px 0 0 0; color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;">
<td style="padding: 25px 0 0 0; color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
Expand All @@ -57,7 +58,7 @@
</td>
</tr>
<tr>
<td style="padding: 25px 0 0 0; color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;">
<td style="padding: 25px 0 0 0; color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
Expand All @@ -71,12 +72,12 @@
</td>
</tr>
<tr>
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;">
<td bgcolor="#3792cb" style="padding: 30px 30px 30px 30px; color: #153643;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;" width="75%">
<td style="color: #000000; font-family: Arial, sans-serif; font-size: 14px;" width="75%">
&reg; Someone, somewhere 2013<br/>
<a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly
<a href="#" style="color: #ffffff;"><font color="#000000">Unsubscribe</font></a> to this newsletter instantly
</td>
<td align="right" width="25%">
<table border="0" cellpadding="0" cellspacing="0">
Expand Down Expand Up @@ -104,4 +105,4 @@
</tr>
</table>
</body>
</html>
</html>