Therapist Services 21
The above block is copied from the site: Alex Parlette
Pattern HTML
<!-- wp:group {"metadata":{"name":"Services"},"className":"services-area mobile-align-center","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained","contentSize":"945px"}} -->
<div class="wp-block-group services-area mobile-align-center" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:group {"metadata":{"name":"Container"},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"metadata":{"name":"Title"},"className":"services-title","layout":{"type":"constrained"}} -->
<div class="wp-block-group services-title"><!-- wp:group {"metadata":{"name":"Circle"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:heading {"textAlign":"center","fontSize":"heading-1"} -->
<h2 class="wp-block-heading has-text-align-center has-heading-1-font-size">What <br>We Offer</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:columns {"verticalAlignment":"center","metadata":{"name":"1"},"animationsForBlocks":{"animation":"fade","variation":"fade","duration":1500,"once":true,"mirror":false},"className":"services-1"} -->
<div class="wp-block-columns are-vertically-aligned-center services-1" data-aos="fade" data-aos-duration="1500" data-aos-once="true"><!-- wp:column {"verticalAlignment":"center","width":"66.7%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.7%"><!-- wp:image {"id":2774,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/12/services-21-individual-icon.png" alt="" class="wp-image-2774"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"level":3,"style":{"elements":{"link":{"color":{"text":"var:preset|color|two"}}},"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"two"} -->
<h3 class="wp-block-heading has-two-color has-text-color has-link-color" style="font-style:normal;font-weight:400"><a href="#">Individual Therapy</a></h3>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"verticalAlignment":"bottom","metadata":{"name":"2"},"animationsForBlocks":{"animation":"fade","variation":"fade","duration":1500,"once":true,"mirror":false,"delay":250},"className":"services-2"} -->
<div class="wp-block-columns are-vertically-aligned-bottom services-2" data-aos="fade" data-aos-delay="250" data-aos-duration="1500" data-aos-once="true"><!-- wp:column {"verticalAlignment":"bottom","width":"66.7%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:66.7%"><!-- wp:image {"id":2775,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/12/services-21-teen-icon.png" alt="" class="wp-image-2775"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"bottom"} -->
<div class="wp-block-column is-vertically-aligned-bottom"><!-- wp:heading {"level":3,"style":{"elements":{"link":{"color":{"text":"var:preset|color|two"}}},"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"two"} -->
<h3 class="wp-block-heading has-two-color has-text-color has-link-color" style="font-style:normal;font-weight:400"><a href="#">Teen Therapy</a></h3>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"verticalAlignment":"bottom","metadata":{"name":"3"},"animationsForBlocks":{"animation":"fade","variation":"fade","duration":1500,"once":true,"mirror":false,"delay":500},"className":"services-3"} -->
<div class="wp-block-columns are-vertically-aligned-bottom services-3" data-aos="fade" data-aos-delay="500" data-aos-duration="1500" data-aos-once="true"><!-- wp:column {"verticalAlignment":"bottom","width":"66.7%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:66.7%"><!-- wp:image {"id":2776,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/12/services-21-childrens-icon.png" alt="" class="wp-image-2776"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"bottom"} -->
<div class="wp-block-column is-vertically-aligned-bottom"><!-- wp:heading {"level":3,"style":{"elements":{"link":{"color":{"text":"var:preset|color|two"}}},"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"two"} -->
<h3 class="wp-block-heading has-two-color has-text-color has-link-color" style="font-style:normal;font-weight:400"><a href="#">Children’s Therapy</a></h3>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"metadata":{"name":"4"},"animationsForBlocks":{"animation":"fade","variation":"fade","duration":1500,"once":true,"mirror":false,"delay":750},"className":"services-4"} -->
<div class="wp-block-columns services-4" data-aos="fade" data-aos-delay="750" data-aos-duration="1500" data-aos-once="true"><!-- wp:column {"width":"66.7%"} -->
<div class="wp-block-column" style="flex-basis:66.7%"><!-- wp:image {"id":2777,"width":"147px","height":"auto","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/12/services-21-emdr-icon.png" alt="" class="wp-image-2777" style="width:147px;height:auto"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"elements":{"link":{"color":{"text":"var:preset|color|two"}}},"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"two"} -->
<h3 class="wp-block-heading has-two-color has-text-color has-link-color" style="font-style:normal;font-weight:400"><a href="#">EMDR Therapy</a></h3>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"verticalAlignment":"center","metadata":{"name":"5"},"animationsForBlocks":{"animation":"fade","variation":"fade","duration":1500,"once":true,"mirror":false,"delay":1000},"className":"services-5"} -->
<div class="wp-block-columns are-vertically-aligned-center services-5" data-aos="fade" data-aos-delay="1000" data-aos-duration="1500" data-aos-once="true"><!-- wp:column {"verticalAlignment":"center","width":"66.7%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.7%"><!-- wp:image {"id":2773,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/12/services-21-christian-icon.png" alt="" class="wp-image-2773"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"level":3,"style":{"elements":{"link":{"color":{"text":"var:preset|color|two"}}},"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"two"} -->
<h3 class="wp-block-heading has-two-color has-text-color has-link-color" style="font-style:normal;font-weight:400"><a href="#">Christian Counseling</a></h3>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Pattern CSS
/*
Services section
--------------------------------------------- */
#site-container .services-title {
padding-top: 50px;
padding-bottom: 50px;
padding-right: 50px;
max-width: 371px;
width: 100%;
position: absolute;
top: 115px;
left: 0;
}
body .services-title:after {
content: "";
background-image: url(/wp-content/uploads/2025/12/services-circle.svg);
background-repeat: no-repeat;
background-position: center right;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: -10px;
z-index: -1;
}
body .services-title .wp-block-group {
display: flex;
align-items: center;
min-height: 321px;
box-shadow: 0 0 14px rgba(30, 66, 34, 0.45);
border-radius: 100%;
}
#site-container .services-area h2,
#site-container .services-area h3 {
position: relative;
z-index: 9;
}
#site-container .services-area .wp-block-columns {
position: relative;
}
body .services-area .wp-block-columns:before {
content: "";
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
right: 180px;
z-index: -1;
}
body .services-1:before {
background-image: url(/wp-content/uploads/2025/12/arrow-1.svg);
background-position: top right;
top: 20px;
}
body .services-2:before {
background-image: url(/wp-content/uploads/2025/12/arrow-2.svg);
background-position: bottom right;
bottom: 45px;
}
body .services-3:before {
background-image: url(/wp-content/uploads/2025/12/arrow-3.svg);
background-position: bottom right;
bottom: 45px;
}
body .services-4:before {
background-image: url(/wp-content/uploads/2025/12/arrow-4.svg);
background-position: bottom right;
bottom: 45px;
}
body .services-5:before {
background-image: url(/wp-content/uploads/2025/12/arrow-5.svg);
background-position: bottom right;
bottom: 7px;
}
#site-container .services-2 {
margin-top: -60px;
margin-bottom: 50px;
}
#site-container .services-4 {
margin-top: 50px;
margin-bottom: -50px;
}
body .services-1 .wp-block-image,
body .services-5 .wp-block-image {
padding-left: 120px;
}
body .services-2 .wp-block-image,
body .services-4 .wp-block-image {
padding-left: 290px;
}
body .services-3 .wp-block-image {
padding-left: 365px;
}
#site-container .services-1 h3 {
padding-top: 15px;
}
#site-container .services-4 h3 {
padding-top: 30px;
}
body .services-area .wp-block-columns:focus-within a,
body .services-area .wp-block-columns:hover a {
text-decoration: underline;
}
@media only screen and (max-width: 980px) {
#site-container .services-title {
position: relative;
top: auto;
left: auto;
padding-top: 30px;
padding-bottom: 30px;
max-width: 325px;
}
body .services-title:after {
background-size: contain;
}
body .services-title .wp-block-group {
min-height: 275px;
}
#site-container .services-area .wp-block-columns {
padding-top: 30px;
}
body .services-area .wp-block-columns:before {
display: none;
}
#site-container .services-2 {
margin-top: 0;
margin-bottom: 0;
}
#site-container .services-4 {
margin-top: 0;
margin-bottom: 0;
}
body .services-1 .wp-block-image,
body .services-5 .wp-block-image {
padding-left: 0;
}
body .services-2 .wp-block-image,
body .services-4 .wp-block-image {
padding-left: 0;
}
body .services-3 .wp-block-image {
padding-left: 0;
}
#site-container .services-1 h3 {
padding-top: 0;
}
#site-container .services-4 h3 {
padding-top: 0;
}
}
