Created
February 18, 2020 03:39
-
-
Save chiaski/8676820503bb330ecae7becabe0b5c2b to your computer and use it in GitHub Desktop.
Feedback signup for Havenly
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 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> | |
| <meta name="format-detection" content="telephone=no"> | |
| <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> | |
| <meta charset="UTF-8"> | |
| <!-- Can be removed, Google Fonts already accessible --> | |
| <link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css?family=Lora&display=swap" rel="stylesheet"> | |
| <style type="text/css"> | |
| body{ | |
| font-family:"Noto Sans", Open Sans, Segoe UI, sans-serif; | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-align: center; | |
| } | |
| #email-container{ | |
| width:100%; | |
| } | |
| #container{ | |
| position:absolute; | |
| left:50%; | |
| margin-left:-300px; | |
| width:600px; | |
| max-width:960px; | |
| padding:1em; | |
| } | |
| table{ | |
| max-width:960px; | |
| } | |
| td, tr{ | |
| margin:0; | |
| } | |
| img.havenly-logo{ | |
| width:130px; | |
| margin:auto; | |
| margin-top:2.5em; | |
| } | |
| #container img.header{ | |
| max-width:100%; | |
| text-align: center; | |
| } | |
| .text{ | |
| padding:0 2em; | |
| margin:0 1.5em; | |
| width:80%; | |
| box-sizing: border-box; | |
| color:#4a4444; | |
| } | |
| h1{ | |
| text-align: center; | |
| color:#e45930; | |
| font-family:"Lora"; | |
| } | |
| p{ | |
| margin:auto; | |
| padding-left:1em; | |
| padding-right:1em; | |
| padding-bottom:1.5em; | |
| width:80%; | |
| justify-content: center; | |
| } | |
| p.special{ | |
| margin:-.1em; | |
| font-weight:bold; | |
| color:#e45930; | |
| text-align: center; | |
| margin:auto; | |
| } | |
| a.survey-button{ | |
| background:#e45930; | |
| padding:.75em; | |
| border-radius:10px; | |
| text-decoration: none; | |
| color:#fff; | |
| box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); | |
| -webkit-transition: all .3s linear; | |
| -moz-transition: all .3s linear; | |
| -ms-transition: all .3s linear; | |
| -o-transition: all .3s linear; | |
| transition: all .3s linear; | |
| } | |
| a.survey-button:hover{ | |
| transform: translateY(-3px); | |
| box-shadow: 0 7px 14px rgba(27, 27, 67, 0.21), 0 3px 6px rgba(0, 0, 0, 0.14); | |
| background:#ed6a43; | |
| } | |
| .footer{ | |
| padding-top:1em; | |
| margin:0 1em; | |
| text-align: center; | |
| } | |
| .footer a{ | |
| color:#7e7b7b; | |
| font-size:11px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="email-container"> | |
| <div id="container"> | |
| <table class="havenly" width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> | |
| <tr> | |
| <td> | |
| <div class="image-text"> | |
| <center><h1>You just made a difference.</h1> </center> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> <center><img src="https://i.imgur.com/v3UmjUT.jpg" class="header"></center></td> | |
| </tr> | |
| <tr> | |
| <td align="center" class="text" width="80%"> | |
| <div> | |
| <p>Your order directly helps refugee and immigrant women build a better future for themselves.</p> | |
| <!-- Use paragraph with the .special class for announcements like discounts. --> | |
| <p class="special">Use code 30% OFF for DEAL.</p> | |
| <p>Please consider taking this one-minute survey to help us improve our service.</p> | |
| <!-- Link to survey --> | |
| <a class="survey-button" href="https://docs.google.com/forms/d/e/1FAIpQLSd7gR_BjftsmTbiTBBZdaOxpLvFe0VtyCXTHOjdtpQ8ykEk8g/viewform">Take the Customer Feedback Survey</a> | |
| <br><br><br> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <!-- Footer information --> | |
| <div class="footer"> | |
| <a href="https://www.havenlytreats.com/" target="_blank">Havenly Treats</a> <br> | |
| <a href="mailto:info@havenlytreats.com">info@havenlytreats.com</a> | |
| </div> | |
| <br><br> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment