Timeline Type 1

Muhammad Irfan

Start the Process With a
Free Retirement Review

STEP 1

Start by getting your
Free Retirement Review

STEP 2

Take time to mull it over and
make sure we’re the right fit

STEP 3

Sit back and confidently live your best life. Let us do the work.

Schedule Now

The above block is copied from the site: https://backbayfp.com/

Pattern HTML

<!-- wp:group {"metadata":{"name":"Our Process"},"align":"full","className":"process-section","style":{"background":{"backgroundImage":{"url":"https://backbayfinanci.wpenginepowered.com/wp-content/uploads/2025/04/process-bg-image-scaled.jpg","id":97,"source":"file","title":"process-bg-image"},"backgroundSize":"cover","backgroundPosition":"50% 50%"},"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"backgroundColor":"fourth","textColor":"first","layout":{"type":"constrained","contentSize":"690px","wideSize":"100%"}} -->
<div class="wp-block-group alignfull process-section has-first-color has-fourth-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:image {"id":354,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/05/white-icon.svg" alt="" class="wp-image-354"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","textColor":"first"} -->
<h2 class="wp-block-heading has-text-align-center has-first-color has-text-color">Start the Process With a <br>Free Retirement Review</h2>
<!-- /wp:heading -->

<!-- wp:columns {"className":"step-section mobile-gap-top-none","style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}}} -->
<div class="wp-block-columns step-section mobile-gap-top-none" style="margin-top:var(--wp--preset--spacing--30)"><!-- wp:column {"verticalAlignment":"stretch","width":"21%","style":{"spacing":{"blockGap":"0"}}} -->
<div class="wp-block-column is-vertically-aligned-stretch" style="flex-basis:21%"><!-- wp:image {"id":355,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/05/1.svg" alt="" class="wp-image-355"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"letterSpacing":"6px"}},"fontSize":"heading-5"} -->
<p class="has-text-align-center has-heading-5-font-size" style="letter-spacing:6px"><strong>STEP 1</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"stretch","width":"79%"} -->
<div class="wp-block-column is-vertically-aligned-stretch" style="flex-basis:79%"><!-- wp:heading {"level":3,"textColor":"first"} -->
<h3 class="wp-block-heading has-first-color has-text-color">Start by getting your <br><strong>Free Retirement Review</strong></h3>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"className":"step-section"} -->
<div class="wp-block-columns step-section"><!-- wp:column {"verticalAlignment":"stretch","width":"21%","style":{"spacing":{"blockGap":"0"}}} -->
<div class="wp-block-column is-vertically-aligned-stretch" style="flex-basis:21%"><!-- wp:image {"id":356,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/05/2.svg" alt="" class="wp-image-356"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"letterSpacing":"6px"}},"fontSize":"heading-5"} -->
<p class="has-text-align-center has-heading-5-font-size" style="letter-spacing:6px"><strong>STEP 2</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"stretch","width":"79%"} -->
<div class="wp-block-column is-vertically-aligned-stretch" style="flex-basis:79%"><!-- wp:heading {"level":3,"textColor":"first"} -->
<h3 class="wp-block-heading has-first-color has-text-color">Take time to mull it over and <br>make sure we’re the right fit</h3>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"className":"step-section"} -->
<div class="wp-block-columns step-section"><!-- wp:column {"verticalAlignment":"stretch","width":"21%","style":{"spacing":{"blockGap":"0"}}} -->
<div class="wp-block-column is-vertically-aligned-stretch" style="flex-basis:21%"><!-- wp:image {"id":357,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/05/3.svg" alt="" class="wp-image-357"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"letterSpacing":"6px"}},"fontSize":"heading-5"} -->
<p class="has-text-align-center has-heading-5-font-size" style="letter-spacing:6px"><strong>STEP 3</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"stretch","width":"79%"} -->
<div class="wp-block-column is-vertically-aligned-stretch" style="flex-basis:79%"><!-- wp:heading {"level":3,"textColor":"first"} -->
<h3 class="wp-block-heading has-first-color has-text-color">Sit back and confidently live your best life. <strong><em>Let us do the work.</em></strong></h3>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-white-hover large-btn"} -->
<div class="wp-block-button is-style-white-hover large-btn"><a class="wp-block-button__link wp-element-button" href="https://backbayfinanci.wpenginepowered.com/retirement-review/#first">Schedule Now</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

Pattern CSS

#site-container .process-section .step-section .wp-block-column:first-child {
	position: relative;
}

#site-container .process-section .step-section .wp-block-column:first-child p {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
}

#site-container .process-section .step-section {
	padding: 23px 0;
}

#site-container .process-section .step-section .wp-block-column:last-child {
	padding-left: var(--wp--preset--spacing--80);
	position: relative;
	display: table;
}

#site-container .process-section .step-section .wp-block-column:last-child h3 {
	display: table-cell;
	vertical-align: middle;
}

#site-container .process-section .step-section .wp-block-column:last-child::before,
#site-container .process-section .step-section .wp-block-column:last-child::after {
	content: '';
	display: block;
	position: absolute;
}

#site-container .process-section .step-section .wp-block-column:last-child::before {
	background: var(--wp--preset--color--sixth);
	width: 2px;
	height: calc( 100% + 46px );
	top: 0;
	left: 20px;
}

#site-container .process-section .step-section .wp-block-column:last-child::after {
	background: var(--wp--preset--color--first);
	width: 11px;
	height: 11px;
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
	margin-top: -5.5px;
	left: 15px;
}

#site-container .process-section .step-section:nth-of-type(3) .wp-block-column:last-child::before {
	height: 100%;
}

#site-container .process-section .step-section h3 strong {
	font-family: var(--wp--preset--font-family--georgiabold);
}

#site-container .process-section .step-section h3 strong em {
	font-family: var(--wp--preset--font-family--georgiabolditalic);
}

@media only screen and (max-width: 1200px) {
#site-container .process-section .step-section {
		max-width: 550px !important;
	}

	#site-container .process-section .step-section .wp-block-column:last-child::before {
		left: 0;
	}

	#site-container .process-section .step-section .wp-block-column:last-child::after {
		left: -5px;
	}
}
@media only screen and (max-width: 980px) {
#site-container .process-section .step-section .wp-block-column:last-child::before,
	#site-container .process-section .step-section .wp-block-column:last-child::after {
		display: none;
	}

	#site-container .process-section .step-section .wp-block-column:last-child {
		padding: 0;
		text-align: center;
	}

	#site-container .process-section .step-section {
        max-width: 100% !important;
    }

	#site-container .process-section .step-section {
		padding: 30px 0 0;
	}
#site-container .process-section .step-section .wp-block-column:last-child h3 {
		display: block;
	}
}

Timeline Type 1

Start the Process With a Free Retirement Review

Start by getting your Free Retirement Review

Take time to mull it over and make sure we’re the right fit

Sit back and confidently live your best life. Let us do the work.

Pattern HTML

Pattern CSS

Start the Process With a
Free Retirement Review

Start by getting your
Free Retirement Review

Take time to mull it over and
make sure we’re the right fit