jittarao/Gist Personal Email Template.html

## Gist Personal Email Template.html
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Gist</title>

    <style>
        .personal-email {
            background-color: #f9f9f9;
            border-collapse: collapse;
            line-height: 100% !important;
            margin: 0;
            padding: 0;
            width: 100% !important;
        }

        .main-container {
            border-collapse: collapse;
            margin: auto;
            max-width: 635px;
            width: 100%;
            padding: 0 20px;
            margin-top: 20px;
        }

        .email-text .table {
            border-collapse: collapse;
            width: 100%;
        }

        .email-text .table > tbody > tr > td, .email-text .table > tbody > tr > th, .email-text .table > tfoot > tr > td, .email-text .table > tfoot > tr > th {
            border: 1px solid #e8e8e8 !important;
        }

        .email-header-table {
            text-align: center;
            border-collapse: collapse;
            color: #c0c0c0;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            font-size: 13px;
            line-height: 26px;
            margin: 0 auto 26px;
            width: 100%
        }

        .email-header-table img {
            display: inline-block;
            max-width: 100px;
            max-height: 80px;
            margin: 0 auto;
        }

        .container-wrapper-table {
            background-clip: padding-box;
            border-collapse: collapse;
            border-radius: 3px;
            color: #545454;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            font-size: 15px;
            line-height: 20px;
            margin: 0 auto;
            width: 100%
        }

        .email-header {
            border: none;
            border-collapse: separate;
            font-size: 1px;
            height: 2px;
            line-height: 3px;
            width: 100%
        }

        .email-header-td {
            background-color: #298ee8;
            border: none;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            width: 100%
        }

        .email-body {
            background-clip: padding-box;
            border-collapse: collapse;
            border-color: #dddddd;
            border-radius: 0 0 3px 3px;
            border-style: solid;
            border-width: 0 1px 1px;
            width: 100%
        }

        .email-text {
            background-clip: padding-box;
            background-color: white;
            border-radius: 0 0 3px 3px;
            color: #282f33;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            font-size: 15px;
            line-height: 22px;
            overflow: hidden;
            padding: 40px 40px 30px
        }

        .email-text p {
            font-size: 15px;
            margin: 0 0 17px;
            line-height: 1.5;
            text-align: left;
        }

        .email-text a {
            font-size: 15px;
            color: #1251ba;
            text-decoration: underline;
            display: inline;
        }

        .email-text h1 {
            font-size: 26px;
            line-height: 33px;
            margin: 30px 0 7px;
            font-weight: normal;
        }

        .email-text h2 {
            font-size: 18px;
            font-weight: bold;
            margin: 30px 0 7px;
        }

        .email-text h3, .email-text h4 {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .email-text h5 {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .email-text h6 {
            font-size: 12px;
        }

        .email-text ol {
            list-style-type: decimal;
        }

        .email-text ul {
            list-style-type: disc;
        }

        .email-text ul, .email-text ol {
            margin: 0 0 20px 40px;
            padding: 0;
            font-size: 15px;
        }

        .email-text ul li, .email-text ol li {
            font-size: 15px;
            margin: 5px 0;
        }

        .email-text img {
            max-width: 512px;
        }

        .footer-table {
            border-collapse: collapse;
            color: #545454;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            font-size: 13px;
            line-height: 20px;
            margin: 0 auto;
            max-width: 100%;
            width: 100%
        }

        .footer-td-wrapper table {
            border-collapse: collapse;
            color: #545454;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            font-size: 13px;
            line-height: 20px;
            margin: 0 auto;
            max-width: 100%;
            width: 100%
        }

        .user-signature {
            color: #6f6f6f
        }

        .powered-by {
            color: #999999;
            font-size: 11px;
            text-align: right
        }

        .powered-by a {
            text-decoration: none;
            color: #6f6f6f
        }

        .unsubscribe-td {
            color: #999999;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            font-size: 11px;
        }

        .unsubscribe-td p {
            text-align: center
        }

        .unsubscribe-td p a {
            border: none;
            color: #999999;
            font-size: 11px;
            outline: none !important;
            text-decoration: underline
        }

        blockquote {
            padding: .5rem 1rem;
            margin: 0 0 1rem;
            font-size: 14px;
            border-left: .25rem solid #eceeef;
        }

        .profile-pic {
            border-radius: 50%;
            width: 30px;
            height: 30px;
        }

        .d-n {
            display: none;
        }

        .cf-profile-avatar {
            display: inline-block;
            line-height: 30px;
            text-align: center;
            background: #408bef;
            border-radius: 50%;
            text-transform: uppercase;
            color: white;
            font-weight: 400;
        }

        @media (max-width: 1025px) {
            .email-text {
                padding: 20px;
                font-size: 14px;
            }

            .email-text p, .email-text a, .email-text ul li, .email-text ol li {
                font-size: 14px;
            }

            .container-wrapper-table {
                font-size: 14px;
            }
        }
    </style>
</head>
<body style="background-color: #f9f9f9;">
<table align="center" bgcolor="#F9F9F9" border="0" cellpadding="0" cellspacing="0" class="personal-email">
    <tbody>
    <tr>
        <td>
            <table class="main-container">
                <tbody>
                <tr>
                    <td valign="top">
                        <table border="0" cellpadding="0" cellspacing="0" class="email-header-table">
                            <tr>
                                <td>
                                    <!--[if mso]>
                                    <img src="INSERT YOUR LOGO URL" width="100" height="80">
                                    <![endif]-->
                                    <!--[if !mso]> <!---->
                                    <img src="INSERT YOUR LOGO URL">
                                    <!-- <![endif]-->
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="main-wrapper" valign="top">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="container-wrapper-table">
                            <tbody>
                            <tr>
                                <td valign="top">
                                    <table border="0" cellpadding="0" cellspacing="0" class="email-header">
                                        <tbody>
                                        <tr>
                                            <td style="border: 1.25px solid <%= header_color %>" class="email-header-td" valign="top" bgcolor="#298ee8"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <table border="0" cellpadding="0" cellspacing="0" class="email-body">
                                        <tbody>
                                        <tr>
                                            <td bgcolor="white" class="preview-text-email email-text editable">
                                                {{ content }}
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="footer-table">
                            <tbody>
                            <tr>
                                <td height="20" valign="top"></td>
                            </tr>
                            <tr>
                                <td>
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tbody>
                                        <tr>
                                            <td width="70%" class="footer-td-wrapper">
                                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                    <tbody>
                                                    <tr>
                                                        <td width="40"> <img src="INSERT PROFILE PICTURE URL" class="profile-pic"> </td>
                                                        <td> <b class="user-signature"><span class="user-name">INSERT YOUR FIRST NAME</span> from <span class="from-details">INSERT YOUR COMPANY NAME</span></b> </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td height="20" valign="top"></td>
                </tr>
                <tr>
                    <td class="unsubscribe-td" align="left">
                        <p>Don't want to get emails like this?
                            <a href="{{unsubscribe_url}}" target="_blank">unsubscribe</a>
                        </p>
                        <p>
                            {{postal_address}}
                        </p>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="x-apple-disable-message-reformatting"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>Gist</title>

	<style>
	.personal-email {
	background-color: #f9f9f9;
	border-collapse: collapse;
	line-height: 100% !important;
	margin: 0;
	padding: 0;
	width: 100% !important;
	}

	.main-container {
	border-collapse: collapse;
	margin: auto;
	max-width: 635px;
	width: 100%;
	padding: 0 20px;
	margin-top: 20px;
	}

	.email-text .table {
	border-collapse: collapse;
	width: 100%;
	}

	.email-text .table > tbody > tr > td, .email-text .table > tbody > tr > th, .email-text .table > tfoot > tr > td, .email-text .table > tfoot > tr > th {
	border: 1px solid #e8e8e8 !important;
	}

	.email-header-table {
	text-align: center;
	border-collapse: collapse;
	color: #c0c0c0;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 13px;
	line-height: 26px;
	margin: 0 auto 26px;
	width: 100%
	}

	.email-header-table img {
	display: inline-block;
	max-width: 100px;
	max-height: 80px;
	margin: 0 auto;
	}

	.container-wrapper-table {
	background-clip: padding-box;
	border-collapse: collapse;
	border-radius: 3px;
	color: #545454;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
	line-height: 20px;
	margin: 0 auto;
	width: 100%
	}

	.email-header {
	border: none;
	border-collapse: separate;
	font-size: 1px;
	height: 2px;
	line-height: 3px;
	width: 100%
	}

	.email-header-td {
	background-color: #298ee8;
	border: none;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	width: 100%
	}

	.email-body {
	background-clip: padding-box;
	border-collapse: collapse;
	border-color: #dddddd;
	border-radius: 0 0 3px 3px;
	border-style: solid;
	border-width: 0 1px 1px;
	width: 100%
	}

	.email-text {
	background-clip: padding-box;
	background-color: white;
	border-radius: 0 0 3px 3px;
	color: #282f33;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
	line-height: 22px;
	overflow: hidden;
	padding: 40px 40px 30px
	}

	.email-text p {
	font-size: 15px;
	margin: 0 0 17px;
	line-height: 1.5;
	text-align: left;
	}

	.email-text a {
	font-size: 15px;
	color: #1251ba;
	text-decoration: underline;
	display: inline;
	}

	.email-text h1 {
	font-size: 26px;
	line-height: 33px;
	margin: 30px 0 7px;
	font-weight: normal;
	}

	.email-text h2 {
	font-size: 18px;
	font-weight: bold;
	margin: 30px 0 7px;
	}

	.email-text h3, .email-text h4 {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
	}

	.email-text h5 {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 5px;
	}

	.email-text h6 {
	font-size: 12px;
	}

	.email-text ol {
	list-style-type: decimal;
	}

	.email-text ul {
	list-style-type: disc;
	}

	.email-text ul, .email-text ol {
	margin: 0 0 20px 40px;
	padding: 0;
	font-size: 15px;
	}

	.email-text ul li, .email-text ol li {
	font-size: 15px;
	margin: 5px 0;
	}

	.email-text img {
	max-width: 512px;
	}

	.footer-table {
	border-collapse: collapse;
	color: #545454;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 13px;
	line-height: 20px;
	margin: 0 auto;
	max-width: 100%;
	width: 100%
	}

	.footer-td-wrapper table {
	border-collapse: collapse;
	color: #545454;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 13px;
	line-height: 20px;
	margin: 0 auto;
	max-width: 100%;
	width: 100%
	}

	.user-signature {
	color: #6f6f6f
	}

	.powered-by {
	color: #999999;
	font-size: 11px;
	text-align: right
	}

	.powered-by a {
	text-decoration: none;
	color: #6f6f6f
	}

	.unsubscribe-td {
	color: #999999;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 11px;
	}

	.unsubscribe-td p {
	text-align: center
	}

	.unsubscribe-td p a {
	border: none;
	color: #999999;
	font-size: 11px;
	outline: none !important;
	text-decoration: underline
	}

	blockquote {
	padding: .5rem 1rem;
	margin: 0 0 1rem;
	font-size: 14px;
	border-left: .25rem solid #eceeef;
	}

	.profile-pic {
	border-radius: 50%;
	width: 30px;
	height: 30px;
	}

	.d-n {
	display: none;
	}

	.cf-profile-avatar {
	display: inline-block;
	line-height: 30px;
	text-align: center;
	background: #408bef;
	border-radius: 50%;
	text-transform: uppercase;
	color: white;
	font-weight: 400;
	}

	@media (max-width: 1025px) {
	.email-text {
	padding: 20px;
	font-size: 14px;
	}

	.email-text p, .email-text a, .email-text ul li, .email-text ol li {
	font-size: 14px;
	}

	.container-wrapper-table {
	font-size: 14px;
	}
	}
	</style>
	</head>
	<body style="background-color: #f9f9f9;">
	<table align="center" bgcolor="#F9F9F9" border="0" cellpadding="0" cellspacing="0" class="personal-email">
	<tbody>
	<tr>
	<td>
	<table class="main-container">
	<tbody>
	<tr>
	<td valign="top">
	<table border="0" cellpadding="0" cellspacing="0" class="email-header-table">
	<tr>
	<td>
	<!--[if mso]>
	<img src="INSERT YOUR LOGO URL" width="100" height="80">
	<![endif]-->
	<!--[if !mso]> <!---->
	<img src="INSERT YOUR LOGO URL">
	<!-- <![endif]-->
	</td>
	</tr>
	</table>
	</td>
	</tr>
	<tr>
	<td class="main-wrapper" valign="top">
	<table align="center" border="0" cellpadding="0" cellspacing="0" class="container-wrapper-table">
	<tbody>
	<tr>
	<td valign="top">
	<table border="0" cellpadding="0" cellspacing="0" class="email-header">
	<tbody>
	<tr>
	<td style="border: 1.25px solid <%= header_color %>" class="email-header-td" valign="top" bgcolor="#298ee8"></td>
	</tr>
	</tbody>
	</table>
	<table border="0" cellpadding="0" cellspacing="0" class="email-body">
	<tbody>
	<tr>
	<td bgcolor="white" class="preview-text-email email-text editable">
	{{ content }}
	</td>
	</tr>
	</tbody>
	</table>
	</td>
	</tr>
	</tbody>
	</table>
	<table align="center" border="0" cellpadding="0" cellspacing="0" class="footer-table">
	<tbody>
	<tr>
	<td height="20" valign="top"></td>
	</tr>
	<tr>
	<td>
	<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tbody>
	<tr>
	<td width="70%" class="footer-td-wrapper">
	<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tbody>
	<tr>
	<td width="40"> <img src="INSERT PROFILE PICTURE URL" class="profile-pic"> </td>
	<td> <b class="user-signature"><span class="user-name">INSERT YOUR FIRST NAME</span> from <span class="from-details">INSERT YOUR COMPANY NAME</span></b> </td>
	</tr>
	</tbody>
	</table>
	</td>
	</tr>
	</tbody>
	</table>
	</td>
	</tr>
	</tbody>
	</table>
	</td>
	</tr>
	<tr>
	<td height="20" valign="top"></td>
	</tr>
	<tr>
	<td class="unsubscribe-td" align="left">
	<p>Don't want to get emails like this?
	<a href="{{unsubscribe_url}}" target="_blank">unsubscribe</a>
	</p>
	<p>
	{{postal_address}}
	</p>
	</td>
	</tr>
	</tbody>
	</table>
	</td>
	</tr>
	</tbody>
	</table>
	</body>
	</html>