How To Create Digital Marketing Agency Website Using Elementor Flexbox

765SHARES

Hide horizontal overflow for the entire page CSS

Column Maximum Width CSS

@media (max-width: 767.98px) {
    
.img-banner-mx-w {
    max-width: 350px;
    margin: 0 auto;
}

Column Maximum Width CSS Class

img-banner-mx-w

Orange Button Style CSS

.cta-btn-2 .elementor-button .elementor-button-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-btn-2 .elementor-button .elementor-button-icon {
    background: #fff;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #fff;
}
.cta-btn-2 .elementor-button {
    display: flex;
    justify-content: end;
    align-items: center;
    height: 50px;
}


.cta-w-165 .elementor-button{
    width: 165px;
}

Orange Button Style CSS Classes

cta-btn-2
cta-w-165

Orange Button Hover Effect CSS

.pulse-orr .elementor-button:hover {
          animation: pulses-orrange 1s;
          box-shadow: 0 0 0 2em transparent;
}
@keyframes pulses-orrange {
  0% {
    box-shadow: 0 0 0 0 #ff512a;
  }
}

Orange Button Hover Effect CSS Class

pulse-orr

Pulse Animation CSS

.anim-top {
    animation: anim-top 2s infinite linear;
    animation-direction: alternate;
}
@keyframes anim-top{
    from{
        transform: scale(.7);
    }
    to{
        transform: scale(1);
    }
}

Pulse Animation CSS Class

anim-top

Rotated Animation CSS

.anim-rotate {
    animation: anim-rotate 4s infinite linear;
    animation-direction: alternate;
}
@keyframes anim-rotate{
    from{
        transform: rotate(0deg) scale(1);
    }
    to{
        transform: rotate(360deg) scale(.3);
    }
}

Rotated Animation CSS Class

anim-rotate

Green Button CSS

.cta-btn-3 .elementor-button .elementor-button-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-btn-3 .elementor-button .elementor-button-icon {
    background: #fff;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #101700;
}
.cta-btn-3 .elementor-button {
    display: flex;
    justify-content: end;
    align-items: center;
    height: 50px;
}

.cta-w-192 .elementor-button{
    width: 192px;
}

Green Button CSS Classes

cta-btn-3
cta-w-192

Green Button Hover Effect CSS

.pulse-lgrn .elementor-button:hover{
          animation: pulses-lgreen 1s;
          box-shadow: 0 0 0 2em transparent;
}
@keyframes pulses-lgreen {
  0% {
    box-shadow: 0 0 0 0 #cafc01;
  }
}

Green Button Hover Effect CSS Class

pulse-lgrn