support palestine banner - Descargar el código fuente support palestine banner Descargar

support palestine banner

Otro código fuente

1.0.0

Descargar

Apoya a las pancartas de Palestina

¡Bienvenido al Proyecto de Banner de Palestina Support! Este repositorio contiene una multitud de emblemas para ayudar a mostrar soporte para Palestina en la web, incluidos pancartas de sitios web, pancartas de lectura e insignias GitHub, que pueden ser utilizados por proyectos OSS para difundir la palabra, apoyar la causa y ayudar a Palestina en esta desastrosa situación.

Tabla de contenido

Cómo usar
Insignias y pancartas
Componentes de banner para React, NextJS 13, Vue (V2 y V3) con Vailín
Instalación del banner del sitio web
Componente web personalizado de banner
Cómo contribuir
Solución de problemas
Utilizado por
Licencia

Cómo usar

Para incluir las pancartas de soporte mostradas para su uso en su propio proyecto,

Localice el banner de soporte específico que le gustaría utilizar en la sección "Insignias y pancartas" a continuación.
Copie y pegue el código de markdown asociado del banner seleccionado en su archivo ReadMe y/o cualquier archivo que admita Markdown en su proyecto.
Para incluir el banner del sitio web, asegúrese de copiar el fragmento HTML de la sección "Instalación del banner del sitio web" y péguelo justo después de la etiqueta de <body> del archivo HTML de su proyecto.
Si desea personalizar el enlace en el banner de soporte, simplemente reemplace el enlace existente con su enlace deseado.
El banner debe mostrarse inmediatamente después de guardar los cambios. Consulte la sección "Solución de problemas" a continuación y/o comuníquese si hay algún problema con la visualización.

Insignias y pancartas

Pancarta

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

Banner de lectura

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

Banner de lectura para proyectos

 [ ![ 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 y V3) con Vailín

Muestra de móvil con modo oscuro

Ejemplo de imágenes Modo oscuro móvil

Muestra de escritorio con modo de luz

Ejemplo de imágenes Modo de luz de escritorio

Estos componentes están fuera de la caja admite

	Características
✅	Javascript
✅	Mecanografiado
✅	Componentes del servidor
✅	Sensible
✅	Cierre
✅	Posición pegajosa o pariente

Si no está utilizando Tailwind, importe este archivo CSS: banner.css

Los componentes se pueden encontrar aquí

Instalación del banner del sitio web

Use este fragmento para mostrar su apoyo a los palestinos en la parte superior de su sitio web. Instalación lleva minutos.

imagen

Acerca del banner del sitio web

Este código agrega un pequeño banner negro sobre su sitio web con bandera palestina y mensaje de soporte. Se vincula al sitio de donación de alivio islámico, pero puede cambiar el enlace para apuntar a un canal de soporte de su elección.

imagen

Banner de instalación

La instalación es completamente simple. Simplemente copie este código a su plantilla justo después de la etiqueta de apertura <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 >

Componente web personalizado de banner

Lea más sobre el componente web personalizado aquí.

Cómo contribuir

¡Las contribuciones a este proyecto son bienvenidas! Si hay algo que le gustaría agregar a este repositorio, haga clic aquí para ver las pautas de contribución.

Solución de problemas

¿Si el banner no aparece en su sitio web?
Solución: Verifique dos veces y asegúrese de insertar el código HTML deseado inmediatamente después de la etiqueta de apertura <body> . Luego, verifique los errores de CSS en conflicto en el estilo.

Si el texto del banner no es legible?
Solución: Localice el código HTML pegado y edite las propiedades CSS para el color del texto y el fondo para mejorar el contraste.