Em breve um novo website - Clube de Tiro Django

Entre em contato através de nosso Whatsapp ou e-mail para saber como se tornar um assiciado do Clube de Tiro Django, Atendimento personalizado.

by francisco_negrao

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<section class="sectionComingSoon">

<!-- Background Image -->

<img src="https://i.postimg.cc/fD629KgV/shallow-focus-shot-from-behind-of-a-male-shooting-a-gun-at-a-gun-range.jpg" alt="Imagem de Fundo Website em Construção Clube de Tiro Django" loading="lazy" class="bgImg" />

<div class="container">
  <div class="row">
    
    <div class="col-12">
      <div class="boxInfo">
      
      <div class="logoImg">
      
        <img src="https://cdn.interago.com.br/img/png/w_0_q_8/28/mc/Logo%20e%20FAV//Grupo%2070" loading="lazy" />
      
      </div>
    
      <h1>
        <span class="anim">
          Em breve uma nova experiência
        </span>
      </h1>
      
      <p id="countDown">
      
      </p>
    
      <div class="contactBox">
      <p class="contactNumber">
      <a title="Ligue para a Clube Tiro Django e tire suas dúvidas" href="tel:017997290955" target="_blank" rel="nofollow noreferrer noopener">
      <!-- WhatsApp Icon -->
      
      <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="whatsapp" class="svg-inline--fa fa-whatsapp fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#fff" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3...

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

body {
  font-family: 'Poppins', sans-serif;
}

.sectionCommingSoon {
  position: relative;
  height: 100vh;
  text-align: center;
  overflow: hidden;
}

.sectionComingSoon:after {
  content:"";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
background: rgb(0,0,0);
background: -moz-linear-gradient(90deg, rgba(0,0,0,0.896796218487395) 0%, rgba(23,6,6,0.9) 50%, rgba(13,13,13,0.9) 100%);
background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.896796218487395) 0%, rgba(23,6,6,0.9) 50%, rgba(13,13,13,0.9) 100%);
background: linear-gradient(90deg, rgba(0,0,0,0.896796218487395) 0%, rgba(23,6,6,0.9) 50%, rgba(13,13,13,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#0d0d0d",GradientType=1);
}

.sectionComingSoon img.bgImg {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    right: 0;
    opacity: 0;
    transition: 0.8s ease-in-out;
    transition-delay: 1s;
}

.sectionComingSoon .logoImg {
  overflow: hidden;
}

.sectionComingSoon .logoImg img {
    opacity: 0;
    transition: all 1.3s ease;
    transition-delay: 1s;
    transform: translateY(100%);
    display: block;
}

.sectionComingSoon .boxInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.sectionComingSoon .boxInfo h1 {
    font-size: 35px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 800;
    margin: 30px 0px;
    max-width: 460px;
    text-align: center;
    overflow: hidden;
    letter-spacing: 1px;
}

.sectionComingSoon .boxInfo h1 .anim {
    display: block;
    transform: translateY(100%);
    transition: all 1.3s ease;
    transition-delay: 1.5s;
    opacity: 0;
}

.sectionComingSoon .boxInfo #countDown {
font-size: 30px;
   ...

JavaScript

// COUNTDOWN SCRIPTS

// Set the date we're counting down to
var countDownDate = new Date("Feb 5, 2022 15:37:25").getTime();

// Update the count down every 1 second
var countdownfunction = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();
  
  // Find the distance between now an the count down date
  var distance = countDownDate - now;
  
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  
  // Output the result in an element with id="demo"
  document.getElementById("countDown").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
  
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(countdownfunction);
    document.getElementById("countDown").innerHTML = "Estamos chegando!";
  }
}, 1000);

  // ANIMATION SCRIPTS

            window.addEventListener("load", function() {

              document.querySelector(".sectionComingSoon .boxInfo h1 .anim").style.cssText += 'transform: translateY(0%); opacity: 1;';
              
              document.querySelector("#countDown").style.cssText += 'opacity: 1;';
              
              document.querySelector(".logoImg img").style.cssText += 'transform: translateY(0%); opacity: 1;';
              
              document.querySelector(".sectionComingSoon img.bgImg").style.cssText += 'opacity: 1;';
              
              document.querySelector(".sectionComingSoon .boxInfo .contactBox p.contactAddress").style.cssText += 'transform: translateY(0%); opacity: 1;';
              
              document.querySelector(".sectionComingSoon .boxInfo .contactBox p.contactNumber").style.cssText += 'transform: translateY(0px); opacity: 1;';
         ...