Compare commits
3 commits
a23a54c862
...
c20b493478
| Author | SHA1 | Date | |
|---|---|---|---|
|
c20b493478 | ||
|
|
79833e88a7 | ||
|
|
8c604d12c9 |
21 changed files with 780 additions and 63 deletions
|
|
@ -13,10 +13,12 @@
|
|||
--fs-normal: 16px;
|
||||
--fs-medium: 20px;
|
||||
--fs-big: 30px;
|
||||
--fs-x-big: 38px;
|
||||
--fs-xbig: 38px;
|
||||
|
||||
--fs-button-bold: 22px;
|
||||
|
||||
--max-w-content: 700px;
|
||||
|
||||
@media #{$small} {
|
||||
--fs-medium: 20px;
|
||||
--fs-big: 26px;
|
||||
|
|
@ -41,10 +43,11 @@
|
|||
|
||||
--color-bg: #161616;
|
||||
--color-txt: #ffffff;
|
||||
--color-txt-light: var(--grey-600);
|
||||
--color-txt-light: var(--grey-400);
|
||||
--color-accent: #00ff00;
|
||||
--color-accent-50: #e9ffe9;
|
||||
--color-accent-100: #d8fdd8;
|
||||
--dark: black;
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,24 @@ button:disabled{
|
|||
|
||||
}
|
||||
|
||||
.soutenir{
|
||||
a{
|
||||
color: var(--color-accent);
|
||||
&:hover{
|
||||
color: var(--color-accent)!important;
|
||||
text-decoration: underline!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// DELETE ?
|
||||
|
||||
.btn__default{
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
#site-footer{
|
||||
|
||||
background-color: black;
|
||||
background-color: var(--dark);
|
||||
padding: calc(var(--padding-body)*2) var(--padding-body);
|
||||
|
||||
|
||||
.logo {
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
opacity: 0;
|
||||
svg{
|
||||
width: 100px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
width: calc(100vw - var(--padding-body)*2);
|
||||
height: var(--header-h);
|
||||
background-color: var(--color-bg);
|
||||
border-bottom: var(--border-light);
|
||||
// border-bottom: var(--border-light);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -34,6 +34,7 @@
|
|||
|
||||
#site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
svg{
|
||||
width: 100px;
|
||||
}
|
||||
|
|
@ -43,21 +44,10 @@
|
|||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--gap);
|
||||
}
|
||||
|
||||
#btn--soutenir{
|
||||
color: var(--color-accent);
|
||||
a:hover{
|
||||
color: var(--color-accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
ul, #btn--soutenir{
|
||||
gap: var(--gap);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#lang-toggle{
|
||||
display: flex;
|
||||
|
|
|
|||
87
assets/css/partials/_site-menu.scss
Normal file
87
assets/css/partials/_site-menu.scss
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
#site-menu{
|
||||
position: fixed;
|
||||
width: 420px;
|
||||
height: calc(100dvh - var(--header-h));
|
||||
height: calc(100vh - var(--header-h));
|
||||
top: var(--header-h);
|
||||
right: 0;
|
||||
background-color: var(--color-bg);
|
||||
border-left: var(--border-light);
|
||||
padding: var(--padding-body);
|
||||
// background-color: red;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
|
||||
.baseline{
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
|
||||
form{
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
--icon: 40px;
|
||||
display: grid;
|
||||
grid-template-columns: var(--icon) 1fr;
|
||||
input{
|
||||
grid-column: 1/3;
|
||||
grid-row: 1;
|
||||
height: calc(var(--h-block) * 1.5);
|
||||
width: 100%;
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-txt);
|
||||
padding-left: var(--icon);
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-normal);
|
||||
color: var(--color-txt);
|
||||
padding-top: 3px;
|
||||
&::placeholder{
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-normal);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
&:focus{
|
||||
border-color: var(--color-accent);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon{
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
svg{
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
nav{
|
||||
flex-grow: 1;
|
||||
ul{
|
||||
list-style-type: none;
|
||||
text-transform: uppercase;
|
||||
li{
|
||||
font-size: var(--fs-medium);
|
||||
a{
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding: 0.5em 0;
|
||||
&:hover{
|
||||
color: var(--grey-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.highlight{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,8 +7,9 @@
|
|||
--fs-normal: 16px;
|
||||
--fs-medium: 20px;
|
||||
--fs-big: 30px;
|
||||
--fs-x-big: 38px;
|
||||
--fs-xbig: 38px;
|
||||
--fs-button-bold: 22px;
|
||||
--max-w-content: 700px;
|
||||
--leading-tight: 1;
|
||||
--leading-normal: 1.2;
|
||||
--fw-normal: 400;
|
||||
|
|
@ -22,10 +23,11 @@
|
|||
--grey-800: #383838;
|
||||
--color-bg: #161616;
|
||||
--color-txt: #ffffff;
|
||||
--color-txt-light: var(--grey-600);
|
||||
--color-txt-light: var(--grey-400);
|
||||
--color-accent: #00ff00;
|
||||
--color-accent-50: #e9ffe9;
|
||||
--color-accent-100: #d8fdd8;
|
||||
--dark: black;
|
||||
--border: 1px solid var(--color-txt);
|
||||
--border-light: 1px solid var(--grey-800);
|
||||
--header-h: 80px;
|
||||
|
|
@ -105,7 +107,6 @@ body {
|
|||
width: calc(100vw - var(--padding-body) * 2);
|
||||
height: var(--header-h);
|
||||
background-color: var(--color-bg);
|
||||
border-bottom: var(--border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -119,6 +120,7 @@ body {
|
|||
}
|
||||
#site-header #site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
#site-header #site-title svg {
|
||||
width: 100px;
|
||||
|
|
@ -128,15 +130,6 @@ body {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--gap);
|
||||
}
|
||||
#site-header #btn--soutenir {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
#site-header #btn--soutenir a:hover {
|
||||
color: var(--color-accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
#site-header ul, #site-header #btn--soutenir {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#site-header #lang-toggle {
|
||||
|
|
@ -178,6 +171,14 @@ button:disabled {
|
|||
cursor: auto;
|
||||
}
|
||||
|
||||
.soutenir a {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.soutenir a:hover {
|
||||
color: var(--color-accent) !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.btn__default {
|
||||
--size: calc(var(--h-block) - 8px);
|
||||
font-size: var(--fs-normal);
|
||||
|
|
@ -477,7 +478,6 @@ button:disabled {
|
|||
width: calc(100vw - var(--padding-body) * 2);
|
||||
height: var(--header-h);
|
||||
background-color: var(--color-bg);
|
||||
border-bottom: var(--border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -491,6 +491,7 @@ button:disabled {
|
|||
}
|
||||
#site-header #site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
#site-header #site-title svg {
|
||||
width: 100px;
|
||||
|
|
@ -500,15 +501,6 @@ button:disabled {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--gap);
|
||||
}
|
||||
#site-header #btn--soutenir {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
#site-header #btn--soutenir a:hover {
|
||||
color: var(--color-accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
#site-header ul, #site-header #btn--soutenir {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#site-header #lang-toggle {
|
||||
|
|
@ -531,13 +523,99 @@ button:disabled {
|
|||
fill: var(--grey-200) !important;
|
||||
}
|
||||
|
||||
#site-menu {
|
||||
position: fixed;
|
||||
width: 420px;
|
||||
height: calc(100dvh - var(--header-h));
|
||||
height: calc(100vh - var(--header-h));
|
||||
top: var(--header-h);
|
||||
right: 0;
|
||||
background-color: var(--color-bg);
|
||||
border-left: var(--border-light);
|
||||
padding: var(--padding-body);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
}
|
||||
#site-menu .baseline {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
#site-menu form {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
--icon: 40px;
|
||||
display: grid;
|
||||
grid-template-columns: var(--icon) 1fr;
|
||||
}
|
||||
#site-menu form input {
|
||||
grid-column: 1/3;
|
||||
grid-row: 1;
|
||||
height: calc(var(--h-block) * 1.5);
|
||||
width: 100%;
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-txt);
|
||||
padding-left: var(--icon);
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-normal);
|
||||
color: var(--color-txt);
|
||||
padding-top: 3px;
|
||||
}
|
||||
#site-menu form input::-moz-placeholder {
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-normal);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
#site-menu form input::placeholder {
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-normal);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
#site-menu form input:focus {
|
||||
border-color: var(--color-accent);
|
||||
outline: none;
|
||||
}
|
||||
#site-menu form .icon {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#site-menu form .icon svg {
|
||||
width: 20px;
|
||||
}
|
||||
#site-menu nav {
|
||||
flex-grow: 1;
|
||||
}
|
||||
#site-menu nav ul {
|
||||
list-style-type: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#site-menu nav ul li {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
#site-menu nav ul li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
#site-menu nav ul li a:hover {
|
||||
color: var(--grey-200);
|
||||
}
|
||||
#site-menu nav ul .highlight {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#site-footer {
|
||||
background-color: black;
|
||||
background-color: var(--dark);
|
||||
padding: calc(var(--padding-body) * 2) var(--padding-body);
|
||||
}
|
||||
#site-footer .logo {
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
opacity: 0;
|
||||
}
|
||||
#site-footer .logo svg {
|
||||
width: 100px;
|
||||
|
|
@ -615,4 +693,87 @@ body main {
|
|||
flex-grow: 1;
|
||||
margin-top: var(--header-h);
|
||||
padding: 0 var(--padding-body);
|
||||
}
|
||||
|
||||
.page-article header {
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing) * 2) auto;
|
||||
}
|
||||
.page-article header .page-type {
|
||||
text-transform: uppercase;
|
||||
color: var(--color-txt-light);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.page-article header h2 {
|
||||
font-size: var(--fs-xbig);
|
||||
}
|
||||
|
||||
.page-article .section__article {
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing) * 3) auto;
|
||||
}
|
||||
.page-article .section__article a:hover {
|
||||
color: var(--grey-200);
|
||||
}
|
||||
.page-article .section__article .section__title {
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
.page-article .hero {
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: calc(var(--padding-body) * -1);
|
||||
margin: calc(var(--spacing) * 3) 0;
|
||||
}
|
||||
.page-article .hero figcaption {
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
max-width: var(--max-w-content);
|
||||
margin: 0 auto;
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.page-article .hero.hero-video figure {
|
||||
width: 100%;
|
||||
}
|
||||
.page-article .hero.hero-video figure img {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.page-article .short {
|
||||
font-size: var(--fs-medium);
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
|
||||
.page-article #section__synthese {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
|
||||
.page-article #banner--page {
|
||||
height: calc(100dvh - var(--header-h));
|
||||
height: calc(100dvh - var(--header-h));
|
||||
margin-bottom: calc((100dvh - var(--header-h)) * -1);
|
||||
background-color: red;
|
||||
position: sticky;
|
||||
top: var(--header-h);
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.page-article #section__dl {
|
||||
margin-top: 0px;
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
.page-article #section__dl .dl__group {
|
||||
display: grid;
|
||||
grid-template-columns: 40% 1fr;
|
||||
border-top: var(--border-light);
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
}
|
||||
.page-article #section__dl dt {
|
||||
color: var(--color-txt-light);
|
||||
}/*# sourceMappingURL=style.css.map */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -14,8 +14,11 @@
|
|||
|
||||
|
||||
@import 'partials/site-header';
|
||||
@import 'partials/site-menu';
|
||||
@import 'partials/site-footer';
|
||||
@import 'partials/main-layout';
|
||||
|
||||
|
||||
@import 'template/page-article';
|
||||
|
||||
|
||||
|
|
|
|||
99
assets/css/template/_page-article.scss
Normal file
99
assets/css/template/_page-article.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
.page-article header{
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing)*2) auto;
|
||||
.page-type{
|
||||
text-transform: uppercase;
|
||||
color: var(--color-txt-light);
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
h2{
|
||||
font-size: var(--fs-xbig);
|
||||
}
|
||||
}
|
||||
|
||||
.page-article .section__article{
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing)*3) auto;
|
||||
a:hover{
|
||||
color: var(--grey-200);
|
||||
}
|
||||
|
||||
|
||||
.section__title{
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: calc(var(--spacing)*1)
|
||||
}
|
||||
}
|
||||
|
||||
.page-article .hero{
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: calc(var(--padding-body)*-1);
|
||||
|
||||
margin: calc(var(--spacing)*3) 0;
|
||||
|
||||
figcaption{
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
max-width: var(--max-w-content);
|
||||
margin: 0 auto;
|
||||
padding-top: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
&.hero-video{
|
||||
figure{
|
||||
width: 100%;
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.page-article .short{
|
||||
font-size: var(--fs-medium);
|
||||
// margin: calc(var(--spacing)*3) auto;
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
|
||||
.page-article #section__synthese{
|
||||
font-size: var(--fs-medium);
|
||||
|
||||
}
|
||||
|
||||
.page-article #banner--page{
|
||||
height: calc(100dvh - var(--header-h));
|
||||
height: calc(100dvh - var(--header-h));
|
||||
margin-bottom: calc((100dvh - var(--header-h))*-1);
|
||||
background-color: red;
|
||||
position: sticky;
|
||||
top: var(--header-h);
|
||||
width: 240px;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.page-article #section__dl{
|
||||
margin-top: 0px;
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
.dl__group{
|
||||
display: grid;
|
||||
grid-template-columns: 40% 1fr;
|
||||
border-top: var(--border-light);
|
||||
padding: calc(var(--spacing)*0.5) 0;
|
||||
}
|
||||
|
||||
dt{
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
1
assets/icons/search.svg
Normal file
1
assets/icons/search.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg style="fill: var(--color-txt)" width="24" height="24" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z" fill-rule="nonzero"></path></svg>
|
||||
|
After Width: | Height: | Size: 624 B |
BIN
assets/images/Jumaa-visuel-1.png
Normal file
BIN
assets/images/Jumaa-visuel-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
BIN
assets/images/Nahel-visuel1.png
Normal file
BIN
assets/images/Nahel-visuel1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
assets/images/Nidal-Khaled-Amirah.png
Normal file
BIN
assets/images/Nidal-Khaled-Amirah.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
assets/images/kanaky-visuel-1.png
Normal file
BIN
assets/images/kanaky-visuel-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
window.onload = function () {
|
||||
includeHTML();
|
||||
headerShrink();
|
||||
headerToggle();
|
||||
};
|
||||
|
||||
window.onscroll = function () {
|
||||
|
|
@ -9,15 +9,12 @@ window.onscroll = function () {
|
|||
|
||||
|
||||
|
||||
function headerShrink() {
|
||||
function headerToggle() {
|
||||
const header = document.getElementById('site-header');
|
||||
const scrollPosition = window.scrollY || document.documentElement.scrollTop;
|
||||
|
||||
if (scrollPosition > 100) {
|
||||
header.classList.add('is-shrinked');
|
||||
} else {
|
||||
header.classList.remove('is-shrinked');
|
||||
}
|
||||
const buttonToggle = document.querySelector('menu-toggle');
|
||||
|
||||
console.log(buttonToggle);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -46,13 +46,7 @@
|
|||
|
||||
<div class="footer__socials">
|
||||
<p>Suivez Index sur les réseaux sociaux</p>
|
||||
<div class="container" w3-include-html="/components/socials.html">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="container" w3-include-html="/components/socials.html"></div>
|
||||
</div>
|
||||
|
||||
<div class="footer__mentions">
|
||||
|
|
|
|||
|
|
@ -13,13 +13,10 @@
|
|||
<ul>
|
||||
<li><a href="#">Enquêtes</a></li>
|
||||
<li><a href="#">Impact</a></li>
|
||||
<li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<button id="btn--soutenir">
|
||||
<a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a>
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
24
components/site-menu.html
Normal file
24
components/site-menu.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<p class="baseline">Index est une ONG d’investigation numérique au service du public,
|
||||
de la vérité et de la justice.</p>
|
||||
|
||||
<form aria-label="Formulaire de recherche">
|
||||
<span class="icon" w3-include-html="/assets/icons/search.svg"></span>
|
||||
<input type="text" id="search" class="input" placeholder="Rechercher" w3-include-html="/icons/search.svg">
|
||||
</form>
|
||||
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="soutenir highlight"><a href="#">Soutenez-nous</a></li>
|
||||
<li class="highlight"><a href="#">Enquêtes</a></li>
|
||||
<li class="highlight"><a href="#">Impact</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li><a href="#">À propos</a></li>
|
||||
<li><a href="#">Ressources</a></li>
|
||||
<li><a href="#">Newsletter</a></li>
|
||||
<li><a href="#">Mentions légales</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="socials" w3-include-html="/components/socials.html"></div>
|
||||
|
|
@ -12,7 +12,8 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<header id="site-header" w3-include-html="components/site-header.html"></header>
|
||||
<header id="site-header" w3-include-html="/components/site-header.html"></header>
|
||||
<div id="site-menu" w3-include-html="/components/site-menu.html"></div>
|
||||
|
||||
|
||||
<main>
|
||||
|
|
@ -24,7 +25,7 @@
|
|||
</main>
|
||||
|
||||
|
||||
<footer id="site-footer" w3-include-html="components/site-footer.html"></footer>
|
||||
<footer id="site-footer" w3-include-html="/components/site-footer.html"></footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
131
list-articles/index.html
Normal file
131
list-articles/index.html
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>INDEX</title>
|
||||
<link rel="icon" type="image/png" href="/assets/favicon.png" />
|
||||
<script src="/assets/js/temp/includeHtml.js"></script>
|
||||
<script src="/assets/js/onload.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/assets/fonts/stylesheet.css">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="site-header" w3-include-html="/components/site-header.html"></header>
|
||||
<div id="site-menu" w3-include-html="/components/site-menu.html"></div>
|
||||
|
||||
|
||||
<main class="list-articles">
|
||||
|
||||
<h2 class="page-title">Enquête</h2>
|
||||
|
||||
<p class="baseline">Les enquêtes d’Index mobilisent les techniques de l’investigation numérique pour établir la véri...</p>
|
||||
|
||||
<form aria-label="Formulaire de recherche">
|
||||
<span class="icon" w3-include-html="/assets/icons/search.svg"></span>
|
||||
<input type="text" id="avanced-search" class="input" placeholder="Rechercher" w3-include-html="/icons/search.svg">
|
||||
</form>
|
||||
|
||||
<div class="list-articles__container">
|
||||
|
||||
<article class="card">
|
||||
<figure>
|
||||
<img src="/assets/images/Nidal-Khaled-Amirah.png">
|
||||
</figure>
|
||||
<h3 class="title"><a href="/page-enquete" target="_blank">L’exécution de Nidal et Khaled ‘Amirah</a></h3>
|
||||
|
||||
<p class="short">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
|
||||
|
||||
<dl>
|
||||
<div class="dl__group">
|
||||
<dt>Date de publication</dt>
|
||||
<dd><time datetime="2025-12-09">09 dec 2025</time></dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Partenaire(s)</dt>
|
||||
<dd>B’Tselem</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Mots-clés</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>Occupation</li>
|
||||
<li>Colonialité</li>
|
||||
<li>Forces armées</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<a class="link-block" href="/page-enquete" target="_blank"></a>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<figure>
|
||||
<img src="/assets/images/Jumaa-visuel-1.png">
|
||||
</figure>
|
||||
<h3 class="title"><a href="/page-enquete" target="_blank">La mort pas noyade de Jumaa Al-Hasan</a></h3>
|
||||
|
||||
<p class="short">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
|
||||
|
||||
<dl>
|
||||
<div class="dl__group">
|
||||
<dt>Date de publication</dt>
|
||||
<dd><time datetime="2025-12-09">09 dec 2025</time></dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Partenaire(s)</dt>
|
||||
<dd>B’Tselem</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Mots-clés</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>Frontières</li>
|
||||
<li>Grenade</li>
|
||||
<li>Maintien de l’ordre</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<a class="link-block" href="/page-enquete" target="_blank"></a>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<figure>
|
||||
<img src="/assets/images/Nahel-visuel1.png">
|
||||
</figure>
|
||||
<h3 class="title"><a href="/page-enquete" target="_blank">L’homicide de Nahel Merzouk</a></h3>
|
||||
|
||||
<p class="short">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
|
||||
|
||||
<dl>
|
||||
<div class="dl__group">
|
||||
<dt>Date de publication</dt>
|
||||
<dd><time datetime="2025-12-09">09 dec 2025</time></dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Partenaire(s)</dt>
|
||||
<dd>B’Tselem</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Mots-clés</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>Refus d’optempérer</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<a class="link-block" href="/page-enquete" target="_blank"></a>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer id="site-footer" w3-include-html="/components/site-footer.html"></footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
210
page-enquete/index.html
Normal file
210
page-enquete/index.html
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>INDEX</title>
|
||||
<link rel="icon" type="image/png" href="/assets/favicon.png" />
|
||||
<script src="/assets/js/temp/includeHtml.js"></script>
|
||||
<script src="/assets/js/onload.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/assets/fonts/stylesheet.css">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="site-header" w3-include-html="/components/site-header.html"></header>
|
||||
<div id="site-menu" w3-include-html="/components/site-menu.html"></div>
|
||||
|
||||
|
||||
<main class="page-article">
|
||||
<header>
|
||||
<p class="page-type">Enquête</p>
|
||||
<h2>L’exécution de Nidal et Khaled ‘Amirah</h2>
|
||||
<p class="date-publish"></p>
|
||||
</header>
|
||||
|
||||
<div class="hero hero-video">
|
||||
<figure>
|
||||
<img src="/assets/images/Nidal-Khaled-Amirah.png">
|
||||
</figure>
|
||||
<figcaption>Ici la légende de l’image. À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</figcaption>
|
||||
</div>
|
||||
|
||||
<div id="banner--page">
|
||||
<nav id="nav--page">
|
||||
<ul>
|
||||
<li><a href="#">Vidéo</a></li>
|
||||
<li><a href="#">Synthèse</a></li>
|
||||
<li><a href="#">Impacts</a></li>
|
||||
<li><a href="#">En lien</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="btn--group" id="btn-mobile">
|
||||
<button class="btn--bold"><a href="#">Lire le rapport</a></button>
|
||||
<button class="btn"><a href="#">Partager</a></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="short">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
|
||||
|
||||
|
||||
|
||||
<dl class="section__article" id="section__dl">
|
||||
<div class="dl__group">
|
||||
<dt>Date de l’incident</dt>
|
||||
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Lieu de l’incident</dt>
|
||||
<dd>Naplouse, Cisjordanie occupée, Palestine</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Conséquences</dt>
|
||||
<dd>Mort</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Mots-clés</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>Occupation</li>
|
||||
<li>Colonialité</li>
|
||||
<li>Forces armées</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Méthodologie</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>Reconstitution 3D</li>
|
||||
<li>Frame-match</li>
|
||||
<li>Analyse audiovisuelle</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Équipe</dt>
|
||||
<dd>Nadav Joffe, Basile Trouillet, Francesco Sebregondi</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Partenaire(s)</dt>
|
||||
<dd><a href="#" target="_blank">B’Tselem</a></dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Date de publication</dt>
|
||||
<dd><time datetime="2025-12-09">09 dec 2025</time></dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="section__article" id="section__synthese">
|
||||
<h3 class="section__title">Synthèse</h3>
|
||||
|
||||
<p>Le 10 juin 2025, lors d’un raid de grande envergure dans la vieille ville de Naplouse, les forces armées israéliennes ont tué deux Palestiniens : les frères Nidal et Khaled ‘Amirah.
|
||||
</p>
|
||||
<p>
|
||||
Suite à l’incident, l’armée israélienne a affirmé dans un communiqué que les hommes étaient des « terroristes » qui avaient essayé de s’emparer de l’arme d’un soldat et en avaient blessé quatre autres. Les soldats auraient alors riposté en tirant sur les deux hommes, les tuant tous les deux.
|
||||
</p>
|
||||
<p>
|
||||
Cependant, l’analyse vidéo et les témoignages recueillis contredisent cette version des faits. Une enquête menée conjointement par B’Tselem et Index révèle que les frères ‘Amirah n’ont à aucun moment posé de danger pour les soldats impliqués. Pourtant, Khaled a été exécuté à bout portant alors qu’il était maintenu au sol par plusieurs soldats armés, tandis que son frère Nidal a été abattu par un tir dans le dos. Les soldats ont également empêché les secouristes présents de leur prêter assistance.
|
||||
</p>
|
||||
<h4>Un sous-titre ici pour tester</h4>
|
||||
<p>
|
||||
Les corps de Nidal et de Khaled ‘Amirah sont toujours détenus par les forces armées israéliennes.
|
||||
</p>
|
||||
<p>
|
||||
À Naplouse comme à Jénine – où des soldats ont été filmés le mois dernier en train d’exécuter deux Palestiniens qui s’étaient rendus – ces images révèlent une politique de “tir à vue”, qui permet à l’armée israélienne de faire un usage sans aucun frein de la force létale contre les Palestiniens. Depuis octobre 2023, Israël a tué plus de 1 000 Palestiniens en Cisjordanie occupée.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section__article" id="section__impacts">
|
||||
<h3 class="section__title">Impacts</h3>
|
||||
|
||||
<div class="impacts__group" data-impact-type="media">
|
||||
<p class="type">Médiatique</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="impacts__group" data-impact-type="judiciaire">
|
||||
<p class="type">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p >La justice israélienne déclare ouvrir une enquête sur “les circonstances de la mort de Nidal et Khaled Amirah”
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn--small"><a href="#">Voir plus</a></button>
|
||||
</div>
|
||||
|
||||
<div class="impacts__group" data-impact-type="judiciaire">
|
||||
<p class="type">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p >La justice israélienne déclare ouvrir une enquête sur “les circonstances de la mort de Nidal et Khaled Amirah”
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn--small"><a href="#">Voir plus</a></button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="impacts__group" data-impact-type="public">
|
||||
<p class="type">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>Index présente une série d’enquêtes récentes au Festival du Réel 2025
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn--small"><a href="#">Voir plus</a></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<aside class="section__article" id="section__en-lien">
|
||||
<h3 class="section__title">En lien</h3>
|
||||
|
||||
<article class="card--small">
|
||||
<figure>
|
||||
<img src="/assets/images/Nahel-visuel1.png">
|
||||
</figure>
|
||||
<time datetime="2024-06-27">27 Jun 2024</time>
|
||||
<h4 class="title">L’homicide de Nahel Merzouk</h4>
|
||||
<p class="details">Refus d’optempérer</p>
|
||||
</article>
|
||||
|
||||
<article class="card--small">
|
||||
<figure>
|
||||
<img src="/assets/images/Jumaa-visuel-1.png">
|
||||
</figure>
|
||||
<time datetime="2024-06-27">27 Jun 2024</time>
|
||||
<h4 class="title">La mort par noyade de Jumaa al-Hasan</h4>
|
||||
<p class="details">Refus d’optempérer</p>
|
||||
</article>
|
||||
|
||||
<article class="card--small">
|
||||
<figure>
|
||||
<img src="/assets/images/kanaky-visuel-1.png">
|
||||
</figure>
|
||||
<time datetime="2024-06-27">27 Jun 2024</time>
|
||||
<h4 class="title">Trois morts a Saint-Louis, Kanaky/Nouvelle-Caledonie</h4>
|
||||
<p class="details">Refus d’optempérer</p>
|
||||
</article>
|
||||
|
||||
</aside>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer id="site-footer" w3-include-html="/components/site-footer.html"></footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue