{"id":13514632,"url":"https://github.com/Safouene1/support-palestine-banner","last_synced_at":"2025-03-31T03:31:06.460Z","repository":{"id":200141936,"uuid":"704879895","full_name":"Safouene1/support-palestine-banner","owner":"Safouene1","description":"Simply setup banner for websites to show support for Palestinians. ","archived":false,"fork":false,"pushed_at":"2025-02-12T09:04:14.000Z","size":514,"stargazers_count":210,"open_issues_count":6,"forks_count":49,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-12T10:23:30.690Z","etag":null,"topics":["collaborate","donate","hacktoberfest2023","help-wanted","learn","palestine","support"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Safouene1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-14T11:35:31.000Z","updated_at":"2025-02-12T09:04:19.000Z","dependencies_parsed_at":"2023-10-15T23:08:55.184Z","dependency_job_id":"1588c9e7-056d-40ad-b094-77d517a44414","html_url":"https://github.com/Safouene1/support-palestine-banner","commit_stats":null,"previous_names":["safouene1/support-palestine-banner"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Safouene1%2Fsupport-palestine-banner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Safouene1%2Fsupport-palestine-banner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Safouene1%2Fsupport-palestine-banner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Safouene1%2Fsupport-palestine-banner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Safouene1","download_url":"https://codeload.github.com/Safouene1/support-palestine-banner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246413377,"owners_count":20773053,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collaborate","donate","hacktoberfest2023","help-wanted","learn","palestine","support"],"created_at":"2024-08-01T05:00:59.522Z","updated_at":"2025-03-31T03:31:06.454Z","avatar_url":"https://github.com/Safouene1.png","language":"CSS","funding_links":[],"categories":["Features","CSS"],"sub_categories":["Github Resources"],"readme":"[![StandWithPalestine](https://github.com/Safouene1/support-palestine-banner/blob/master/StandWithPalestine.svg)](https://github.com/Safouene1/support-palestine-banner)\n\n# Support Palestine Banners\n\nWelcome 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.\n\n# Table of Contents\n1. [How to Use](https://github.com/Safouene1/support-palestine-banner#how-to-use)\n2. [Badges and Banners](https://github.com/Safouene1/support-palestine-banner#badges-and-banners)\n3. [Banner Components for React, NextJs 13, Vue (V2 \u0026 V3) with Tailwind](https://github.com/Safouene1/support-palestine-banner#banner-components-for-react-nextjs-13-vue-v2--v3-with-tailwind)\n4. [Website Banner Installation](https://github.com/Safouene1/support-palestine-banner#website-banner-installation)\n5. [Banner Custom Web Component](https://github.com/Safouene1/support-palestine-banner#banner-custom-web-component)\n6. [How to Contribute](https://github.com/Safouene1/support-palestine-banner#how-to-contribute)\n7. [Troubleshooting](https://github.com/Safouene1/support-palestine-banner#troubleshooting)\n8. [Used By](https://github.com/Safouene1/support-palestine-banner#used-by)\n9. [License](https://github.com/Safouene1/support-palestine-banner#license)\n\n# How to Use\n\n**To include the shown support banners for usage in your own project--**\n\n1. Locate the specific support banner you would like to utilize from the \"Badges and Banners\" section below.\n  \n2. Copy and paste the selected banner's associated Markdown code into your README file and/or any file that supports Markdown in your project.\n\n3. 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 `\u003cbody\u003e` tag of your project's HTML file.\n\n4. If you would like to customize the link in the support banner, simply replace the existing link with your desired link.\n   \n5. 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.\n   \n\n# Badges and Banners\n\n### Badge Banner\n\n[![StandWithPalestine](https://github.com/Safouene1/support-palestine-banner/blob/master/StandWithPalestine.svg)](./Markdown-pages/Support.md)\n\n```md\n[![StandWithPalestine](https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/StandWithPalestine.svg)](https://github.com/Safouene1/support-palestine-banner/blob/master/Markdown-pages/Support.md)\n```\n\n### ReadMe Banner\n\n\u003cdiv align=\"center\"\u003e\u003ca href=\"https://github.com/Safouene1/support-palestine-banner/blob/master/Markdown-pages/Support.md\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/banner-support.svg\" alt=\"Support Palestine\" style=\"width: 100%;\"\u003e\u003c/a\u003e\u003c/div\u003e\n\n```html\n\u003cdiv align=\"center\"\u003e\u003ca href=\"https://github.com/Safouene1/support-palestine-banner/blob/master/Markdown-pages/Support.md\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/banner-support.svg\" alt=\"Support Palestine\" style=\"width: 100%;\"\u003e\u003c/a\u003e\u003c/div\u003e\n```\n\n### ReadMe Banner for Projects\n\n\u003cdiv align=\"center\"\u003e\u003ca href=\"https://github.com/Safouene1/support-palestine-banner/blob/master/Markdown-pages/Support.md\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/banner-project.svg\" alt=\"Support Palestine\" style=\"width: 100%;\"\u003e\u003c/a\u003e\u003c/div\u003e\n\n```html\n\u003cdiv align=\"center\"\u003e\u003ca href=\"https://github.com/Safouene1/support-palestine-banner/blob/master/Markdown-pages/Support.md\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/banner-project.svg\" alt=\"Support Palestine\" style=\"width: 100%;\"\u003e\u003c/a\u003e\u003c/div\u003e\n```\n\n# Banner Components for React ,NextJs 13, Vue (V2 \u0026 V3) with Tailwind\n\n### Sample of Mobile with dark mode\n\n![example images mobile dark mode](React-Components/example-images/mobile-dark-mode.png)\n\n### Sample of Desktop with light mode\n\n![example images desktop light mode](React-Components/example-images/desktop-light-mode.png)\n\nThese components out of the box supports\n\n|     | Features                    |\n| --- | --------------------------- |\n| ✅  | JavaScript                  |\n| ✅  | TypeScript                  |\n| ✅  | Server Components           |\n| ✅  | Responsive                  |\n| ✅  | Closeable                   |\n| ✅  | Position Sticky or Relative |\n\nIf you are not using Tailwind, import this CSS file: [banner.css](React-Components/banner.css)\n\nComponents can be found [here](https://github.com/Safouene1/support-palestine-banner/tree/master/React-Components)\n\n# Website Banner Installation\n\nUse this snippet to show your support for Palestinians on the top of your website. Installing it takes minutes.\n\n![image](https://github.com/Safouene1/support-palestine-banner/assets/22036449/bfbfe6de-0e2f-4d6d-8e7e-fd47ea00ddf2)\n\n### About the Website Banner\n\nThis 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.\n\n![image](https://github.com/Safouene1/support-palestine-banner/assets/22036449/269d2610-7025-4b69-a3b1-00fbfc2a949a)\n\n### Installation Banner\n\nInstallation is dead simple. Just copy this code to your template right after the opening `\u003cbody\u003e` tag.\n\n```html\n\u003cstyle\u003e\n  body {\n    margin-top: 35px;\n  }\n  .support-palestine,\n  .support-palestine:visited {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    background: rgb(0, 0, 0);\n    display: flex;\n    justify-content: center;\n    padding-top: 5px;\n    padding-bottom: 5px;\n    z-index: 10000;\n    text-decoration: none;\n    font-family: arial;\n  }\n  .support-palestine:hover,\n  .support-palestine:active {\n    background: black;\n    display: flex;\n    background: rgb(80, 80, 80);\n    text-decoration: none;\n  }\n  .support-palestine__flag {\n    margin-right: 10px;\n  }\n\n  .support-palestine__label {\n    color: white;\n    font-size: 12px;\n    line-height: 24px;\n  }\n  .background {\n    background: darkgreen;\n\n    height: 21px;\n  }\n  .top {\n    background: black;\n    width: 40px;\n    height: 8px;\n    z-index: 1;\n  }\n  .middle {\n    background: white;\n    width: 100%;\n    height: 8px;\n    z-index: 1;\n  }\n  .triangle {\n    background: auto;\n    border-top: 12px solid transparent;\n    border-bottom: 12px solid transparent;\n    border-left: 20px solid red;\n    z-index: 2;\n    position: relative;\n    top: -16px;\n    left: 0;\n  }\n\u003c/style\u003e\n\u003ca\n  class=\"support-palestine\"\n  href=\"https://www.islamic-relief.org.uk/giving/appeals/palestine/\"\n  target=\"_blank\"\n  rel=\"nofollow noopener\"\n  title=\"Donate to support palestine\"\n\u003e\n  \u003cdiv\n    class=\"support-palestine__flag\"\n    role=\"img\"\n    aria-label=\"Flag of palestine\"\n  \u003e\n    \u003cdiv class=\"background\"\u003e\n      \u003cdiv class=\"top\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"middle\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"triangle\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"support-palestine__label\"\u003eDonate to support Palestine\u003c/div\u003e\n\u003c/a\u003e\n```\n\n# Banner Custom Web Component\n\nRead more about the custom web component [here](Web-component/README.md).\n\n# How to Contribute\n\nContributions to this project are welcome! If there is anything you would like to add to this repository, click [here](CONTRIBUTING.md) for contribution guidelines.\n\n# Troubleshooting\n\n**If the banner doesn't appear on your website?**    \n*Solution:* Double check and make sure that you inserted the desired HTML code immediately following the opening `\u003cbody\u003e` tag. Then, check for any conflicting CSS errors in styling.\n\n**If the banner's text is not readable?**    \n*Solution:* Locate the pasted HTML code and edit the CSS properties for color of text and background to improve contrast.\n\n\n# Used By\n\n- [satr14's corner](https://new.sx9.is-a.dev/)\n\n- [LGU timetable](https://www.lgutimetable.online/)\n\n- [Safouen Turki](https://safouen.me)\n\n- [Amin Boulouma](https://github.com/aminblm)\n\n- [Awesome #FreePalestine🇵🇸 Support Kit](https://github.com/aminblm/awesome-free-palestine-support-kit/tree/main)\n\n- [envio CLI](https://github.com/envio-cli/envio)\n\n- [Bixat.dev](https://bixat.dev)\n\n# License\nThis project is currently licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSafouene1%2Fsupport-palestine-banner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSafouene1%2Fsupport-palestine-banner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSafouene1%2Fsupport-palestine-banner/lists"}