Welcome to the Support Palestine Banner project! This repository contains a multitude of emblems to aid in showing support for Palestine on the web -- including website banners, ReadMe Banners and Github Badges -- that can be used by OSS projects to spread the word, support the cause, and help Palestine in this disastrous situation.
- How to Use
- Badges and Banners
- Banner Components for React, NextJs 13, Vue (V2 & V3) with Tailwind
- Website Banner Installation
- Banner Custom Web Component
- How to Contribute
- Troubleshooting
- Used By
- License
To include the shown support banners for usage in your own project--
-
Locate the specific support banner you would like to utilize from the "Badges and Banners" section below.
-
Copy and paste the selected banner's associated Markdown code into your README file and/or any file that supports Markdown in your project.
-
To include the website banner, please make sure to copy the HTML snippet from the "Website Banner Installation" section and paste it right after the opening
<body>tag of your project's HTML file. -
If you would like to customize the link in the support banner, simply replace the existing link with your desired link.
-
The banner should display immediately after changes are saved. Please see "Troubleshooting" section below and/or reach out if there are any issues with viewing.
[](https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md)
[](https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md)
[](https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md)
These components out of the box supports
| Features | |
|---|---|
| ✅ | JavaScript |
| ✅ | TypeScript |
| ✅ | Server Components |
| ✅ | Responsive |
| ✅ | Closeable |
| ✅ | Position Sticky or Relative |
If you are not using Tailwind, import this CSS file: banner.css
Components can be found here
Use this snippet to show your support for Palestinians on the top of your website. Installing it takes minutes.
This code adds a small black banner on top of your website with Palestinian flag and support message. It links to islamic-relief's donation site but you can change the link to point to a support channel of your choice.
Installation is dead simple. Just copy this code to your template right after the opening <body> tag.
<style>
body {
margin-top: 35px;
}
.support-palestine,
.support-palestine:visited {
position: absolute;
left: 0;
top: 0;
right: 0;
background: rgb(0, 0, 0);
display: flex;
justify-content: center;
padding-top: 5px;
padding-bottom: 5px;
z-index: 10000;
text-decoration: none;
font-family: arial;
}
.support-palestine:hover,
.support-palestine:active {
background: black;
display: flex;
background: rgb(80, 80, 80);
text-decoration: none;
}
.support-palestine__flag {
margin-right: 10px;
}
.support-palestine__label {
color: white;
font-size: 12px;
line-height: 24px;
}
.background {
background: darkgreen;
height: 21px;
}
.top {
background: black;
width: 40px;
height: 8px;
z-index: 1;
}
.middle {
background: white;
width: 100%;
height: 8px;
z-index: 1;
}
.triangle {
background: auto;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 20px solid red;
z-index: 2;
position: relative;
top: -16px;
left: 0;
}
</style>
<a
class="support-palestine"
href="https://www.islamic-relief.org.uk/giving/appeals/palestine/"
target="_blank"
rel="nofollow noopener"
title="Donate to support palestine"
>
<div
class="support-palestine__flag"
role="img"
aria-label="Flag of palestine"
>
<div class="background">
<div class="top"></div>
<div class="middle"></div>
<div class="triangle"></div>
</div>
</div>
<div class="support-palestine__label">Donate to support Palestine</div>
</a>Read more about the custom web component here.
Contributions to this project are welcome! If there is anything you would like to add to this repository, click here for contribution guidelines.
If the banner doesn't appear on your website?
Solution: Double check and make sure that you inserted the desired HTML code immediately following the opening <body> tag. Then, check for any conflicting CSS errors in styling.
If the banner's text is not readable?
Solution: Locate the pasted HTML code and edit the CSS properties for color of text and background to improve contrast.
This project is currently licensed under the MIT License. See the LICENSE file for details.