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; }
Você também pode gostar de ler
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
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
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