"E-mail Marketing"
Bootstrap 3.3.0 Snippet by rahel

<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> <html> <head> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- layout do bootstrap --> <link media="all" type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- comandos para o java --> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <!-- funcionamento do bootstrap --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- funcionamento do jquery --> <script src="http://cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.13/jquery.floatThead.min.js"></script> <!-- icone da page --><link rel="icon" type="image/png" href="http://i.imgur.com/lP9470d.png" /> <title>E-mail Marketing</title> <div class="container-fluid"> <!-- início da tabela --> <div class="row-fluid"> <div class="col-md-6"> <table> <thead> <tr> <th style="color:#e6e9ee">.</th> <th style="color:#e6e9ee">.</th> <th style="color:#e6e9ee">.</th> <th style="color:#e6e9ee">.</th> <th style="color:#e6e9ee">.</th> <th style="color:#e6e9ee">.</th> <th style="color:#e6e9ee">.</th> <th style="color:#e6e9ee">.</th> <th style="color:#e6e9ee">.</th> </tr> </thead> <tbody class="h5" style="color:Gray" align="center"> <tr> <td style="color:#e6e9ee">.</td> <td colspan="4" class="tit" align="justify"> <div class="container-fluid"> <div class="row-fluid"> <h1 align="center">E-MAIL MARKETING</h1> <h3 style="color:SandyBrown" align="center">Tópico do Marketing</h3> <p>Aqui vai uma breve explicação sobre todo o e-mail marketing, o motivo do mesmo ter sido enviado, adicione uma descrição para um entendimento do usuário. Lembrando que a ideia é que esse artigo seja enviado por e-mail, então faça algo que seus clientes queiram ler. </div> </div> </td> <td colspan="3" style="color:#e6e9ee"><img src="http://i.imgur.com/N6agOjQ.png" width="100%" align="right" class="img-responsive"/></td> <td style="color:#e6e9ee">.</td> </tr> <tr> <td colspan="9" style="color:#e6e9ee"><hr class="message-inner-separator"></td> </tr> <tr> <td style="color:#e6e9ee">.</td> <td class="degrade-verde"> <div class="container-fluid"> <div class="row-fluid"> <h2>TÍTULO 1</h2> <p>ADICIONE AQUI UMA BREVE DESCRIÇÃO DO PRIMEIRO LINK QUE O USUÁRIO DEVE ACESSAR. <p><a href="#" class="btn btn-lar btn-xs" target="_blank">Clique aqui para acessar o link</a> <p><h1><span class="glyphicon glyphicon-alert"></span></h1> </div> </div> </td> <td colspan="2" style="color:#e6e9ee">.</td> <td class="degrade-azul"> <div class="container-fluid"> <div class="row-fluid"> <h2>TÍTULO 2</h2> <p>ADICIONE AQUI UMA BREVE DESCRIÇÃO DO SEGUNDO LINK QUE O USUÁRIO DEVE ACESSAR. <p><a href="#" class="btn btn-lar btn-xs" target="_blank">Clique aqui para acessar o link</a> <p><h1><span class="glyphicon glyphicon-send"></span></h1> </div> </div> </td> <td colspan="2" style="color:#e6e9ee">.</td> <td class="degrade-ver"> <div class="container-fluid"> <div class="row-fluid"> <h2>TÍTULO 3</h2> <p>ADICIONE AQUI UMA BREVE DESCRIÇÃO DO TERCEIRO LINK QUE O USUÁRIO DEVE ACESSAR. <p><a href="#" class="btn btn-lar btn-xs" target="_blank">Clique aqui para acessar o link</a> <p><h1><span class="glyphicon glyphicon-cog"></span></h1> </div> </div> </td> <td style="color:#e6e9ee">.</td> </tr> <tr> <td colspan="9" style="color:#e6e9ee"><hr class="message-inner-separator"></td> </tr> <tr> <td colspan="9" class="roda" style="color:#434a54">.</td> </tr> <tr> <td class="roda" style="color:#434a54">.</td> <td colspan="7" class="roda" align="center"><h3><span class="glyphicon glyphicon-user"></span> (XX) 0000-0000 | email@email.com.br | www.seusite.com.br <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="15%" align="right" class="img-responsive"/></h3></td> <td class="roda" style="color:#434a54">.</td> </tr> <tr> <td colspan="9" class="roda" style="color:#434a54">.</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
<style> body { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */ background: silver; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, #e6e9ee 100%); /* FF3.6-15 */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,#e6e9ee)); /* Chrome4-9,Safari4-5 */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,#e6e9ee 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,#e6e9ee 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,#e6e9ee 100%); /* IE10 preview */ background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,#e6e9ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } h1 { font-family: impact, arial, helvetica, sans-serif; } h2 { font-family: impact, arial, helvetica, sans-serif; } h3 { font-family: impact, arial, helvetica, sans-serif; } h4 { font-family: impact, arial, helvetica, sans-serif; } h5 { font-family: impact, arial, helvetica, sans-serif; } h6 { font-family: impact, arial, helvetica, sans-serif; } p { font-family: "open sans", arial, serif; } </style> <!-- /corpo --> <!-- linha de divisão personalizada --> <style> hr.message-inner-separator { clear: both; margin-top: 10px; margin-bottom: 13px; border: 0; height: 1px; background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0)); background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0)); background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0)); } </style> <!-- /linha de divisão personalizada --> <!-- Degradê --> <style> .degrade-verde { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */ background: #36bc9b; /* Old browsers */ background: -moz-linear-gradient(-45deg, #36bc9b 0%,#36bc9b 50%,#2ba587 51%,#2ba587 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#36bc9b), color-stop(50%,#36bc9b), color-stop(51%,#2ba587), color-stop(100%,#2ba587)); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(-45deg, #36bc9b 0%,#36bc9b 50%,#2ba587 51%,#2ba587 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(-45deg, #36bc9b) 0%,#36bc9b 50%,#2ba587 51%,#2ba587 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(-45deg, #36bc9b 0%,#36bc9b 50%,#2ba587 51%,#2ba587 100%); /* IE10 preview */ background: linear-gradient(135deg, #36bc9b 0%, #36bc9b 50%, #2ba587 51%, #2ba587 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: white; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .degrade-lar { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */ background: SandyBrown; /* Old browsers */ background: -moz-linear-gradient(-45deg, SandyBrown 0%,SandyBrown 50%,#cc8141 51%,#cc8141 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,SandyBrown), color-stop(50%,SandyBrown), color-stop(51%,#cc8141), color-stop(100%,#cc8141)); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(-45deg, SandyBrown 0%,SandyBrown 50%,#cc8141 51%,#cc8141 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(-45deg, SandyBrown) 0%,SandyBrown 50%,#cc8141 51%,#cc8141 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(-45deg, SandyBrown 0%,SandyBrown 50%,#cc8141 51%,#cc8141 100%); /* IE10 preview */ background: linear-gradient(135deg, SandyBrown 0%, SandyBrown 50%, #cc8141 51%, #cc8141 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: white; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .degrade-azul { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */ background: SteelBlue; /* Old browsers */ background: -moz-linear-gradient(-45deg, SteelBlue 0%,SteelBlue 50%,#3872a2 51%,#3872a2 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,SteelBlue), color-stop(50%,SteelBlue), color-stop(51%,#3872a2), color-stop(100%,#3872a2)); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(-45deg, SteelBlue 0%,SteelBlue 50%,#3872a2 51%,#3872a2 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(-45deg, SteelBlue) 0%,SteelBlue 50%,#3872a2 51%,#3872a2 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(-45deg, SteelBlue 0%,SteelBlue 50%,#3872a2 51%,#3872a2 100%); /* IE10 preview */ background: linear-gradient(135deg, SteelBlue 0%, SteelBlue 50%, #3872a2 51%, #3872a2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: white; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .degrade-ver { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */ background: #db4453; /* Old browsers */ background: -moz-linear-gradient(-45deg, #db4453 0%,#db4453 50%,#ca3b49 51%,#ca3b49 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#db4453), color-stop(50%,#db4453), color-stop(51%,#ca3b49), color-stop(100%,#ca3b49)); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(-45deg, #db4453 0%,#db4453 50%,#ca3b49 51%,#ca3b49 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(-45deg, #db4453) 0%,#db4453 50%,#ca3b49 51%,#ca3b49 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(-45deg, #db4453 0%,#db4453 50%,#ca3b49 51%,#ca3b49 100%); /* IE10 preview */ background: linear-gradient(135deg, #db4453 0%,#db4453 50%, #ca3b49 51%, #ca3b49 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: white; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } </style> <!-- /Degradê --> <!-- Titulo --> <style> .tit { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */ background: white; /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, #e6e9ee 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,#e6e9ee)); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,#e6e9ee 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%,#e6e9ee 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%,#e6e9ee 100%); /* IE10 preview */ background: linear-gradient(135deg, rgba(255,255,255,1) 0%,#e6e9ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ -webkit-box-shadow: 3px 3px 5px #999; -moz-box-shadow: 3px 3px 5px #999; box-shadow: 3px 3px 5px #999; color: #434a54; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .btn-lar { background-color: sandybrown; color: white; border-radius: 0px; } .btn-lar:hover { background-color: sandybrown; color: white; border-radius: 0px; } .btn-ver { background-color: indianred; color: white; border-radius: 0px; } .btn-def { background-color: #434a54; color: white; border-radius: 0px; } </style> <!-- /Título --> <!-- cupom --> <style> .skew { width: 10px; height: 100px; -webkit-transform: skew(0deg); /* Chrome, Opera */ -ms-transform: skew(0deg); /* IE */ transform: skew(0deg); /* Padrão */ } .positive { -webkit-transform: skew(10deg); /* Chrome, Opera */ -ms-transform: skew(10deg); /* IE */ transform: skew(10deg); /* Padrão */ } .negative { -webkit-transform: skew(-10deg); /* Chrome, Opera */ -ms-transform: skew(-10deg); /* IE */ transform: skew(-10deg); /* Padrão */ } .cup { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffcc+0,ffffd1+100 */ background: rgb(255,255,204); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(255,255,204,1) 0%, rgba(255,255,209,1) 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,204,1)), color-stop(100%,rgba(255,255,209,1))); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(-45deg, rgba(255,255,204,1) 0%,rgba(255,255,209,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(-45deg, rgba(255,255,204,1) 0%,rgba(255,255,209,1) 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(-45deg, rgba(255,255,204,1) 0%,rgba(255,255,209,1) 100%); /* IE10 preview */ background: linear-gradient(135deg, rgba(255,255,204,1) 0%,rgba(255,255,209,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffcc', endColorstr='#ffffd1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } </style> <!-- /cupom --> <!-- rodapé --> <style> .roda { background-color: #434a54; color:white; } </style> <!-- /rodapé --> <!-- tabela --> <style> .table { border: 0; } </style> <!-- /tabela -->

Related: See More


Questions / Comments: