Banner Style 5

Mohsin Liaquat

Get More Out Of Your Life

Heal, Connect, Thrive: Sex Therapy, Psychotherapy, and Relationship Coaching Available online throughout CA, CO, and TX

The above block is copied from the site: Christopher Brown

Pattern HTML

<!-- wp:group {"metadata":{"name":"Banner Section"},"align":"full","className":"hero-img-section","style":{"color":{"background":"#6f8a75"}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull hero-img-section has-background" style="background-color:#6f8a75"><!-- wp:columns {"verticalAlignment":"center","style":{"spacing":{"blockGap":{"left":"0"}}}} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:image {"id":2094,"sizeSlug":"full","linkDestination":"none","className":"is-style-outside-left"} -->
<figure class="wp-block-image size-full is-style-outside-left"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/09/Art-work-44-1.png" alt="" class="wp-image-2094"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:group {"className":"banner-text","style":{"spacing":{"blockGap":"var:preset|spacing|15"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group banner-text"><!-- wp:heading {"level":1,"style":{"elements":{"link":{"color":{"text":"var:preset|color|one"}}}},"textColor":"one","fontSize":"heading-0"} -->
<h1 class="wp-block-heading has-one-color has-text-color has-link-color has-heading-0-font-size">Get More Out Of Your Life</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|one"}}}},"textColor":"one","fontSize":"heading-4","fontFamily":"two"} -->
<p class="has-one-color has-text-color has-link-color has-two-font-family has-heading-4-font-size">Heal, Connect, Thrive: Sex Therapy, Psychotherapy, and Relationship Coaching Available online throughout CA, CO, and TX</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-white-dark"} -->
<div class="wp-block-button is-style-white-dark"><a class="wp-block-button__link wp-element-button" href="#">SCHEDULE YOUR FREE CONSULTATION</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Pattern CSS

.hero-img-section .wp-block-image {
    margin-left: -205px;
}

.hero-img-section .wp-block-image img {
    width: 100%;
    max-height: 472px;
    object-fit: cover;
}

.hero-img-section .wp-block-column:last-child{
	z-index: 9;
}

.hero-img-section .wp-block-column:first-child{
	z-index: 2;
	position: relative;
}


.hero-img-section {
	position: relative;
}

.hero-img-section .wp-block-column:first-child::after {
    content: '';
    width: 127px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
    background: url(https://patterndev.upthinksolutions.com/wp-content/uploads/2025/09/banner-shade.png) no-repeat;
}

.hero-img-section .banner-text{
    margin-left: 80px;
}

.hero-img-section .wp-block-image a {
    display: block;
}


@media only screen and (max-width: 1200px){

	.hero-img-section .banner-text {
		margin-left: 0;
	}	

}


@media only screen and (max-width: 980px){
	
	.hero-img-section .wp-block-column:first-child::after{
		display: none;
	}
	.hero-img-section .banner-text {
		padding: 20px 30px 40px;
	}	
}