Skip to content

Instantly share code, notes, and snippets.

@WalrusGumboot

WalrusGumboot/veto-donatiebanner.html

Created September 17, 2024 17:21
Show Gist options
  • Save WalrusGumboot/497deb5afcea05e3dddb74a95d759849 to your computer and use it in GitHub Desktop.
Save WalrusGumboot/497deb5afcea05e3dddb74a95d759849 to your computer and use it in GitHub Desktop.
Download ZIP
De banner voor Vetodonaties.
Raw
veto-donatiebanner.html
<script>
function sluitDonatiebanner() {
document.getElementById('donatiebanner').parentElement.style.display = 'none';
}
document.getElementById("sluitDonatiebannerKnop").addEventListener("click", sluitDonatiebanner);
</script>
<div id="donatiebanner">
<h3>Meer van deze kwalitatieve journalistiek lezen?</h3>
<p>
Wij schrijven al vijftig jaar belangeloos over de onderwerpen die u aanbelangen. Steun ons door middel van een vrije bijdrage zodat wij ons werk nog vijftig jaar kunnen voortzetten.
</p>
<script async
src="https://js.stripe.com/v3/buy-button.js">
</script>
<stripe-buy-button
buy-button-id="buy_btn_1Q03EfP1YIU1a37LYPTAcmAT"
publishable-key="pk_live_51Q02YTP1YIU1a37L1HpIvBiNlSJxvBCPI9BtIZE9yi0QU7KnkIHuqL72QYpQBX9GYWWG3C8ZDC2AlzxAtSe1dcjv00xwZ1RrCt"
>
</stripe-buy-button>
<button id="sluitDonatiebannerKnop">Sluiten</button>
</div>
<style>
#donatiebanner {
display: flex;
width: 100%;
padding: 1rem;
flex-direction: column;
gap: 4px;
}
#sluitDonatiebannerKnop {
border: 0px;
padding: 0.5rem;
background-color: white;
cursor: pointer;
}
@media only screen and (min-width: 480px) {
#sluitDonatiebannerKnop {
position: absolute;
right: 1rem;
top: 1rem;
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment