Last active
February 10, 2025 17:40
-
-
Save rafibomb/98e1af08a7d56fc307ce to your computer and use it in GitHub Desktop.
Stacking Inline Links on Mobile - Ink Responsive HTML Email
This file contains 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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <meta name="viewport" content="width=device-width"/> | |
| <link rel="stylesheet" href="ink.css"> <!-- For testing only --> | |
| <link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" /> | |
| <style type="text/css"> | |
| /* Ink styles go here in production */ | |
| </style> | |
| <style type="text/css"> | |
| /* Stack on Small Navigation */ | |
| @media only screen and (max-width: 600px) { | |
| td[class="main-nav"] td { | |
| display: block; | |
| padding: 0 !important; | |
| } | |
| td[class="main-nav"] a { | |
| display: block; | |
| padding: 20px 0; | |
| border-bottom: 1px solid #999; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table class="body"> | |
| <tr> | |
| <td class="center" align="center" valign="top"> | |
| <center> | |
| <br> | |
| <table class="container"> | |
| <tr> | |
| <td> | |
| <!-- content start --> | |
| <table class="row"> | |
| <tr> | |
| <td class="wrapper last"> | |
| <table class="twelve columns"> | |
| <tr> | |
| <td class="main-img" style="padding-bottom: 10px;"> | |
| <img src="img/edm.png" alt="" style="display: block; border: 0;" /> | |
| </td> | |
| </tr> | |
| <td class="main-nav" width="600"> | |
| <table cellpadding="0" cellspacing="0" width="100%"> | |
| <tr> | |
| <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;"> | |
| <a href="#" style="text-decoration: none; color: #999999;">Rave</a> | |
| </td> | |
| <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;"> | |
| <a href="#" style="text-decoration: none; color: #999999;">Dance</a> | |
| </td> | |
| <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;"> | |
| <a href="#" style="text-decoration: none; color: #999999;">EDM</a> | |
| </td> | |
| <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;"> | |
| <a href="#" style="text-decoration: none; color: #999999;">Rave Merch</a> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| <td class="expander"></td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| </center> | |
| </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment