support palestine banner
1.0.0
지원 팔레스타인 배너 프로젝트에 오신 것을 환영합니다! 이 저장소에는 웹 사이트 배너, README 배너 및 GitHub 배지를 포함하여 웹에서 팔레스타인을 지원하는 데 도움이되는 수많은 엠블럼이 포함되어 있습니다. 이는 OSS 프로젝트에서 사용하여 단어를 전파하고 원인을 지원 하며이 비판적인 상황에서 팔레스타인을 도울 수 있습니다.
자체 프로젝트에서 사용되는 Support Banners를 포함하려면 (
아래의 "배지 및 배너"섹션에서 사용하려는 특정 지원 배너를 찾으십시오.
선택한 배너의 관련 Markdown 코드를 ReadMe 파일 및/또는 프로젝트의 Markdown을 지원하는 파일에 복사하여 붙여 넣습니다.
웹 사이트 배너를 포함하려면 "웹 사이트 배너 설치"섹션에서 HTML 스 니펫을 복사하여 프로젝트의 HTML 파일의 <body> 태그 오프닝 직후에 붙여 넣으십시오.
지원 배너에서 링크를 사용자 정의하려면 기존 링크를 원하는 링크로 바꾸십시오.
변경 사항이 저장된 직후 배너가 표시되어야합니다. 아래의 "문제 해결"섹션을 참조하십시오.보기에 문제가있는 경우 연락하십시오.
[ ![ StandWithPalestine ] ( https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/StandWithPalestine.svg )] ( https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md ) [ ![ ReadMeSupportPalestine ] ( https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/banner-support.svg )] ( https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md ) [ ![ ReadMeSupportPalestine ] ( https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/banner-project.svg )] ( https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md )
상자 밖에서 이러한 구성 요소가 지원됩니다
| 특징 | |
|---|---|
| ✅ | 자바 스크립트 |
| ✅ | 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 >사용자 정의 웹 구성 요소에 대한 자세한 내용은 여기를 참조하십시오.
이 프로젝트에 대한 기부금을 환영합니다! 이 저장소에 추가하려는 것이 있으시면 기여 지침을 보려면 여기를 클릭하십시오.
배너가 웹 사이트에 나타나지 않으면?
솔루션 : 이중 점검을하고 <body> 태그 오프닝 바로 다음에 원하는 HTML 코드를 삽입했는지 확인하십시오. 그런 다음 스타일링에서 충돌하는 CSS 오류를 확인하십시오.
배너의 텍스트를 읽을 수없는 경우?
솔루션 : 붙여 넣은 HTML 코드를 찾아 텍스트 및 배경 색상의 CSS 속성을 편집하여 대비를 향상시킵니다.
SATR14의 코너
LGU 시간표
Safouen Turki
Amin Boulouma
멋진 #freepalestine ?? 지원 키트
Envio Cli
bixat.dev
이 프로젝트는 현재 MIT 라이센스에 따라 라이센스가 부여됩니다. 자세한 내용은 라이센스 파일을 참조하십시오.
