Effects Style 3

Mohsin Liaquat

Feel Safe, Seen, and Supported

Therapy helping women lead vibrant & healthy lives.

In-person in Frisco, and online throughout Texas.

The above block is copied from the site: https://webstyles.therapypracticeaccelerator.com/effects-style-3/

Pattern HTML

<!-- wp:cover {"url":"https://patterndev.upthinksolutions.com/wp-content/uploads/2025/08/622083866-1024x531.jpg","id":1631,"dimRatio":0,"isUserOverlayColor":true,"isDark":false,"sizeSlug":"large","className":"effect-style3","style":{"spacing":{"padding":{"top":"var:preset|spacing|150","bottom":"var:preset|spacing|200"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light effect-style3" style="padding-top:var(--wp--preset--spacing--150);padding-bottom:var(--wp--preset--spacing--200)"><img class="wp-block-cover__image-background wp-image-1631 size-large" alt="" src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/08/622083866-1024x531.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|15"}},"layout":{"type":"constrained","contentSize":"600px","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":1,"fontSize":"heading-2"} -->
<h1 class="wp-block-heading has-heading-2-font-size">Feel Safe, Seen, and Supported</h1>
<!-- /wp:heading -->

<!-- wp:heading {"fontSize":"heading-3"} -->
<h2 class="wp-block-heading has-heading-3-font-size">Therapy helping women lead vibrant &amp; healthy lives.</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3,"fontSize":"heading-4"} -->
<h3 class="wp-block-heading has-heading-4-font-size">In-person in Frisco, and online throughout Texas.</h3>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Call Now For Your Free Consultation</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Pattern CSS

.effect-style3{
	position: relative;
}

body .effect-style3:after {
    content: "";
    background-image: url(/wp-content/uploads/2025/08/fade.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 100%;
    width: 100%;
    height: 210px;
    position: absolute;
    bottom: 0;
}

@media only screen and (500){

	body .effect-style3:after {
		height: 90px;
	}
}