Created
March 13, 2019 20:47
-
-
Save favrik/3e1ef3515eb80ac45519c0bf4b4c7dd3 to your computer and use it in GitHub Desktop.
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><html><head><!--If you delete this tag, the sky will fall on your head--><meta content="width=device-width" name="viewport" /><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><title>Invitation Email</title><style type="text/css">/* ------------------------------------- | |
| GLOBAL | |
| ------------------------------------- */ | |
| * { | |
| margin:0; | |
| padding:0; | |
| } | |
| * { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; } | |
| img { | |
| max-width: 100%; | |
| } | |
| .collapse { | |
| margin:0; | |
| padding:0; | |
| } | |
| body { | |
| -webkit-font-smoothing:antialiased; | |
| -webkit-text-size-adjust:none; | |
| width: 100%!important; | |
| height: 100%; | |
| } | |
| /* ------------------------------------- | |
| ELEMENTS | |
| ------------------------------------- */ | |
| a { color: #7d7d7d; text-decoration:none; font-size: 11px;} | |
| .btn { | |
| text-decoration:none; | |
| color: #FFF; | |
| background-color: #007AC9; | |
| font-size: inherit; | |
| border-radius: 5px; | |
| padding:10px 20px; | |
| font-weight:bold; | |
| margin-bottom:17px; | |
| text-align:center; | |
| letter-spacing:1px; | |
| cursor:pointer; | |
| display: inline-block; | |
| } | |
| span.action a { color: #ffffff!important; } | |
| /* ------------------------------------- | |
| BODY | |
| ------------------------------------- */ | |
| table.body-wrap { width: 100%;} | |
| /* ------------------------------------- | |
| FOOTER | |
| ------------------------------------- */ | |
| table.footer-wrap { width: 100%; clear:both!important; | |
| } | |
| .footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;} | |
| .footer-wrap .container td.content p { | |
| font-size:10px; | |
| font-weight: bold; | |
| } | |
| /* ------------------------------------- | |
| TYPOGRAPHY | |
| ------------------------------------- */ | |
| h1,h2,h3,h4,h5,h6 { | |
| font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.4; text-align: center; margin-bottom:15px; margin-top:25px; color:#676767; | |
| } | |
| h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; } | |
| h1 { font-weight:200; font-size: 44px;} | |
| h2 { font-weight:200; font-size: 37px;} | |
| h3 { font-weight:700; font-size: 21px; letter-spacing: 1px;padding-left:40px; padding-right:40px; color: #444;} | |
| h4 { font-weight:500; font-size: 23px; letter-spacing: 1px; padding-left:50px; padding-right:50px; overflow:hidden; text-align: center; } | |
| h5 { font-weight:400; font-size: 16px; padding-top:15px; padding-bottom:15px; padding-left:90px; padding-right:90px;} | |
| h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;} | |
| .collapse { margin:0!important;} | |
| p, ul { | |
| color: #ffffff; | |
| padding-bottom:30px; | |
| padding-left:65px; | |
| padding-right:65px; | |
| font-weight: normal; | |
| font-size:14.5px; | |
| line-height:1.6; | |
| text-align: center; | |
| } | |
| p.copyrights {color:#676767; background-color:transparent; font-size: 16px; padding: 25px 3px 3px;} | |
| p.lead { font-size:17px; } | |
| p.last { margin-bottom:0px;} | |
| p.terms { padding:8px; border-top: 1px solid #efefef; color:#676767;} | |
| ul li { | |
| margin-left:5px; | |
| list-style-position: inside; | |
| } | |
| /* --------------------------------------------------- | |
| RESPONSIVENESS | |
| Nuke it from orbit. It's the only way to be sure. | |
| ------------------------------------------------------ */ | |
| /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ | |
| .container { | |
| display:block!important; | |
| max-width:600px!important; | |
| margin:0 auto!important; /* makes it centered */ | |
| clear:both!important; | |
| } | |
| /* This should also be a block element, so that it will fill 100% of the .container */ | |
| .content { | |
| padding:0px; | |
| max-width:600px; | |
| margin:0px auto; | |
| display:block; | |
| } | |
| /* Let's make sure tables in the content area are 100% wide */ | |
| .content table { width: 100%; } | |
| .shadow { | |
| box-shadow: 0 0 10px gray; | |
| } | |
| /* Odds and ends */ | |
| .column { | |
| width: 300px; | |
| float:left; | |
| } | |
| .column tr td { padding: 15px; } | |
| .column-wrap { | |
| padding:0!important; | |
| margin:0 auto; | |
| max-width:600px!important; | |
| } | |
| .column table { width:100%;} | |
| .social .column { | |
| width: 280px; | |
| min-width: 279px; | |
| float:left; | |
| } | |
| /* Be sure to place a .clear element after each set of columns, just to be safe */ | |
| .clear { display: block; clear: both; } | |
| /* ------------------------------------------- | |
| PHONE | |
| For clients that support media queries. | |
| Nothing fancy. | |
| -------------------------------------------- */ | |
| @media only screen and (max-width: 600px) { | |
| a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;} | |
| div[class="column"] { width: auto!important; float:none!important;} | |
| table.social div[class="column"] { | |
| width:auto!important; | |
| } | |
| }</style></head><body bgcolor="#ffffff"><!--BODY--><table class="body-wrap"><tr><td></td><td bgcolor="#FFFFFF" class="container"><div class="content shadow"><table><tr><td><!--Header Image--><img height="169px" src="https://s3.amazonaws.com/clinical6-core/assets/email/logo-nav.jpg" width="600px" /><!--/Header Image--><!--Web Portal Invitation--><table width="100%"><tr><td><table align="center"><tr><td><h3 class="salutation">Welcome to Study Name</h3><h5>Login to your study portal by clicking the button below, and complete the informed consent.</h5><p><span class="action"><a class="btn" href="https://core-development.clinical6.com/webapp/pwa/#">Login to Web Portal</a></span></p><h3 class="salutation">Download the Study App</h3><h5>You will also be required to open this email on the mobile device that you will use through out this study and click the link below to download the Study Name app</h5><div class="content"><table align="center" class="mobile-section"><tr><td align="center"><a href=""><img alt="" height="55px" src="https://s3.amazonaws.com/clinical6-core/assets/email/app-store-badge.png" /></a> <a href=""><img alt="" height="55px" src="https://s3.amazonaws.com/clinical6-core/assets/email/google-play-badge.png" /></a><br /><br /><br /></td></tr></table></div></td></tr></table><span class="clear"></span></td></tr></table><!--/Web Portal Invitation--></td></tr></table></div></td><td></td></tr></table><!--/BODY--><!--FOOTER--><table class="footer-wrap"><tr><td></td><td class="container"><!--content--><div class="content"><table><tr><td align="center"><p class="copyrights">© 2019 Clinical6 PRA Health Sciences. All rights reserved.</p></td></tr></table></div><!--/content--></td><td></td></tr></table><!--/FOOTER--></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment