support palestine banner - support palestine banner Download do Código Fonte

support palestine banner

Outro código-fonte

1.0.0

Baixar

Apoie as faixas da Palestina

Bem -vindo ao Projeto Banner Palestina de Suporte! Esse repositório contém uma infinidade de emblemas para ajudar a mostrar apoio à Palestina na web - incluindo banners de sites, banners de leitura e crachás do GitHub - que podem ser usados por projetos de OSS para espalhar a palavra, apoiar a causa e ajudar a Palestina nessa situação desastrosa.

Índice

Como usar
Crachás e banners
Componentes de banner para react, NextJs 13, Vue (V2 e V3) com Tailwind
Instalação do banner do site
Componente da Web personalizado Banner
Como contribuir
Solução de problemas
Usado por
Licença

Como usar

Para incluir os banners de suporte mostrados para uso em seu próprio projeto-

Localize o banner de suporte específico que você deseja utilizar na seção "Crachás e banners" abaixo.
Copie e cole o código de marcação associado do Banner selecionado no seu arquivo ReadMe e/ou qualquer arquivo que suporta o Markdown em seu projeto.
Para incluir o banner do site, copie o snippet html da seção "Instalação do Banner do site" e colá -lo logo após a tag <body> do arquivo HTML do seu projeto.
Se você deseja personalizar o link no banner de suporte, basta substituir o link existente pelo link desejado.
O banner deve ser exibido imediatamente após a salva. Consulte a seção "Solução de problemas" abaixo e/ou alcance se houver algum problema com a visualização.

Crachás e banners

Banner de crachá

 [ ![ 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 para projetos

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

Componentes de banner para react, NextJs 13, Vue (V2 e V3) com Tailwind

Amostra de celular com modo escuro

Exemplo de imagens MOBELE MOLEGE DARK MODE

Amostra de desktop com modo de luz

Exemplo de imagens no modo de luz da área de trabalho

Esses componentes prontos para baixo suporta

	Características
✅	JavaScript
✅	TypeScript
✅	Componentes do servidor
✅	Responsivo
✅	Fechado
✅	Posição pegajosa ou parente

Se você não estiver usando o Tailwind, importe este arquivo CSS: Banner.css

Os componentes podem ser encontrados aqui

Instalação do banner do site

Use este trecho para mostrar seu apoio aos palestinos no topo do seu site. Instalando isso leva minutos.

imagem

Sobre o banner do site

Este código adiciona um pequeno banner preto no topo do seu site com bandeira palestina e mensagem de suporte. Ele se vincula ao site de doação do alívio islâmico, mas você pode alterar o link para apontar para um canal de suporte de sua escolha.

imagem

Banner de instalação

A instalação é morta simples. Basta copiar este código para o seu modelo logo após a tag <body> de abertura.

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

Componente da Web personalizado Banner

Leia mais sobre o componente Web personalizado aqui.

Como contribuir

As contribuições para este projeto são bem -vindas! Se houver algo que você gostaria de adicionar a este repositório, clique aqui para obter diretrizes de contribuição.

Solução de problemas

Se o banner não aparecer no seu site?
Solução: Verifique e verifique e certifique -se de inserir o código HTML desejado imediatamente após a tag <body> de abertura. Em seguida, verifique se há erros de CSS conflitantes no estilo.

Se o texto do banner não for legível?
Solução: localize o código HTML colado e edite as propriedades CSS para a cor do texto e do fundo para melhorar o contraste.