"Newsletter, Html Email Newsletter"
Bootstrap 3.0.0 Snippet by sumi9xm

Post to Facebook Tweet this

<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 ----------> <html> <!-- / Full width container --> <table class="full-width-container" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" bgcolor="#eeeeee" style="width: 100%; height: 100%; padding: 30px 0 30px 0;"> <tr> <td align="center" valign="top"> <!-- / 700px container --> <table class="container" border="0" cellpadding="0" cellspacing="0" width="700" bgcolor="#ffffff" style="width: 700px;"> <tr> <td align="center" valign="top"> <!-- / Header --> <table class="container header" border="0" cellpadding="0" cellspacing="0" width="620" style="width: 620px;"> <tr> <td style="padding: 30px 0 30px 0; border-bottom: solid 1px #eeeeee;" align="left"> <a href="#" style="font-size: 30px; text-decoration: none; color: #000000;">MP</a> </td> </tr> </table> <!-- /// Header --> <!-- / Hero subheader --> <table class="container hero-subheader" border="0" cellpadding="0" cellspacing="0" width="620" style="width: 620px;"> <tr> <td class="hero-subheader__title" style="font-size: 43px; font-weight: bold; padding: 80px 0 15px 0;" align="left">Product Design Portfolio</td> </tr> <tr> <td class="hero-subheader__content" style="font-size: 16px; line-height: 27px; color: #969696; padding: 0 60px 90px 0;" align="left">Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</td> </tr> </table> <!-- /// Hero subheader --> <!-- / Title --> <table class="container title-block" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" valign="top"> <table class="container" border="0" cellpadding="0" cellspacing="0" width="620" style="width: 620px;"> <tr> <td style="border-bottom: solid 1px #eeeeee; padding: 35px 0 18px 0; font-size: 26px;" align="left">Recent Works</td> </tr> </table> </td> </tr> </table> <!-- /// Title --> <!-- / Projects list --> <table class="container projects-list" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-top: 25px;"> <tr> <td> <table class="container" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="left"> <a href="#"><img src="http://dev2.slicejack.com/portfolio-email/img/img1.jpg" width="235" height="235" border="0" style="display: block;"></a> </td> <td align="left"> <a href="#"><img src="http://dev2.slicejack.com/portfolio-email/img/img2.jpg" width="235" height="235" border="0" style="display: block;"></a> </td> <td align="left"> <a href="#"><img src="http://dev2.slicejack.com/portfolio-email/img/img3.jpg" width="235" height="235" border="0" style="display: block;"></a> </td> </tr> <tr> <td align="left"> <a href="#"><img src="http://dev2.slicejack.com/portfolio-email/img/img4.jpg" width="235" height="235" border="0" style="display: block;"></a> </td> <td align="left"> <a href="#"><img src="http://dev2.slicejack.com/portfolio-email/img/img5.jpg" width="235" height="235" border="0" style="display: block;"></a> </td> <td align="left"> <a href="#"><img src="http://dev2.slicejack.com/portfolio-email/img/img6.jpg" width="235" height="235" border="0" style="display: block;"></a> </td> </tr> </table> </td> </tr> </table> <!-- /// Projects list --> <!-- / Title --> <table class="container title-block" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" valign="top"> <table class="container" border="0" cellpadding="0" cellspacing="0" width="620" style="width: 620px;"> <tr> <td style="border-bottom: solid 1px #eeeeee; padding: 35px 0 18px 0; font-size: 26px;" align="left">Simple text</td> </tr> </table> </td> </tr> </table> <!-- /// Title --> <!-- / Paragraph --> <table class="container paragraph-block" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" valign="top"> <table class="container" border="0" cellpadding="0" cellspacing="0" width="620" style="width: 620px;"> <tr> <td class="paragraph-block__content" style="padding: 25px 0 18px 0; font-size: 16px; line-height: 27px; color: #969696;" align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </td> </tr> </table> <!-- /// Paragraph --> <!-- / Half block --> <table class="container half-block" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-top: 25px;"> <tr> <td> <table class="container" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td class="half-block__image" style="width: 353px; height: 325px;" width="353" height="325" background="http://dev2.slicejack.com/portfolio-email/img/img14.jpg"> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 353px; height: 325px;" width="353" height="325"> <v:fill type="frame" src="http://dev2.slicejack.com/portfolio-email/img/img14.jpg" color="#488bd3" /> <v:textbox inset="0,0,0,0"> <![endif]--> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> </td> <td class="half-block__content" style="width: 50%; padding: 0 25px 0 25px; font-size: 16px; line-height: 27px; color: #969696; text-align: center;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. </td> </tr> </table> </td> </tr> </table> <!-- /// Half block --> <!-- / Half block --> <table class="container half-block" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <table class="container" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td class="half-block__content" style="width: 50%; padding: 0 25px 0 25px; font-size: 16px; line-height: 27px; color: #969696; text-align: center;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. </td> <td class="half-block__image" style="width: 353px; height: 325px;" width="353" height="325" background="http://dev2.slicejack.com/portfolio-email/img/img15.jpg"> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 353px; height: 325px;" width="353" height="325"> <v:fill type="frame" src="http://dev2.slicejack.com/portfolio-email/img/img15.jpg" color="#488bd3" /> <v:textbox inset="0,0,0,0"> <![endif]--> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> </td> </tr> </table> </td> </tr> </table> <!-- /// Half block --> <!-- / Divider --> <table class="container" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-top: 25px;" align="center"> <tr> <td align="center"> <table class="container" border="0" cellpadding="0" cellspacing="0" width="620" align="center" style="border-bottom: solid 1px #eeeeee; width: 620px;"> <tr> <td align="center"> </td> </tr> </table> </td> </tr> </table> <!-- /// Divider --> <!-- / CTA Block --> <table class="container cta-block" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" valign="top"> <table class="container" border="0" cellpadding="0" cellspacing="0" width="620" style="width: 620px;"> <tr> <td class="cta-block__title" style="padding: 35px 0 0 0; font-size: 26px; text-align: center;">About Us</td> </tr> <tr> <td class="cta-block__content" style="padding: 20px 0 27px 0; font-size: 16px; line-height: 27px; color: #969696; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td> </tr> <tr> <td align="center"> <table class="container" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="cta-block__button" width="230" align="center" style="width: 200px;"> <a href="#" style="border: 3px solid #eeeeee; color: #969696; text-decoration: none; padding: 15px 45px; text-transform: uppercase; display: block; text-align: center; font-size: 16px;">Visit Us</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <!-- /// CTA Block --> <!-- / Divider --> <table class="container" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-top: 25px;" align="center"> <tr> <td align="center"> <table class="container" border="0" cellpadding="0" cellspacing="0" width="620" align="center" style="border-bottom: solid 1px #eeeeee; width: 620px;"> <tr> <td align="center"> </td> </tr> </table> </td> </tr> </table> <!-- /// Divider --> <!-- / Info Bullets --> <table class="container info-bullets" border="0" cellpadding="0" cellspacing="0" width="100%" align="center"> <tr> <td align="center"> <table class="container" border="0" cellpadding="0" cellspacing="0" width="620" align="center" style="width: 620px;"> <tr> <td class="info-bullets__block" style="padding: 30px 30px 15px 30px;" align="center"> <table class="container" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td class="info-bullets__icon" style="padding: 0 15px 0 0;"> <img src="http://dev2.slicejack.com/portfolio-email/img/img13.png"> </td> <td class="info-bullets__content" style="color: #969696; font-size: 16px;">contact@example.com</td> </tr> </table> </td> <td class="info-bullets__block" style="padding: 30px 30px 15px 30px;" align="center"> <table class="container" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td class="info-bullets__icon" style="padding: 0 15px 0 0;"> <img src="http://dev2.slicejack.com/portfolio-email/img/img11.png"> </td> <td class="info-bullets__content" style="color: #969696; font-size: 16px;">(541) 754-3010</td> </tr> </table> </td> </tr> <tr> <td class="info-bullets__block" style="padding: 30px;" align="center"> <table class="container" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td class="info-bullets__icon" style="padding: 0 15px 0 0;"> <img src="http://dev2.slicejack.com/portfolio-email/img/img12.png"> </td> <td class="info-bullets__content" style="color: #969696; font-size: 16px;">New York, 222 West 23rd</td> </tr> </table> </td> <td class="info-bullets__block" style="padding: 30px;" align="center"> <table class="container" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td class="info-bullets__icon" style="padding: 0 15px 0 0;"> <img src="http://dev2.slicejack.com/portfolio-email/img/img12.png"> </td> <td class="info-bullets__content" style="color: #969696; font-size: 16px;">Paris, Champ de Mars 54</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <!-- /// Info Bullets --> <!-- / Social nav --> <table class="container" border="0" cellpadding="0" cellspacing="0" width="100%" align="center"> <tr> <td align="center"> <table class="container" border="0" cellpadding="0" cellspacing="0" width="620" align="center" style="border-top: 1px solid #eeeeee; width: 620px;"> <tr> <td align="center" style="padding: 30px 0 30px 0;"> <a href="#"> <img src="http://dev2.slicejack.com/portfolio-email/img/img7.png" border="0"> </a> </td> <td align="center" style="padding: 30px 0 30px 0;"> <a href="#"> <img src="http://dev2.slicejack.com/portfolio-email/img/img8.png" border="0"> </a> </td> <td align="center" style="padding: 30px 0 30px 0;"> <a href="#"> <img src="http://dev2.slicejack.com/portfolio-email/img/img9.png" border="0"> </a> </td> <td align="center" style="padding: 30px 0 30px 0;"> <a href="#"> <img src="http://dev2.slicejack.com/portfolio-email/img/img10.png" border="0"> </a> </td> </tr> </table> </td> </tr> </table> <!-- /// Social nav --> <!-- / Footer --> <table class="container" border="0" cellpadding="0" cellspacing="0" width="100%" align="center"> <tr> <td align="center"> <table class="container" border="0" cellpadding="0" cellspacing="0" width="620" align="center" style="border-top: 1px solid #eeeeee; width: 620px;"> <tr> <td style="text-align: center; padding: 50px 0 10px 0;"> <a href="#" style="font-size: 28px; text-decoration: none; color: #d5d5d5;">MailPortfolio</a> </td> </tr> <tr> <td align="middle"> <table width="60" height="2" border="0" cellpadding="0" cellspacing="0" style="width: 60px; height: 2px;"> <tr> <td align="middle" width="60" height="2" style="background-color: #eeeeee; width: 60px; height: 2px; font-size: 1px;"><img src="http://dev2.slicejack.com/portfolio-email/img/img16.jpg"></td> </tr> </table> </td> </tr> <tr> <td style="color: #d5d5d5; text-align: center; font-size: 15px; padding: 10px 0 60px 0; line-height: 22px;">Copyright © 2015 <a href="#" target="_blank" style="text-decoration: none; border-bottom: 1px solid #d5d5d5; color: #d5d5d5;">Sumi9xm</a>. <br />All rights reserved.</td> </tr> </table> </td> </tr> </table> <!-- /// Footer --> </td> </tr> </table> </td> </tr> </table>

Related: See More

Material Kit React
Bootstrap4 newsletter
Bootstrap Subscribe Newsletter Form
Newsletter Subscription Form In Bootstrap 4 -w3hubs.com

Questions / Comments: