support palestine banner - support palestine banner

support palestine banner

Kode sumber lainnya

1.0.0

Unduh

Mendukung spanduk Palestina

Selamat datang di Proyek Dukungan Palestina Banner! Repositori ini berisi banyak lambang untuk membantu menunjukkan dukungan untuk Palestina di web - termasuk spanduk situs web, spanduk ReadMe dan lencana GitHub - yang dapat digunakan oleh proyek OSS untuk menyebarkan berita, mendukung penyebabnya, dan membantu Palestina dalam situasi yang menghancurkan ini.

Daftar isi

Cara menggunakan
Lencana dan spanduk
Komponen Banner untuk React, NextJs 13, Vue (V2 & V3) dengan Tailwind
Instalasi spanduk situs web
Komponen web khusus spanduk
Bagaimana berkontribusi
Pemecahan masalah
Digunakan oleh
Lisensi

Cara menggunakan

Untuk memasukkan spanduk dukungan yang ditampilkan untuk penggunaan dalam proyek Anda sendiri--

Temukan spanduk dukungan spesifik yang ingin Anda manfaatkan dari bagian "Lencana dan Spanduk" di bawah ini.
Salin dan tempel kode markdown terkait spanduk yang dipilih ke dalam file readme Anda dan/atau file apa pun yang mendukung penurunan harga dalam proyek Anda.
Untuk menyertakan spanduk situs web, pastikan untuk menyalin cuplikan HTML dari bagian "Instalasi Spanduk Situs Web" dan tempel tepat setelah tag <body> pembukaan file HTML proyek Anda.
Jika Anda ingin menyesuaikan tautan di spanduk dukungan, cukup ganti tautan yang ada dengan tautan yang Anda inginkan.
Spanduk harus ditampilkan segera setelah perubahan disimpan. Silakan lihat bagian "Pemecahan Masalah" di bawah ini dan/atau jangkau jika ada masalah dengan menonton.

Lencana dan spanduk

Banner Lencana

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

Banner Readme

 [ ![ 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 UNTUK PROYEK

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

Komponen Banner untuk React, NextJs 13, Vue (V2 & V3) dengan Tailwind

Sampel seluler dengan mode gelap

Contoh Gambar Mode Gelap Seluler

Sampel desktop dengan mode cahaya

Contoh Mode Cahaya Desktop

Komponen -komponen di luar kotak ini mendukung

	Fitur
✅	Javascript
✅	Naskah
✅	Komponen server
✅	Responsif
✅	Dapat ditutup
✅	Posisi lengket atau relatif

Jika Anda tidak menggunakan Tailwind, impor file CSS ini: Banner.css

Komponen dapat ditemukan di sini

Instalasi spanduk situs web

Gunakan cuplikan ini untuk menunjukkan dukungan Anda untuk warga Palestina di atas situs web Anda. Memasangnya membutuhkan waktu beberapa menit.

gambar

Tentang spanduk situs web

Kode ini menambahkan spanduk hitam kecil di atas situs web Anda dengan bendera Palestina dan pesan dukungan. Ini tautan ke situs donasi Islam-Relief tetapi Anda dapat mengubah tautan untuk menunjuk ke saluran dukungan pilihan Anda.

gambar

Spanduk Instalasi

Instalasi mati sederhana. Cukup salin kode ini ke templat Anda tepat setelah tag <body> pembukaan.

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

Komponen web khusus spanduk

Baca lebih lanjut tentang komponen web khusus di sini.

Bagaimana berkontribusi

Kontribusi untuk proyek ini dipersilakan! Jika ada sesuatu yang ingin Anda tambahkan ke repositori ini, klik di sini untuk pedoman kontribusi.

Pemecahan masalah

Jika spanduk tidak muncul di situs web Anda?
Solusi: Periksa ganda dan pastikan Anda memasukkan kode HTML yang diinginkan segera mengikuti tag <body> pembukaan. Kemudian, periksa kesalahan CSS yang bertentangan dalam gaya.

Jika teks spanduk tidak dapat dibaca?
Solusi: Temukan kode HTML yang disisipkan dan edit properti CSS untuk warna teks dan latar belakang untuk meningkatkan kontras.