Nepal Relief Banner
One line of HTML puts that strip at the top of this page on your site, linking to the Government of Nepal Prime Minister's Disaster Relief Fund.
<script
src="https://cdn.jsdelivr.net/gh/clashrelated/nepal-relief-banner@1.0.2/banner.min.js"
integrity="sha384-zsV61Tmn6kfxMnauiuGMOgbTqBC6qhHBy/x0ne2M0sSSoK3q+xTlPs3ZMC8W/SUp"
crossorigin="anonymous"
></script>
Paste it after your opening <body> tag. 3.2 KB gzipped, no requests of its own, no branding, and it takes itself down on
30 September.
Try it
data-position | top sits above your content and scrolls away with it. sticky does the same but then holds at the top of the screen. bottom is pinned to the bottom of the viewport. If your site already has a sticky header, use top or bottom, or the two will fight over the same strip of screen. |
data-theme | light, dark, or auto. |
data-lang | en, ne, or auto, which reads your <html lang>. |
data-accent | Compatibility alias for data-link and data-icon. |
data-bg | Any CSS colour, for the background. |
data-icon | Any CSS colour, for the icon. |
data-link | Any CSS colour, for the link. |
data-underline | Any CSS colour, for the underline. |
data-rule | Any CSS colour, for the bottom border. |
data-dismissible | false drops the close button. |
data-analytics | auto forwards the donate click into your gtag or dataLayer. Off by default. |
data-until | The last day it shows, Nepal time. A bare date runs through the end of that day. Past it the script renders nothing. |
data-target | A CSS selector to mount into instead of the page edge. |