<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 -->
