support : integration except products
This commit is contained in:
isUnknown
parent
904dd353e8
commit
ba0df6b5cb
44 changed files with 2146 additions and 5 deletions
41
assets/css/base/_body.scss
Normal file
41
assets/css/base/_body.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
-o-font-smoothing: antialiased
|
||||
}
|
||||
a {
|
||||
color: currentColor;
|
||||
}
|
||||
button{
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: var(--color-txt);
|
||||
}
|
||||
iframe{
|
||||
border: none;
|
||||
}
|
||||
|
||||
body{
|
||||
font-family: var(--font);
|
||||
line-height: var(--leading-normal);
|
||||
font-size: var(--fs-normal);
|
||||
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
padding: 0px var(--padding-body);
|
||||
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//temp
|
||||
main{
|
||||
// padding-top: calc(var(--header-h-shrinked) - var(--padding-body));
|
||||
}
|
||||
14
assets/css/base/_responsive.scss
Normal file
14
assets/css/base/_responsive.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
$desktop: "screen and (min-width: 1200px)";
|
||||
$medium: "screen and (max-width: 1200px)";
|
||||
$small-up: "screen and (min-width: 720px)";
|
||||
$small: "screen and (max-width: 720px)";
|
||||
$x-small: "screen and (max-width: 560px)";
|
||||
|
||||
|
||||
@media #{$medium}{
|
||||
:root{
|
||||
--padding: 16px;
|
||||
--padding-cards: 0.75rem;
|
||||
--padding-cards-small: 0.5rem;
|
||||
}
|
||||
}
|
||||
55
assets/css/base/_var.scss
Normal file
55
assets/css/base/_var.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
:root{
|
||||
--font: Arial, sans-serif;
|
||||
|
||||
// --fs-small: 9px;
|
||||
// --font-size: 12px;
|
||||
// --fs-medium: 18px;
|
||||
// --fs-big: 24px;
|
||||
|
||||
--fs-x-small: 9px;
|
||||
--fs-small: 13px;
|
||||
--fs-normal: 18px;
|
||||
--fs-medium: 22px;
|
||||
--fs-big: 28px;
|
||||
--fs-x-big: 36px;
|
||||
|
||||
--leading-tight: 1;
|
||||
--leading-normal: 1.2;
|
||||
// --leading-relaxed: 1.4;
|
||||
// --leading-loose: 1.8;
|
||||
|
||||
--fw-normal: 400;
|
||||
--fw-medium: 600;
|
||||
|
||||
|
||||
--color-bg: #161616;
|
||||
--color-txt: #FFFFFF;
|
||||
--color-accent: #00FF00;
|
||||
--color-accent-50: #e9ffe9;
|
||||
--color-accent-100: #d8fdd8;
|
||||
|
||||
--grey-100: #d8d8d8;
|
||||
--grey-300: #B9B9B9;
|
||||
--grey-400: #969696;
|
||||
--grey-800: #383838;
|
||||
|
||||
--border: 1px solid var(--color-txt);
|
||||
|
||||
|
||||
--header-h: 140px;
|
||||
--header-h-shrinked: 60px;
|
||||
|
||||
|
||||
// responsive
|
||||
--padding-body: 16px;
|
||||
|
||||
|
||||
--radius-small: 4px;
|
||||
--spacing: 40px;
|
||||
--h-block: 40px;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
55
assets/css/components/_buttons.scss
Normal file
55
assets/css/components/_buttons.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
.btn--bold .btn--bold__container{
|
||||
--size: 28px;
|
||||
font-size: var(--fs-big);
|
||||
height: var(--size);
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75ch;
|
||||
padding-right: 1ch;
|
||||
color: var(--color-accent);
|
||||
|
||||
font-weight: var(--fw-medium);
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
.icon, .txt{ z-index: 10; }
|
||||
|
||||
.icon{
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 1px;
|
||||
padding-left: 2px;
|
||||
|
||||
svg{
|
||||
width: 70%;
|
||||
fill: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&::before{
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: calc(var(--size)/2);
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
z-index: 0;
|
||||
transition: width .2s
|
||||
}
|
||||
|
||||
&:hover{
|
||||
color: var(--color-bg);
|
||||
&::before{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
74
assets/css/components/_comments-slider.scss
Normal file
74
assets/css/components/_comments-slider.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
.comments-slider {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
|
||||
@media #{$small-up}{
|
||||
padding-left: 20%;
|
||||
flex: 0 0 40%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.comments-slider::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment {
|
||||
scroll-snap-align: start;
|
||||
// background-color: #444;
|
||||
|
||||
@media #{$small}{
|
||||
flex: 0 0 calc(100vw - var(--padding-body)*2); /* mobile */
|
||||
padding: 0px 2ch;
|
||||
}
|
||||
@media #{$small-up}{
|
||||
flex: 0 0 40%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.comment__text{
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: 1;
|
||||
max-width: 40ch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment__name {
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Dots */
|
||||
.comments-slider__dots {
|
||||
display: flex;
|
||||
@media #{$small-up}{ justify-content: center; }
|
||||
@media #{$small}{ justify-content: flex-end; }
|
||||
margin-top: 0.5rem;
|
||||
gap: 0.4rem;
|
||||
margin-top: calc(var(--spacing)*1.5);
|
||||
}
|
||||
.comments-slider__dots button {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--grey-400);
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
.comments-slider__dots button.active {
|
||||
background: var(--color-txt);
|
||||
}
|
||||
|
||||
81
assets/css/components/_form-newsletter.scss
Normal file
81
assets/css/components/_form-newsletter.scss
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
.form__newsletter{
|
||||
--size: 24px;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
max-width: 36ch;
|
||||
|
||||
margin: calc(var(--spacing)*1) auto;
|
||||
margin-top: calc(var(--spacing)*1.5);
|
||||
|
||||
|
||||
input[type="email"]{
|
||||
|
||||
height: var(--h-block);
|
||||
width: 100%;
|
||||
border-radius: calc(var(--h-block)*0.5);
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0 1ch;
|
||||
|
||||
font-size: var(--fs-medium);
|
||||
z-index: 40;
|
||||
&::placeholder{
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
|
||||
&:focus{
|
||||
outline: 3px solid var(--grey-400);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
button[type="submit"].btn--bold{
|
||||
|
||||
z-index: 50;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
|
||||
.btn--bold__container{
|
||||
z-index: 50;
|
||||
padding-right: 0;
|
||||
|
||||
&::before{
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.txt{
|
||||
font-size: var(--fs-medium);
|
||||
display: none;
|
||||
padding-left: 1ch;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
.txt{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// shadow on input
|
||||
&::before{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
background: linear-gradient(90deg,transparent 0%, var(--color-txt) 80%);
|
||||
position: absolute;
|
||||
left: -110px;
|
||||
z-index: 40;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
51
assets/css/components/_gauge.scss
Normal file
51
assets/css/components/_gauge.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
.gauge__container{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#gauge{
|
||||
width: 100%;
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
height: calc(var(--h-block)*0.5);
|
||||
border-radius: calc(var(--h-block)*0.25);
|
||||
background-color: var(--grey-400);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&::before{
|
||||
content: '';
|
||||
display: block;
|
||||
height: calc(var(--h-block)*0.5);
|
||||
border-radius: calc(var(--h-block)*0.25);
|
||||
width: 0%;
|
||||
background-color: var(--color-txt);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
animation: fillGauge 1s ease forwards;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes fillGauge {
|
||||
from {
|
||||
width: 0%;
|
||||
}
|
||||
to {
|
||||
width: var(--pourcent);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.gauge--infos{
|
||||
.property{
|
||||
font-size: var(--fs-small);
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
&:last-of-type{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
1
assets/css/components/_heading.scss
Normal file
1
assets/css/components/_heading.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
|
||||
32
assets/css/components/_list-socials.scss
Normal file
32
assets/css/components/_list-socials.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.list-socials{
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
.link--external{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
text-decoration: none;
|
||||
|
||||
|
||||
|
||||
.icon svg {
|
||||
width: 25px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
|
||||
.arrow svg{
|
||||
position: relative;
|
||||
top: 3px;
|
||||
width: 12px;
|
||||
fill: var(--grey-400);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
38
assets/css/components/_nav-tabs.scss
Normal file
38
assets/css/components/_nav-tabs.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
.nav--tabs{
|
||||
height: var(--h-block);
|
||||
width: auto;
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-small);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
display: inline-flex;
|
||||
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
margin-bottom: var(--spacing);
|
||||
|
||||
|
||||
.nav--tabs__btn{
|
||||
font-size: var(--fs-small);
|
||||
padding: 0 1ch;
|
||||
|
||||
&.is-selected{
|
||||
background-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
&:not(.is-selected):hover{
|
||||
background-color: var(--grey-800);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.nav--tabs__btn + .nav--tabs__btn{
|
||||
border-left: var(--border);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
53
assets/css/components/_player.scss
Normal file
53
assets/css/components/_player.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
.player__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
|
||||
.player__element {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
// display: none;
|
||||
|
||||
|
||||
.player__btn {
|
||||
svg {
|
||||
fill: var(--color-txt);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.player__iframe {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
iframe{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
65
assets/css/components/_text.scss
Normal file
65
assets/css/components/_text.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
#page-don{
|
||||
|
||||
// text -----------------------------------------
|
||||
|
||||
.p__baseline-big{
|
||||
font-size: var(--fs-big);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: var(--leading-tight);
|
||||
text-align: center;
|
||||
margin: calc(var(--spacing)*1.75) 0;
|
||||
}
|
||||
|
||||
.p__baseline{
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: var(--leading-tight);
|
||||
text-align: center;
|
||||
margin: var(--spacing) 0;
|
||||
}
|
||||
|
||||
.p__details{
|
||||
font-size: var(--fs-small);
|
||||
margin-bottom: 0.5em;
|
||||
color: var(--grey-400);
|
||||
}
|
||||
|
||||
|
||||
// heading ---------------------------------------------
|
||||
|
||||
.hero-heading{
|
||||
font-size: var(--fs-x-big);
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: var(--fw-medium);
|
||||
display: inline;
|
||||
background: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
padding: 0 0.3em;
|
||||
box-decoration-break: clone;
|
||||
-webkit-box-decoration-break: clone;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section__heading{
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: 1;
|
||||
|
||||
height: calc(var(--spacing)*3);
|
||||
border-bottom: var(--border);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.subsection__heading{
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: 1;
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
44
assets/css/pages/dons/_section-donation.scss
Normal file
44
assets/css/pages/dons/_section-donation.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
#section__donation{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
|
||||
.btn--donation__container{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: var(--padding-body);
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
|
||||
.btn--donation__grow-2{
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn--donation{
|
||||
background-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
border-radius: var(--radius-small);
|
||||
height: calc(var(--h-block)*2);
|
||||
|
||||
.bold{
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-medium);
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.small{
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: var(--color-accent-50);
|
||||
// outline: 4px solid var(--color-accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
24
assets/css/pages/dons/_section-hero.scss
Normal file
24
assets/css/pages/dons/_section-hero.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
#section__hero{
|
||||
|
||||
|
||||
.hero-heading__container{
|
||||
text-align: center;
|
||||
margin-top: calc(var(--spacing)*1.5);
|
||||
margin-bottom: calc(var(--spacing)*1.5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn--bold{
|
||||
display: block;
|
||||
margin: var(--spacing) auto;
|
||||
margin-bottom: calc(var(--spacing)*1.5);
|
||||
}
|
||||
|
||||
.jauge__container{
|
||||
margin-top: calc(var(--spacing)*1.5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
30
assets/css/pages/dons/_section-player.scss
Normal file
30
assets/css/pages/dons/_section-player.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
#section__player{
|
||||
|
||||
position: relative;
|
||||
left: calc(var(--padding-body)*-1);
|
||||
|
||||
@media #{$small}{
|
||||
width: 100vw;
|
||||
// aspect-ratio: 1/1;
|
||||
.player__container, .player__element, .player__iframe, iframe{
|
||||
width: 100%;
|
||||
height: 75vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media #{$small-up}{
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 60vh;
|
||||
.player__container, .player__element, .player__iframe, iframe{
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
78
assets/css/pages/dons/_section-questions.scss
Normal file
78
assets/css/pages/dons/_section-questions.scss
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
#section__questions{
|
||||
details{
|
||||
border-bottom: var(--border);
|
||||
|
||||
|
||||
summary{
|
||||
height: calc(var(--h-block)*1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
|
||||
&::after{
|
||||
content: "▶";
|
||||
font-size: 0.8em;
|
||||
color: var(--grey-400);
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
padding-top: calc(var(--spacing)*0.25);
|
||||
margin-bottom: var(--spacing);
|
||||
border-top: var(--border);
|
||||
}
|
||||
|
||||
|
||||
&::details-content {
|
||||
|
||||
max-height: 0;
|
||||
transition: max-height ease-in .5s;
|
||||
overflow: hidden;
|
||||
|
||||
// display: grid;
|
||||
// grid-template-rows: 0fr;
|
||||
// overflow: hidden;
|
||||
// transition: grid-template-rows 1s;
|
||||
|
||||
}
|
||||
|
||||
&[open]{
|
||||
|
||||
|
||||
|
||||
&::details-content {
|
||||
max-height: 1000px;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
|
||||
summary::after{
|
||||
transform: rotate(90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn--bold{
|
||||
display: block;
|
||||
margin: calc(var(--spacing) * 1.5) auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
// @keyframes fadeInDown {
|
||||
// 0% {
|
||||
// opacity: 0;
|
||||
// transform: translateY(-1.25em);
|
||||
// }
|
||||
// 100% {
|
||||
// opacity: 1;
|
||||
// transform: translateY(0);
|
||||
// }
|
||||
// }
|
||||
8
assets/css/pages/dons/_section-socials.scss
Normal file
8
assets/css/pages/dons/_section-socials.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
#section__socials{
|
||||
|
||||
.list-socials{
|
||||
columns: 2;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
40
assets/css/pages/dons/_section-store.scss
Normal file
40
assets/css/pages/dons/_section-store.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
#section__store{
|
||||
|
||||
|
||||
.store__product{
|
||||
|
||||
|
||||
margin-top: calc(var(--spacing)*1.5);
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
position: relative;
|
||||
|
||||
figure{
|
||||
aspect-ratio: 4/3;
|
||||
background-color: var(--color-bg);
|
||||
background-color: var(--data-bg);
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
|
||||
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-block{
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
14
assets/css/pages/dons/_sections.scss
Normal file
14
assets/css/pages/dons/_sections.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
.section__page-don:not(#section__player), .subsection__page-don{
|
||||
border-bottom: var(--border);
|
||||
padding-bottom: calc(var(--spacing)*2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media #{$small}{
|
||||
|
||||
#section__hero, #section__comments{
|
||||
padding-bottom: calc(var(--spacing)*0.5)!important;
|
||||
}
|
||||
|
||||
}
|
||||
110
assets/css/partials/_site-header.scss
Normal file
110
assets/css/partials/_site-header.scss
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
#site-header{
|
||||
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 100000;
|
||||
|
||||
width: 100vw;
|
||||
height: var(--header-h);
|
||||
padding: 0 var(--padding-body);
|
||||
|
||||
background-color: transparent;
|
||||
border-bottom: var(--border);
|
||||
border-color: transparent;
|
||||
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.burger svg{
|
||||
fill: var(--color-txt);
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.site-title{
|
||||
display: flex;
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
svg{
|
||||
fill: var(--color-txt);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
nav{
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
nav ul{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2ch;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
.header-left, .header-right{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
||||
.header-center{
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#go-to-panier{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
text-decoration: none;
|
||||
|
||||
|
||||
#go-to-panier__nbr{
|
||||
|
||||
min-width: 2.6ch;
|
||||
height: 2.6ch;
|
||||
border-radius: 1.3ch;
|
||||
border: var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.is-shrinked{
|
||||
background-color: var(--color-bg);
|
||||
height: var(--header-h-shrinked);
|
||||
transition: ease-in .3s;
|
||||
border-color: var(--color-txt);
|
||||
|
||||
nav{
|
||||
height: var(--h-block);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.site-title{
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
681
assets/css/style.css
Normal file
681
assets/css/style.css
Normal file
|
|
@ -0,0 +1,681 @@
|
|||
@charset "UTF-8";
|
||||
:root {
|
||||
--font: Arial, sans-serif;
|
||||
--fs-x-small: 9px;
|
||||
--fs-small: 13px;
|
||||
--fs-normal: 18px;
|
||||
--fs-medium: 22px;
|
||||
--fs-big: 28px;
|
||||
--fs-x-big: 36px;
|
||||
--leading-tight: 1;
|
||||
--leading-normal: 1.2;
|
||||
--fw-normal: 400;
|
||||
--fw-medium: 600;
|
||||
--color-bg: #161616;
|
||||
--color-txt: #FFFFFF;
|
||||
--color-accent: #00FF00;
|
||||
--color-accent-50: #e9ffe9;
|
||||
--color-accent-100: #d8fdd8;
|
||||
--grey-100: #d8d8d8;
|
||||
--grey-300: #B9B9B9;
|
||||
--grey-400: #969696;
|
||||
--grey-800: #383838;
|
||||
--border: 1px solid var(--color-txt);
|
||||
--header-h: 140px;
|
||||
--header-h-shrinked: 60px;
|
||||
--padding-body: 16px;
|
||||
--radius-small: 4px;
|
||||
--spacing: 40px;
|
||||
--h-block: 40px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
-o-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: var(--color-txt);
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font);
|
||||
line-height: var(--leading-normal);
|
||||
font-size: var(--fs-normal);
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
padding: 0px var(--padding-body);
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
:root {
|
||||
--padding: 16px;
|
||||
--padding-cards: 0.75rem;
|
||||
--padding-cards-small: 0.5rem;
|
||||
}
|
||||
}
|
||||
#page-don .p__baseline-big {
|
||||
font-size: var(--fs-big);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: var(--leading-tight);
|
||||
text-align: center;
|
||||
margin: calc(var(--spacing) * 1.75) 0;
|
||||
}
|
||||
#page-don .p__baseline {
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: var(--leading-tight);
|
||||
text-align: center;
|
||||
margin: var(--spacing) 0;
|
||||
}
|
||||
#page-don .p__details {
|
||||
font-size: var(--fs-small);
|
||||
margin-bottom: 0.5em;
|
||||
color: var(--grey-400);
|
||||
}
|
||||
#page-don .hero-heading {
|
||||
font-size: var(--fs-x-big);
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: var(--fw-medium);
|
||||
display: inline;
|
||||
background: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
padding: 0 0.3em;
|
||||
box-decoration-break: clone;
|
||||
-webkit-box-decoration-break: clone;
|
||||
text-align: center;
|
||||
}
|
||||
#page-don .section__heading {
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: 1;
|
||||
height: calc(var(--spacing) * 3);
|
||||
border-bottom: var(--border);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#page-don .subsection__heading {
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: 1;
|
||||
margin-top: calc(var(--spacing) * 0.75);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
.btn--bold .btn--bold__container {
|
||||
--size: 28px;
|
||||
font-size: var(--fs-big);
|
||||
height: var(--size);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75ch;
|
||||
padding-right: 1ch;
|
||||
color: var(--color-accent);
|
||||
font-weight: var(--fw-medium);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn--bold .btn--bold__container .icon, .btn--bold .btn--bold__container .txt {
|
||||
z-index: 10;
|
||||
}
|
||||
.btn--bold .btn--bold__container .icon {
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 1px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
.btn--bold .btn--bold__container .icon svg {
|
||||
width: 70%;
|
||||
fill: var(--color-bg);
|
||||
}
|
||||
.btn--bold .btn--bold__container::before {
|
||||
content: "";
|
||||
display: block;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: calc(var(--size) / 2);
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
z-index: 0;
|
||||
transition: width 0.2s;
|
||||
}
|
||||
.btn--bold .btn--bold__container:hover {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
.btn--bold .btn--bold__container:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav--tabs {
|
||||
height: var(--h-block);
|
||||
width: auto;
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-small);
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
.nav--tabs .nav--tabs__btn {
|
||||
font-size: var(--fs-small);
|
||||
padding: 0 1ch;
|
||||
}
|
||||
.nav--tabs .nav--tabs__btn.is-selected {
|
||||
background-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
.nav--tabs .nav--tabs__btn:not(.is-selected):hover {
|
||||
background-color: var(--grey-800);
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav--tabs .nav--tabs__btn + .nav--tabs__btn {
|
||||
border-left: var(--border);
|
||||
}
|
||||
|
||||
.list-socials {
|
||||
list-style-type: none;
|
||||
}
|
||||
.list-socials li {
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
.list-socials li .link--external {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
text-decoration: none;
|
||||
}
|
||||
.list-socials li .link--external .icon svg {
|
||||
width: 25px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.list-socials li .link--external .arrow svg {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
width: 12px;
|
||||
fill: var(--grey-400);
|
||||
}
|
||||
|
||||
.player__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.player__container .player__element {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.player__container .player__element .player__btn {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.player__container .player__element .player__btn svg {
|
||||
fill: var(--color-txt);
|
||||
width: 100%;
|
||||
}
|
||||
.player__container .player__element img,
|
||||
.player__container .player__element video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
.player__container .player__iframe {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.player__container .player__iframe iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gauge__container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#gauge {
|
||||
width: 100%;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
height: calc(var(--h-block) * 0.5);
|
||||
border-radius: calc(var(--h-block) * 0.25);
|
||||
background-color: var(--grey-400);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#gauge::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: calc(var(--h-block) * 0.5);
|
||||
border-radius: calc(var(--h-block) * 0.25);
|
||||
width: 0%;
|
||||
background-color: var(--color-txt);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
animation: fillGauge 1s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes fillGauge {
|
||||
from {
|
||||
width: 0%;
|
||||
}
|
||||
to {
|
||||
width: var(--pourcent);
|
||||
}
|
||||
}
|
||||
.gauge--infos .property {
|
||||
font-size: var(--fs-small);
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.gauge--infos:last-of-type {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form__newsletter {
|
||||
--size: 24px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 36ch;
|
||||
margin: calc(var(--spacing) * 1) auto;
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.form__newsletter input[type=email] {
|
||||
height: var(--h-block);
|
||||
width: 100%;
|
||||
border-radius: calc(var(--h-block) * 0.5);
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0 1ch;
|
||||
font-size: var(--fs-medium);
|
||||
z-index: 40;
|
||||
}
|
||||
.form__newsletter input[type=email]::-moz-placeholder {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
.form__newsletter input[type=email]::placeholder {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
.form__newsletter input[type=email]:focus {
|
||||
outline: 3px solid var(--grey-400);
|
||||
}
|
||||
.form__newsletter button[type=submit].btn--bold {
|
||||
z-index: 50;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
}
|
||||
.form__newsletter button[type=submit].btn--bold .btn--bold__container {
|
||||
z-index: 50;
|
||||
padding-right: 0;
|
||||
}
|
||||
.form__newsletter button[type=submit].btn--bold .btn--bold__container::before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.form__newsletter button[type=submit].btn--bold .btn--bold__container .txt {
|
||||
font-size: var(--fs-medium);
|
||||
display: none;
|
||||
padding-left: 1ch;
|
||||
}
|
||||
.form__newsletter button[type=submit].btn--bold .btn--bold__container:hover .txt {
|
||||
display: block;
|
||||
}
|
||||
.form__newsletter button[type=submit].btn--bold::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
background: linear-gradient(90deg, transparent 0%, var(--color-txt) 80%);
|
||||
position: absolute;
|
||||
left: -110px;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.comments-slider {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
@media screen and (min-width: 720px) {
|
||||
.comments-slider {
|
||||
padding-left: 20%;
|
||||
flex: 0 0 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.comments-slider::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
@media screen and (max-width: 720px) {
|
||||
.comment {
|
||||
flex: 0 0 calc(100vw - var(--padding-body) * 2); /* mobile */
|
||||
padding: 0px 2ch;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 720px) {
|
||||
.comment {
|
||||
flex: 0 0 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.comment__text {
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: 1;
|
||||
max-width: 40ch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment__name {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.comments-slider__dots {
|
||||
display: flex;
|
||||
margin-top: 0.5rem;
|
||||
gap: 0.4rem;
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
@media screen and (min-width: 720px) {
|
||||
.comments-slider__dots {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 720px) {
|
||||
.comments-slider__dots {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.comments-slider__dots button {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--grey-400);
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.comments-slider__dots button.active {
|
||||
background: var(--color-txt);
|
||||
}
|
||||
|
||||
#site-header {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 100000;
|
||||
width: 100vw;
|
||||
height: var(--header-h);
|
||||
padding: 0 var(--padding-body);
|
||||
background-color: transparent;
|
||||
border-bottom: var(--border);
|
||||
border-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#site-header .burger svg {
|
||||
fill: var(--color-txt);
|
||||
width: 40px;
|
||||
}
|
||||
#site-header .site-title {
|
||||
display: flex;
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#site-header .site-title svg {
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
#site-header nav {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
#site-header nav ul {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2ch;
|
||||
list-style: none;
|
||||
}
|
||||
#site-header .header-left, #site-header .header-right {
|
||||
width: 100px;
|
||||
}
|
||||
#site-header .header-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
#site-header #go-to-panier {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
text-decoration: none;
|
||||
}
|
||||
#site-header #go-to-panier #go-to-panier__nbr {
|
||||
min-width: 2.6ch;
|
||||
height: 2.6ch;
|
||||
border-radius: 1.3ch;
|
||||
border: var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 6px;
|
||||
}
|
||||
#site-header.is-shrinked {
|
||||
background-color: var(--color-bg);
|
||||
height: var(--header-h-shrinked);
|
||||
transition: ease-in 0.3s;
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
#site-header.is-shrinked nav {
|
||||
height: var(--h-block);
|
||||
opacity: 1;
|
||||
}
|
||||
#site-header.is-shrinked .site-title {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.section__page-don:not(#section__player), .subsection__page-don {
|
||||
border-bottom: var(--border);
|
||||
padding-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
#section__hero, #section__comments {
|
||||
padding-bottom: calc(var(--spacing) * 0.5) !important;
|
||||
}
|
||||
}
|
||||
#section__player {
|
||||
position: relative;
|
||||
left: calc(var(--padding-body) * -1);
|
||||
}
|
||||
@media screen and (max-width: 720px) {
|
||||
#section__player {
|
||||
width: 100vw;
|
||||
}
|
||||
#section__player .player__container, #section__player .player__element, #section__player .player__iframe, #section__player iframe {
|
||||
width: 100%;
|
||||
height: 75vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 720px) {
|
||||
#section__player {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 60vh;
|
||||
}
|
||||
#section__player .player__container, #section__player .player__element, #section__player .player__iframe, #section__player iframe {
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
#section__hero .hero-heading__container {
|
||||
text-align: center;
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
#section__hero .btn--bold {
|
||||
display: block;
|
||||
margin: var(--spacing) auto;
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
#section__hero .jauge__container {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
|
||||
#section__store .store__product {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
position: relative;
|
||||
}
|
||||
#section__store .store__product figure {
|
||||
aspect-ratio: 4/3;
|
||||
background-color: var(--color-bg);
|
||||
background-color: var(--data-bg);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
#section__store .store__product img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
}
|
||||
#section__store .store__product a {
|
||||
text-decoration: none;
|
||||
}
|
||||
#section__store .store__product .link-block {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#section__donation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#section__donation .btn--donation__container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: var(--padding-body);
|
||||
margin-bottom: calc(var(--spacing) * 0.75);
|
||||
}
|
||||
#section__donation .btn--donation__container .btn--donation__grow-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
#section__donation .btn--donation {
|
||||
background-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
border-radius: var(--radius-small);
|
||||
height: calc(var(--h-block) * 2);
|
||||
}
|
||||
#section__donation .btn--donation .bold {
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-medium);
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
#section__donation .btn--donation .small {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
#section__donation .btn--donation:hover {
|
||||
background-color: var(--color-accent-50);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#section__questions details {
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
#section__questions details summary {
|
||||
height: calc(var(--h-block) * 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
#section__questions details summary::after {
|
||||
content: "▶";
|
||||
font-size: 0.8em;
|
||||
color: var(--grey-400);
|
||||
}
|
||||
#section__questions details p {
|
||||
padding-top: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: var(--spacing);
|
||||
border-top: var(--border);
|
||||
}
|
||||
#section__questions details::details-content {
|
||||
max-height: 0;
|
||||
transition: max-height ease-in 0.5s;
|
||||
overflow: hidden;
|
||||
}
|
||||
#section__questions details[open]::details-content {
|
||||
max-height: 1000px;
|
||||
filter: none;
|
||||
}
|
||||
#section__questions details[open] summary::after {
|
||||
transform: rotate(90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
#section__questions .btn--bold {
|
||||
display: block;
|
||||
margin: calc(var(--spacing) * 1.5) auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#section__socials .list-socials {
|
||||
-moz-columns: 2;
|
||||
columns: 2;
|
||||
}/*# sourceMappingURL=style.css.map */
|
||||
1
assets/css/style.css.map
Normal file
1
assets/css/style.css.map
Normal file
File diff suppressed because one or more lines are too long
29
assets/css/style.scss
Normal file
29
assets/css/style.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
@charset "UTF-8";
|
||||
@import "base/var";
|
||||
@import "base/body";
|
||||
@import "base/responsive";
|
||||
|
||||
@import "components/text";
|
||||
@import "components/heading";
|
||||
@import "components/buttons";
|
||||
@import "components/nav-tabs";
|
||||
@import "components/list-socials";
|
||||
|
||||
@import "components/player";
|
||||
@import "components/gauge";
|
||||
@import "components/form-newsletter";
|
||||
@import "components/comments-slider";
|
||||
|
||||
|
||||
@import "partials/site-header";
|
||||
|
||||
|
||||
@import "pages/dons/sections";
|
||||
@import "pages/dons/section-player";
|
||||
@import "pages/dons/section-hero";
|
||||
@import "pages/dons/section-store";
|
||||
@import "pages/dons/section-donation";
|
||||
@import "pages/dons/section-questions";
|
||||
@import "pages/dons/section-socials";
|
||||
|
||||
|
||||
6
assets/icons/arrow-left.svg
Normal file
6
assets/icons/arrow-left.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="34px" height="34px" viewBox="0 0 16 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<rect id="Artboard1" x="0" y="0" width="15.43" height="12.636" style="fill:none;"/>
|
||||
<g id="Artboard11" serif:id="Artboard1">
|
||||
<path d="M0,7.29L0,5.373L9.801,5.373C10.67,5.373 11.757,5.4 12.387,5.427C11.952,5.022 11.366,4.455 10.888,3.969L8.432,1.404L9.366,0L15.43,6.318L9.366,12.636L8.432,11.232L10.888,8.667C11.366,8.181 11.952,7.614 12.387,7.236C11.757,7.263 10.67,7.29 9.801,7.29L0,7.29Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 741 B |
10
assets/icons/arrow-top-right.svg
Normal file
10
assets/icons/arrow-top-right.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(2.125,0,0,2.125,0,3.1875)">
|
||||
<rect x="0" y="0" width="15.43" height="12.636" style="fill:none;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.5026,-1.5026,1.5026,1.5026,-4.69164,18.7124)">
|
||||
<g>
|
||||
<path d="M0,7.29L0,5.373L9.801,5.373C10.67,5.373 11.757,5.4 12.387,5.427C11.952,5.022 11.366,4.455 10.888,3.969L8.432,1.404L9.366,0L15.43,6.318L9.366,12.636L8.432,11.232L10.888,8.667C11.366,8.181 11.952,7.614 12.387,7.236C11.757,7.263 10.67,7.29 9.801,7.29L0,7.29Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 850 B |
7
assets/icons/facebook.svg
Normal file
7
assets/icons/facebook.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(0.999997,0,0,1,-0.499614,-0.41986)">
|
||||
<g id="facebook">
|
||||
<path d="M17.5,2.099C8.995,2.099 2.1,8.994 2.1,17.499C2.1,25.22 7.787,31.595 15.198,32.708L15.198,21.58L11.388,21.58L11.388,17.532L15.198,17.532L15.198,14.839C15.198,10.379 17.371,8.421 21.077,8.421C22.853,8.421 23.791,8.553 24.236,8.613L24.236,12.146L21.707,12.146C20.134,12.146 19.584,13.638 19.584,15.32L19.584,17.532L24.196,17.532L23.57,21.58L19.584,21.58L19.584,32.741C27.101,31.721 32.9,25.295 32.9,17.499C32.9,8.994 26.005,2.099 17.5,2.099Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 896 B |
7
assets/icons/linkedin.svg
Normal file
7
assets/icons/linkedin.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(1.22222,0,0,1.22222,0.500004,0.500006)">
|
||||
<g id="linkedin">
|
||||
<path d="M23.786,0L3.214,0C1.44,0 0,1.44 0,3.214L0,23.786C0,25.56 1.44,27 3.214,27L23.786,27C25.56,27 27,25.56 27,23.786L27,3.214C27,1.44 25.56,0 23.786,0ZM8.357,10.286L8.357,22.5L4.5,22.5L4.5,10.286L8.357,10.286ZM4.5,6.731C4.5,5.831 5.271,5.143 6.429,5.143C7.586,5.143 8.312,5.831 8.357,6.731C8.357,7.631 7.637,8.357 6.429,8.357C5.271,8.357 4.5,7.631 4.5,6.731ZM22.5,22.5L18.643,22.5L18.643,16.071C18.643,14.786 18,13.5 16.393,13.474L16.341,13.474C14.786,13.474 14.143,14.799 14.143,16.071L14.143,22.5L10.286,22.5L10.286,10.286L14.143,10.286L14.143,11.931C14.143,11.931 15.384,10.286 17.878,10.286C20.43,10.286 22.5,12.041 22.5,15.596L22.5,22.5Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
10
assets/icons/play-button.svg
Normal file
10
assets/icons/play-button.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg height="80px" width="80px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M500.203,236.907L30.869,2.24c-6.613-3.285-14.443-2.944-20.736,0.939C3.84,7.083,0,13.931,0,21.333v469.333
|
||||
c0,7.403,3.84,14.251,10.133,18.155c3.413,2.112,7.296,3.179,11.2,3.179c3.264,0,6.528-0.747,9.536-2.24l469.333-234.667
|
||||
C507.435,271.467,512,264.085,512,256S507.435,240.533,500.203,236.907z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 518 B |
|
|
@ -1 +0,0 @@
|
|||
@import "_reset.scss";
|
||||
|
|
@ -1 +0,0 @@
|
|||
/*# sourceMappingURL=style.css.map */
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":[],"names":[],"mappings":"","file":"style.css"}
|
||||
20
site/blueprints/blocks/heading.yml
Normal file
20
site/blueprints/blocks/heading.yml
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
name: field.blocks.heading.name
|
||||
icon: title
|
||||
wysiwyg: true
|
||||
preview: heading
|
||||
fields:
|
||||
level:
|
||||
label: field.blocks.heading.level
|
||||
type: toggles
|
||||
empty: false
|
||||
default: "h2"
|
||||
labels: false
|
||||
options:
|
||||
- value: h3
|
||||
icon: h3
|
||||
text: H3
|
||||
text:
|
||||
label: field.blocks.heading.text
|
||||
type: writer
|
||||
inline: true
|
||||
placeholder: field.blocks.heading.placeholder
|
||||
27
site/blueprints/blocks/image.yml
Normal file
27
site/blueprints/blocks/image.yml
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
name: field.blocks.image.name
|
||||
icon: image
|
||||
preview: image
|
||||
fields:
|
||||
image:
|
||||
label: field.blocks.image.name
|
||||
type: files
|
||||
query: model.images
|
||||
multiple: false
|
||||
image:
|
||||
back: black
|
||||
uploads:
|
||||
template: blocks/image
|
||||
alt:
|
||||
label: field.blocks.image.alt
|
||||
type: text
|
||||
icon: title
|
||||
help: Description de l’image, utile si elle ne s’affiche pas. Écrivez comme si vous expliquiez l'image à quelqu'un par téléphone.
|
||||
caption:
|
||||
label: field.blocks.image.caption
|
||||
type: writer
|
||||
icon: text
|
||||
inline: true
|
||||
link:
|
||||
label: field.blocks.image.link
|
||||
type: text
|
||||
icon: url
|
||||
10
site/blueprints/blocks/text.yml
Normal file
10
site/blueprints/blocks/text.yml
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
name: field.blocks.text.name
|
||||
icon: text
|
||||
wysiwyg: true
|
||||
preview: text
|
||||
fields:
|
||||
text:
|
||||
type: writer
|
||||
headings:
|
||||
- 4
|
||||
placeholder: field.blocks.text.placeholder
|
||||
104
site/blueprints/pages/investigation.yml
Normal file
104
site/blueprints/pages/investigation.yml
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
title: Investigation
|
||||
create:
|
||||
fields:
|
||||
- subtitle
|
||||
|
||||
tabs:
|
||||
contentTab:
|
||||
label: Contenu
|
||||
icon: page
|
||||
columns:
|
||||
- width: 2/6
|
||||
fields:
|
||||
created:
|
||||
label: Première publication
|
||||
type: date
|
||||
display: DD / MM / YYYY
|
||||
default: today
|
||||
width: 1/4
|
||||
- width: 4/6
|
||||
fields:
|
||||
subtitle:
|
||||
label: Sous-titre
|
||||
type: text
|
||||
chapo:
|
||||
label: Chapo
|
||||
type: writer
|
||||
nodes: false
|
||||
buttons: false
|
||||
cover:
|
||||
label: Visuel de couverture
|
||||
type: files
|
||||
multiple: false
|
||||
min: 1
|
||||
layout: cards
|
||||
size: full
|
||||
image:
|
||||
ratio: 12/7
|
||||
cover: true
|
||||
body:
|
||||
label: Corps
|
||||
type: layout
|
||||
layouts:
|
||||
- "1/1"
|
||||
- "1/2, 1/2"
|
||||
- "1/3, 1/3, 1/3"
|
||||
fieldsets:
|
||||
- heading
|
||||
- text
|
||||
- image
|
||||
metadataTab:
|
||||
label: Métadonnées
|
||||
icon: table
|
||||
fields:
|
||||
incidentDate:
|
||||
label: Date de l'incident
|
||||
type: date
|
||||
display: DD / MM / YYYY
|
||||
width: 1/3
|
||||
incidentLocation:
|
||||
label: Lieu de l'incident
|
||||
type: text
|
||||
width: 1/3
|
||||
incidentConsequences:
|
||||
label: Conséquence(s)
|
||||
type: text
|
||||
width: 1/3
|
||||
keywords:
|
||||
label: Mots-clés
|
||||
type: tags
|
||||
width: 1/2
|
||||
partners:
|
||||
label: Partenaires
|
||||
type: structure
|
||||
width: 1/2
|
||||
fields:
|
||||
name:
|
||||
label: Nom
|
||||
type: text
|
||||
link:
|
||||
label: Lien
|
||||
type: link
|
||||
options:
|
||||
- url
|
||||
line:
|
||||
type: line
|
||||
indexTeam:
|
||||
label: Équipe Index
|
||||
type: structure
|
||||
columns:
|
||||
responsability:
|
||||
width: 1/2
|
||||
names:
|
||||
width: 1/2
|
||||
fields:
|
||||
responsability:
|
||||
label: Responsabilité
|
||||
type: text
|
||||
width: 1/2
|
||||
names:
|
||||
label: Nom
|
||||
type: entries
|
||||
width: 1/2
|
||||
field:
|
||||
type: text
|
||||
|
|
@ -1 +1,17 @@
|
|||
title: Investigations
|
||||
|
||||
tabs:
|
||||
contentTab:
|
||||
label: Contenu
|
||||
sections:
|
||||
investigations:
|
||||
type: pages
|
||||
template: investigation
|
||||
text: "{{ page.title }}, {{ page.subtitle }}"
|
||||
info: "{{ page.incidentConsequences }} à {{ page.incidentLocation }}"
|
||||
layout: cards
|
||||
size: huge
|
||||
search: true
|
||||
image:
|
||||
cover: true
|
||||
ratio: 12/7
|
||||
|
|
|
|||
1
site/blueprints/pages/product.yml
Normal file
1
site/blueprints/pages/product.yml
Normal file
|
|
@ -0,0 +1 @@
|
|||
title: Produit
|
||||
|
|
@ -1 +1,45 @@
|
|||
title: Nous soutenir
|
||||
|
||||
tabs:
|
||||
contentTab:
|
||||
sections:
|
||||
supportFields:
|
||||
type: fields
|
||||
fields:
|
||||
heroHeadline:
|
||||
type: headline
|
||||
label: Hero
|
||||
heroMedia:
|
||||
label: Media de couverture
|
||||
type: files
|
||||
multiple: false
|
||||
layout: cards
|
||||
help: image ou vidéo affichée dans le héro, sous la phrase d'accroche
|
||||
heroCatchPhrase:
|
||||
label: Phrase d'accroche
|
||||
type: text
|
||||
heroBaseline:
|
||||
label: Baseline
|
||||
type: text
|
||||
donorLine:
|
||||
type: line
|
||||
donorHeadline:
|
||||
label: Dons
|
||||
type: headline
|
||||
donorCatchPhrase:
|
||||
label: Phrase d'accroche
|
||||
type: text
|
||||
FAQLine:
|
||||
type: line
|
||||
FAQHeadline:
|
||||
label: Questions fréquentes
|
||||
type: headline
|
||||
FAQQuestions:
|
||||
label: Questions / réponses
|
||||
type: structure
|
||||
fields:
|
||||
question:
|
||||
type: text
|
||||
answer:
|
||||
label: Réponse
|
||||
type: text
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="<?= url('assets/style.css') ?>?version-cache-prevent<?= rand(0, 1000) ?>">
|
||||
<link rel="stylesheet" href="<?= url('assets/css/style.css') ?>?version-cache-prevent<?= rand(0, 1000) ?>">
|
||||
<meta name="robots" content="noindex,nofollow">
|
||||
<title>
|
||||
<?php if ($page->isHomePage() == false): ?>
|
||||
|
|
@ -13,4 +13,4 @@
|
|||
</title>
|
||||
</head>
|
||||
<body data-template="<?= $page->template() ?>">
|
||||
<h1>Index</h1>
|
||||
<?php snippet('nav') ?>
|
||||
|
|
|
|||
25
site/snippets/nav.php
Normal file
25
site/snippets/nav.php
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<header id="site-header">
|
||||
<div class="header-left">
|
||||
<div class="burger"><svg 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="m22 16.75c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm0-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm0-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75z" fill-rule="nonzero"/></svg></div>
|
||||
</div>
|
||||
|
||||
<div class="header-center">
|
||||
<h1 class="site-title">
|
||||
<a href="/" aria-label="Retour à l’accueil" w3-include-html="/assets/index-logo.svg"></a>
|
||||
</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>Partie 1</li>
|
||||
<li>Partie 2</li>
|
||||
<li>Partie 3</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<a href="#" id="go-to-panier">
|
||||
<p>Panier</p>
|
||||
<p id="go-to-panier__nbr">1</p>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -1,2 +1,13 @@
|
|||
<?php snippet('header') ?>
|
||||
<script type="text/javascript"
|
||||
defer=""
|
||||
src="https://donorbox.org/install-popup-button.js"
|
||||
id="donorbox-popup-button-installer">
|
||||
</script>
|
||||
<a class="dbox-donation-button" id="preview_inline_popup_button" href="https://donorbox.org/soutenir-index-en-2024?amount=15&default_interval=m" style="margin-bottom: 2rem; background: rgb(0, 0, 0); color: rgb(255, 255, 255); text-decoration: none; font-family: Verdana, sans-serif; display: flex; gap: 8px; width: fit-content; font-size: 16px; border-radius: 5px; line-height: 24px; padding: 8px 24px;"><img src="https://donorbox.org/images/white_logo.svg">
|
||||
Donner 15€ mensuellement
|
||||
</a>
|
||||
<a class="dbox-donation-button" id="preview_inline_popup_button" href="https://donorbox.org/soutenir-index-en-2024?amount=20&default_interval=o" style="background: rgb(0, 0, 0); color: rgb(255, 255, 255); text-decoration: none; font-family: Verdana, sans-serif; display: flex; gap: 8px; width: fit-content; font-size: 16px; border-radius: 5px; line-height: 24px; padding: 8px 24px;"><img src="https://donorbox.org/images/white_logo.svg">
|
||||
Donner 10€ ponctuellement
|
||||
</a>
|
||||
<?php snippet('footer') ?>
|
||||
2
site/templates/investigation.php
Normal file
2
site/templates/investigation.php
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<?php snippet('header') ?>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
@ -1,2 +1,227 @@
|
|||
<?php snippet('header') ?>
|
||||
|
||||
<main>
|
||||
<section id="section__player">
|
||||
<div class="player__container">
|
||||
<div class="player__element">
|
||||
<video class="vjs-tech" id="player-element_html5_api" tabindex="-1" loop="" muted="muted" playsinline="playsinline" autoplay="" src="https://www.index.ngo/wp-content/uploads/2025/09/Enquete-GP_Extrait-embed-site-web.mp4"></video>
|
||||
<button class="player__btn"><?= svg('assets/icons/play-button.svg') ?></button>
|
||||
</div>
|
||||
<div class="player__iframe">
|
||||
<iframe src="https://www.youtube.com/embed/UN3ZVQVaypg"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="section__hero" class="section__page-don">
|
||||
<div class="hero-heading__container" class="section__page-don">
|
||||
<h2 class="hero-heading">Pour continuer à enquêter, Index a besoin de vous</h2>
|
||||
</div>
|
||||
<p class="p__baseline-big">Minutieuses et approfondies, nos enquêtes représentent des mois de travail par plusieurs membres de notre équipe. Tout ceci a un coût important.</p>
|
||||
|
||||
<div class="gauge__container">
|
||||
<!-- calculet le pourcentage avec l’API ?-->
|
||||
<div id="gauge" style="--pourcent: 70%"></div>
|
||||
|
||||
<div class="gauge--infos" id="gauge--infos__donnateurs">
|
||||
<p class="property">Donnateur·ices</p>
|
||||
<p class="value">288</p>
|
||||
</div>
|
||||
|
||||
<div class="gauge--infos" id="gauge--infos__objectif">
|
||||
<p class="property">Objectif</p>
|
||||
<p class="value">200</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="p__baseline">Soutenez-nous avant le 31 décembre 2021</p>
|
||||
|
||||
<button class="btn--bold"><a href="#" class="btn--bold__container"><span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span> <span class="txt">Faire un don</span></a></button>
|
||||
|
||||
<p class="p__details">Le don donne droit à une réduction fiscale de 66%</p>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="section__donation" class="subsection__page-don">
|
||||
<p class="p__baseline-big">Index est une ONG d’investigation à but non-lucratif. Vos dons garantissent notre indépendance.</p>
|
||||
|
||||
<nav class="nav--tabs">
|
||||
<button class="nav--tabs__btn is-selected">Je donne une fois</button>
|
||||
<button class="nav--tabs__btn">Je donne tous les mois</button>
|
||||
</nav>
|
||||
|
||||
<div class="btn--donation__container">
|
||||
<button class="btn--donation">
|
||||
<p class="bold">5€/mois</p>
|
||||
<p class="small">Soit X€ <br>après impôts</p>
|
||||
</button>
|
||||
<button class="btn--donation btn--donation__grow-1">
|
||||
<p class="bold">10€/mois</p>
|
||||
<p class="small">Soit X€ <br>après impôts</p>
|
||||
</button>
|
||||
<button class="btn--donation btn--donation__grow-1">
|
||||
<p class="bold">20€/mois</p>
|
||||
<p class="small">Soit X€ <br>après impôts</p>
|
||||
</button>
|
||||
<button class="btn--donation btn--donation__grow-1">
|
||||
<p class="bold">50€/mois</p>
|
||||
<p class="small">Soit X€ <br>après impôts</p>
|
||||
</button>
|
||||
<button class="btn--donation btn--donation__grow-2">
|
||||
<p class="small">Montant libre</p>
|
||||
<p class="bold">Choisissez votre montant</p>
|
||||
<p class="small">Avec déduction fiscale</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="p__details">Le don donne droit à une réduction fiscale de 66%<br> Vous pouvez stopper votre don à tout moment</p>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="section__comments" class="subsection__page-don">
|
||||
<h4 class="subsection__heading">Commentaires de donnateur·ices</h4>
|
||||
|
||||
<div class="comments-slider">
|
||||
<div class="comment">
|
||||
<p class="comment__text">Vous faites un travail admirable. Merci de faire avancer la Justice avec un grand J. Force à vous!</p>
|
||||
<p class="comment__name">Olivier</p>
|
||||
</div>
|
||||
|
||||
<div class="comment">
|
||||
<p class="comment__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet.</p>
|
||||
<p class="comment__name">Name</p>
|
||||
</div>
|
||||
|
||||
<div class="comment">
|
||||
<p class="comment__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet.</p>
|
||||
<p class="comment__name">Name</p>
|
||||
</div>
|
||||
|
||||
<div class="comment">
|
||||
<p class="comment__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet.</p>
|
||||
<p class="comment__name">Name</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-slider__dots"></div>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="section__questions" class="section__page-don">
|
||||
<h3 class="section__heading">Questions fréquentes</h3>
|
||||
|
||||
<details>
|
||||
<summary>Pourquoi faire un don à index ?</summary>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>À quoi va servir mon don ?</summary>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum tempore exercitationem asperiores ipsam pariatur! Esse ab, at labore doloribus sit aperiam quidem beatae id unde facere totam perferendis quod itaque voluptatem aut officia laudantium, aliquid quis earum quisquam alias soluta voluptatibus, voluptate porro? Reprehenderit officia debitis suscipit ab deleniti possimus dignissimos error illum labore. Quos cumque modi alias repellendus, necessitatibus qui impedit nisi! Veritatis illo quod praesentium, voluptates explicabo accusantium reprehenderit ullam provident quaerat ipsum dignissimos molestias, deserunt voluptas dolor.</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Pourquoi faire un don à index ?</summary>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Les dons sont-ils défiscalisables ?</summary>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum tempore exercitationem asperiores ipsam pariatur! Esse ab, at labore doloribus sit aperiam quidem beatae id unde facere totam perferendis quod itaque voluptatem aut officia laudantium, aliquid quis earum quisquam alias soluta voluptatibus.</p>
|
||||
</details>
|
||||
|
||||
|
||||
<details>
|
||||
<summary>Index, c’est quoi au juste ?</summary>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum tempore exercitationem asperiores ipsam pariatur! Esse ab, at labore doloribus sit aperiam quidem beatae id unde facere totam perferendis quod itaque voluptatem aut officia laudantium, aliquid quis earum quisquam alias soluta voluptatibus, voluptate porro? Reprehenderit officia debitis suscipit ab deleniti possimus dignissimos error illum labore. Quos cumque modi alias repellendus, necessitatibus qui impedit nisi! Veritatis illo quod praesentium, voluptates explicabo accusantium reprehenderit ullam provident quaerat ipsum dignissimos molestias, deserunt voluptas dolor.</p>
|
||||
</details>
|
||||
|
||||
<button class="btn--bold"><a href="#" class="btn--bold__container"><span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span> <span class="txt">Faire un don</span></a></button>
|
||||
</section>
|
||||
|
||||
<section id="section__store" class="section__page-don">
|
||||
<h3 class="section__heading">Boutique</h3>
|
||||
<p class="p__baseline">Vous pouvez également soutenir Index en commandant des articles disponibles sur notre boutique.</p>
|
||||
|
||||
<div class="store__container">
|
||||
<article class="store__product">
|
||||
<figure style="--data-bg: #ffffff">
|
||||
<img src="assets/images/tshirt-01.png">
|
||||
</figure>
|
||||
<p class="line-1"><a href="#">T-shirt Index 01</a></p>
|
||||
<p class="price">35€</p>
|
||||
<a href="#" class="link-block" aria-hidden="true"></a>
|
||||
</article>
|
||||
|
||||
|
||||
<article class="store__product">
|
||||
<figure style="--data-bg: #000000">
|
||||
<img src="assets/images/publi-lebal.jpg">
|
||||
</figure>
|
||||
<!-- Note: le contenu des lignes est libre, max 3 lignes, seule la première ligne est obligatoire -->
|
||||
<p class="line-1">Publication</p>
|
||||
<p class="line-2"><a href="#">Éclairages/Spotlights</a></p>
|
||||
<p class="price">35€</p>
|
||||
<a href="#" class="link-block" aria-hidden="true"></a>
|
||||
</article>
|
||||
|
||||
<article class="store__product">
|
||||
<figure style="--data-bg: #ffffff">
|
||||
<img src="assets/images/casquette-01.png">
|
||||
</figure>
|
||||
<p class="line-1"><a href="#">Casquette</a></p>
|
||||
<p class="price">35€</p>
|
||||
<a href="#" class="link-block" aria-hidden="true"></a>
|
||||
</article>
|
||||
|
||||
|
||||
<article class="store__product">
|
||||
<figure style="--data-bg: #ffffff">
|
||||
<img src="assets/images/tshirt-01.png">
|
||||
</figure>
|
||||
<p class="line-1"><a href="#">T-shirt Index 01</a></p>
|
||||
<p class="price">35€</p>
|
||||
<a href="#" class="link-block" aria-hidden="true"></a>
|
||||
</article>
|
||||
|
||||
<article class="store__product">
|
||||
<figure style="--data-bg: #000000">
|
||||
<img src="assets/images/publi-lebal.jpg">
|
||||
</figure>
|
||||
<p class="line-1">Publication</p>
|
||||
<p class="line-2"><a href="#">Éclairages/Spotlights</a></p>
|
||||
<p class="price">35€</p>
|
||||
<a href="#" class="link-block" aria-hidden="true"></a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="section__newsletter" class="section__page-don">
|
||||
<h3 class="section__heading">Nous suivre</h3>
|
||||
|
||||
<p class="p__baseline-big">Abonnez-vous <br>à la newsletter d’Index</p>
|
||||
<p class="p__baseline">Recevez nos dernière publications et actualités directement dans votre boite mail.</p>
|
||||
|
||||
<form class="form__newsletter">
|
||||
<input type="email" name="email" placeholder="Votre adresse e-mail*" required />
|
||||
<button class="btn--bold" type="submit" aria-label="s’inscrire"><span class="btn--bold__container"><span class="txt">S’inscrire</span><span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span></span></button>
|
||||
</form>
|
||||
|
||||
<p class="p__details">Votre adresse e-mail est uniquement utilisée pour vous envoyer notre newsletter ainsi que les informations relatives aux activités d’INDEX. Vous pouvez vous désinscrire à tout moment à l’aide du lien inclus dans chaque email.</p>
|
||||
</section>
|
||||
|
||||
<section id="section__socials" class="subsection__page-don">
|
||||
<h4 class="subsection__heading">Suivez Index sur les réseaux sociaux</h4>
|
||||
<ul class="list-socials">
|
||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/linkedin.svg') ?></span><span>Linkedin</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/facebook.svg') ?></span><span>Facebook</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/linkedin.svg') ?></span><span>Linkedin</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/facebook.svg') ?></span><span>Facebook</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/linkedin.svg') ?></span><span>Linkedin</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/facebook.svg') ?></span><span>Facebook</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/linkedin.svg') ?></span><span>Linkedin</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/facebook.svg') ?></span><span>Facebook</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
Loading…
Add table
Add a link
Reference in a new issue