Ir para conteúdo
WAD - Soluções

Formulário de contato recaptcha

Recommended Posts

Olá, estou tentando utilizar este formulário de contato com o recaptcha, porém apresenta erro que não estou conseguindo resolver.
ERRO: Por favor faça a verificação do captcha abaixo

Link formulário: http://cartorio1bg.com.br/teste/andre/formulario-contato.php
PHP INFO MEU SERVIDOR: http://cartorio1bg.com.br/teste/andre/info.php
link: error_log : http://cartorio1bg.com.br/teste/andre/error_log

 

Arquivos necessário: 
 


Post original deste formulário: https://wiki.dialhost.com.br/formulario-de-contato-php-captcha/

Código HTML – formulario-contato.php

<?php	
	include 'envia.php';	
?>
<html>
	<head>
		<meta charset="utf8">
		<title>Formulário de contato</title>

		<!-- Aqui adiciona o script do ReCaptcha -->
		<script src='https://www.google.com/recaptcha/api.js'></script>

		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="container">
			<h1>Este é um teste de formulário de contato</h1>
			<form method="POST" action="formulario-contato.php">
				<label>Digite seu nome:
					<input type="text" name="nome" value="" placeholder="ex: João" required>
				</label>
				<label>Digite seu e-mail:
					<input type="email" name="email" value="" placeholder="ex: joaoclb@gmail.com" required>
				</label>
				<label>Digite o assunto:
					<input type="text" name="assunto" value="" placeholder="ex: orçamento" required>
				</label>
				<label>Digite sua mensagem:
					<input type="text" name="msg" value="" placeholder="Digite sua mensagem aqui" required>
				</label>
				
				<!-- Div do ReCaptcha foi adicionado no final do formulário -->
				<div class="g-recaptcha" data-sitekey="|*SEU-SITE-KEY*|"></div>
				
				<input class="send" type="submit">
			</form>
		</div>
	</body>
</html>

 

Código PHP – envia.php
 

<?php

//Defino a Chave do meu site
$secret_key = '|*SEU-SECRET-KEY*|';

//Pego a validação do Captcha feita pelo usuário
$recaptcha_response = $_POST['g-recaptcha-response'];

