CTA
Ready To Break Ground On Your Vision? Let’s Talk!
Ready To Break Ground On Your Vision? Let’s Talk!
Ready to bring your workspace dream to life?
Get StartedPHP
<!-- CTA -->
<div class="cta">
<div class="wrapper">
<div class="cta_wrap">
<div class="cta_item">
<h2>Ready To Break Ground On Your Vision? Let’s Talk!</h2>
</div>
<div class="cta_item">
<a href="#" class="button || button_warning">Schedule a Consultation</a>
</div>
</div>
</div>
</div>
<!-- CTA Content -->
<div class="cta || cta_wide">
<div class="wrapper">
<div class="cta_wrap">
<div class="cta_item">
<h2>Ready To Break Ground On Your Vision? Let’s Talk!</h2>
</div>
<div class="cta_item">
<a href="#" class="button || button_warning">Schedule a Consultation</a>
</div>
</div>
</div>
</div>
<!-- CTA Large -->
<div class="cta_large" style="background-image: url('/img/cta_bg.jpg')">
<div class="wrapper">
<div class="cta_content">
<h2>Ready to bring your workspace dream to life?</h2>
<a href="#" class="button">Get Started</a>
</div>
</div>
</div>CSS
/* CTA */
.cta{padding:4rem 0;background-color:#21244f}
.cta .wrapper{max-width:128rem}
.cta .cta_wrap{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center}
.cta h2,.cta .h2{font-size:4rem;color:#fff;margin:0 4.5rem 0 0}
@media only screen and (max-width: 1300px) {
.cta h2,.cta .h2{font-size:3.3rem;margin:0 3.5rem 0 0}
}
@media only screen and (max-width: 1100px) {
.cta{padding:3.6rem 0 4rem;text-align:center}
.cta .cta_wrap{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.cta h2,.cta .h2{margin:0 auto 1.5rem}
}
@media only screen and (max-width: 992px) {
.cta h2,.cta .h2{font-size:3rem;max-width:56rem}
}
@media only screen and (max-width: 767px) {
.cta h2,.cta .h2{font-size:2.5rem}
}
/* CTA Content */
.cta.cta_wide{position:relative}
.cta.cta_wide::after{content:'';position:absolute;top:0;left:0;height:100%;width:100vw;margin-left:-webkit-calc(-50vw + 50% - .3rem);margin-left:-moz-calc(-50vw + 50% - .3rem);margin-left:calc(-50vw + 50% - .3rem);background-color:#21244f;z-index:-1}
.cta.cta_wide .wrapper{padding:0}
@media only screen and (max-width: 1300px) {
.cta.cta_wide::after{left:-1.5rem;width:-webkit-calc(100% + 3.01rem);width:-moz-calc(100% + 3.01rem);width:calc(100% + 3.01rem);margin-left:0}
}
/* CTA Large */
.cta_large{padding:14.2rem 0 15.2rem;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-position:right top;position:relative;z-index:2}
.cta_large::after{content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:rgba(255,255,255,0.3);z-index:-1}
.cta_large .cta_content{max-width:50rem}
.cta_large h2,.cta_large .h2{font-size:4rem;margin:0 0 2rem}
@media only screen and (max-width: 1300px) {
.cta_large h2,.cta_large .h2{font-size:3.4rem}
}
@media only screen and (max-width: 992px) {
.cta_large{padding:12.4rem 0 13.2rem}
.cta_large::after{background:rgba(255,255,255,0.45)}
.cta_large .cta_content{max-width:38rem}
.cta_large h2,.cta_large .h2{font-size:3rem}
}
@media only screen and (max-width: 767px) {
.cta_large{padding:8.4rem 0 8.9rem}
.cta_large::after{background:rgba(255,255,255,0.6)}
.cta_large .cta_content{max-width:31rem;margin:0 auto;text-align:center}
.cta_large h2,.cta_large .h2{font-size:2.5rem}
}
@media only screen and (max-width: 450px) {
.cta_large{padding:5.3rem 0 5.7rem}
}
@media only screen and (max-width: 350px) {
.cta_large h2,.cta_large .h2{font-size:2.3rem}
}SCSS
/* CTA */
.cta {
padding: 4rem 0;
background-color: #21244f;
.wrapper {
max-width: 128rem;
}
.cta_wrap {
display: flex;
align-items: center;
justify-content: center;
}
h2, .h2 {
font-size: 4rem;
color: #ffffff;
margin: 0 4.5rem 0 0;
}
}
@media only screen and (max-width: 1300px) {
.cta h2, .cta .h2 {font-size: 3.3rem;margin: 0 3.5rem 0 0}
}
@media only screen and (max-width: 1100px) {
.cta {padding: 3.6rem 0 4rem;text-align: center}
.cta .cta_wrap {flex-direction: column}
.cta h2, .cta .h2 {margin: 0 auto 1.5rem}
}
@media only screen and (max-width: 992px) {
.cta h2, .cta .h2 {font-size: 3rem; max-width: 56rem}
}
@media only screen and (max-width: 767px){
.cta h2, .cta .h2 {font-size: 2.5rem}
}
/* CTA Content */
.cta.cta_wide {
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100vw;
margin-left: calc(-50vw + 50% - .3rem);
background-color: #21244f;
z-index: -1;
}
.wrapper {
padding: 0;
}
}
@media only screen and (max-width: 1300px){
.cta.cta_wide::after {left: -1.5rem;width: calc(100% + 3.01rem);margin-left: 0}
}
/* CTA Large */
.cta_large {
padding: 14.2rem 0 15.2rem;
background-size: cover;
background-position: right top;
position: relative;
z-index: 2;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .3);
z-index: -1;
}
.cta_content {
max-width: 50rem;
}
h2, .h2 {
font-size: 4rem;
margin: 0 0 2rem;
}
}
@media only screen and (max-width: 1300px){
.cta_large h2, .cta_large .h2 {font-size: 3.4rem}
}
@media only screen and (max-width: 992px){
.cta_large {padding: 12.4rem 0 13.2rem}
.cta_large::after {background: rgba(255,255,255,0.45)}
.cta_large .cta_content {max-width: 38rem}
.cta_large h2, .cta_large .h2 {font-size: 3rem}
}
@media only screen and (max-width: 767px) {
.cta_large {padding: 8.4rem 0 8.9rem}
.cta_large::after {background: rgba(255,255,255,0.6)}
.cta_large .cta_content {max-width: 31rem;margin: 0 auto;text-align: center}
.cta_large h2, .cta_large .h2 {font-size: 2.5rem}
}
@media only screen and (max-width: 450px) {
.cta_large {padding: 5.3rem 0 5.7rem}
}
@media only screen and (max-width: 350px) {
.cta_large h2, .cta_large .h2 {font-size: 2.3rem}
}