"Email Template - Guidepool"
Bootstrap 3.3.0 Snippet by harryward

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!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 name="viewport" content="width=device-width" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Actionable emails e.g. reset password</title> <style> { margin: 0; padding: 0; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; } img { max-width: 100%; } body { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.6; } table td { vertical-align: top; } body { background-color: #f6f6f6; } .body-wrap { background-color: #f6f6f6; width: 100%; } .container { display: block !important; max-width: 600px !important; margin: 0 auto !important; clear: both !important; } .content { max-width: 600px; margin: 0 auto; display: block; padding: 20px; } .main { background: #fff; border: 1px solid #e9e9e9; border-radius: 3px; } .content-wrap { padding: 20px; } .content-block { padding: 0 0 20px; } .header { width: 100%; margin-bottom: 20px; } .footer { width: 100%; clear: both; color: #999; padding: 20px; } .footer a { color: #999; } .footer p, .footer a, .footer unsubscribe, .footer td { font-size: 12px; } .column-left { float: left; width: 50%; } .column-right { float: left; width: 50%; } h1, h2, h3 { font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; color: #000; margin: 40px 0 0; line-height: 1.2; font-weight: 400; } h1 { font-size: 32px; font-weight: 500; } h2 { font-size: 24px; } h3 { font-size: 18px; } h4 { font-size: 14px; font-weight: 600; } p, ul, ol { margin-bottom: 10px; font-weight: normal; } p li, ul li, ol li { margin-left: 5px; list-style-position: inside; } a { color: #348eda; text-decoration: underline; } .btn-primary { text-decoration: none; color: #FFF; background-color: #348eda; border: solid #348eda; border-width: 10px 20px; line-height: 2; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; border-radius: 5px; text-transform: capitalize; } .last { margin-bottom: 0; } .first { margin-top: 0; } .padding { padding: 10px 0; } .aligncenter { text-align: center; } .alignright { text-align: right; } .alignleft { text-align: left; } .clear { clear: both; } .alert { font-size: 16px; color: #fff; font-weight: 500; padding: 20px; text-align: center; border-radius: 3px 3px 0 0; } .alert a { color: #fff; text-decoration: none; font-weight: 500; font-size: 16px; } .alert.alert-warning { background: #ff9f00; } .alert.alert-bad { background: #d0021b; } .alert.alert-good { background: #68b90f; } .invoice { margin: 40px auto; text-align: left; width: 80%; } .invoice td { padding: 5px 0; } .invoice .invoice-items { width: 100%; } .invoice .invoice-items td { border-top: #eee 1px solid; } .invoice .invoice-items .total td { border-top: 2px solid #333; border-bottom: 2px solid #333; font-weight: 700; } @media only screen and (max-width: 640px) { h1, h2, h3, h4 { font-weight: 600 !important; margin: 20px 0 5px !important; } h1 { font-size: 22px !important; } h2 { font-size: 18px !important; } h3 { font-size: 16px !important; } .container { width: 100% !important; } .content, .content-wrapper { padding: 10px !important; } h3 { font-size: 32px!important; font-weight: bold!important; margin-top: 0px!important; } .invoice { width: 100% !important; } } </style> </head> <body> <table class="body-wrap"> <tr> <td></td> <td class="container" width="600"> <div class="content"> <table class="main" width="100%" cellpadding="0" cellspacing="0"> <tr> <td class="content-wrap"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td class="content-block" style="text-align:center;"> <img src="http://api.harryward.biz/aZQB/gpoollogo.png" width="300px"> <h3>New Lead - Product Demo Request</h3> </td> </tr> <tr style="text-align:center"> <td class="content-block">'+clientname+' has requested a product demo.</td> </tr> <tr style="text-align:center"> <td class="content-block">role: '+role+'</td> </tr> <tr style="text-align:center"> <td class="content-block">phone: '+phone+'</td> </tr> <tr style="text-align:center"> <td class="content-block">email: '+email+'</td> </tr> <tr style="text-align:center"> <td class="content-block">notes:<br> '+notes+'</td> </tr> <tr style="text-align:center;"> <td class="content-block"> <a class="btn-primary" href="http://guidepool.io">View Lead Landing Page</a> </td> </tr> <tr> </tr> </table> </td> </tr> </table> <div class="footer"> <table width="100%"> <tr> <td class="aligncenter content-block">Like <a href="https://www.facebook.com/pages/GuidePool/863092207086099?fref=ts">GuidePool</a> on Facebook.</td> </tr> </table> </div> </div> </td> <td></td> </tr> </table> </body> </html>

Related: See More

Paper Kit 2
Responsive Invoice template
BS4 clean & simple invoice template
Elegant Bootstrap 4 message chat box template

Questions / Comments: