support palestine banner
1.0.0
サポートパレスチナバナープロジェクトへようこそ！このリポジトリには、ウェブ上のパレスチナへのサポートを示すための多数のエンブレムが含まれています - ウェブサイトバナー、READMEバナー、GitHubバッジなど、OSSプロジェクトで使用され、この悲惨な状況でパレスチナを助けるために使用できます。
あなた自身のプロジェクトで使用するために表示されているサポートバナーを含めるために -
以下の「バッジとバナー」セクションから利用したい特定のサポートバナーを見つけます。
選択したバナーの関連するマークダウンコードを、プロジェクトのマークダウンをサポートするファイルおよび/またはファイルにコピーして貼り付けます。
Webサイトバナーを含めるには、「Webサイトバナーインストール」セクションからHTMLスニペットをコピーして、プロジェクトのHTMLファイルの開く<body>タグの直後に貼り付けてください。
サポートバナーのリンクをカスタマイズする場合は、既存のリンクを目的のリンクに置き換えるだけです。
バナーは、変更が保存された直後に表示する必要があります。以下の「トラブルシューティング」セクションを参照してください。/または表示に問題がある場合は手を差し伸べてください。
[ ![ StandWithPalestine ] ( https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/StandWithPalestine.svg )] ( https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md ) [ ![ ReadMeSupportPalestine ] ( https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/banner-support.svg )] ( https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md ) [ ![ ReadMeSupportPalestine ] ( https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/banner-project.svg )] ( https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md )
これらのコンポーネントが箱から出してサポートしています
| 特徴 | |
|---|---|
| ✅ | JavaScript |
| ✅ | タイプスクリプト |
| ✅ | サーバーコンポーネント |
| ✅ | 応答性 |
| ✅ | 閉鎖可能 |
| ✅ | 粘着性または相対的な位置 |
Tailwindを使用していない場合は、このCSSファイルをインポート：banner.css
コンポーネントはここにあります
このスニペットを使用して、ウェブサイトの上にパレスチナ人へのサポートを示してください。インストールするには数分かかります。
このコードは、パレスチナの旗とサポートメッセージを使用して、ウェブサイトの上に小さな黒いバナーを追加します。それはイスラム救済の寄付サイトにリンクしていますが、リンクを変更して、選択したサポートチャネルを指すことができます。
インストールはシンプルです。オープニング<body>タグの直後に、このコードをテンプレートにコピーするだけです。
< 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 >カスタムWebコンポーネントの詳細については、こちらをご覧ください。
このプロジェクトへの貢献は大歓迎です！このリポジトリに追加したいものがある場合は、貢献ガイドラインについてはここをクリックしてください。
バナーがあなたのウェブサイトに表示されない場合は？
解決策：再確認し、opening <body>タグの直後に目的のHTMLコードを挿入したことを確認してください。次に、スタイリングの競合するCSSエラーを確認します。
バナーのテキストが読み取れない場合は？
解決策：貼り付けられたHTMLコードを見つけ、テキストと背景の色のCSSプロパティを編集してコントラストを改善します。
SATR14のコーナー
LGUの時刻表
Safouen Turki
Amin Boulouma
素晴らしい#freepalestine ??サポートキット
Envio Cli
bixat.dev
このプロジェクトは現在、MITライセンスに基づいてライセンスされています。詳細については、ライセンスファイルを参照してください。
