WARNING !!
YOUR LAYOUT IS INCOMPLETE!
ADD THE FOLLOWING CODE TO YOUR PAGE / SITE TO COMPLETE IT NOW!
↓
Custom CSS > ADD THIS TO COMPLETE THE LAYOUT! ↓
/* IMAGE LEFT & TEXT RIGHT */
.anthemOverlap .anthemOverlapImageLeft {
box-shadow: 0 0 50px rgba(0, 0, 0, .3);
position: relative;
z-index: 998;
margin-left: 75px;
}
.anthemOverlap .anthemOverlapTextRight {
box-shadow: 0 0 50px rgba(0, 0, 0, .2);
position: relative;
z-index: 999;
margin-left: -125px;
margin-top: 75px;
}
@media screen and (max-width: 1140px) {
.anthemOverlap .anthemOverlapImageLeft {
margin-left: 50px;
}
.anthemOverlap .anthemOverlapTextRight {
margin-left: -75px;
margin-top: 50px;
}
}
@media screen and (max-width: 980px) {
.anthemOverlap .anthemOverlapImageLeft {
margin-left: 13%;
}
.anthemOverlap .anthemOverlapTextRight {
margin-left: 13%;
margin-top: -90px;
}
}
@media screen and (max-width: 768px) {
.anthemOverlap .anthemOverlapImageLeft {
margin-left: 10%;
}
.anthemOverlap .anthemOverlapTextRight {
margin-left: -10%;
}
}
@media screen and (max-width: 600px) {
.anthemOverlap .anthemOverlapImageLeft {
margin_left: 0;
margin-top: -30px;
}
}
/* TEXT LEFT & IMAGE RIGHT */
.anthemOverlap .anthemOverlapImageRight {
box-shadow: 0 0 50px rgba(0, 0, 0, .3);
position: relative;
z-index: 998;
margin-left: -125px;
}
.anthemOverlap .anthemOverlapTextLeft {
box-shadow: 0 0 50px rgba(0, 0, 0, .2);
position: relative;
z-index: 999;
margin-left: 75px;
margin-top: 75px;
}
@media screen and (max-width: 1140px) {
.anthemOverlap .anthemOverlapImageRight {
margin-left: -75px;
}
.anthemOverlap .anthemOverlapTextLeft {
margin-left: 50px;
margin-top: 50px;
}
}
@media screen and (max-width: 980px) {
.anthemOverlap .anthemOverlapImageRight {
margin-left: -13%;
margin-top: -90px;
}
.anthemOverlap .anthemOverlapTextLeft {
margin-left: 13%;
margin-top: 0;
}
}
@media screen and (max-width: 768px) {
.anthemOverlap .anthemOverlapImageRight {
margin-left: -10%;
}
.anthemOverlap .anthemOverlapTextLeft {
margin-left: 10%;
}
}
@media screen and (max-width: 600px) {
.anthemOverlap .anthemOverlapImageRight {
margin_left: 0;
margin-top: -30px;
}
.anthemOverlap .anthemOverlapTextLeft {
margin-left: 0;
}
}
HOW TO ADD IT
YOU CAN DELETE THIS SECTION AFTER YOU DO THAT 🙂
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
CSS Code placed in the page CSS
CSS Class: anthemOverlap
/* IMAGE LEFT & TEXT RIGHT */
.anthemOverlap .anthemOverlapImageLeft {
box-shadow:0 0 50px rgba(0,0,0,.3);
position: relative;
z-index: 998;
margin-left: 75px;
}
.anthemOverlap .anthemOverlapTextRight {
box-shadow:0 0 50px rgba(0,0,0,.2);
position: relative;
z-index: 999;
margin-left: -125px;
margin-top: 75px;
}
@media screen and (max-width : 1140px) {
.anthemOverlap .anthemOverlapImageLeft {
margin-left: 50px;
}
.anthemOverlap .anthemOverlapTextRight {
margin-left: -75px;
margin-top: 50px;
}
}
@media screen and (max-width : 980px) {
.anthemOverlap .anthemOverlapImageLeft {
margin-left: 13%;
}
.anthemOverlap .anthemOverlapTextRight {
margin-left: 13%;
margin-top: -90px;
}
}
@media screen and (max-width : 768px) {
.anthemOverlap .anthemOverlapImageLeft {
margin-left: 10%;
}
.anthemOverlap .anthemOverlapTextRight {
margin-left: -10%;
}
}
@media screen and (max-width : 600px) {
.anthemOverlap .anthemOverlapImageLeft {
margin_left: 0;
margin-top: -30px;
}
}
/* TEXT LEFT & IMAGE RIGHT */
.anthemOverlap .anthemOverlapImageRight {
box-shadow: 0 0 50px rgba(0,0,0,.3);
position: relative;
z-index: 998;
margin-left: -125px;
}
.anthemOverlap .anthemOverlapTextLeft {
box-shadow:0 0 50px rgba(0,0,0,.2);
position: relative;
z-index: 999;
margin-left: 75px;
margin-top: 75px;
}
@media screen and (max-width : 1140px) {
.anthemOverlap .anthemOverlapImageRight {
margin-left: -75px;
}
.anthemOverlap .anthemOverlapTextLeft {
margin-left: 50px;
margin-top: 50px;
}
}
@media screen and (max-width : 980px) {
.anthemOverlap .anthemOverlapImageRight {
margin-left: -13%;
margin-top: -90px;
}
.anthemOverlap .anthemOverlapTextLeft {
margin-left: 13%;
margin-top: 0;
}
}
@media screen and (max-width : 768px) {
.anthemOverlap .anthemOverlapImageRight {
margin-left: -10%;
}
.anthemOverlap .anthemOverlapTextLeft {
margin-left: 10%;
}
}
@media screen and (max-width : 600px) {
.anthemOverlap .anthemOverlapImageRight {
margin_left: 0;
margin-top: -30px;
}
.anthemOverlap .anthemOverlapTextLeft {
margin-left: 0;
}
}