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

Created a fluid AMP version of the template #283

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Created a fluid AMP version of the template #283

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
190 changes: 190 additions & 0 deletions fluid-amp
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
<!DOCTYPE html>
<html lang="en" ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<!-- CSS Reset : BEGIN -->
<style amp-custom>
@media screen and (max-width: 600px) {
/* What it does: Adjust typography on small screens to improve readability */
p {
font-size: 18px;
}
}

</style>

</head>
<body style="background: #222222;">
<div role="article" lang="en" style="width: 100%;">
<div style="display:none" aria-hidden="true">
(Optional) This text will appear in the inbox preview, but not the email body. It can be used to supplement the email subject line or even summarize the email's contents. Extended text preheaders (~490 characters) seems like a better UX for anyone using a screenreader or voice-command apps like Siri to dictate the contents of an email. If this text is not included, email clients will automatically populate it using the text (including image alt text) at the start of the email's body.
</div>
<!-- Visually Hidden Preheader Text : END -->

<!-- Create white space after the desired preview text so email clients don’t pull other distracting text into the inbox preview. Extend as necessary. -->
<!-- Preview Text Spacing Hack : BEGIN -->
<div style="display: none;">
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
</div>
<!-- Preview Text Spacing Hack : END -->

<div style="max-width: 600px; margin: 0 auto;">


<!-- Email Body : BEGIN -->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
<!-- Email Header : BEGIN -->
<tr>
<td style="padding: 20px 0; text-align: center">
<amp-img src="https://via.placeholder.com/200x50" width="200" height="50" alt="alt_text" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
</td>
</tr>
<!-- Email Header : END -->
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td style="background-color: #ffffff;">
<amp-img src="https://via.placeholder.com/1200x600" width="600" height="300" alt="alt_text" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; margin: auto; display: block;">
</td>
</tr>
<!-- Hero Image, Flush : END -->

<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td style="background-color: #ffffff;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 25px; line-height: 30px; color: #333333; font-weight: normal;">Praesent laoreet malesuada&nbsp;cursus.</h1>
<p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut&nbsp;erat.</p>
</td>
</tr>
<tr>
<td style="padding: 0 20px;">
<!-- Button : BEGIN -->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
<tr>
<td style="border-radius: 4px; background: #222222;">
<a href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Primary Button</a>
</td>
</tr>
</table>
<!-- Button : END -->
</td>
</tr>
<tr>
<td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 22px; color: #333333; font-weight: bold;">Praesent in felis ut velit pretium lobortis rhoncus ut&nbsp;erat.</h2>
<ul style="padding: 0; margin: 0 0 10px 0; list-style-type: disc;">
<li style="margin:0 0 10px 30px;">A list item.</li>
<li style="margin:0 0 10px 30px;">Another list item here.</li>
<li style="margin: 0 0 0 30px;">Everyone gets a list item, list items for everyone!</li>
</ul>
<p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut&nbsp;erat.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->

<!-- 2 Even Columns : BEGIN -->
<tr>
<td style="padding: 0 10px 40px 10px; background-color: #ffffff;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align: center; padding: 0 10px;">
<amp-img src="https://via.placeholder.com/200" width="200" height="200" alt="alt_text" style="width: 100%; max-width: 200px; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
</td>
</tr>
<tr>
<td style="text-align: left; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 10px 0;">
<p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor.</p>
</td>
</tr>
</table>
</td>
<td valign="top" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align: center; padding: 0 10px;">
<amp-img src="https://via.placeholder.com/200" width="200" height="200" alt="alt_text" style="width: 100%; max-width: 200px; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
</td>
</tr>
<tr>
<td style="text-align: left; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 10px 0;">
<p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- 2 Even Columns : END -->

<!-- Clear Spacer : BEGIN -->
<tr>
<td aria-hidden="true" height="40" style="font-size: 0px; line-height: 0px;">
&nbsp;
</td>
</tr>
<!-- Clear Spacer : END -->

<!-- 1 Column Text : BEGIN -->
<tr>
<td style="background-color: #ffffff;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut&nbsp;erat.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text : END -->

</table>
<!-- Email Body : END -->

<!-- Email Footer : BEGIN -->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
<tr>
<td style="padding: 20px; font-family: sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #ffffff;">
<a href="https://example-view-online-link.com" style="color: #ffffff; text-decoration: underline; font-weight: bold;">View as a Web Page</a>
<br><br>
Company Name<br><span>123 Fake Street, SpringField, OR, 97477 US<br>(123) 456-7890</span>
<br><br>
<a href="https://example-unsubscribe.com" style="color: #ffffff; text-decoration: underline;">unsubscribe</a>
</td>
</tr>
</table>
<!-- Email Footer : END -->
</div>

<!-- Full Bleed Background Section : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: #709f2b;">
<tr>
<td>
<div align="center" style="max-width: 600px; margin: auto;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; text-align: left; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
<p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut&nbsp;erat.</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<!-- Full Bleed Background Section : END -->
</div>
</body>
</html>