Banner Style 4

Reconnect With Your Partner and Yourself

Pattern HTML

<!-- wp:group {"metadata":{"name":"Hero Panel"},"align":"full","className":"hero-img-section","style":{"spacing":{"blockGap":"0px","padding":{"top":"var:preset|spacing|15","bottom":"var:preset|spacing|15","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"top":"var:preset|spacing|15","bottom":"var:preset|spacing|15"}},"color":{"background":"#3b0014"}},"layout":{"type":"constrained"}} --> <div class="wp-block-group alignfull hero-img-section has-background" style="background-color:#3b0014;margin-top:var(--wp--preset--spacing--15);margin-bottom:var(--wp--preset--spacing--15);padding-top:var(--wp--preset--spacing--15);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--15);padding-left:var(--wp--preset--spacing--30)"><!-- wp:columns {"align":"full","className":"mobile-reverse-columns"} --> <div class="wp-block-columns alignfull mobile-reverse-columns"><!-- wp:column {"verticalAlignment":"center"} --> <div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"align":"full","className":"hero-caption","style":{"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0px"},"blockGap":"var:preset|spacing|15"}},"layout":{"type":"constrained"}} --> <div class="wp-block-group alignfull hero-caption" style="margin-top:0px;padding-top:0;padding-bottom:0"><!-- wp:heading {"textAlign":"left","level":1,"style":{"elements":{"link":{"color":{"text":"var:preset|color|first"}}}},"textColor":"first"} --> <h1 class="wp-block-heading has-text-align-left has-first-color has-text-color has-link-color">Reconnect With Your Partner and Yourself</h1> <!-- /wp:heading --> <!-- wp:heading {"textAlign":"left","level":4,"style":{"elements":{"link":{"color":{"text":"var:preset|color|first"}}}},"textColor":"first","fontSize":"heading-3"} --> <h4 class="wp-block-heading has-text-align-left has-first-color has-text-color has-link-color has-heading-3-font-size">Therapy Helping Couples Find Their <br>Way Back To One Another</h4> <!-- /wp:heading --> <!-- wp:heading {"textAlign":"left","level":5,"style":{"typography":{"fontSize":"20px"},"elements":{"link":{"color":{"text":"var:preset|color|first"}}}},"textColor":"first"} --> <h5 class="wp-block-heading has-text-align-left has-first-color has-text-color has-link-color" style="font-size:20px">In-Person in Ft. Lauderdale and Available<br>Online Throughout FL</h5> <!-- /wp:heading --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} --> <div class="wp-block-buttons"><!-- wp:button {"textAlign":"center"} --> <div class="wp-block-button"><a class="wp-block-button__link has-text-align-center wp-element-button">SCHEDULE YOUR FREE CONSULTATION</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div> <!-- /wp:group --></div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"><!-- wp:image {"id":559,"sizeSlug":"full","linkDestination":"none","className":"animated backInRight slower"} --> <figure class="wp-block-image size-full animated backInRight slower"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/2521405799.jpg" alt="" class="wp-image-559"/></figure> <!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns --></div> <!-- /wp:group -->

Pattern CSS

#site-container .hero-caption { max-width: 570px; float: right; padding: 0; } #site-container .hero-img-section .wp-block-image img { width: 100%; } #site-container .hero-img-section h1{ line-height: 120%; } #site-container .hero-img-section h4{ font-weight: 400; line-height: 140%; } #site-container .hero-img-section h5{ font-size: 18px; font-style: normal; font-weight: 700; line-height: 166%; } .hero-img-section .wp-block-image{ position: relative; } .hero-img-section .wp-block-image:after { content: ''; width: 100px; height: 100px; position: absolute; left: -2px; bottom: -6px; background: url("https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/shape.png") no-repeat; } @media only screen and (max-width: 1200px) { .hero-img-section .wp-block-columns { padding: 0 25px; } } @media only screen and (max-width: 980px) { #site-container .hero-caption { max-width: 100%; float: none; padding: 0; } .hero-img-section .wp-block-image { position: relative; justify-content: center; display: flex; } }