https://github.com/Safouene1/support-palestine-banner
Simply setup banner for websites to show support for Palestinians.
https://github.com/Safouene1/support-palestine-banner
collaborate donate hacktoberfest2023 help-wanted learn palestine support
Last synced: 3 months ago
JSON representation
Simply setup banner for websites to show support for Palestinians.
- Host: GitHub
- URL: https://github.com/Safouene1/support-palestine-banner
- Owner: Safouene1
- License: mit
- Created: 2023-10-14T11:35:31.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-12T09:04:14.000Z (4 months ago)
- Last Synced: 2025-02-12T10:23:30.690Z (4 months ago)
- Topics: collaborate, donate, hacktoberfest2023, help-wanted, learn, palestine, support
- Language: CSS
- Homepage:
- Size: 502 KB
- Stars: 210
- Watchers: 3
- Forks: 49
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/Safouene1/support-palestine-banner)
# Support Palestine Banners
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.
# Table of Contents
1. [How to Use](https://github.com/Safouene1/support-palestine-banner#how-to-use)
2. [Badges and Banners](https://github.com/Safouene1/support-palestine-banner#badges-and-banners)
3. [Banner Components for React, NextJs 13, Vue (V2 & V3) with Tailwind](https://github.com/Safouene1/support-palestine-banner#banner-components-for-react-nextjs-13-vue-v2--v3-with-tailwind)
4. [Website Banner Installation](https://github.com/Safouene1/support-palestine-banner#website-banner-installation)
5. [Banner Custom Web Component](https://github.com/Safouene1/support-palestine-banner#banner-custom-web-component)
6. [How to Contribute](https://github.com/Safouene1/support-palestine-banner#how-to-contribute)
7. [Troubleshooting](https://github.com/Safouene1/support-palestine-banner#troubleshooting)
8. [Used By](https://github.com/Safouene1/support-palestine-banner#used-by)
9. [License](https://github.com/Safouene1/support-palestine-banner#license)
# How to Use
**To include the shown support banners for usage in your own project--**
1. Locate the specific support banner you would like to utilize from the "Badges and Banners" section below.
2. Copy and paste the selected banner's associated Markdown code into your README file and/or any file that supports Markdown in your project.
3. 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 `` tag of your project's HTML file.
4. If you would like to customize the link in the support banner, simply replace the existing link with your desired link.
5. 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.
# Badges and Banners
### Badge Banner
[](./Markdown-pages/Support.md)
```md
[](https://github.com/Safouene1/support-palestine-banner/blob/master/Markdown-pages/Support.md)
```
### ReadMe Banner
```html
```
### ReadMe Banner for Projects
```html
```
# Banner Components for React ,NextJs 13, Vue (V2 & V3) with Tailwind
### Sample of Mobile with dark mode
### Sample of Desktop with light mode
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](React-Components/banner.css)
Components can be found [here](https://github.com/Safouene1/support-palestine-banner/tree/master/React-Components)
# Website Banner Installation
Use this snippet to show your support for Palestinians on the top of your website. Installing it takes minutes.
### About the Website Banner
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 Banner
Installation is dead simple. Just copy this code to your template right after the opening `` tag.
```html
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;
}
Donate to support Palestine
```
# Banner Custom Web Component
Read more about the custom web component [here](Web-component/README.md).
# How to Contribute
Contributions to this project are welcome! If there is anything you would like to add to this repository, click [here](CONTRIBUTING.md) for contribution guidelines.
# Troubleshooting
**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 `` 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.
# Used By
- [satr14's corner](https://new.sx9.is-a.dev/)
- [LGU timetable](https://www.lgutimetable.online/)
- [Safouen Turki](https://safouen.me)
- [Amin Boulouma](https://github.com/aminblm)
- [Awesome #FreePalestine🇵🇸 Support Kit](https://github.com/aminblm/awesome-free-palestine-support-kit/tree/main)
- [envio CLI](https://github.com/envio-cli/envio)
- [Bixat.dev](https://bixat.dev)
# License
This project is currently licensed under the MIT License. See the [LICENSE](LICENSE) file for details.