Banner Style 6
Find Your Calm &
Therapy Helping Individuals
The above block is copied from the site: Susan Gilliam
Pattern HTML
<!-- wp:group {"metadata":{"name":"Hero Panel"},"align":"full","className":"hero-img-section","backgroundColor":"third","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull hero-img-section has-third-background-color has-background"><!-- wp:video {"id":371,"align":"full","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<figure class="wp-block-video alignfull" style="margin-top:0;margin-bottom:0"><video autoplay loop muted src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/06/Home-Banner.mp4" playsinline></video></figure>
<!-- /wp:video -->
<!-- wp:group {"className":"hero-content","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"blockGap":"var:preset|spacing|15"}},"layout":{"type":"constrained","contentSize":"1180px"}} -->
<div class="wp-block-group hero-content" style="margin-top:0;margin-bottom:0"><!-- wp:heading {"textAlign":"center","level":1,"style":{"elements":{"link":{"color":{"text":"var:preset|color|one"}}},"typography":{"fontStyle":"normal","fontWeight":"400","lineHeight":"0.90"}},"textColor":"one","fontSize":"heading-0"} -->
<h1 class="wp-block-heading has-text-align-center has-one-color has-text-color has-link-color has-heading-0-font-size" style="font-style:normal;font-weight:400;line-height:0.90">Find Your Calm &<br>Reclaim Your Future</h1>
<!-- /wp:heading -->
<!-- wp:heading {"level":5,"style":{"elements":{"link":{"color":{"text":"var:preset|color|one"}}},"typography":{"letterSpacing":"1.3px"}},"textColor":"one","fontSize":"heading-3"} -->
<h5 class="wp-block-heading has-one-color has-text-color has-link-color has-heading-3-font-size" style="letter-spacing:1.3px">Therapy Helping Individuals <br> & Families Build Better Lives</h5>
<!-- /wp:heading -->
<!-- wp:heading {"level":5,"style":{"elements":{"link":{"color":{"text":"var:preset|color|one"}}},"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"one","fontSize":"paragraph-2"} -->
<h5 class="wp-block-heading has-one-color has-text-color has-link-color has-paragraph-2-font-size" style="font-style:normal;font-weight:400">Based in .. and Available Online Throughout California</h5>
<!-- /wp:heading -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<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="https://susangilliam.ghtdev.com/contact/">REACH OUT NOW</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Pattern CSS
/*
hero section
--------------------------------------------- */
.hero-img-section {
position: relative;
}
.hero-img-section:after {
content: "";
display: block;
width: 100%;
height: 100%;
left: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.40);
position: absolute;
}
#site-container .hero-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
text-align: center; /* optional */
}
