-
Notifications
You must be signed in to change notification settings - Fork 49
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
104 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,111 +1,129 @@ | ||
| [](https://github.com/Safouene1/support-palestine-banner) | ||
|
|
||
| # Support Palestine | ||
| This repository contains Website banners , ReadMe Banners and Github Badges that can be used by OSS projects to spread the word, support and help Palestine in this disastrous situation. | ||
| # Support Palestine | ||
|
|
||
| This repository contains Website banners , ReadMe Banners and Github Badges that can be used by OSS projects to spread the word, support and help Palestine in this disastrous situation. | ||
|
|
||
| ## Badge Banner | ||
|
|
||
| ## Badge Banner | ||
| [](https://github.com/Safouene1/support-palestine-banner) | ||
| ``` | ||
| [](https://github.com/Safouene1/support-palestine-banner) | ||
|
|
||
| ```md | ||
| [](https://github.com/Safouene1/support-palestine-banner) | ||
| ``` | ||
| ## ReadMe Banner | ||
|
|
||
| ## ReadMe Banner | ||
|
|
||
| [](https://github.com/Safouene1/support-palestine-banner) | ||
| ``` | ||
|
|
||
| ```md | ||
| [](https://github.com/Safouene1/support-palestine-banner) | ||
| ``` | ||
|
|
||
| ## ReadMe Banner for Projects | ||
| [ | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| ```md | ||
| [](https://github.com/Safouene1/support-palestine-banner) | ||
| ``` | ||
| ## Banner for websites to show support for Palestine | ||
|
|
||
| ## Banner for websites to show support for Palestine | ||
|
|
||
| Use this snippet to show your support for Palestinians on the top of your website. Installing it takes minutes. | ||
|  | ||
|
|
||
| ## About the Website Banner | ||
|
|
||
| ## About tbe 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. | ||
| ``` | ||
|
|
||
| Installation is dead simple. Just copy this code to your template right after the opening `<body>` tag. | ||
|
|
||
| ```html | ||
| <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; | ||
| } | ||
| 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 | ||
| 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> | ||
| ``` |