support palestine banner Download - support palestine banner Code source Téléchargement

support palestine banner

Autre code source

1.0.0

Télécharger

Soutenir les bannières de la Palestine

Bienvenue au Support Palestine Banner Project! Ce référentiel contient une multitude d'emblèmes pour aider à montrer la prise en charge de la Palestine sur le Web - y compris les bannières de site Web, les bannières en lecture et les badges GitHub - qui peuvent être utilisés par les projets OSS pour passer le mot, soutenir la cause et aider la Palestine dans cette situation désastreuse.

Table des matières

Comment utiliser
Badges et bannières
Composants de bannière pour React, NextJS 13, Vue (V2 & V3) avec Tailwind
Installation de bannières de site Web
Composant Web personnalisé de la bannière
Comment contribuer
Dépannage
Utilisé par
Licence

Comment utiliser

Pour inclure les bannières de support montrées pour l'utilisation dans votre propre projet -

Localisez la bannière de support spécifique que vous souhaitez utiliser à partir de la section "Badges and Banners" ci-dessous.
Copiez et collez le code Markdown associé de la bannière sélectionnée dans votre fichier ReadMe et / ou tout fichier qui prend en charge Markdown dans votre projet.
Pour inclure la bannière du site Web, assurez-vous de copier l'extrait HTML de la section "Installation de la bannière du site Web" et de le coller juste après la balise d'ouverture <body> du fichier HTML de votre projet.
Si vous souhaitez personnaliser le lien dans la bannière de support, remplacez simplement le lien existant par le lien souhaité.
La bannière doit s'afficher immédiatement après que les modifications soient enregistrées. Veuillez consulter la section "Dépannage" ci-dessous et / ou contacter s'il y a des problèmes de visualisation.

Badges et bannières

Bannière de badge

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

Bannière réadme

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

Bannière réadme pour les projets

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

Composants de bannière pour React, NextJS 13, Vue (V2 & V3) avec Tailwind

Échantillon de mobile avec mode sombre

Exemple d'images Mode sombre mobile

Échantillon de bureau en mode lumière

Exemple d'images Mode lumineux de bureau

Ces composants sont sortis de la boîte prend en charge

	Caractéristiques
✅	Javascrip
✅	Manuscrit
✅	Composants du serveur
✅	Sensible
✅	Fermeable
✅	Position collante ou relative

Si vous n'utilisez pas Tailwind, importez ce fichier CSS: bannière.css

Les composants peuvent être trouvés ici

Installation de bannières de site Web

Utilisez cet extrait pour montrer votre support pour les Palestiniens en haut de votre site Web. L'installation prend des minutes.

À propos de la bannière du site Web

Ce code ajoute une petite bannière noire en plus de votre site Web avec un drapeau palestinien et un message de support. Il est lié au site de don de l'islamic-relief, mais vous pouvez modifier le lien pour pointer vers un canal de support de votre choix.

Bannière d'installation

L'installation est morte simple. Copiez simplement ce code sur votre modèle juste après la balise <body> d'ouverture.

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

Composant Web personnalisé de la bannière

En savoir plus sur le composant Web personnalisé ici.

Comment contribuer

Les contributions à ce projet sont les bienvenues! S'il y a quelque chose que vous souhaitez ajouter à ce référentiel, cliquez ici pour des directives de contribution.

Dépannage

Si la bannière n'apparaît pas sur votre site Web?
SOLUTION: Vérifiez et assurez-vous que vous avez inséré le code HTML souhaité immédiatement après la balise <body> d'ouverture. Ensuite, vérifiez toutes les erreurs CSS conflictuelles dans le style.

Si le texte de la bannière n'est pas lisible?
Solution: Localisez le code HTML collé et modifiez les propriétés CSS pour la couleur du texte et de l'arrière-plan pour améliorer le contraste.