Sagitario.html

<!DOCTYPE html>
<html>
<head>
  <title>Signo de Sagitário</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/529T09s5/Frasco-para-viagem-15.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;
}


    .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 Sagitário</h1>
    <a class="back-btn" href="index.html"><span class="arrow">&#8592;</span></a>
    <div class="characteristics">
      <h2>Sobre o signo de Sagitário:</h2>
      <p>Sagitário é o nono signo do zodíaco e está associado ao período de 22 de novembro a 21 de dezembro. É regido por Júpiter e é considerado um signo do elemento Fogo, o que o torna otimista, aventureiro e extrovertido. Os sagitarianos são conhecidos por sua busca por novas experiências e sua busca por liberdade.</p>
    </div>
    <div class="characteristics">
      <h2>Características principais de Sagitário:</h2>
      <ul>
        <li>Aventureiro: Os sagitarianos são aventureiros e gostam de explorar novos lugares e culturas.</li>
        <li>Otimismo: Eles possuem uma perspectiva otimista e geralmente veem o lado positivo das coisas.</li>
        <li>Entusiasta: Sagitário é entusiasmado e contagia os outros com sua energia.</li>
        <li>Liberdade: Eles valorizam sua independência e não gostam de se sentir presos.</li>
        <li>Mente aberta: Os sagitarianos têm uma mente aberta e estão dispostos a considerar diferentes pontos de vista.</li>
        <li>Busca por conhecimento: Eles têm um desejo constante de aprender e expandir seus horizontes.</li>
        <li>Senso de humor: Sagitário possui um senso de humor marcante e adora contar histórias engraçadas.</li>
      </ul>
    </div>
    <div class="images-container">
      <div class="symbol">
        <h2>Símbolo de Sagitário</h2>
        <img src="https://svgsilh.com/svg/36395.svg" alt="Símbolo de Sagitário">
      </div>
    </div>
    <div class="images-container">
      <div class="tattoo">
        <h2>Ideia para tatuagem de Sagitário</h2>
        <img src="https://tattoolandia.com.br/wp-content/uploads/2019/02/arco.jpg" alt="Tatuagem de Sagitário">
      </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 busca por aventura é inspiradora. Abra as asas e voe em direção aos seus sonhos, Sagitário.",
"Seu otimismo é um raio de sol. Compartilhe sua energia positiva e inspire outros a verem o lado brilhante da vida.",
"Você é um explorador destemido. Aventure-se pelo desconhecido e inspire outros a abraçarem o inexplorado.",
"Sua sede de conhecimento é admirável. Continue aprendendo e inspire outros a buscarem constantemente a sabedoria.",
"Sua liberdade é preciosa. Use-a para inspirar outros a seguirem seus caminhos autênticos autênticos.",
"Você é um visionário da vida. Compartilhe suas visões grandiosas e inspire outros a sonharem sem limites.",
"Sua confiança é contagiosa. Mostre aos outros o poder de acreditar em si mesmos e inspirar autoestima.",
"Sua paixão pela vida é inspiradora. Abraçar cada momento com entusiasmo e inspirar outros a fazerem o mesmo.",
"Você é um mestre das possibilidades. Inspire outros a transformarem desafios em oportunidades de crescimento.",
"Sua honestidade é refrescante. Compartilhe sua confiança e inspire outros a viverem sem máscaras.",
"Sua energia é como um incêndio. Incendeie os corações dos outros com motivação e inspire a ação.",
"Você é um buscador espiritual. Compartilhe suas jornadas internas e inspire outros a explorarem seu mundo interior.",
"Sua alegria é contagiante. Espalhe risos e sorrisos por onde quer que vá e inspire felicidade.",
"Sua independência é inspirada. Mostre aos outros o valor de ser autossuficiente e inspire liberdade.",
"Você é um filósofo da vida. Compartilhe suas reflexões profundas e inspire outros a ponderarem sobre o significado da existência.",
"Sua motivação é admirável. Continue perseguindo seus objetivos e inspire outros a nunca desistirem.",
"Sua atitude descomplicada é uma vitória. Mostre aos outros como abraçar a simplicidade e inspirar paz de espírito.",
"Você é um explorador de culturas. Compartilhe suas experiências globais e inspire outros a abraçarem a diversidade.",
"Sua coragem é inspiradora. Enfrente seus medos de frente e inspire outros a conquistarem seus próprios desafios.",
"Você é um atrativo de estrelas. Aponte para o alto e inspire outros a alcançarem alturas incríveis.",
"Sua busca pela verdade é notável. Compartilhe seu conhecimento e inspire outros a questionarem e explorarem.",
"Sua mente aberta é inspiradora. Abraçar diferentes perspectivas e inspirar outros a expandirem seus horizontes mentais.",
"Você é um viajante do universo interno. Compartilhe suas jornadas espirituais e inspire outros a explorarem suas almas.",
"Sua curiosidade é uma fonte de crescimento. Mantenha a chama da curiosidade viva e inspire outros a buscarem respostas.",
"Você é um mestre das possibilidades. Inspire outros a acreditarem em suas capacidades e manifestem seus sonhos.",
"Sua sede por liberdade é inspiradora. Mostre aos outros como se libertar das amarras e inspire a busca por autonomia.",
"Sua alegria em compartilhar é notável. Compartilhe suas conquistas e inspire outros a celebrarem as vitórias da vida.",
"Você é um caçador de experiências. Caçe momentos inesquecíveis e inspire outros a viverem plenamente.",
"Sua sinceridade é um presente. Compartilhe seus pensamentos honestos e inspire confiança nos outros.",
"Você é um arqueiro do destino. Aponte para o sucesso e inspire outros a acertarem seus objetivos, Sagitário.",


  ];

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>