// Verifico se foi feita a postagem do Captcha 
if(isset($recaptcha_response)){
		
	// Valido se a ação do usuário foi correta junto ao google
	$answer = 
		json_decode(
			file_get_contents(
				'https://www.google.com/recaptcha/api/siteverify?secret='.$secret_key.
				'&response='.$_POST['g-recaptcha-response']
			)
		);

	// Se a ação do usuário foi correta executo o restante do meu formulário
	if($answer->success) {
		
		// Carrego a classe PHPMailer através do Autoload
		include "PHPMailerAutoload.php";

		// Instancio a classe PHPMailer
		$msg = new PHPMailer();

		// Faço todas as configurações de SMTP para o envio da mensagem
		$msg->CharSet = "UTF-8";
		$msg->isSMTP();                                      
		$msg->Host = '|*SMTP.SEUDOMINIO.COM.BR*|';  
		$msg->SMTPAuth = true;                              
		$msg->Username = '|*SEU-EMAIL@SEUDOMINIO.COM.BR*|';                 
		$msg->Password = '|*SUA-SENHA*|';                           
		$msg->Port = 587;   
		$msg->SMTPAutoTLS = false;
		$msg->AuthType = 'PLAIN';

		//Defino o remetente da mensagem
		$msg->setFrom('|*SEU-EMAIL@SEUDOMINIO.COM.BR*|','|*NOME-DO-SEUEMAIL*|');

		// Defino a quem esta mensagem será respondida, no caso, para o e-mail
		// que foi cadastrado no formulário
		$msg->addReplyTo($_POST['email'], $_POST['nome']);
		
		// Defino a mensagem como mensagem de texto (Ou seja não terá formatação HTML)
		$msg->IsHTML(false);

		// Adiciono o destinatário desta mensagem, no caso, 
		//minha conta de contatos comerciais.
		$msg->AddAddress('|*SEU-EMAIL@SEUDOMINIO.COM.BR*|', '|*NOME-DO-SEUEMAIL*|');
		
		// Defino o assunto que foi digitado no formulário
		$msg->Subject  = $_POST['assunto'];

		// Defino a mensagem que foi digitada no formulário
		$msg->Body = $_POST['msg'];

		// Defino a mensagem alternativa que foi digitada no formulário.
		// Esta mensagem é utilizada para validações AntiSPAM e por isto
		// é muito recomendado que utilize-a
		$msg->AltBody = $_POST['msg'];

		// Faço o envio da mensagem
		$enviado = $msg->Send();
		
		// Limpo todos os registros de destinatários e arquivos 
		$msg->ClearAllRecipients();

		// Caso a mensagem seja enviada com sucesso ela retornará sucesso
		// senão, ela retornará o erro ocorrido			
		if ($enviado){
			echo "E-mail enviado com sucesso!";
		}
		else {
			echo "Não foi possível enviar o e-mail.";
			echo "<b>Informações do erro:</b> " . $msg->ErrorInfo;
		}
	}

	// Caso o Captcha não tenha sido validado 
	//retorno uma mensagem de erro. 
	else {
		echo "Por favor faça a verificação do captcha abaixo";
	}
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa tarde, 

Pelo que observei no código acima, a mensagem retornada ocorre quando não há uma resposta da API recaptcha do google.

Você definiu a variável $secret_key com a sua chave do google? caso contrário deve obter sua chave e substituir no seu código....

$secret_key = '|*SEU-SECRET-KEY*|';

 

Stack interessante sobre o assunto:

https://pt.stackoverflow.com/questions/59952/como-implementar-recaptcha-do-google-no-meu-site

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sergio, coloquei os códigos mesmo assim apresentou este mesmo erro.


Apresenta este erro

Warning: file_get_contents(): https:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/cartorio1bg/public_html/teste/andre/envia.php on line 19

Warning: file_get_contents(https://www.google.com/recaptcha/api/siteverify?secret=6Le2gy0UAAAAAAIKXq5uAI_SSj7etX3_ek22cyt2&response=03AOmkcwLUcYlGCpH9K6u5YZUPZ7wLGuAYDX6yvqvJwPufaSlODTLro-IEXuHPWZjw4spR4VQJbf_3uDrmWaC0wYwWZlzxV4qWQCpaMQFTBKWkSwYfZ2S45toQf93ELFvf0L1yr3i8LLVaTuAdtv4uN48FshI70m1pIHpQlgUnhtXoMJH8I4h58ELpvhrQGFyZxbz2qBzHQlLEFBnjEZV8dRgSwMUkyl35rhJ-Aub88o8WdoziSihz7QD9O-WtoClRVsJuLyqNQx5YdY2X5Y5a7EqzWCoqaJvPBbIX2oTLAC_Vj189RJdgUXXYqcibMUqIxho7iygy1tF5Qih7NgaOgd4VBAT24NYXgQ-7HTGK9vJSZO1f2vuA2RKa5DiRuyL5fJcX_qoaKiOdj89DG2kcrXW5z4w1jD21RlZnWM365HY4ZVw5JeSRkAk8HmuhgZUkGTONfLZrluXR): failed to open stream: no suitable wrapper could be found in /home/cartorio1bg/public_html/teste/andre/envia.php on line 19

Notice: Trying to get property of non-object in /home/cartorio1bg/public_html/teste/andre/envia.php on line 23



formulario-contato.php

<!-- Div do ReCaptcha foi adicionado no final do formulário -->
<div class="g-recaptcha" data-sitekey="6Le2gy0UAAAAABBuFkDBnZBIF5uJqoOLBGFn4F4o"></div>

envia.php

//Defino a Chave do meu site
$secret_key = '6Le2gy0UAAAAAAIKXq5uAI_SSj7etX3_ek22cyt2';

 

Vou anexar o print da página do google.
http://cartorio1bg.com.br/teste/andre/foto.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

Provavelmente vcs estão invertendo a site key com a secret key

Seguindo o exemplo do link que eu passei o arquivo php ficaria assim:
 

formcapcha.php


<?php
 
// busca a biblioteca recaptcha
require_once "recaptchalib.php";
// sua Secret Key
$secret = "sua-secret-key-sua-secret-key-sua-secret-key";
 
// resposta vazia
$response = null;
 
// verifique a chave secreta
$reCaptcha = new ReCaptcha($secret);
 
// se submetido, verifique a resposta
if($_POST){
  if ($_POST["g-recaptcha-response"]) {
  $response = $reCaptcha->verifyResponse(
          $_SERVER["REMOTE_ADDR"],
          $_POST["g-recaptcha-response"]
      );
  }
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
<title>Como Integrar o “No CAPTCHA reCAPTCHA” do Google no Seu Site</title>
  </head>
 
  <body>
<?php
      //foreach ($_POST as $key => $value) {
          //echo '<p><strong>' . $key.':</strong> '.$value.'</p>';
      //}
?>
<?php
      if ($response != null && $response->success) {
        echo "Olá, " . $_POST["name"] . " (" . $_POST["email"] . "), obrigado por enviar seu formulário!";
      } else {
?> 
    <form action="" method="post">
 
      <label for="name">Nome:</label>
      <input name="name" required /><br />
 
      <label for="email">E-mail:</label>
      <input name="email" type="email" required /><br />
       <!--Sua site Key-->
      <div class="g-recaptcha" data-sitekey="sua-site-key-sua-site-key-sua-site-key"></div>
 
      <input type="submit" value="Enviar" />
 
    </form>
<?php } ?> 
    <!--js-->
    <script src='https://www.google.com/recaptcha/api.js?hl=pt-BR'></script>
 
  </body>
</html>

 

Lembrando que você precisa cadastrar o endereço do seu site na API para que ele seja autorizado pelo google, para testes eu cadastrei o localhost mesmo e deu tudo certo.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Erro  ... erro ... erro ...  
Cara muito obrigado pela ajuda, mas quando se trata de Locaweb e ou Uolhost ..... tudo é mais complicado ....

 

Consegui assim depois de muito pesquisar :

$curl = curl_init();

curl_setopt_array($curl, [
	CURLOPT_RETURNTRANSFER => true,
	CURLOPT_POST => true,
	CURLOPT_URL => 'https://www.google.com/recaptcha/api/siteverify',
	CURLOPT_POSTFIELDS => [
		'secret' => 'secret-key secret-key secret-key secret-key secret-key ',
		'response' => $_POST['g-recaptcha-response'],
		'remoteip' => $_SERVER['REMOTE_ADDR']
		]
		]);
		
		$response = json_decode(curl_exec($curl));
		curl_close($curl);
		
		if( !$response->success ){
			echo "Negado";
		} else {
////// meu códico php mailer /////////

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Caros amigos, ta aqui a solução, para quem quer usar este formulário.

1 Criar um arquivo php.ini

allow_url_fopen = On
allow_url_include = On

no arquivo .htaccess:
suPHP_ConfigPath /home/SEU_DIREITOR_CONFORME_CADA_SITE/public_html/php.ini 

No meu ficou assim: 
suPHP_ConfigPath /home/cartorio1bg/public_html/php.ini 


Agora que falta para ficar bom mesmo seria ter um validação no formulário, que mesmo você preenchendo todos os campos deixando apenas o recaptcha, não selecionado não fosse possível enviar o formulário. Se alguém Souber fazer isto, ficaria um formulário de fácil uso para todos na internet utiliza, de todos que já vi na internet este foi que achei mais simples para min que nível de programação e super baixo. 

Sergio S. F. Pereira e gersonab

Compartilhar este post


Link para o post
Compartilhar em outros sites

WAD - Soluções

Da forma como você mencionou eu não consegui ainda, mas consegui ocultando o botão submit e liberando ele somente depois de marcar o captcha, ele tem uma função de callback que retorna dados ao clicar no checkbox.

Dessa forma criamos a função que libera o botão e incluímos ela com a tag data-callback="valida_captcha" na div que faz a chamada do captcha (onde valida_captcha é a função que vai liberar o botão submit)

No head


<script>
function valida_captcha() {
    $('#enviar').show();
}
</script>

 

Na DIV


<div class="g-recaptcha" data-callback="valida_captcha"  data-sitekey="SUA SITE KEY"></div>

E o botão submit


<input type="submit" style="display:none" value="Enviar" id="enviar"/>

 

Se alguém descobrir outra forma de validar diz aí pra gente

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sergio S. F. Pereira

Show, este solução que você vez, mais para usuário leigo se o cara não ver o botão talvez ele nem preencha o formulário. Eu achei um formulário mais no meu serviço mesmo fazendo esta últimas configuração ele não funcionou. 

Ele também precisa se implementado o classe PHPMailer. Isto já esta além dos meus conhecimentos.
Erro: 
reCAPTCHA Verificado falhou! Códigos de erro: invalid-input-secret
LINK do sistema: http://cartorio1bg.com.br/teste/


https://bootstrapious.com/p/bootstrap-recaptcha

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia, Todos.
Primeiro lugar gostaria da ajuda de todos para melhorar este formulário.
Minha ideia, formulário simples de fácil ajuda para todos.

Implementar:
- Enviou de imagem em anexo
- Incluir mais campos
- Melhorar o layout do e-mail que será enviado para pessoa (os e-mails que recebo através do formulário estou achando muito pobre).

(Se alguém não entendeu a descrição pode reclamar).

Consegui com ajuda do meu primo, colocar para só enviar o e-mail após clicar não só robô.

Link do formulário atualmente: http://cartorio1bg.com.br/teste/formulario/

Atualize apenas a página index.php, segue o código.


 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não sei porque o fórum, não deixou eu posta o código.

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf8">
		<title>Formulário de contato</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="container">
			<h1>Este é um teste de formulário de contato</h1>
			<?php include("envia.php"); ?>
			<form method="POST" id="form" action="index.php">
				<label>Digite seu nome:
					<input type="text" name="nome" placeholder="ex: João" required>
				</label>
				<label>Digite seu e-mail:
					<input type="email" name="email"  placeholder="ex: joaoclb@gmail.com" required>
				</label>
				<label>Digite o assunto:
					<input type="text" name="assunto"  placeholder="ex: orçamento" required>
				</label>
				<label>Digite sua mensagem:
					<input type="text" name="msg" placeholder="Digite sua mensagem aqui" required>
				</label>

				 <div class="g-recaptcha" data-sitekey="SEU_KEY"></div>
				
				<input class="send" type="submit" id="input">
			</form>
		</div>
	</body>	
	<script src="https://www.google.com/recaptcha/api.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript">
		//Toda Vez que o usuário clicar em enviar esse método é chamado
	 	$('#form').on('submit', function (e) {
            var response = grecaptcha.getResponse();
            if(response.length == 0 ||  response == '' || response === false ) {
                alert('Valide o captcha');
                e.preventDefault();
            }
        });
	</script>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá, talvez esta seja a área incorreta.

Porem alguém tem esse Formulário de contato bootstrap SMTP sem esse ReCaptcha ?? o que eu tenho sem este captcha não esta funcionando e percebi que esse tem autenticação SMTP. 

O que encontrei na internet, não sei se tem algo haver porem o php das hospedagem hoje quase todos estão na versão mas recente, e os formulario em SMTP geralmente não

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por reginaldo123
      boa tarde 
       
      quero chamar um arquivo. php para realizar uma consulta ao banco de dados , e exibir as informações , é tipo um <form action="">, so que eu quero usar um link <a> como passar as variaveis , para o arquivo.php?, é tipo o site do youtube apresenta varios videos , e ao clicar no video é redirecionado para outra pagina.
    • Por AV Lammel
      Olá pessoal. Sou novato tanto aqui quanto nas linguagens de programação.    Exemplo que vou me referir: http://aldolammel.com/emulador/dia922.php    Eu gostaria de digitar um código no textfield "Fotografia", pressionar o botão submit "Fotografia" e fazer o PHP+MySQL(+script?) trazer-me a URL específica daquele código específico digitado. A URL deve ser aberta em uma nova aba do navegador.    A propósito, esse comportamento precisa ser replicado para os outros dois forms (Mapas, Vídeos).   Aqui é uma print do meu db: https://i.imgur.com/zax5xI6.gif
    • Por yeahboy
      Quero que ao clicar em "Enviar consulta", execute um script .php que envie os dados no formulário para um .txt
      Eu mandaria pra db, mas ainda não aprendi, minha ideia com isso é apenas aprendizado em php, com testes locais.

    • Por MAKAVELIQUE
      Pessoal, imaginem a seguinte situação: o usuário A clica no botão enviar no mesmo instante que o usuário B, caso a ação do sql seja um comando update no mesmo campo, id=7 por exemplo e isso acontecer exatamente no mesmo instante, ocorre perca de dados? 
      <?php $update = "UPDATE br_gang SET i='$i', data= NOW() WHERE id='$id'"; $query = mysqli_query($update, $conn) or die (mysqli_error($conn)); if($update==true){ echo "<script>alert ('DADOS SALVOS COM SUCESSO, BOA SORTE!');</script>"; } ?> Se isso acontecer e ocorrer perca de dados, qual o procedimento possível para resolver o problema?
    • Por Dionizio
      Galera, boa  noite!
       
      Estou iniciando mexer com a linguagem php. e estou com o seguinte problema, não consigo exibe um valor do banco em minha pagina.
      por exemplo queria pegar o valor do nome da minha tabela e não consigo. teria como alguém me ajudar
       
       <div class="st-title"> Dionizio</div>
       
      Minha tabela
       
      DROP TABLE IF EXISTS `clientes`;
      /*!40101 SET @saved_cs_client     = @@character_set_client */;
      /*!40101 SET character_set_client = utf8 */;
      CREATE TABLE `clientes` (
        `id` int(11) NOT NULL,
        `id_user` int(11) DEFAULT NULL,
        `nome` varchar(100) NOT NULL,
        `agenda` varchar(15) DEFAULT NULL,
        `agenda_cor` varchar(10) NOT NULL DEFAULT '#000000',
        `data` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
        `End` varchar(100) DEFAULT NULL,
        `Num` varchar(5) DEFAULT NULL,
        `Bairro` varchar(50) DEFAULT NULL,
        `Cidade` varchar(50) DEFAULT NULL,
        `UF` varchar(2) DEFAULT NULL,
        `Cep` varchar(9) DEFAULT NULL,
        `Fone` varchar(255) DEFAULT NULL,
        `Email` varchar(50) DEFAULT NULL,
        `Rg` varchar(22) DEFAULT NULL,
        `Cpf` varchar(14) DEFAULT NULL,
        `senha` varchar(32) DEFAULT NULL,
        `usuario` varchar(200) DEFAULT NULL,
       `Aniversario` timestamp NULL DEFAULT NULL,
        `Sexo` enum('F','M','T') NOT NULL,
        `Indicacao` varchar(100) DEFAULT NULL,
        `Obs` varchar(50) DEFAULT NULL
      ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
      /*!40101 SET character_set_client = @saved_cs_client */;
       
      Esse é meu arquivo painel.php
       
      <?php
      session_start();
      include('conexao.php');
      include('verifica_login.php');

      $query = "SELECT * FROM clientes";
      $result = mysqli_query($conexao, $query);
      $row = mysqli_num_rows($result);

      ?>

      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          
          <!-- Basic -->
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Seja bem-vindo!</title>
          <meta name="description" content="">
          <meta name="keywords" content="">
          
          <!-- Mobile Specific Metas -->
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
          
          <!-- Load Fonts -->
          <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&amp;subset=cyrillic" rel="stylesheet">
          
          <!-- CSS -->
          <link rel="stylesheet" href="css/basic.css" />
          <link rel="stylesheet" href="css/layout.css" />
          <link rel="stylesheet" href="css/font-awesome.min.css">    
          <link rel="stylesheet" href="css/ionicons.min.css" />
          <link rel="stylesheet" href="css/owl.carousel.css" />
          <link rel="stylesheet" href="css/magnific-popup.css" />
          <link rel="stylesheet" href="css/animate.css" />
          
          <!--[if lt IE 9]>
          <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
          <![endif]-->
          
          <!-- Favicon -->
          <link rel="shortcut icon" href="img/painel/favicon.ico">
          
      </head>
      <body>
          
          
          <!-- Page -->
          <div class="page" id="home-section">
              <!-- Preloader -->
              <div class="preloader">
                  <div class="centrize full-width">
                      <div class="vertical-center">
                          <div class="spinner">
                              <div class="double-bounce1"></div>
                              <div class="double-bounce2"></div>
                          </div>
                      </div>
                  </div>
              </div>
              <!-- Started Background -->
              <div class="started-bg">
                  <div class="slide" style="background-image: url(img/painel/slide-bg.jpg);"></div>
              </div>
              <!-- Header -->
              <header>
                  <div class="top-menu">
                      <ul>
                          <li class="active">
                              <a class="btn_animated" href="#home-section"><span class="circle">Home</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#about-section"><span class="circle">About</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#skills-section"><span class="circle">Skills</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#experience-section"><span class="circle">Experience</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#service-section"><span class="circle">Services</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#education-section"><span class="circle">Education</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#works-section"><span class="circle">Portfolio</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#clients-section"><span class="circle">Clients</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#pricing-section"><span class="circle">Pricing</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#blog-section"><span class="circle">Blog</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#contact-section"><span class="circle">Contact Me</span></a>
                          </li>
                      </ul>
                      <a href="#" class="menu-btn"><span></span></a>
                  </div>
              </header>
              
              <!-- Container -->
              <div class="container">
                  <!-- Started -->
                  <div class="section started">
                      <div class="st-box">
                          <div class="st-bts">
                              <a href="mailto:smorgan@domain.com" class="btn_animated">
                                  <span class="circle"><i class="icon ion ion-plus"></i></span>
                              </a>
                          </div>
                          <div class="st-image"><img src="img/painel/man.png" alt="" /></div>
       
       
       
                         <div class="st-title"> Dionizio</div>
       

                          <div class="st-subtitle">Menbro desde: 15/02/2018</div>
                          <div class="st-soc">
                              <a target="blank" href="https://www.facebook.com/" class="btn_animated">
                                  <span class="circle"><i class="icon ion ion-social-facebook"></i></span>
                              </a>
                              <a target="blank" href="https://github.com/" class="btn_animated">
                                  <span class="circle"><i class="icon ion ion-social-github"></i></span>
                              </a>
                              <a target="blank" href="https://twitter.com/" class="btn_animated">
                                  <span class="circle"><i class="icon ion ion-social-twitter"></i></span>
                              </a>
                              <a href="skype:smorgan" class="btn_animated">
                                  <span class="circle"><i class="icon ion ion-social-skype"></i></span>
                              </a>
                              <a target="blank" href="https://plus.google.com/" class="btn_animated">
                                  <span class="circle"><i class="icon ion ion-social-googleplus"></i></span>
                              </a>
                          </div>
                      </div>
                  </div>
                  <!-- Wrapper -->
                  <div class="wrapper">
                      <!-- Section About -->
                      <div class="section about" id="about-section">
                          <div class="content-box">
                              <div class="row">
                              
                                  
                                  <div class="col col-m-12 col-t-7 col-d-7">
                                      <div class="text-box">
                                          <p><strong> Olá, Seja bem-vindo! </strong></p>
                                          <p> A nossa barbearia. A gente sabe da correria do seu dia-a-dia e que o seu tempo é precioso. 
                                          É por isso que estamos sempre a postos te esperando para o nosso ritual, aquele momento para se desligar de 
                                          tudo e pensar apenas em você. Essa é a #BarbeariaOLenhador , atualizar o seu estilo e romper qualquer padrão. 
                                          Nossos barbeiros já estão esperando para te atender em uma das nossas sedes. 
                                          Ligue e marque um horário: - Olinda - 1234.5678, das 09 às 21h. - Recife - 3214.9874, das 09 às 19h.
                                          </p>                                    
                                      </div>
                                      </div>
                                      
                                      <div class="col col-m-12 col-t-5 col-d-5">
                                      <div class="info-list">
                                          <ul>
                                              <li><strong><span>Nome:</span></strong> <?php echo $_SESSION['usuario'];?></li>
                                              <li><strong><span>Endereço:</span></strong> Freelancer </li>
                                              <li><strong><span>Celular:</span></strong> <a href="tel:12562548456">+1 256 254 84 56</a></li>                                        
                                              <li><strong><span>E-mail:</span></strong> <a href="mailto:smorgan@domain.com">miciasdionizio@hotmail.com</a></li>                                        
                                          </ul>
                                      </div>
                                      <div class="bts">
                                      <!--    <a href="#" class="btn btn_animated"><span class="circle">Download CV</span></a>
                                          <a href="#" class="btn extra contact-btn btn_animated"><span class="circle">Contact Me</span></a> -->
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Section Skills -->
                      <div class="section skills" id="skills-section">
                          <div class="title">Nossos Profissionais:</div>
                          <div class="row">
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-gear-b"></i></div>
                                          <div class="name">Professional</div>
                                      </div>
                                      <div class="skills">
                                          <ul>
                                              <li> 
                                                  <div class="name">UI/UX Design</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:88%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li> 
                                                  <div class="name">Web Application</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:90%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li>
                                                  <div class="name">Mobile Application</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:84%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li> 
                                                  <div class="name">Writing</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:60%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li> 
                                                  <div class="name">Photography</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:72%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                          </ul>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-person"></i></div>
                                          <div class="name">Personal</div>
                                      </div>
                                      <div class="skills">
                                          <ul>
                                              <li> 
                                                  <div class="name">Communication</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:78%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li> 
                                                  <div class="name">Team Work</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:90%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li>
                                                  <div class="name">Leadership</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:60%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li> 
                                                  <div class="name">Creativity</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:84%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li> 
                                                  <div class="name">Language</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:72%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                          </ul>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Experience -->
                      <div class="section experience" id="experience-section">
                          <div class="title">
                              Fidelidade:
                              <span class="circle"><i class="fa fa-chevron-down"></i></span>
                          </div>
                          <div class="cd-timeline">
                              <div class="cd-timeline-block animated">
                                  <div class="cd-timeline-point">
                                      <i class="icon ion ion-ios-checkmark-empty"></i>
                                  </div>
                                  <div class="cd-timeline-content">
                                      <div class="content-box">
                                          <div class="date">15/02/2019</div>
                                          <div class="name">01</div>
                                          <div class="category">Barbearia O Lenhador</div>
                                          <p>    Lorem ipsum dolor sit amet, in quodsi vulputate pro. Ius illum vocent mediocritatem an, cule dicta iriure at. Ubique 
                                              </p>
                                      </div>
                                  </div>
                              </div>
                              <div class="cd-timeline-block animated">
                                  <div class="cd-timeline-point">
                                      <i class="icon ion ion-ios-checkmark-empty"></i>
                                  </div>
                                  <div class="cd-timeline-content">
                                      <div class="content-box">
                                          <div class="date">15/07/2019</div>
                                          <div class="name">02</div>
                                          <div class="category">Barbearia O Lenhador</div>
                                          <p>    Ubique maluisset vel te, his dico vituperata ut. Pro ei phaedrum maluisset. Ex audire suavitate has, ei quodsi 
                                              </p>
                                      </div>
                                  </div>
                              </div>
                              <div class="cd-timeline-block animated">
                                  <div class="cd-timeline-point">
                                      <i class="icon ion ion-ios-checkmark-empty"></i>
                                  </div>
                                  <div class="cd-timeline-content">
                                      <div class="content-box">
                                          <div class="date">15/06/2018</div>
                                          <div class="name">03</div>
                                          <div class="category">Barbearia O Lenhador</div>
                                          <p>    Ubique maluisset vel te, his dico vituperata ut. Pro ei phaedrum maluisset. Ex audire suavitate has, ei quodsi 
                                              
                                          </p>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Service -->
                      <div class="section service" id="service-section">
                          <div class="title">Nossos Serviços:</div>
                          <div class="row">
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-android-color-palette"></i></div>
                                          <div class="name">UI/UX Design</div>
                                      </div>
                                      <p>
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                          lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. Lorem ipsum dolor 
                                          sit amet, consectetur adipiscing elit.
                                      </p>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-social-chrome"></i></div>
                                          <div class="name">Web Application</div>
                                      </div>
                                      <p>
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                          lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. Lorem ipsum dolor 
                                          sit amet, consectetur adipiscing elit.
                                      </p>
                                  </div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-social-android"></i></div>
                                          <div class="name">Android Application</div>
                                      </div>
                                      <p>
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                          lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies.
                                      </p>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-social-apple"></i></div>
                                          <div class="name">IOS Application</div>
                                      </div>
                                      <p>
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                          lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. Lorem ipsum dolor 
                                          sit amet, consectetur adipiscing elit.
                                      </p>
                                  </div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-android-create"></i></div>
                                          <div class="name">Writing</div>
                                      </div>
                                      <p>
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                          lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies.
                                      </p>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-camera"></i></div>
                                          <div class="name">Photography</div>
                                      </div>
                                      <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                          
                                      </p>
                                  </div>
                              </div>
                          </div>
                      </div>
                                  
                      
                      
                      <!-- Portfolio -->
                      <div class="section works" id="works-section">
                          <div class="title">Portfolio</div>
                          <div class="filter-menu">
                              <div class="filters">
                                  <div class="btn-group">
                                      <div class="f_btn btn_animated active">
                                          <div class="circle">
                                              <label><input type="radio" name="fl_radio" value="box-item" />All</label>
                                          </div>
                                      </div>
                                      <div class="f_btn btn_animated">
                                          <div class="circle">
                                              <label><input type="radio" name="fl_radio" value="f-mockup" />Mockups</label>
                                          </div>
                                      </div>
                                      <div class="f_btn btn_animated">
                                          <div class="circle">
                                              <label><input type="radio" name="fl_radio" value="f-graphic" />Graphics</label>
                                          </div>
                                      </div>
                                      <div class="f_btn btn_animated">
                                          <div class="circle">
                                              <label><input type="radio" name="fl_radio" value="f-icons" />Icons</label>
                                          </div>
                                      </div>
                                      <div class="f_btn btn_animated">
                                          <div class="circle">
                                              <label><input type="radio" name="fl_radio" value="f-ui" />UI Kits</label>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="row box-items">
                              <div class="col col-m-12 col-t-6 col-d-4 box-item f-mockup animated">
                                  <div class="image">
                                      <a href="#popup-1" class="has-popup"><img src="img/painel/work1.jpg" alt="" /></a>
                                  </div>
                                  <div class="content-box">
                                      <div class="category">Mockups</div>
                                      <a href="#popup-1" class="name has-popup">Realistic Business Cards MockUp</a>
                                      <p>
                                          Here’s a new b-cards mock-up with several business cards...
                                      </p>
                                  </div>
                                  <div id="popup-1" class="popup-box mfp-fade mfp-hide">
                                      <div class="content">
                                          <div class="image">
                                              <img src="img/work1.jpg" alt="">
                                          </div>
                                          <div class="desc">
                                              <div class="category">Mockups</div>
                                              <h4>Realistic Business Cards MockUp</h4>
                                              <p>
                                                  Here’s a new b-cards mock-up with several business cards scattered across the scene. The PSD file allows you 
                                                  to easily. Here’s a new b-cards mock-up with several business cards scattered across the scene.
                                              </p>
                                              <a href="#" class="btn btn_animated"><span class="circle">View Project</span></a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-4 box-item f-graphic animated">
                                  <div class="image">
                                      <a href="#popup-2" class="has-popup"><img src="img/painel/work3.jpg" alt="" /></a>
                                  </div>
                                  <div class="content-box">
                                      <div class="category">Graphic</div>
                                      <a href="#popup-2" class="name has-popup">The Mountainbiker Freebie</a>
                                      <p>
                                          The freebie of the day is a logo design kit with an original theme...
                                      </p>
                                  </div>
                                  <div id="popup-2" class="popup-box mfp-fade mfp-hide">
                                      <div class="content">
                                          <div class="image">
                                              <img src="img/painel/work3.jpg" alt="">
                                          </div>
                                          <div class="desc">
                                              <div class="category">Graphic</div>
                                              <h4>The Mountainbiker Freebie</h4>
                                              <p>
                                                  The freebie of the day is a logo design kit with an original theme that will help you create 
                                                  stunning mountain bike related logos in just minutes.
                                              </p>
                                              <a href="#" class="btn btn_animated"><span class="circle">View Project</span></a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-4 box-item f-mockup animated">
                                  <div class="image">
                                      <a href="#popup-3" class="has-popup"><img src="img/painel/work2.jpg" alt="" /></a>
                                  </div>
                                  <div class="content-box">
                                      <div class="category">Mockups</div>
                                      <a href="#popup-3" class="name has-popup">Notebook MockUp PSD</a>
                                      <p>
                                          Today we’re happy to share with you the mockup of a classic...
                                      </p>
                                  </div>
                                  <div id="popup-3" class="popup-box mfp-fade mfp-hide">
                                      <div class="content">
                                          <div class="image">
                                              <img src="img/painel/work2.jpg" alt="">
                                          </div>
                                          <div class="desc">
                                              <div class="category">Mockups</div>
                                              <h4>Notebook MockUp PSD</h4>
                                              <p>
                                                  Today we’re happy to share with you the mockup of a classic notebook that will help you showcase your 
                                                  drawings. Today we’re happy to share with you the mockup of a classic notebook that will help.
                                              </p>
                                              <a href="#" class="btn btn_animated"><span class="circle">View Project</span></a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-4 box-item f-icons animated">
                                  <div class="image">
                                      <a href="#popup-4" class="has-popup"><img src="img/painel/work4.jpg" alt="" /></a>
                                  </div>
                                  <div class="content-box">
                                      <div class="category">Icons</div>
                                      <a href="#popup-4" class="name has-popup">Capitalist Icons</a>
                                      <p>
                                          Today we have for you a set of 20 icons available in 2 styles: colored...
                                      </p>
                                  </div>
                                  <div id="popup-4" class="popup-box mfp-fade mfp-hide">
                                      <div class="content">
                                          <div class="image">
                                              <img src="img/painel/work4.jpg" alt="">
                                          </div>
                                          <div class="desc">
                                              <div class="category">Icons</div>
                                              <h4>Capitalist Icons</h4>
                                              <p>
                                                  Today we have for you a set of 20 icons available in 2 styles: colored flat and line version, 
                                                  designed on a 128px grid. These polished icons come in multiple formats so you can easily include 
                                                  them in your projects.
                                              </p>
                                              <a href="#" class="btn btn_animated"><span class="circle">View Project</span></a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-4 box-item f-ui animated">
                                  <div class="image">
                                      <a href="#popup-5" class="has-popup"><img src="img/painel/work5.jpg" alt="" /></a>
                                  </div>
                                  <div class="content-box">
                                      <div class="category">UI Kits</div>
                                      <a href="#popup-5" class="name has-popup">Mapogo UI Kit</a>
                                      <p>
                                          Mapogo is an expertly crafted UI kit perfect for iOS designers...
                                      </p>
                                  </div>
                                  <div id="popup-5" class="popup-box mfp-fade mfp-hide">
                                      <div class="content">
                                          <div class="image">
                                              <img src="img/painel/work5.jpg" alt="">
                                          </div>
                                          <div class="desc">
                                              <div class="category">UI Kits</div>
                                              <h4>Mapogo UI Kit</h4>
                                              <p>
                                                  Mapogo is an expertly crafted UI kit perfect for iOS designers and developers. The free sample 
                                                  includes 10 screens (750×1334 px) that can be easily customized in Photoshop
                                              </p>
                                              <a href="#" class="btn btn_animated"><span class="circle">View Project</span></a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-4 box-item f-ui animated">
                                  <div class="image">
                                      <a href="#popup-6" class="has-popup"><img src="img/painel/work6.jpg" alt="" /></a>
                                  </div>
                                  <div class="content-box">
                                      <div class="category">UI Kits</div>
                                      <a href="#popup-6" class="name has-popup">Chameleon UI Kit</a>
                                      <p>
                                          The freebie of the day is Chameleon, a modern UI kit perfect to...
                                      </p>
                                  </div>
                                  <div id="popup-6" class="popup-box mfp-fade mfp-hide">
                                      <div class="content">
                                          <div class="image">
                                              <img src="img/painel/work6.jpg" alt="">
                                          </div>
                                          <div class="desc">
                                              <div class="category">UI Kits</div>
                                              <h4>Chameleon UI Kit</h4>
                                              <p>
                                                  The freebie of the day is Chameleon, a modern UI kit perfect to use for creating a stylish and 
                                                  clean mobile app. This kit includes 10 screens from various categories that can be easily edited.
                                              </p>
                                              <a href="#" class="btn btn_animated"><span class="circle">View Project</span></a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="clear"></div>
                      </div>
                      <!-- Section Clients -->
                      <div class="section clients" id="clients-section">
                          <div class="title">Clients</div>
                          <div class="reviews-carousel animated">
                              <div class="owl-carousel">
                                  <div class="item">
                                      <div class="content-box">
                                          <div class="reviews-item">
                                              <div class="image"><img src="img/painel/rev1.jpg" alt="" /></div>
                                              <div class="name">— Robert Chase, CEO</div>
                                              <p>
                                                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod 
                                                  iaculis lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. 
                                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod 
                                                  iaculis lobortis."
                                              </p>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="item">
                                      <div class="content-box">
                                          <div class="reviews-item">
                                              <div class="image"><img src="img/painel/rev2.jpg" alt="" /></div>
                                              <div class="name">— Helen Floyd, Art Director</div>
                                              <p>
                                                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod 
                                                  iaculis lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. 
                                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod 
                                                  iaculis lobortis. Vestibulum posuere molestie ipsum vel."
                                              </p>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="item">
                                      <div class="content-box">
                                          <div class="reviews-item">
                                              <div class="image"><img src="img/painel/rev3.jpg" alt="" /></div>
                                              <div class="name">— Jhon Newton, Photographer</div>
                                              <p>
                                                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod 
                                                  iaculis lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. 
                                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod 
                                                  iaculis lobortis."
                                              </p>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Section Pricing -->
                      <div class="section pricing" id="pricing-section">
                          <div class="title">Pricing</div>
                          <div class="row">
                              <div class="col col-m-12 col-t-6 col-d-3">
                                  <div class="content-box animated">
                                      <div class="pricing-table">
                                          <div class="i_title">
                                              <div class="icon"><i class="icon ion ion-battery-empty"></i></div>
                                              <div class="pt-title">Basic</div>
                                          </div>
                                          <div class="pt-amount">
                                              <span class="dollar">$</span>
                                              <span class="amount">15</span>
                                              <span class="period">/hr</span>
                                          </div>
                                          <div class="pt-feature-list">
                                              <ul>
                                                  <li class="disable">UI/UX Design</li>
                                                  <li>Web Development</li>
                                                  <li class="disable">IOS Application <strong>New</strong></li>
                                                  <li class="disable">Android Application</li>
                                                  <li class="disable">Writing</li>
                                                  <li class="disable">Photography <strong>New</strong></li>
                                              </ul>
                                          </div>
                                          <a href="#" class="btn btn_animated"><span class="circle">Buy Now</span></a>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-3">
                                  <div class="content-box animated">
                                      <div class="pricing-table">
                                          <div class="i_title">
                                              <div class="icon"><i class="icon ion ion-battery-low"></i></div>
                                              <div class="pt-title">Start-Up</div>
                                          </div>
                                          <div class="pt-amount">
                                              <span class="dollar">$</span>
                                              <span class="amount">29</span>
                                              <span class="period">/hr</span>
                                          </div>
                                          <div class="pt-feature-list">
                                              <ul>
                                                  <li>UI/UX Design</li>
                                                  <li>Web Development</li>
                                                  <li class="disable">IOS Application <strong>New</strong></li>
                                                  <li class="disable">Android Application</li>
                                                  <li class="disable">Writing</li>
                                                  <li class="disable">Photography <strong>New</strong></li>
                                              </ul>
                                          </div>
                                          <a href="#" class="btn btn_animated"><span class="circle">Buy Now</span></a>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-3">
                                  <div class="content-box animated">
                                      <div class="pricing-table">
                                          <div class="i_title">
                                              <div class="icon"><i class="icon ion ion-battery-half"></i></div>
                                              <div class="pt-title">Business</div>
                                          </div>
                                          <div class="pt-amount">
                                              <span class="dollar">$</span>
                                              <span class="amount">49</span>
                                              <span class="period">/hr</span>
                                          </div>
                                          <div class="pt-feature-list">
                                              <ul>
                                                  <li>UI/UX Design</li>
                                                  <li>Web Development</li>
                                                  <li>IOS Application <strong>New</strong></li>
                                                  <li>Android Application</li>
                                                  <li class="disable">Writing</li>
                                                  <li class="disable">Photography <strong>New</strong></li>
                                              </ul>
                                          </div>
                                          <a href="#" class="btn extra btn_animated"><span class="circle">Buy Now</span></a>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-3">
                                  <div class="content-box animated">
                                      <div class="pricing-table">
                                          <div class="i_title">
                                              <div class="icon"><i class="icon ion ion-battery-charging"></i></div>
                                              <div class="pt-title">Enterprise</div>
                                          </div>
                                          <div class="pt-amount">
                                              <span class="dollar">$</span>
                                              <span class="amount">89</span>
                                              <span class="period">/hr</span>
                                          </div>
                                          <div class="pt-feature-list">
                                              <ul>
                                                  <li>UI/UX Design</li>
                                                  <li>Web Development</li>
                                                  <li>IOS Application <strong>New</strong></li>
                                                  <li>Android Application</li>
                                                  <li>Writing</li>
                                                  <li>Photography <strong>New</strong></li>
                                              </ul>
                                          </div>
                                          <a href="#" class="btn btn_animated"><span class="circle">Buy Now</span></a>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Blog -->
                      <div class="section blog" id="blog-section">
                          <div class="title">Blog</div>
                          <div class="row">
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="blog_item animated">
                                      <div class="image">
                                          <a href="blog-page.html"><img src="img/painel/blog1.jpg" alt="" /></a>
                                      </div>
                                      <div class="content-box">
                                          <div class="i_title">
                                              <div class="icon"><strong>27</strong> July</div>
                                          </div>
                                          <div class="category_bts">
                                              <a href="#" class="category">#branding</a>
                                              <a href="#" class="category">#ui-ux</a>
                                          </div>
                                          <a href="blog-page.html" class="name">Music Player Design</a>
                                          <p>
                                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                              lobortis. Vestibulum posuere molestie ipsum vel...
                                          </p>
                                          <a href="blog-page.html" class="btn btn_animated"><span class="circle">Read more</span></a>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="blog_item animated">
                                      <div class="image">
                                          <a href="blog-page.html"><img src="img/painel/blog2.jpg" alt="" /></a>
                                      </div>
                                      <div class="content-box">
                                          <div class="i_title">
                                              <div class="icon"><strong>27</strong> July</div>
                                          </div>
                                          <div class="category_bts">
                                              <a href="#" class="category">#branding</a>
                                              <a href="#" class="category">#ui-ux</a>
                                          </div>
                                          <a href="blog-page.html" class="name">Music Player Design</a>
                                          <p>
                                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                              lobortis. Vestibulum posuere molestie ipsum vel...
                                          </p>
                                          <a href="blog-page.html" class="btn btn_animated"><span class="circle">Read more</span></a>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="bts align-center">
                              <a href="blog.html" class="btn btn_animated"><span class="circle">View Blog</span></a>
                          </div>
                      </div>
                      <!-- Section Text -->
                      <div class="section ceo_text">
                      
                          <div class="title">Sugestões:</br></div>
                          <div class="content-box animated">
                              <div class="text-box">
                                  <p>    Caso queira nos enviar uma sugestão, 
                                      tirar uma dúvida ou reclamar de algo que o deixa insatisfeito aqui é o espaço. 
                                      Envie sua mensagem preenchendo o formulário abaixo, que vamos retornar o quanto antes. 
                                      A sua mensagem é importante para nós.
                                  </p>
                                  
                              </div>
                          </div>
                      </div>
                      <!-- Section Contacts -->
                      <div class="section contacts" id="contact-section">
                          <div class="title">Contate-me</div>
                          <div class="row">
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="info-list">
                                          <ul>
                                              <li><strong><span>Endereço:</span></strong>R. Fenelon Ático Leite |40 | Rio Doce | Olinda-PE</li>
                                              <li><strong><span>Fone:</span></strong> <a href="tel:98369-6179">(81) 98369-6179</a></li>
                                              <li><strong><span>E-mail:</span></strong> <a href="barbeariaolenhador@hotmail.com">barbeariaolenhador@hotmail.com</a></li>
                                          </ul>
                                      </div>
                                      <div class="map" id="map"></div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <h4>Escreve uma mensagem:</h4>
                                      <div class="contact-form">
                                          <form id="cform" method="post">
                                              <div class="group-val">
                                                  <input type="text" name="name" placeholder="Nome" />
                                              </div>
                                              <div class="group-val">
                                                  <input type="text" name="email" placeholder="E-mail" />
                                              </div>
                                              <div class="group-val">
                                                  <input type="text" name="subject" placeholder="Assunto" />
                                              </div>
                                              <div class="group-val ct-gr">
                                                  <textarea name="message" placeholder="Mensagem"></textarea>
                                              </div>
                                              <a href="#" class="btn btn_animated" onclick="$('#cform').submit(); return false;"><span class="circle">Enviar</span></a>
                                          </form>
                                          <div class="alert-success">
                                              <p>Obrigado, sua mensagem foi enviada com sucesso. Entraremos em contato em breve!</p>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <!-- Footer -->
                  <footer>
                      <div class="copy">© 2019 | insightIDEIAS | All rights reserved.</div>
                  </footer>
                  
              </div>
          </div>
          
          <!-- jQuery Scripts -->
          <script src="js/jquery.min.js"></script>
          <script src="js/owl.carousel.min.js"></script>
          <script src="js/jquery.validate.js"></script>
          <script src="js/magnific-popup.js"></script>
          <script src="js/masonry.pkgd.js"></script>
          <script src="js/imagesloaded.pkgd.js"></script>
          <script src="js/masonry-filter.js"></script>
          <script src="js/scrollreveal.js"></script>
          <script src="js/jquery.mb.YTPlayer.js"></script>
          <script src="js/particles.js"></script>
          <!-- Google map api -->
          <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
          
          <!-- Main Scripts -->
          <script src="js/main.js"></script>
          
      </body>
      </html>
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.