Landing Banner style 2

Mohsin Liaquat

The above block is copied from the site: TPA

Pattern HTML

<!-- wp:group {"metadata":{"name":"Landing Banner "},"align":"full","className":"lp0015-banner","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"backgroundColor":"eight","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull lp0015-banner has-eight-background-color has-background" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:columns {"className":"mobile-reverse-columns"} -->
<div class="wp-block-columns mobile-reverse-columns"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":1,"fontSize":"heading-1"} -->
<h1 class="wp-block-heading has-heading-1-font-size">Lorem Ipsum Dolor <br>Sit Amet</h1>
<!-- /wp:heading -->

<!-- wp:heading {"fontSize":"heading-3"} -->
<h2 class="wp-block-heading has-heading-3-font-size">Lorem Ipsum Dolor Sit Amet</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":4,"fontSize":"heading-4"} -->
<h4 class="wp-block-heading has-heading-4-font-size">Lorem Ipsum Dolor Sit Amet</h4>
<!-- /wp:heading -->

<!-- wp:group {"className":"banner-heading-button","style":{"spacing":{"blockGap":"0"}},"backgroundColor":"one","layout":{"type":"constrained","contentSize":"333px","justifyContent":"left"}} -->
<div class="wp-block-group banner-heading-button has-one-background-color has-background"><!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"0","bottom":"0"}}},"fontSize":"heading-5"} -->
<p class="has-text-align-center has-heading-5-font-size" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><strong>Learn How It Works</strong></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"three"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-three-background-color has-background wp-element-button">Call Now For Your Free Consultation</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":1306,"sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/08/img-shape.png" alt="" class="wp-image-1306"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Pattern CSS

#site-container .banner-heading-button {
    max-width: 333px;
    float: left;
}

@media only screen and (max-width: 980px) {
	
	#site-container .banner-heading-button {
		margin: 20px auto 0;
		float: none;
		max-width: 275px;
	}
	
	.lp0015-banner h1,
	.lp0015-banner h2,
	.lp0015-banner h3,
	.lp0015-banner h4,
	.lp0015-banner h5 {
		text-align: center;
	}	
	
}