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