01832 2727265 mail@reapertelecom.co.uk

Blurb

Blurb

Blurb

Blurb

Skewed Blurbs

In your DIVI Builder:

1. Add a row with 4 columns.
2. Add a blurb module to each column.
3. In the Custom CSS tab for each module, add the class blurbSkewCol1 blurbSkewCol2 blurbSkewCol3 blurbSkewCol4 respectively.
4. Add the CSS code given below, to your stylesheet.
/*———— Skewed Blurbs ————–*/
.blurbSkewCol1,.blurbSkewCol3 {
background-color: #84A234;
position: relative;
height:350px;
}

.blurbSkewCol2,.blurbSkewCol4 {
background-color: #94BB30;
position: relative;
height:350px;
}

.blurbSkewCol1::before,.blurbSkewCol3::before {
transform:skewY(5deg);
transform-origin: left top;
top:-40px;
left:0;
content: ”;
position: absolute;
background: inherit;
display: inline-block;
width:100%;
height:40px;
}

.blurbSkewCol1::after,.blurbSkewCol3::after {
transform:skewY(-5deg);
transform-origin: left bottom;
bottom: -40px;
left:0;
content: ”;
position: absolute;
background: inherit;
display: inline-block;
width:100%;
height:40px;
}

.blurbSkewCol2::before,.blurbSkewCol4::before {
transform:skewY(-5deg);
transform-origin: right top;
top:-40px;
left:0;
content: ”;
position: absolute;
background: inherit;
display: inline-block;
width:100%;
height:40px;
}

.blurbSkewCol2::after,.blurbSkewCol4::after {
transform:skewY(5deg);
transform-origin: right bottom;
bottom:-40px;
left:0;
content: ”;
position: absolute;
background: inherit;
display: inline-block;
width:100%;
height:40px;
}

/* ——– Skew Inner Content ——– */
.blurbSkewCol1 .et_pb_blurb_content,.blurbSkewCol3 .et_pb_blurb_content{
transform: perspective(200px) rotateY(5deg);
display:inline-block;
margin-left:15px;
padding:15px;
z-index:10;
}

.blurbSkewCol2 .et_pb_blurb_content,.blurbSkewCol4 .et_pb_blurb_content{
transform: perspective(200px) rotateY(-5deg);
display:inline-block;
margin-right:15px;
padding:15px;
z-index:10;
}