"layout"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/reallygoodemails/pen/QyJdrM?depth=everything&order=popularity&page=5&q=builder&show_forks=false" /> <style class="cp-pen-styles"></style></head><body> <!DOCTYPE html> <html> <head> <title>Introducing the New Qards, Responsive Page Builder Plugin for WordPress</title> <style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700); html, body { margin: 0; padding: 0; background: #BAC4CB; } @media screen and (max-width: 690px) { table[width="621"] { width: 90%; } .headline { width: calc(100% - 192px) !important; } .img { width: 90% !important; height: auto; } .p { padding: 0 15px !important; } } @media screen and (max-width: 600px) { .img { width: 100% !important; } .col { width: 100% !important; } .col-1 { margin: 0 0 40px !important; } .fb, .tw, .mail { display: block; width: 32%; float: left; text-align: center; } .tw { margin: 0 2% !important; } .fb img, .tw img, .mail img { width: 100%; height: auto; display: block; } .header .logo img { margin: 0 auto; } .header .logo, .header div, .header .headline { width: 100% !important; text-align: center; display: block !important; } .header .headline { padding: 20px 0 !important; } .header .social { text-align: center; } .header .social a { width: auto; float: none !important; display: inline-block !important; } } @media screen and (max-width: 520px) { img[src="button.png"] { width: 80%; } .p, p { font-size: 18px !important; line-height: 26px !important; } .fb, .tw, .mail { width: 100% !important; } .fb img, .tw img, .mail img { width: 50% !important; margin: 0 auto !important; } .tw { margin: 10px 0 !important; } .footer a { display: block; width: 100% !important; } .footer .manage { margin: 10px 0; } .footer span { display: none !important; } td[height="40"], td[height="50"] { height: 25px; } td[height="70"] { height: 40px; } } </style> </head> <body bgcolor="#BAC4CB"> <table cellpadding="0" bgcolor="#BAC4CB" style="background:#BAC4CB" cellspacing="0" border="0" width="100%"> <!-- Header --> <tr> <td style="border-bottom: 1px solid #B0BAC0"> <table cellpadding="0" cellspacing="0" width="621" align="center" style="margin:0 auto"> <tr> <td height="35"></td> </tr> <tr> <td valign="middle" class="header"> <a href="https://designmodo.com/?utm_source=Designmodo+Newsletter&utm_campaign=973843dc76-Qards_1_41_21_2016&utm_medium=email&utm_term=0_a2ae53acc1-973843dc76-45293777&goal=0_a2ae53acc1-973843dc76-45293777&mc_cid=973843dc76&mc_eid=75f43b4e50" class="logo" style="display:block;float:left;width:96px;"> <img width="25" src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/a57a3e0c-2c08-4839-b426-6faa4e50e00a.png" style="display:block;padding:6px 0;"> </a> <h2 class="headline" style="text-align:center;margin:0;padding:4px 0;width:428px;font-weight:normal;font-family:Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;font-size:16px;color: #2F2F2F;line-height:1;float:left;"> This email contains many cool images. <a href="#" style="text-decoration:none;margin:5px 0 0;color:#2F2F2F;display:block;width:100%;"><strong style="font-weight:bold;">No images?</strong> View it online.</a> </h2> <div class="social" style="float:right;"> <a style="display:block;float:left;margin:0 8px 0 0;" href="https://twitter.com/designmodo?utm_source=Designmodo+Newsletter&utm_campaign=973843dc76-Qards_1_41_21_2016&utm_medium=email&utm_term=0_a2ae53acc1-973843dc76-45293777&goal=0_a2ae53acc1-973843dc76-45293777&mc_cid=973843dc76&mc_eid=75f43b4e50"> <img width="44" style="display:block" src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/6d2fd614-8b83-4c64-884e-4c9631acca13.png"> </a> <a style="display:block;float:left;" href="https://www.facebook.com/designmodo?utm_source=Designmodo+Newsletter&utm_campaign=973843dc76-Qards_1_41_21_2016&utm_medium=email&utm_term=0_a2ae53acc1-973843dc76-45293777&goal=0_a2ae53acc1-973843dc76-45293777&mc_cid=973843dc76&mc_eid=75f43b4e50"> <img width="44" style="display:block" src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/8f613c25-9851-40b7-83e3-b584d245231c.png"> </a> </div> </td> </tr> <tr> <td height="35"></td> </tr> </table> </td> </tr> <!-- Content --> <tr> <td> <table cellpadding="0" cellspacing="0" width="621" align="center" style="margin:0 auto"> <tr> <td height="70"></td> </tr> <tr> <td> <table cellspacing="0" cellpadding="0" width="100%"> <tr> <td> <img style="display:block;margin:0 auto" src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/cec7b847-943d-43cd-9448-1823cb6428d7.png" width="121"> </td> </tr> <tr> <td height="60"></td> </tr> <tr> <td> <img class="img" style="display:block;margin:0 auto" src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/cb11e457-b36d-4f3c-a2a7-bccc7f6e8c20.png" width="612"> </td> </tr> <tr> <td height="25"></td> </tr> <tr> <td class="p" style="font-size:24px;padding:0 50px;line-height:36px;font-family: Source Sans Pro, Helvetica, Arial, sans-serif;text-align:center;">We've updated Qards to version 1.4. There are a lot of improvements and bug fixes based on your feedback and suggestions; plus we added two new features.</td> </tr> <tr> <td height="50"></td> </tr> <tr> <td> <img class="img" style="display:block;margin:0 auto" src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/d73aa52e-7867-40fc-8488-032e691ad4ec.png" width="612"> </td> </tr> <tr> <td height="70"></td> </tr> <tr> <td style="padding:0 20px;color:#2F2F2F;"> <div class="col col-1" style="float:left;width:45%;"> <strong style="display:block;margin:0 0 10px;font-size:16px;font-weight:bold;font-family: FuturaStd-Bold, Source Sans Pro, Helvetica, Arial, sans-serif;color: #2F2F2F;line-height: 18px;">WP MEDIA LIBRARY</strong> <p style="margin:0;font-size:21px;line-height:28px;font-family: Source Sans Pro, Helvetica, Arial, sans-serif;">We integrated WP media library with Qards, so it's more handy to work with images and photos.</p> </div> <div class="col col-2" style="float:right;width:45%;"> <strong style="display:block;margin:0 0 10px;font-size:16px;font-weight:bold;font-family: FuturaStd-Bold, Source Sans Pro, Helvetica, Arial, sans-serif;color: #2F2F2F;line-height: 18px;">BUTTON CONFIGURATOR</strong> <p style="margin:0;font-size:21px;line-height:28px;font-family: Source Sans Pro, Helvetica, Arial, sans-serif;">With the new Button Configurator you can change button shapes, sizes and colors.</p> </div> </td> </tr> <tr> <td height="70"></td> </tr> <tr> <td> <a href="https://designmodo.com/qards/?utm_source=Designmodo+Newsletter&utm_campaign=973843dc76-Qards_1_41_21_2016&utm_medium=email&utm_term=0_a2ae53acc1-973843dc76-45293777&goal=0_a2ae53acc1-973843dc76-45293777&mc_cid=973843dc76&mc_eid=75f43b4e50"> <img src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/de65c2ec-0097-46c0-b4bd-a390d9939bf4.png" border="0" width="440" style="display:block;margin:0 auto;"> </a> </td> </tr> </table> </td> </tr> <tr> <td height="70"></td> </tr> </table> </td> </tr> <tr> <td style="border-bottom: 1px solid #B0BAC0"></td> </tr> <!-- Content --> <tr> <td> <table cellpadding="0" cellspacing="0" width="621" align="center" style="margin:0 auto"> <tr> <td height="70"></td> </tr> <tr> <td> <img class="img" style="display:block;margin:0 auto" src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/b4102487-d088-46f7-846a-9cbe30d8be94.png" width="511"> </td> </tr> <tr> <td height="25"></td> </tr> <tr> <td class="p" style="font-size:24px;padding:0 30px;line-height:36px;font-family: Source Sans Pro, Helvetica, Arial, sans-serif;text-align:center;">Help us share the good news. We would be grateful if you share Qards information with your friends who might be interested. Thank you!</td> </tr> <tr> <td height="40"></td> </tr> <tr> <td style="text-align:center"> <a href="https://www.facebook.com/designmodo?utm_source=Designmodo+Newsletter&utm_campaign=973843dc76-Qards_1_41_21_2016&utm_medium=email&utm_term=0_a2ae53acc1-973843dc76-45293777&goal=0_a2ae53acc1-973843dc76-45293777&mc_cid=973843dc76&mc_eid=75f43b4e50" class="fb" style="display:inline-block"> <img src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/0cb3c4b8-2253-47bd-84a6-36f000c3c26f.png" border="0" style="display:block" width="160"> </a> <a href="https://twitter.com/designmodo?utm_source=Designmodo+Newsletter&utm_campaign=973843dc76-Qards_1_41_21_2016&utm_medium=email&utm_term=0_a2ae53acc1-973843dc76-45293777&goal=0_a2ae53acc1-973843dc76-45293777&mc_cid=973843dc76&mc_eid=75f43b4e50" class="tw" style="display:inline-block;margin: 0 15px;"> <img src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/72f98d14-56f9-454e-8b1b-8c87727bd3c0.png" border="0" style="display:block" width="160"> </a> <a href="mailto:info@designmodo.com?subject=Hi!&" class="mail" style="display:inline-block"> <img src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/d921a21b-7d9e-4f7d-83eb-75de5bd22138.png" border="0" style="display:block" width="160"> </a> </td> </tr> <tr> <td height="70"></td> </tr> </table> </td> </tr> <!-- Footer --> <tr> <td style="border-top: 1px solid #B0BAC0"> <table width="100%" cellpadding="0" cellspacing="0" border="0" style="text-align:center;"> <tr> <td height="20"></td> </tr> <tr> <td class="footer" style="font-family: Source Sans Pro, Helvetica, Arial, sans-serif;font-size: 18px;color: #2F2F2F;"> <a style="color:#2F2F2F;text-decoration:none" href="mailto:info@designmodo.com?subject=Hi!&">info@designmodo.com</a> <span style="display:inline-block;margin: 0 10px;">|</span> <a class="manage" style="color:#2F2F2F;text-decoration:none" href="#">Manage Subscription</a> <span style="display:inline-block;margin: 0 10px;">|</span> <a style="color:#2F2F2F;text-decoration:none" href="#">Unsubscribe</a> </td> </tr> <tr> <td height="20"></td> </tr> </table> </td> </tr> </table> <img src="https://designmodo.us4.list-manage.com/track/open.php?u=d7b5474e1bff23f08409d4ba9&id=973843dc76&e=75f43b4e50" height="1" width="1"> </body> </html> </body></html>

Related: See More


Questions / Comments: