Awesome

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.

How to Use

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.

Badges and Banners

Badge Banner

[![StandWithPalestine](https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/StandWithPalestine.svg)](https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md)

ReadMe Banner

[![ReadMeSupportPalestine](https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/banner-support.svg)](https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md)

ReadMe Banner for Projects

[![ReadMeSupportPalestine](https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/banner-project.svg)](https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md)

Banner Components for React ,NextJs 13, Vue (V2 & V3) with Tailwind

Sample of Mobile with dark mode

example images mobile dark mode

Sample of Desktop with light mode

example images desktop 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

Components can be found here

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 <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>

Banner Custom Web Component

Read more about the custom web component here.

How to Contribute

Contributions to this project are welcome! If there is anything you would like to add to this repository, click here 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 <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.

Used By

License

This project is currently licensed under the MIT License. See the LICENSE file for details.