Last active
October 21, 2024 11:12
-
-
Save atomjoy/480c924abfe2643c719cbf878d132b92 to your computer and use it in GitHub Desktop.
RWD html e-mail example.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>RWD Html Email</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| .email-body { | |
| margin: 0px; | |
| padding: 0px; | |
| font-family: 'Baloo 2' | |
| } | |
| .deviceWidth { | |
| width: 90%; | |
| max-width: 660px; | |
| background: #f2f3f4; | |
| padding: 30px; | |
| } | |
| .email-small { | |
| font-size: 12px | |
| } | |
| .email-logo { | |
| width: 150px; | |
| padding: 10px 0px; | |
| } | |
| .social-logo { | |
| width: 40px; | |
| border-radius: 50px; | |
| margin: 40px 5px 20px 0px; | |
| } | |
| .email-image-small { | |
| float: left; | |
| width: 90%; | |
| border-radius: 10px; | |
| } | |
| a.email-promo-button { | |
| color: #fff; | |
| background: #2244ff; | |
| padding: 10px 30px; | |
| border-radius: 10px; | |
| text-decoration: none; | |
| margin: 5px 0px; | |
| display: inline-block; | |
| } | |
| a.email-promo-button:hover { | |
| background: #2244ffee; | |
| } | |
| @media (prefers-color-scheme: dark ) { | |
| } | |
| @media screen and (orientation: landscape) { | |
| } | |
| @media only screen and (max-width: 660px) { | |
| .deviceWidth2 { | |
| width: 100%; | |
| padding: 10px 0px; | |
| } | |
| .deviceWidth3 { | |
| width: 100%; | |
| padding: 10px 0px; | |
| } | |
| .email-image-small { | |
| width: 100%; | |
| } | |
| } | |
| @media only screen and (min-width: 660px) { | |
| .deviceWidth2 { | |
| width: 50%; | |
| padding: 10px 0px; | |
| } | |
| .deviceWidth3 { | |
| width: 33.333%; | |
| padding: 10px 0px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="email-body"> | |
| <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth"> | |
| <tr> | |
| <td> | |
| <img class="email-logo" src="https://github.githubassets.com/assets/GitHub-Logo-ee398b662d42.png" alt="Logo"> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <h2>RWD Html Email</h2> | |
| <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum alias earum eius unde cum, sunt inventore magnam fuga! Quos, nulla alias. Aperiam, tenetur aliquid numquam veritatis pariatur voluptas porro architecto.</p> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td style="padding:10px 0"> | |
| <table align="left" width="50%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth2"> | |
| <tr> | |
| <td align="left"> | |
| <img class="email-image-small" src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" alt="Logo"> | |
| </td> | |
| </tr> | |
| </table> | |
| <table align="left" width="50%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth2"> | |
| <tr> | |
| <td align="left"> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus cupiditate magnam enim natus ex, reprehenderit nisi asperiores facilis necessitatibus vel dolores repellendus perspiciatis et non, doloremque placeat quis, culpa voluptate. | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td style="padding:10px 0"> | |
| <table align="left" width="33.333%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth3"> | |
| <tr> | |
| <td align="center"> | |
| <a class="email-promo-button" href="http://example.org">Get Promo</a> | |
| </td> | |
| </tr> | |
| </table> | |
| <table align="left" width="33.333%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth3"> | |
| <tr> | |
| <td align="center"> | |
| <a class="email-promo-button" href="http://example.org">Get Promo</a> | |
| </td> | |
| </tr> | |
| </table> | |
| <table align="left" width="33.333%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth3"> | |
| <tr> | |
| <td align="center"> | |
| <a class="email-promo-button" href="http://example.org">Get Promo</a> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td align="center"> | |
| <img class="social-logo" src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" alt="Logo"> | |
| <img class="social-logo" src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" alt="Logo"> | |
| <img class="social-logo" src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" alt="Logo"> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td align="center"> | |
| <p class="email-small">In order to send you the newsletter, we process the data we receive from you. You always have access to your data and can correct or delete it. You can do this in your account settings on our website example.com. If you no longer want to receive such information from us, click on the unsubscribe link. More information can be found in the Privacy Policy.</p> | |
| </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment