[Video] Thrive Architect’s Shape Dividers in Oxygen

This screencast shows how Thrive Architect’s shape dividers can be manually implemented in Oxygen.

Watch the video to get some context on the codes below.

Code Block’s HTML:

<div class="tve-page-section-out"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 154.9" style="enable-background:new 0 0 1000 154.9;" xml:space="preserve" data-position="bottom" data-ct="38071" decoration-type="Waves 03" class="svg-shape-bottom" width="100%" preserveAspectRatio="none" data-css="tve-u-169d1dc70bc">
<style type="text/css">
	.p169d1dc70b9{opacity:0.2;}
</style>
<path class="p169d1dc70b9" d="M1000,90.6c-60.3-52.9-150.8-69.7-226-41.2c-23.2,8.8-44.8,21.4-68.6,28.4c-35.2,10.4-72.9,7.8-109.3,2.7
	c-19.1-2.7-38.1-6.1-56.2-12.6c-33.4-12-62.1-39.8-95.8-51c-44.2-14.7-84-19-138.7-6.1c-45.4,10.7-103.6,66-175.1,60
	C72.8,66.1,0.5,0,0.5,0v151.9H1000V90.6z"></path>
<path class="p169d1dc70ba" d="M1000,139.1C939.7,87,845.6,91.8,770.1,120.9c-59.9,23.1-92.4-21.6-173.7,0C499.9,146.6,474.7,66.4,412,52
	c-117.5-27-202.2,63.9-263.4,71.9C38.1,138.4,0,64,0,64v90.9h1000V139.1z"></path>
</svg></div>

Code Block’s CSS:

[data-css="tve-u-169d1dc70bc"] {
	height: 177px;
	bottom: 0px;
	fill: rgb(255, 255, 255);
}

@media only screen and (max-width: 992px) {
  
	[data-css="tve-u-169d1dc70bc"] {
		height: 120px;
	}
  
}

@media only screen and (max-width: 768px) {
  
	[data-css="tve-u-169d1dc70bc"] {
		height: 80px;
	}
  
}

Sitewide CSS:

.tve-page-section-out {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
}

.svg-shape-bottom,
.svg-shape-top {
	position: absolute;
}

Here’s a different video on the same topic by Supa Mike:

https://oxygen4fun.supadezign.com/ThriveDividers-to-Oxygen.mp4