Nao excluir essa pagina!
Imagens usadas para a assinatura de e-mail
<html><head>
<title>Assinatura de E-mail</title>
<style>
body{
background: url(http://neobpo.com.br/wp-content/uploads/bg-assinatura-1024x576.jpg);
background-size: 100%;
font-family: Verdana;
margin: 0px;
padding: 0px;
}
h1{
text-transform: uppercase;
}
p{
color:#fff;
text-transform: uppercase;
}
label{
font-size: 10px;
}
ul{
list-style:none;
}
input[type=text]{
border:#ccc 1px solid;
padding: 10px;
}
table{
margin:0px;
padding: 0px;
border:none;
}
a{
color: #fff;
margin:0px;
padding: 0px;
line-height: 12px;
font-size: 12px;
text-decoration: none;
}
h4{
color:#312782;
}
.content{
margin:0px auto;
width:95%;
}
.col{
color:#fff;
float: left;
margin:0 20px 0 0;
position: relative;
width: 55%;
}
.col h1{
color:#E35154;
text-transform: uppercase;
}
.col .box{
background:#fff;
border-radius: 10px;
float: left;
margin: 0 0 20px;
padding: 10px;
width: 100%;
}
.col2{
color:#fff;
float: left;
padding: 0 10px;
width: 40%;
}
.col2 h1{
color:#fff;
}
.col2 .box{
background:#E35154;
border-radius: 10px;
font-size: 12px;
height:150px;
margin: 0 0 20px;
padding: 10px;
}
.col2 .box ul li{
margin: 0 0 10px;
}
.Cnome{
margin: 0 0 10px;
width: 100%;
}
.Cnome input{
width: 100%;
}
.Cdir{
float: left;
margin: 0 0 10px;
width: 100%;
}
.Cdir input{
float: left;
width: 50%;
}
.Ctel{
margin: 0 0 10px;
width: 100%;
}
.Ctel input{
width: 100%;
}
.clogo{
width:297px;
}
.clogo img{
width:100%;
}
.cselo{
width:60px;
}
.cselo img{
width:100%;
}
.cdivisoria{
width:5px;
}
.ctexto td{
width:380px;
}
.txt{
font-family: verdana;
font-size:9pt;
color:#312782;
}
.nome{
font-family: verdana;
font-size: 14px !important;
font-weight: bold;
}
.ass{
border:1px solid transparent;
height: 88px;
width: 850px;
}
.socialmedia{
width: 75px;
height: 24px;;
}
.socialmedia img{
width: 23px;
}
.campo{
margin:20px 0;
width:600px;
}
.campo input[type=text]{
height:40px;
}
.sm{
margin: 3px 0 0;
width:80px;
}
.sm a{
height:26px;
width: 25px;
}
.sm img{
height:26px;
width:25px;
}
.imagens{
position: relative;
top:-200px;
left:200px;
width: 350px;
}
.imagens img{
width: 340px;
}
.imagens2{
position: relative;
top:-80px;
left:200px;
width: 300px;
}
.imagens2 img{
width: 340px;
}
.imagens3{
position: relative;
top:-130px;
left:253px;
width: 300px;
}
.imagens3 img{
width: 280px;
}
</style>
</head>
<body>
<div class="content">
<div class="col">
<h1>
Passo 1
</h1>
<p>
Preencha seus dados<br>
corretamente no campo abaixo
</p>
<div class="box">
<div class="Cnome">
<input type="text" id="nome-sobrenome" name="texto-digitado" value="" placeholder="Nome e Seobrenome" size="30">
</div>
<div class="Cdir">
<input type="text" id="cargo" name="texto-digitado" value="" placeholder="Cargo" size="30">
<input type="text" id="diretoria" name="texto-digitado" value="" placeholder="Diretoria" size="30">
</div>
<div class="Ctel">
<input type="text" id="telefone" name="texto-digitado" value="" placeholder="Telefones para contato" size="30">
</div>
</div>
<h1>
Passo 2
</h1>
<p>
Selecione a sua assinatura <br>
<label>
(Clique com o mouse e arraste até que ela fique inteira azul - selecionada)
</label><br>
Aperte os botões <b>control + C</b> para copiar
</p>
<div class="box">
<table cellspacing="0" cellpadding="0" class="ass">
<tbody><tr>
<!--imagem dinamica-->
<td class="clogo">
<img src="http://neobpo.com.br/wp-content/uploads/assinatura.gif">
</td>
<!-- Divisoria-->
<td class="cdivisoria">
</td>
<!--Selo-->
<td class="cselo">
<img src="http://neobpo.com.br/wp-content/uploads/selo-gptw.png">
</td>
<!-- Texto-->
<td>
<table cellspacing="0" cellpadding="0" class="ctexto">
<tbody><tr>
<td>
<table cellspacing="0" cellpadding="0" style="width:100%">
<tbody><tr>
<td class="txt">
<b id="ns" class="nome"></b>
<br>
<span id="car"></span> |
<span id="dir"></span>
<br>
<span id="tel"></span>
<br>
<a href="http://neobpo.com.br" style="color:#312782; margin-bottom:5px;">
<b>neobpo.com.br</b>
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" class="sm">
<tbody><tr>
<td>
<!--Facebook-->
<a href="https://www.facebook.com/neobpo" target="_blank">
<img src="http://neobpo.com.br/wp-content/uploads/face.png" title="Facebook" style="height:25px; width:26px;">
</a>
</td>
<td>
<!--Instagram-->
<a href="https://www.instagram.com/neobpo/?hl=pt-br" target="_blank">
<img src="http://neobpo.com.br/wp-content/uploads/insta.png" title="Instagram" style="height:25px; width:27px;">
</a>
</td>
<td>
<!--Linkedin-->
<a href="https://www.linkedin.com/company/neobpo/mycompany/" target="_blank">
<img src="http://neobpo.com.br/wp-content/uploads/linkedin.png" title="linkedin" style="height:25px; width:27px;">
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</div>
<div class="col2">
<h1>
Passo 3
</h1>
<p>
Abra o outlook e<br>
siga os passos abaixo
</p>
<div class="box">
<ul>
<li>
Arquivo
</li>
<li>
Opções
</li>
<li>
E-mail
</li>
<li>
Assinaturas
</li>
</ul>
<div class="imagens">
<img src="http://neobpo.com.br/wp-content/uploads/Imagem1.png">
</div>
</div>
<div class="box">
<ul>
<li>
Clique em novo;
</li>
<li>
Dê um nome para a<br>
sua assinatura;
</li>
<li>
clique em ok
</li>
</ul>
<div class="imagens2">
<img src="http://neobpo.com.br/wp-content/uploads/img-4-1.png">
</div>
</div>
<div class="box">
<ul>
<li>
Clique no campo de edição de<br>
assinatura
</li>
<li>
Aperte os botões ctrl + v para<br>
para colar sua assinatura
</li>
<li>
Verifique se está selecionada<br>
sua assinatura no quadro <br>
(escolha sua assinatura padrão)
</li>
</ul>
<div class="imagens3">
<img src="http://neobpo.com.br/wp-content/uploads/img-5.png">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
var $exibirnome = $("#ns");
var $exibircargo = $("#car");
var $exibirdiretoria = $("#dir");
var $exibirtel = $("#tel");
$("#nome-sobrenome").on("keyup", function () {
var texto = $(this).val();
$exibirnome.text(texto);
});
$("#cargo").on("keyup", function () {
var texto = $(this).val();
$exibircargo.text(texto);
});
$("#diretoria").on("keyup", function () {
var texto = $(this).val();
$exibirdiretoria.text(texto);
});
$("#telefone").on("keyup", function () {
var texto = $(this).val();
$exibirtel.text(texto);
});
});
</script>
</body></html>
