| <html> | |
| <head> | |
| <style> | |
| @import url(https://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic&subset=latin,cyrillic); | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| mso-line-height-rule: exactly; | |
| min-width: 100%; | |
| } | |
| .wrapper { | |
| display: table; | |
| table-layout: fixed; | |
| width: 100%; | |
| min-width: 620px; | |
| -webkit-text-size-adjust: 100%; | |
| -ms-text-size-adjust: 100%; | |
| } | |
| body, .wrapper { | |
| background-color: #ffffff; | |
| } | |
| /* Basic */ | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| table.center { | |
| margin: 0 auto; | |
| width: 602px; | |
| } | |
| td { | |
| padding: 0; | |
| vertical-align: top; | |
| } | |
| .spacer, | |
| .border { | |
| font-size: 1px; | |
| line-height: 1px; | |
| } | |
| .spacer { | |
| width: 100%; | |
| line-height: 16px | |
| } | |
| .border { | |
| background-color: #e0e0e0; | |
| width: 1px; | |
| } | |
| .padded { | |
| padding: 0 24px; | |
| } | |
| img { | |
| border: 0; | |
| -ms-interpolation-mode: bicubic; | |
| } | |
| .image { | |
| font-size: 12px; | |
| } | |
| .image img { | |
| display: block; | |
| } | |
| strong, .strong { | |
| font-weight: 700; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| p, | |
| ol, | |
| ul, | |
| li { | |
| margin-top: 0; | |
| } | |
| ol, | |
| ul, | |
| li { | |
| padding-left: 0; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: #616161; | |
| } | |
| .btn { | |
| background-color: #3dbd9c; | |
| border: 1px solid #3cbc9b; | |
| border-radius:2px; | |
| color:#ffffff; | |
| display:inline-block; | |
| font-family:Roboto, Helvetica, sans-serif; | |
| font-size:14px; | |
| font-weight:400; | |
| line-height:36px; | |
| text-align:center; | |
| text-decoration:none; | |
| text-transform:uppercase; | |
| width:200px; | |
| height: 36px; | |
| padding: 0 8px; | |
| margin: 0; | |
| outline: 0; | |
| outline-offset: 0; | |
| -webkit-text-size-adjust:none; | |
| mso-hide:all; | |
| } | |
| /* Top panel */ | |
| .title { | |
| text-align: left; | |
| } | |
| .subject { | |
| text-align: right; | |
| } | |
| .title, .subject { | |
| width: 300px; | |
| padding: 8px 0; | |
| color: #616161; | |
| font-family: Roboto, Helvetica, sans-serif; | |
| font-weight: 400; | |
| font-size: 12px; | |
| line-height: 14px; | |
| } | |
| /* Header */ | |
| .logo { | |
| padding: 16px 0; | |
| } | |
| /* Logo */ | |
| .logo-image { | |
| } | |
| /* Main */ | |
| .main { | |
| -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); | |
| -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); | |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); | |
| } | |
| /* Content */ | |
| .columns { | |
| margin: 0 auto; | |
| width: 600px; | |
| background-color: #ffffff; | |
| font-size: 14px; | |
| } | |
| .column { | |
| text-align: left; | |
| background-color: #ffffff; | |
| font-size: 14px; | |
| } | |
| .column-top { | |
| font-size: 24px; | |
| line-height: 24px; | |
| } | |
| .content { | |
| width: 100%; | |
| } | |
| .column-bottom { | |
| font-size: 8px; | |
| line-height: 8px; | |
| } | |
| .content h1 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| color: #212121; | |
| font-family: Roboto, Helvetica, sans-serif; | |
| font-weight: 400; | |
| font-size: 20px; | |
| line-height: 28px; | |
| } | |
| .content p { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| color: #212121; | |
| font-family: Roboto, Helvetica, sans-serif; | |
| font-weight: 400; | |
| font-size: 16px; | |
| line-height: 24px; | |
| } | |
| .content .caption { | |
| color: #616161; | |
| font-size: 12px; | |
| line-height: 20px; | |
| } | |
| /* Footer */ | |
| .signature, .subscription { | |
| vertical-align: bottom; | |
| width: 300px; | |
| padding-top: 8px; | |
| margin-bottom: 16px; | |
| } | |
| .signature { | |
| text-align: left; | |
| } | |
| .subscription { | |
| text-align: right; | |
| } | |
| .signature p, .subscription p { | |
| margin-top: 0; | |
| margin-bottom: 8px; | |
| color: #616161; | |
| font-family: Roboto, Helvetica, sans-serif; | |
| font-weight: 400; | |
| font-size: 12px; | |
| line-height: 18px; | |
| } | |
| @media only screen and (min-width: 0) { | |
| .wrapper { | |
| text-rendering: optimizeLegibility; | |
| } | |
| } | |
| @media only screen and (max-width: 620px) { | |
| [class=wrapper] { | |
| min-width: 302px !important; | |
| width: 100% !important; | |
| } | |
| [class=wrapper] .block { | |
| display: block !important; | |
| } | |
| [class=wrapper] .hide { | |
| display: none !important; | |
| } | |
| [class=wrapper] .top-panel, | |
| [class=wrapper] .header, | |
| [class=wrapper] .main, | |
| [class=wrapper] .footer { | |
| width: 302px !important; | |
| } | |
| [class=wrapper] .title, | |
| [class=wrapper] .subject, | |
| [class=wrapper] .signature, | |
| [class=wrapper] .subscription { | |
| display: block; | |
| float: left; | |
| width: 300px !important; | |
| text-align: center !important; | |
| } | |
| [class=wrapper] .signature { | |
| padding-bottom: 0 !important; | |
| } | |
| [class=wrapper] .subscription { | |
| padding-top: 0 !important; | |
| } | |
| } | |
| </style> | |
| </html> | |
| <body> | |
| <center class="wrapper"> | |
| <table class="top-panel center" width="602" border="0" cellspacing="0" cellpadding="0"> | |
| <tbody> | |
| <tr> | |
| <td class="title" style="text-align:center"><a class="strong" href="#" target="_blank"><img src="https://elearn.punjab.gov.pk/images/logo.png"/></a></td> | |
| </tr> | |
| <tr> | |
| <td class="border" colspan="2"> </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="spacer"> </div> | |
| <table class="main center" width="602" border="0" cellspacing="0" cellpadding="0"> | |
| <tbody> | |
| <tr> | |
| <td class="column"> | |
| <div class="column-top"> </div> | |
| <table class="content" border="0" cellspacing="0" cellpadding="0"> | |
| <tbody> | |
| <tr> | |
| <td class="padded"> | |
| <h1>Respected Mahnoor Sheraz</h1> | |
| <p>Please share following educational app within your community including teachers, students and parents so anyone can have access to conceptual learning.</p> | |
| <p><strong>Digitized textbooks of Punjab Curriculum & Textbook Board (PCTB) for Grade 6-12th (Science & Math) are now one click away!</strong></p> | |
| <p><img src="https://gm1.ggpht.com/xbi8ikAKl0C0f4lvpi--D6TQAvsHQz1y1IlR-DaGcLoYKXwd_3ymvaB2beCDO3k3CktWmvDjMU80DhMDstntwLzKPSHCwoNdwl1Jis2o9Yz5zifzUf9OIVoiRUb1j3eXp18SW7iGjvlkYuhq96_CLOxXTkgHvPStcNLifW7b6ooPvFOknnN8Qm3nZPouOjR1f_CA69YE8ZumHSucgnmLp6yfLtPYiLPq5Dv25P31kNOHKODFHHf3pK9xvwxeoiiyhWZr4rkmj8kzVfkKTt6E1pAlwoieeaZSCLE-PjrvfCtbHPihwaZUgnblVcqhkCPhjhagBz2Hor76JmHz9zmg3aDVVvq5uLHw5WVMmt6p8zE-qV5EG4thjO1O8gNyprnUXk-njSOJMsB9f8GBeoa3qKItvorKAQDLTh-Mo5iltixFOrBGyYQDQhZQsf2pmFxvuytlxilvvA5TObVViqDrf84kOYnVVgof2dyIFY35tE7lyqLz74VMhFf-lTRatgyeBJ-wO6UgAxX8gR14z3I44hQG-lBCyCJmo0lxmyIumhUCM7tcNKLeUU16UHAtnxYJKdptCcJl5fnfc-IKo33SDDEcYvxHIUMJijgXzEiSII47n4uBpVZqWTXIz5rmG9TRD4bEVvxvEBj1lV4RfCCAsx5o6csHvC_66_5lU2q4HMG_aN0pDhNxbCCNsPe0iflNHCuEaxPIoCy5jQKl=s0-l75-ft-l75-ft" width="600" alt=""></p> | |
| <p style="text-align:center;"><a href="http://bit.ly/2RBzptk" class="btn"><i class="zmdi zmdi-android-alt"></i> | |
| Download</a></p> | |
| <p class="caption">We're putting our heart into this platform and application, and showing a little support will go a long way in revolutionizing the education system in <strong>Pakistan.</strong></p> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="column-bottom"> </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="spacer"> </div> | |
| <table class="footer center" width="602" border="0" cellspacing="0" cellpadding="0"> | |
| <tbody> | |
| <tr> | |
| <td class="border" colspan="2"> </td> | |
| </tr> | |
| <tr> | |
| <td class="signature" width="300"> | |
| <p> | |
| With best regards,<br> | |
| Elean Punjab<br> | |
| Punjab Information Technology Board (PITB<br> | |
| Government of the Punjab. | |
| </p> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </center> | |
| </body> |
Tested on iPhone/iPad Mail app, Android Gmail app, Android Mail app, Win8 browsers Chrome, Firefox, Opera, IE 11. Mail is not responsible on Android Gmail app, but looks fine. If you can tested it on other devices - add a comment with results.
A Pen by Sheraz Ahmed on CodePen.