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">
                                &nbsp;
                            </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>