Call to Action Estilo 01 - Comp. Interago

Chamada de ação em formato de faixa dentro de container

by francisco_negrao

HTML

<link rel="stylesheet" href="https://componentes.interago.com.br/global-css.css">
<link rel="stylesheet" href="https://componentes.interago.com.br/bootstrap-grid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<div class="container my-5">
  <div class="row">
  
<!-- Column First -->

    <div class="col-12">
    
      <div class="i-cta-01">
        <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="bg-image img-fluid" alt="Imagem de Fundo Calll to Action - ALTERAR">
        <div class="box-left">
        <img src="https://cutewallpaper.org/24/designer-png/manypixels-unlimited-graphic-design-try-riskfree.png" class="img-fluid" alt="Imagem de Fundo Calll to Action - ALTERAR">
          
        
        </div>
        <div class="box-right">
        
        <h1>
          Pronto para criar o <strong>melhor projeto</strong>
          de <strong>website</strong> da sua <strong>vida</strong>?
        </h1>
        <a href=""><i class="fab fa-whatsapp"></i> Solicitar Orçamento</a>
        </div>
      </div>
      
    </div> <!--12-->
   
  </div> <!--row-->
</div> <!--container-->

CSS

.i-cta-01 {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 20px;
    justify-content: flex-end;
    min-height: 300px;
    box-shadow: 10px 60px 40px rgb(0 0 0 / 8%);
}

.i-cta-01 .box-right a {
    background-color: #33B137;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    transition: all 0.3s ease
}

.i-cta-01 .box-right a:hover {
    transform: scale(1.05);
    opacity: 0.95;
}

.i-cta-01:before {
    content: "";
    background-color: #00afef;
    position: absolute;
    max-width: 30%;
    width: 100%;
    border-radius: 0px 250px 0px 0px;
    z-index: -1;
    height: 100%;
    bottom: -35px;
    left: 0;
    box-shadow: 10px 20px 50px #00000029;
}

.i-cta-01:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    background-color: rgb(0 0 0 / 45%);
    right: 0;
    left: 0;
    bottom: -35px;
}

.i-cta-01 .bg-image {
    position: absolute;
    z-index: -3;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    right: 0;
    left: 0;
    bottom: -35px;
}

.i-cta-01 h1 {
    font-weight: 500;
    margin: 0px 0px 20px 0px;
}

.i-cta-01 .box-left {
    max-width: 40%;
    position: absolute;
    height: 100%;
    bottom: 0;
    left: 0;
}

.i-cta-01 .box-right {
    max-width: 500px;
    margin-right: 5%;
    margin-top: 35px;
}

/* MOBILE CSS FOR CTA 01 */

@media (max-width: 992px) {
  .box-left {
    display:  none;
  }
  .box-right {
    width: 100%;
    margin-right: 0px;
  }
  .i-cta-01 {
    justify-content: center;
  }
  .i-cta-01:before {
    max-width: 250px;
  }
}