Call to Action - Website Inicial - App ou Botão

Call to Action estilo aplicativo motorista, fora da grid bootstrap.

Ícone Compartilhar no Whatsapp Ícone Compartilhar no Twitter Ícone Compartilhar por e-mail
Imagem cta

FIDDLE: CTA

OBS: Para versão de download APP, basta descomentar os links.

HTML:


 <section class="sectionCTA">    <div class="itemOne">      <h3>        Não fique sem sair de casa      </h3>

      <p>        Conforto, segurança e economia. Baixe nosso App e vamos viajar!      </p>

      <div class="dFlex">        <a href="#" target="_blank" title="Google Play"          class="whats-link">          <img class="img-fluid iconBanner" alt="GooglePlay" src="https://cdn.interago.com.br/img/png/w_0_q_8/118/mc/INICIAL//Google_Play"></a>        <span>ou</span> <a href="#" target="_blank"          title="App Store" class="whats-link">          <img class="img-fluid iconBanner" alt="AppStore" src="https://cdn.interago.com.br/img/png/w_0_q_8/118/mc/INICIAL//App_Store"></a>      </div>    </div>

    <div class="itemTwo">      <img class="img-fluid" alt="CTA" src="https://www.interago.com.br/App/Sites/118/mc/Vetor Motorista CTA.svg">    </div>  </section>

CSS:

* CTA */

*{  transition:0.3s ease;}  .sectionCTA {    background-image: url("https://cdn.interago.com.br/img/jpg/w_0_q_8/118/mc//CTA-min");    background-size: cover;    /* background-attachment: fixed; */    position: relative;    overflow: hidden;    z-index: 2;    display:flex;    justify-content:flex-end;    align-items:center;  }

  .sectionCTA .dFlex{    align-items:center;    display:flex;  }

  .sectionCTA .dFlex img{    width:180px;  }

  .sectionCTA .dFlex a{    display:block;  }

  .sectionCTA .dFlex a:hover{    transform:scale(0.98);  }

   .sectionCTA .itemOne {    max-width: 750px;    position: absolute;    bottom: 150px;    left: 250px;  }

  @media(max-width:992px){    .sectionCTA{      display:block !important;    }

    .sectionCTA .itemOne{      width:90%;      margin:auto;      position: inherit !important;      bottom: 0 !important;      left: 0 !important;    }  }

  /* .sectionCTA::after{    content:'';    width:2000px;    height:600px;    background-color:rgba(0,0,0,0.7);    display:block;    position:absolute;    bottom:0;    z-index:-1;  } */

  .sectionCTA span{    color: black;    font-size: 20px;    font-weight: bold;    text-transform: uppercase;    margin: 0 15px;  }  

  .sectionCTA .index{    z-index:2;  }

  .sectionCTA h3 {    font-size: 50px;    margin: 0;    color: #000;    font-weight: bold;  }

  .sectionCTA p {    margin-top: 15px;    color: #000;    font-weight: 500;    font-size: 18px;  }

Gostei desse artigo Não gostei desse artigo

Você também pode gostar de ler

Imagem principal do artigo Call to Action - Website Inicial - App ou Botão

Call to Action - Website Inicial - App ou Botão

Call to Action estilo aplicativo motorista, fora da grid bootstrap.

Em 22/07/2022 às 10h21 - Atualizado em 07/10/2022 às 11h02

Imagem principal do artigo Modelo Página de Contato - Websites Iniciaiss

Modelo Página de Contato - Websites Iniciaiss

Modelo de página de contato padrão para os websites iniciais.

Em 22/07/2022 às 09h09 - Atualizado em 07/10/2022 às 10h29

Imagem principal do artigo Modelo Imobiliária 1 - Banner e Filtro

Modelo Imobiliária 1 - Banner e Filtro

Componente criado com base no modelo desenhado de sites para imobiliárias

Em 18/05/2022 às 17h45 - Atualizado em 16/08/2022 às 09h09