virgem.html

<!DOCTYPE html>
<html>
<head>
  <title>Signo de Virgem</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

  <style>
    body {
      font-family: Arial, sans-serif;
      color: #fff;
      margin: 0;
      padding: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .background-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-image: url("https://i.postimg.cc/JnBbmFSV/Frasco-para-viagem-18.gif");
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed; /* Background fixo ao rolar a página */
      color: #fff;
      margin: 0;
      padding: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }
    

    h1 {
      color: #000000;
      text-align: center;
      margin-top: 30px;
    }

    h2 {
      color: #000000;
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      max-width: 800px;
      margin: 30px auto;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(255, 255, 255, 0.3);
      position: relative;
      overflow: hidden;
      margin-bottom: 150px;
    }

    .characteristics {
      margin-top: 20px;
    }

    .characteristics h2 {
      color: #000000;
      margin-bottom: 10px;
    }

    .characteristics p {
      margin-bottom: 15px;
    }

    .back-btn {
      position: fixed;
      top: 40px;
      left: 40px;
      display: flex;
      align-items: center;
      padding: 10px 20px;
      background-color: #8E44AD;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      transition: background-color 0.3s ease;
      z-index: 1;
    }

    .back-btn .arrow {
      margin-right: 5px;
    }

    .back-btn:hover {
      background-color: #663399;
    }

  footer {
   
    text-align: center;
    padding: 1px;
    margin-top: 2px; /* Adicionei um margin-top para controlar a altura */
    background-color: rgba(241, 241, 241, 0.5);
    color: #000;
    border-radius: 5px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1; /* Certifique-se de que o footer esteja em um nível superior */
}
  
  .footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.footer-links a {
  color: #000;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}


    footer a:hover {
      text-decoration: underline;
    }

    .images-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .symbol img,
    .tattoo img {
      width: 100%;
      max-width: 300px;
      margin: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    .symbol,
    .tattoo {
      width: 100%;
    }
    .floating-button {
      position: fixed;
      top: 20px;
      right: 20px;
      background-color: #a111b4;
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 75px;
      height: 75px;
      font-size: 12px;
      line-height: 1.2;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: background-color 0.3s ease;
      overflow: hidden;
    }

    

    .floating-button:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
    }
    .floating-button:before {
      content: "";
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      border-radius: 8px;
      background: linear-gradient(to bottom, #ec0666, #d30516);
      opacity: 0;
      z-index: -1;
      transition: opacity 0.2s ease;
    }

    /* Estilos para o texto dentro do botão */
    .button-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    /* Estilos para a mensagem de sorte */
    .fortune-popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 300px;
      background-color: rgba(207, 11, 214, 0.9);
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      display: none;
    }
    .floating-button:hover:before {
      opacity: 1;
    }
    .fortune-popup h3 {
      margin-top: 0;
    }

    .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #999;
      font-size: 18px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <br> <br>
  <div class="background-container"></div>
  <div class="container">
    <h1>Signo de Virgem</h1>
    <a class="back-btn" href="index.html"><span class="arrow">&#8592;</span></a>
    <div class="characteristics">
      <h2>Sobre o signo de Virgem:</h2>
      <p>Virgem é o sexto signo do zodíaco e está associado ao período de 23 de agosto a 22 de setembro. É regido por Mercúrio e é considerado um signo do elemento Terra, o que o torna prático, analítico e perfeccionista. Os virginianos são conhecidos por sua atenção aos detalhes e habilidades de organização.</p>
    </div>
    <div class="characteristics">
      <h2>Características principais de Virgem:</h2>
      <ul>
        <li>Perfeccionismo: Os virginianos se esforçam pela excelência e atenção aos detalhes.</li>
        <li>Análise: Eles têm uma mente analítica e adoram resolver problemas.</li>
        <li>Organização: Virgem é organizado e gosta de manter as coisas em ordem.</li>
        <li>Responsabilidade: Eles levam suas responsabilidades a sério.</li>
        <li>Modéstia: Virginianos tendem a ser modestos e reservados.</li>
        <li>Sensibilidade: Eles são sensíveis às necessidades dos outros.</li>
        <li>Senso prático: Virgem aborda as situações de forma realista.</li>
      </ul>
    </div>
    <div class="images-container">
      <div class="symbol">
        <h2>Símbolo de Virgem</h2>
        <img src="https://img.freepik.com/fotos-premium/icone-do-signo-de-virgem-o-ceu-estrelado-signos-do-horoscopo_99433-4434.jpg?w=740" alt="Símbolo de Virgem">
      </div>
    </div>
    <div class="images-container">
      <div class="tattoo">
        <h2>Ideia para tatuagem de Virgem</h2>
        <img src="https://www.significadodossonhos.inf.br/wp-content/uploads/2023/02/tatuagem-simbolo-virgem.jpg" alt="Tatuagem de Virgem">
      </div>
    </div>
  </div>
  <button class="floating-button" id="fortuneButton">Mensagem Especial</button>
  <span class="button-text"></span>
</button>

<div class="fortune-popup" id="fortunePopup">
  <span class="close-btn" onclick="closeFortunePopup()">&times;</span>
  

  <p id="fortuneMessage">Clique no botão para obter uma mensagem especial.</p>
</div>

<footer>
  <footer class="footer">
  <div class="footer-links">
    <a href="https://www.linkedin.com/in/gleisonamorim/" target="_blank">Me conheça no LinkedIn</a>
    <span class="separator">|</span>
    <a href="https://drive.google.com/file/d/1zgNLnZVdlBxYTsSKZuJH926G-nWGuZbC/view?usp=drive_link" target="_blank" rel="noopener noreferrer">Baixar App</a>
  </div>
</footer>

<script>
  function showFortunePopup() {
    var popup = document.getElementById("fortunePopup");
    var message = document.getElementById("fortuneMessage");
    var randomIndex = Math.floor(Math.random() * messages.length);
    message.textContent = messages[randomIndex];
    popup.style.display = "block";
  }

  function closeFortunePopup() {
    var popup = document.getElementById("fortunePopup");
    popup.style.display = "none";
  }

  var messages = [

  "Sua atenção aos detalhes é excepcional. Utilize sua minúcia para conquistar grandes convidados e inspire outros a cuidarem dos detalhes.",
"Você é um mestre da organização. Demonstre como a ordem pode criar eficiência e inspirar outros a simplificar suas vidas.",
"Sua busca pela perfeição é admirável. Busque a excelência em tudo que faz e inspire outros a alcançarem padrões elevados.",
"Sua dedicação ao trabalho é inspiradora. Coloque seu coração em suas tarefas e inspire outros a se comprometerem com suas paixões.",
"Você é um defensor da saúde e bem-estar. Mostre como cuidar de si mesmo é fundamental e inspire outros a adotarem hábitos saudáveis.",
"Sua mente analítica é uma bênção. Use sua perspicácia para resolver problemas complexos e inspirar outros a desenvolverem suas habilidades mentais.",
"Sua habilidade de organização é um farol. Ilumine o caminho para uma vida mais estruturada e inspire outros a trilharem essa jornada.",
"Você é um especialista em planejamento. Demonstre como traçar metas realistas e inspire outros a definirem roteiros para o sucesso.",
"Sua ética de trabalho é exemplar. Empenhe-se ao máximo em suas empreitadas e inspire outros a seguirem seu exemplo.",
"Você é um cultivador de soluções. Encontre respostas inovadoras para desafios e inspire outros a pensarem fora da caixa.",
"Sua busca pelo aprimoramento é inabalável. Busque constantemente o crescimento pessoal e inspire outros a investirem em si mesmos.",
"Sua diligência é uma inspiração. Continue avançando com experiência e inspire outros a enfrentarem desafios com coragem.",
"Você é um amante do conhecimento. Busque sabedoria em todas as oportunidades e inspire outros a nutrirem suas mentes.",
"Sua atitude prática é valiosa. Aborde problemas com um olhar realista e inspire outros a agirem de forma sensata.",
"Você é um mestre da análise crítica. Examine as situações minuciosamente e inspire outros a avaliarem suas escolhas com cuidado.",
"Sua abordagem meticulosa é admirável. Realize cada tarefa com precisão e inspire outros a realizarem suas atividades com cuidado.",
"Sua capacidade de resolver problemas é inspiradora. Enfrente desafios com confiança e inspire outros a superarem obstáculos.",
"Você é um defensor da excelência. Busque sempre o melhor em si mesmo e inspire outros a se esforçarem por grandeza.",
"Sua habilidade de adaptação é notável. Supere mudanças com agilidade e inspire outros a abraçarem a transformação.",
"Sua atenção aos detalhes é um dom. Use-a para resultados involuntários e inspire outros a apreciarem a beleza das pequenas coisas.",
"Você é um perseguidor de perfeição. Busque aprimoramento constante e inspire outros a se esforçarem por seus objetivos.",
"Sua dedicação aos seus valores é inspiradora. Permaneça fiel a suas convicções e inspire outros a seguirem seus princípios.",
"Você é um exemplo de eficiência. Realize tarefas com destreza e inspire outros a otimizar suas ações.",
"Sua busca pelo entendimento é admirável. Busque conhecimento em todas as oportunidades e inspire outros a valorizarem a aprendizagem.",
"Sua habilidade de organização é uma bússola. Mostre o caminho para a ordem e inspire outros a encontrarem equilíbrio.",
"Você é um construtor de estratégias. Demonstre como planejar pode levar ao sucesso e inspirar outros a traçarem seus próprios planos.",
"Sua diligência é uma virtude útil. Empenhe-se em tudo o que faz e inspire outros a darem o melhor de si.",
"Você é um amante da precisão. Realize tarefas com precisão e inspire outros a cuidarem dos detalhes.",
"Sua mente analítica é uma fonte de inspiração. Use-a para resolver problemas complexos e inspirar outros a desenvolverem suas habilidades mentais.",
"Sua busca pela perfeição é inigualável. Persiga a excelência em cada esforço e inspire outros a superarem limites, Virgem.",


  ];

var fortuneButton = document.getElementById("fortuneButton");
fortuneButton.addEventListener("click", showFortunePopup);
</script>
  
  <script>
  window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script defer src="/_vercel/insights/script.js"></script>
  
</body>
</html>