Demo design 5 implementing

[glcvr6]

Hello, my mountain rescue org plan to open donation platform and we found this amazing addon that will fulfill our needs
We saw Demo 5 and how to implement demo 5 style ( https://wcdp.jonh.eu/demos/demo-style-5/ ) on our webpage?
I've installed Astra theme, installed and created everything, now just need to implement this kind of style to page.

Thank you all for help.

As our token of appreciation we will try to translate this awsome plugin to our native language :)

[jonas-hoebenreich]

Hi glcvr6,
thanks for reaching out.
Below you can find the complete HTML I use on this page.
If this solves your issue please mark it as the accepted answer.

Best,
Jonas

<div style="background: url(https://wcdp.jonh.eu/wp-content/uploads/ahmed-galal-SDuzS9wCvqY-unsplash.jpg) no-repeat center center fixed;background-size: cover;">
	<div class="ast-container">
		<div style="height:55vh"></div>
		<div class="home-table">
			<div>
				<div class="mobile-hide" style="height:15vh"></div>
			</div>
			<div>
				<div style="background-color:white;padding:15px;">
					<h2>Demo (Style 5)</h2>
					<p>Style 5 uses a neat banner header.
						<br>
						<br>
					</p> [wcdp_donation_form id="4260" style="5"] </div>
			</div>
		</div>
		<div style="height:150px"></div>
	</div>
</div>
<style>
.home-table {
	display: grid;
	grid-template-columns: 57% 43%;
}

@media screen and (max-width: 768px) {
	.home-table {
		grid-template-columns: 1fr;
	}
	.mobile-hide {
		display: none;
	}
}
</style>

[glcvr6]

Thank you very much, this is what I looked for :)