Skip to content

Instantly share code, notes, and snippets.

@anttispitkanen
Last active June 30, 2023 16:40
Show Gist options
  • Save anttispitkanen/cfc6df6b8cba3b6d02f752fc3ddf0637 to your computer and use it in GitHub Desktop.
Save anttispitkanen/cfc6df6b8cba3b6d02f752fc3ddf0637 to your computer and use it in GitHub Desktop.
πŸ‡ΊπŸ‡¦ Support Ukraine HTML link banners πŸ‡ΊπŸ‡¦

πŸ‡ΊπŸ‡¦ Support Ukraine HTML link banners πŸ‡ΊπŸ‡¦

Ukraine needs all the help we can give in fighting the Russian dictator Vladimir Putin's war. See information and resources on trusted news sources, also a short summary here: https://github.com/anttispitkanen

As someone building or maintaining a website of any kind, a simple way to help is to add a banner to show support, raise awareness, and guide visitors towards actionable help.

Here are some ready made HTML tags that you can freely use, modify according to your desire, and drop on your site. They act as a clickable banner that links to the resource of your choice.

Customizing the look

The style attribute lists the things that affect how the banner looks. A quick summary for those not familiar with HTML/CSS:

  • height:50px; means that the element will be 50 pixels tall. Feel free to use any other value as well.
  • background-color:black; sets a black background. Other options can be used freely.
  • color:white; means that the text will be white. White on black guarantees good contrast and readability, but other colors can be used as well.

The rest of the tags I suggest not editing unless you know what you are doing. They make sure the banner is the width of the whole screen, and that the text is at the center.

The text on line 7 is what will read in the banner, this can also be changed as you wish. Be mindful that a longer text may wrap on two or more rows, in which case you need a larger height to avoid it flowing over the banner.

Customizing the link

The href="<some URL address> on line 2 determines where the user will be taken when clicking the banner. You are free to choose what you want, remember to include the https:// in the beginning.

Here are some suggestions, but like said use whatever suits your needs best.

...or a number of resources you can find by googling. Just remember to make sure the resources are 100% legit.

What it looks like:

Here's what it would look like with the provided styling on e.g. the Wikipedia front page:

en m wikipedia org_wiki_Main_Page(iPhone SE)

<a
href="https://savelife.in.ua/en/donate/" <!-- THIS IS THE URL THAT YOU WANT TO DIRECT THE CLICKS TO, SEE README.md ABOVE -->
target="_blank" <!-- THIS MEANS THAT THE LINK WILL OPEN IN A NEW TAB, REMOVE IF THAT'S NOT DESIRABLE -->
rel="noreferrer noopener" <!-- THESE ARE STANDARD SECURITY MEASURES, DO NOT REMOVE -->
style="height:50px; background-color:black; color:white; display:flex; justify-content:center; align-items:center; width:100vw;" <!-- THESE ARE THE CUSTOMIZABLE STYLES, SEE README.md ABOVE FOR EXPLANATION -->
>
πŸ’™ Help Ukraine, click for information πŸ’›
</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment