generated from PaleBluDot/e11ty
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(website): add componentes section to the website (#20)
- Loading branch information
1 parent
1505943
commit 3ae914e
Showing
2 changed files
with
369 additions
and
0 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,362 @@ | ||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
| <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <title>ACLU Email</title> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | ||
| <meta name="viewport" content="width=device-width" /> | ||
| <meta name="color-scheme" content="light dark" /> | ||
| <meta name="supported-color-schemes" content="light dark" /> | ||
| <style> | ||
| :root { | ||
| color-schemes: light dark; | ||
| supported-color-schemes: light dark; | ||
| } | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| margin: 0 0 5px 0; | ||
| } | ||
|
|
||
| p { | ||
| margin-top: 0px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| body { | ||
| width: 100% !important; | ||
| -webkit-text-size-adjust: 100%; | ||
| -ms-text-size-adjust: 100%; | ||
| margin: 0px; | ||
| padding: 0px; | ||
| } | ||
|
|
||
| a, | ||
| a:visited, | ||
| a:hover, | ||
| a:active { | ||
| color: #0055aa; | ||
| font-weight: 900; | ||
| } | ||
|
|
||
| img { | ||
| outline: none; | ||
| text-decoration: none; | ||
| -ms-interpolation-mode: bicubic; | ||
| } | ||
|
|
||
| a img { | ||
| border: none; | ||
| } | ||
|
|
||
| /* REMOVE SPACING BETWEEN TABLES IN OUTLOOK 2007 AND UP */ | ||
| table, | ||
| td { | ||
| border-spacing: 0px; | ||
| border-collapse: collapse; | ||
| mso-table-lspace: 0pt; | ||
| mso-table-rspace: 0pt; | ||
| } | ||
|
|
||
| .preheader { | ||
| display: none !important; | ||
| visibility: hidden; | ||
| opacity: 0; | ||
| color: transparent; | ||
| height: 0; | ||
| width: 0; | ||
| } | ||
|
|
||
| ul { | ||
| margin-top: 0px; | ||
| margin-bottom: 0px; | ||
| } | ||
|
|
||
| li { | ||
| margin-bottom: 15px; | ||
| font-family: Arial, "Helvetica Neue", sans-serif; | ||
| font-size: 16px; | ||
| line-height: 16px; | ||
| list-style-type: disc; | ||
| } | ||
|
|
||
| td.footer-text a { | ||
| font-weight: 400 !important; | ||
| } | ||
|
|
||
| @media screen and (max-width: 480px) { | ||
| table.emailwrapto100pc { | ||
| width: 100% !important; | ||
| white-space: inherit !important; | ||
| line-height: inherit !important; | ||
| } | ||
| td.logo-spacing { | ||
| padding-left: 20px !important; | ||
| } | ||
| td.emailbodytext { | ||
| font-size: 16px !important; | ||
| line-height: 23px !important; | ||
| padding-right: 20px !important; | ||
| padding-left: 20px !important; | ||
| } | ||
| .image-resize { | ||
| width: 100% !important; | ||
| } | ||
| table.footer-left, | ||
| table.footer-right { | ||
| width: 100% !important; | ||
| margin-top: 10px !important; | ||
| } | ||
| table.footer-right { | ||
| float: left !important; | ||
| margin-top: 25px !important; | ||
| } | ||
| td.footer-left, | ||
| td.footer-right, | ||
| td.footer-text { | ||
| text-align: center !important; | ||
| } | ||
| td.footer-right { | ||
| padding: 0px !important; | ||
| } | ||
| td.footer-text { | ||
| padding: 10px 20px 20px 20px !important; | ||
| } | ||
| td.button-wrapper { | ||
| display: inline-block; | ||
| } | ||
| .outer-sidebox, | ||
| .inner-sidebox { | ||
| float: none !important; | ||
| width: 100% !important; | ||
| } | ||
| .sidebox-padding { | ||
| padding-left: 0px !important; | ||
| } | ||
| } | ||
| /* DARK MODE FOR IOS AND APPLE MAIL */ | ||
| @media (prefers-color-scheme: dark) { | ||
| body { | ||
| background: #1c1c1e; | ||
| } | ||
| a, | ||
| a:visited, | ||
| a:hover, | ||
| a:active { | ||
| color: #2d86e0; | ||
| } | ||
| a.button-text, | ||
| a.button-text:visited, | ||
| a.button-text:hover, | ||
| a.button-text:active { | ||
| color: #cecece; | ||
| } | ||
| td.emailbodytext p, | ||
| td.emailbodytext li, | ||
| td.emailbodytext h1, | ||
| td.emailbodytext h2, | ||
| td.emailbodytext h3, | ||
| td.tagline p, | ||
| td.dm-box h2 { | ||
| color: #cecece; | ||
| } | ||
| td.dm-box { | ||
| background: #2a2a2b !important; | ||
| color: #cecece; | ||
| } | ||
| td.emailbodytext { | ||
| border-bottom: 1px solid #2a2a2b !important; | ||
| } | ||
| table.inner-sidebox, | ||
| td.dm-box { | ||
| border: 0 !important; | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0">ENTER PREHEADER TEXT MESSAGE.</span> | ||
| <div style="display: none; max-height: 0px; overflow: hidden"> | ||
| ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ | ||
| </div> | ||
|
|
||
| <table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" class="emailwrapto100pc" width="600px"> | ||
| <tbody> | ||
| <tr> | ||
| <td align="left" style="padding: 20px 0" class="logo-spacing"> | ||
| <a href="https://www.aclu.org/"><img alt="American Civil Liberties Union's logo" src="https://media.sailthru.com/64d/1k3/a/o/5db1cbcdd662a.png" border="0" width="150" style="display: block" /></a> | ||
| </td> | ||
| </tr> | ||
|
|
||
| <tr> | ||
| <td | ||
| class="emailbodytext" | ||
| style=" | ||
| color: #3c3532; | ||
| font-family: Arial,'Helvetica Neue',sans-serif; | ||
| font-size: 16px; | ||
| line-height: 22px; | ||
| padding: 15px 0px 20px 0px; | ||
| border-bottom: 1px solid #d4d4d4;" | ||
| valign="top" | ||
| > | ||
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis esse possimus harum in! Quis qui suscipit rerum aut, dolore itaque deserunt ipsa voluptatibus corrupti maiores mollitia eius. Quas, sequi.</p> | ||
| <table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" class="emailwrapto100pc" width="600px" style="margin-bottom: 15px"> | ||
| <tbody> | ||
| <tr> | ||
| <td | ||
| style=" | ||
| color: #3c3532; | ||
| font-family: Arial,'Helvetica Neue',sans-serif; | ||
| font-size: 16px; | ||
| line-height: 22px; | ||
| padding: 15px 0px 20px 0px;" | ||
| valign="top" | ||
| > | ||
| <h2 style="text-align: center">Membership Card</h2> | ||
| <table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="35%" style="background: #000000"> | ||
| <tbody> | ||
| <tr width="100px"> | ||
| <td | ||
| style=" | ||
| color: #3c3532; | ||
| font-family: Arial,'Helvetica Neue',sans-serif; | ||
| font-size: 16px; | ||
| line-height: 22px; | ||
| padding: 10px;text-align: center;" | ||
| valign="top" | ||
| > | ||
| <img src="https://media.sailthru.com/64d/1k3/a/o/5db1cbcdd662a.png" alt="ACLU Logo" /> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td | ||
| style=" | ||
| color: #3c3532; | ||
| font-family: Arial,'Helvetica Neue',sans-serif; | ||
| font-size: 16px; | ||
| line-height: 22px; | ||
| padding: 10px;text-align: center;" | ||
| valign="top" | ||
| > | ||
| <p style="margin-bottom: 5px">Member Name: Pavel</p> | ||
| <p style="margin-bottom: 5px">Membership ID: 8675309</p> | ||
| <p style="margin-bottom: 0">Member Since: 1920</p> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <p>Excepturi explicabo perspiciatis nostrum dolores libero mollitia dolore suscipit repellendus! Perspiciatis veniam aliquam officiis beatae illum quae architecto ad nulla quidem totam, pariatur consequatur, saepe quos placeat sed nemo repellat!</p> | ||
| <p>Quam inventore magni impedit in et incidunt ad dolorem praesentium cupiditate quasi repudiandae, nulla eligendi est aspernatur? Aliquam laboriosam, adipisci omnis, distinctio quisquam nemo veritatis saepe minima deleniti, nam et.</p> | ||
|
|
||
| <p><img src="https://media.sailthru.com/64d/1k3/a/o/5db2043ae79b8.jpg" alt="Anthony Romero" border="0" width="90" /></p> | ||
| <p> | ||
| <strong | ||
| >Anthony Romero<br /> | ||
| Executive Director<br /> | ||
| Pronouns: He, him, his<br /> | ||
| American Civil Liberties Union</strong | ||
| > | ||
| </p> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" class="emailwrapto100pc" width="600px"> | ||
| <tbody> | ||
| <tr> | ||
| <td style="text-align: left; padding: 25px 15px 15px 15px"> | ||
| <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="footer-left"> | ||
| <tbody> | ||
| <tr> | ||
| <td | ||
| align="center" | ||
| valign="top" | ||
| class="footer-left" | ||
| style=" | ||
| font-family: Arial,'Helvetica Neue',sans-serif; | ||
| font-size: 16px; | ||
| line-height: 20px; | ||
| color: #888888;" | ||
| > | ||
| <!-- START CTA BUTTON, make sure to update both links and adjust both widths as needed --> | ||
| <table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation"> | ||
| <tr> | ||
| <td align="center"> | ||
| <table role="presentation" border="0" cellspacing="0" cellpadding="0"> | ||
| <tr> | ||
| <!-- IF YOU WANT TO CHANGE THE BUTTON COLOR YOU WILL NEED TO UPDATE BGCOLOR IN THE TD AND THE BORDER COLOR IN THE A TAGS. --> | ||
| <td align="center" bgcolor="#0055aa"> | ||
| <a | ||
| role="button" | ||
| class="button-text" | ||
| href="https://www.aclu.org/" | ||
| style=" | ||
| font-family: Arial,'Helvetica Neue',sans-serif; | ||
| color: #cecece; | ||
| padding: 12px 18px; | ||
| border: 1px solid #0055aa; | ||
| display: inline-block; | ||
| font-size: 18px; | ||
| font-weight: 900; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| text-transform: uppercase;" | ||
| >Donate Now</a | ||
| > | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| <!-- END CTA BUTTON --> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" align="right" class="footer-right"> | ||
| <tbody> | ||
| <tr> | ||
| <td align="center" valign="top" class="footer-right" style="padding:40px 0px 0px 0px;font-family: Arial,'Helvetica Neue',sans-serif;font-size:16px;line-height: 22px;color: #888888;text-align:center;"> | ||
| <a href="https://www.facebook.com/aclu"><img src="https://media.sailthru.com/64d/1k3/a/o/5db1cb21b75bf.png" border="0" alt="Facebook Icon" width="33" /></a> | ||
| <a href="https://twitter.com/aclu"><img src="https://media.sailthru.com/64d/1k3/a/o/5db1cb153c9f8.png" border="0" alt="Twitter Icon" width="33" /></a> | ||
| <a href="https://www.instagram.com/aclu_nationwide/"><img src="https://media.sailthru.com/64d/1k3/a/o/5db1cb1be2cb6.png" border="0" alt="Instagram Icon" width="33" /></a> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td align="center" class="footer-text" style="color: #888888;font-family: Arial,'Helvetica Neue',sans-serif;font-size:14px;line-height: 22px;padding:15px;"> | ||
| <!-- START FOOTER INFO --> | ||
| This email was sent to: <strong>[email protected]</strong><br /> | ||
| <br /> | ||
| <a href="https://action.aclu.org/preference-center/aclu-action-national-email-preference" style="color: #888888">Unsubscribe</a><br /> | ||
| <br /> | ||
| Please note: If you forward or distribute, the links will open a page with your information filled in.<br /> | ||
| <br /> | ||
| We respect your right to privacy – <a href="https://www.aclu.org/about/privacy/statement/?redirect=american-civil-liberties-union-privacy-statement" style="color: #888888">view our policy.</a><br /> | ||
| <br /> | ||
| This email was sent by:<br /> | ||
| American Civil Liberties Union<br /> | ||
|
|
||
| 125 Broad St.<br /> | ||
|
|
||
| New York, NY 10004<br /> | ||
| <br /> | ||
| <!-- END FOOTER INFO --> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </body> | ||
| </html> |
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