support palestine banner - support palestine banner

support palestine banner

شفرة المصدر الأخرى

1.0.0

تنزيل

دعم لافتات فلسطين

مرحبًا بكم في مشروع دعم لافتة فلسطين! يحتوي هذا المستودع على العديد من الشعارات للمساعدة في إظهار الدعم لفلسطين على الويب - بما في ذلك لافتات مواقع الويب ، وعلامات README وشارات GitHub - التي يمكن أن تستخدمها OSS لنشر الكلمة ، ودعم القضية ، ومساعدة فلسطين في هذا الوضع الكارثي.

جدول المحتويات

كيفية استخدام
الشارات واللافتات
مكونات Banner لـ React ، NextJS 13 ، Vue (V2 & V3) مع Tailwind
تثبيت شعار موقع الويب
مكون الويب المخصص لافتة
كيفية المساهمة
استكشاف الأخطاء وإصلاحها
تستخدم من قبل
رخصة

كيفية استخدام

لتضمين لافتات الدعم المعروضة للاستخدام في مشروعك-

حدد موقع لافتة الدعم المحددة التي ترغب في استخدامها من قسم "الشارات واللافتات" أدناه.
انسخ ولصق رمز التمييز المرتبط به لافتة محددة في ملف ReadMe و/أو أي ملف يدعم Markdown في مشروعك.
لتضمين لافتة موقع الويب ، يرجى التأكد من نسخ مقتطف HTML من قسم "تثبيت شعار الموقع" ولصقه مباشرة بعد افتتاح العلامة <body> لملف HTML الخاص بمشروعك.
إذا كنت ترغب في تخصيص الرابط في لافتة الدعم ، فما عليك سوى استبدال الرابط الموجود برابطك المطلوب.
يجب أن يتم عرض اللافتة مباشرة بعد حفظ التغييرات. يرجى الاطلاع على قسم "استكشاف الأخطاء وإصلاحها" أدناه و/أو التواصل إذا كانت هناك أي مشاكل في المشاهدة.

الشارات واللافتات

شارة لافتة

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

لافتة 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 للمشاريع

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

مكونات Banner لـ React ، NextJS 13 ، Vue (V2 & V3) مع Tailwind

عينة من الأجهزة المحمولة مع الوضع المظلم

مثال على الصور المظلمة المحمول

عينة من سطح المكتب مع وضع الضوء

مثال على وضع مصباح سطح المكتب

هذه المكونات خارج الصندوق تدعم

	سمات
✅	جافا سكريبت
✅	TypeScript
✅	مكونات الخادم
✅	استجابة
✅	قابلة للإغلاق
✅	موقف لزجة أو نسبية

إذا كنت لا تستخدم 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 >

مكون الويب المخصص لافتة

اقرأ المزيد عن مكون الويب المخصص هنا.

كيفية المساهمة

مساهمات في هذا المشروع مرحب بها! إذا كان هناك أي شيء ترغب في إضافته إلى هذا المستودع ، فانقر هنا للحصول على إرشادات المساهمة.

استكشاف الأخطاء وإصلاحها

إذا لم تظهر اللافتة على موقع الويب الخاص بك؟
الحل: تحقق مزدوجًا وتأكد من إدراج رمز HTML المطلوب مباشرة بعد العلامة <body> . ثم ، تحقق من أي أخطاء CSS المتضاربة في التصميم.

إذا كان نص اللافتة غير قابل للقراءة؟
الحل: حدد موقع رمز HTML المحفوظ وتحرير خصائص CSS للون النص والخلفية لتحسين التباين.