Overlapping containers and columns

Hi there,

That looks like the layout used in Mason:
https://gpsites.co/mason/

Here is the HTML for it:

<!-- wp:generateblocks/container {"uniqueId":"a784eaa4","gradientColorOneOpacity":1,"gradientColorStopOne":0,"bgImage":{"id":817,"image":{"url":"https://gpsites.co/mason/wp-content/uploads/sites/72/pexels-expect-best-323780-1.jpg","height":1160,"width":1800,"orientation":"landscape"}},"bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"right center","size":"1160px","repeat":"no-repeat","attachment":""},"isDynamic":true,"blockVersion":4,"sizing":{"height":"","maxWidth":""}} -->
<!-- wp:generateblocks/container {"uniqueId":"a7e46c64","isDynamic":true,"blockVersion":4,"sizing":{"maxWidth":""},"useGlobalMaxWidth":true,"spacing":{"paddingTop":"120px","paddingRight":"20px","paddingBottom":"120px","paddingLeft":"20px","marginRight":"auto","marginLeft":"auto","paddingTopMobile":"80px","paddingRightMobile":"20px","paddingBottomMobile":"120px","paddingLeftMobile":"20px"}} -->
<!-- wp:generateblocks/container {"uniqueId":"29929053","backgroundColor":"var(\u002d\u002dbase-3)","gradientColorOneOpacity":1,"gradientColorStopOne":40,"gradientColorTwoOpacity":1,"gradientColorStopTwo":40,"isDynamic":true,"blockVersion":4,"sizing":{"width":"58%","widthTablet":"75%","widthMobile":"100%","height":"","maxWidth":""},"spacing":{"paddingTop":"50px","paddingRight":"50px","paddingBottom":"30px","paddingLeft":"20px","marginLeft":"-20px","paddingTopTablet":"40px","paddingRightTablet":"40px","paddingBottomTablet":"20px","paddingLeftTablet":"40px","paddingTopMobile":"30px","paddingRightMobile":"30px","paddingBottomMobile":"10px","paddingLeftMobile":"30px"},"borders":{"borderRightWidth":"2px","borderRightStyle":"solid","borderRightColor":"var(\u002d\u002daccent-3)"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"de5b8cd0","element":"h1","blockVersion":3,"typography":{"fontSize":"44px"},"spacing":{"marginBottom":"10px"}} -->
<h1 class="gb-headline gb-headline-de5b8cd0 gb-headline-text">Recognizing the need is the primary condition for design</h1>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"e170e9e8","element":"div","blockVersion":3,"display":"flex","flexDirection":"column","typography":{"fontSize":"20px"},"spacing":{"marginBottom":"10px"},"hasIcon":true,"iconColor":"var(\u002d\u002daccent-3)","iconLocation":"above","iconPaddingRight":"","removeText":true,"iconStyles":{"width":"1.4em","height":"1.4em","paddingBottom":"0.5em"}} -->
<div class="gb-headline gb-headline-e170e9e8"><span class="gb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.7 3"><path d="M0 0h36.7v3H0z"></path></svg></span></div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"5e1c6794","element":"p","blockVersion":3,"typography":{"fontSize":"20px"},"iconColor":"#cc5252","iconLocation":"above","iconPaddingRight":"","iconPaddingBottom":"0.5","iconSize":1.4} -->
<p class="gb-headline gb-headline-5e1c6794 gb-headline-text">Mason is a clean and minimalistic site perfect for architecture firms, commercial and residential developers or interior designers. </p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

Our site library is an excellent resource for things like this 🙂

You will need to import the whole site, but if you want a specific section, just let us know, and we can get the code for you.

No Problem 🙂