Collectif Freelances engagés en Aquitaine
Collectif Freelances engagés en Aquitaine
#FBFAF4
color: #FBFAF4;
background-color: #FBFAF4;
#191020
color: #191020;
background-color: #191020;
#334BFF
color: #334BFF;
background-color: #334BFF;
#DB26FF
color: #DB26FF;
background-color: #DB26FF;
#33DDE6
color: #33DDE6;
background-color: #33DDE6;
color: /*non appliquable en CSS*/;
background: linear-gradient(to top, #db26ff 0%,#334bff 50%,#33dde6 100%)
<style>
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
</style>
/* <weight>: Use a value from 300 to 700 */
/* <uniquifier>: Use a unique and descriptive class name */
.quicksand-<uniquifier> {
font-family: "Quicksand", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}
Whereas recognition of the inherent dignity
No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality to a fair and public hearing by an independent and impartial tribunal, in the determination of his rights and obligations and of any criminal charge against him.
Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance. Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference and to seek, receive and impart information and ideas through any media and regardless of frontiers. Everyone has the right to rest and leisure, including reasonable limitation of working hours and periodic holidays with pay.
gif
Code HTML/CSS complet (svg codé)
<div class="siide animation-container dark">
<div class="logotype-letters">
<svg class="letter letter-s"xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="80" height="80" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd" viewBox="0 0 540.5 540.5"><path d="M268 124.3h185.2c18.6 0 33.7 15.1 33.7 33.8 0 18.7-15.1 33.8-33.7 33.8H267.8c-16.3 0-33.2 7-47.5 18.3-14.5 11.4-25.7 26.9-30.3 43.8-1.2 4.8-1.9 9.5-1.9 13.9 0 7.9 2 14.5 5.7 19.3 3.5 4.7 8.8 8.2 15.7 10 3.4 1 7.3 1.4 11.8 1.4H309c10.2 0 20 1.4 29.2 3.8 21.7 5.9 39.6 18.1 52.1 34.9 12.5 16.6 19.4 37.1 19.4 59.7 0 10-1.4 20.5-4.3 31.3-8.4 31.3-28.4 59.4-53.8 79.5-25.7 20.2-57.5 32.7-89.3 32.7H87.4c-18.7 0-33.8-15.1-33.8-33.7 0-18.7 15.1-33.8 33.8-33.8h175c16.3-.1 33.2-7.1 47.5-18.3 14.5-11.5 25.8-27 30.3-43.8 1.3-4.8 1.9-9.5 1.9-13.9 0-7.9-2-14.5-5.6-19.3-3.5-4.7-8.9-8.2-15.7-10.1-3.4-.9-7.3-1.4-11.6-1.4h-88.1c-10.2 0-19.9-1.3-29.1-3.8-21.7-5.8-39.5-18-52.1-34.8-12.4-16.6-19.3-37.2-19.3-59.7 0-10 1.4-20.5 4.3-31.3 8.3-31.3 28.3-59.4 53.7-79.5 25.7-20.2 57.5-32.8 89.4-32.8z" style="fill:#2b2a29;fill-rule:nonzero"/></svg>
<svg class="letter letter-i-1" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 909.1 909.1">
<defs>
<linearGradient id="monDegrade" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" style="stop-color:#db26ff; stop-opacity:1" />
<stop offset="50%" style="stop-color:#334bff; stop-opacity:1" />
<stop offset="100%" style="stop-color:#33dde6; stop-opacity:1" />
</linearGradient>
</defs>
<path fill="url(#monDegrade)" d="M420.8 463.4c8.1-30.3 39.2-48.3 69.5-40.2 30.3 8.1 48.3 39.2 40.2 69.5L430.2 867c-8.1 30.3-39.2 48.2-69.5 40.2-30.2-8.1-48.2-39.2-40.1-69.5l100.2-374.3zm166.5-182.8c-8.1 30.3-39.2 48.3-69.5 40.2-30.2-8.1-48.2-39.2-40.1-69.5l1.2-4.5c8.1-30.3 39.2-48.3 69.5-40.2 30.2 8.1 48.2 39.2 40.1 69.5l-1.2 4.5z"/>
</svg>
<svg class="letter letter-i-2" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 909.1 909.1">
<path fill="url(#monDegrade)" d="M420.8 463.4c8.1-30.3 39.2-48.3 69.5-40.2 30.3 8.1 48.3 39.2 40.2 69.5L430.2 867c-8.1 30.3-39.2 48.2-69.5 40.2-30.2-8.1-48.2-39.2-40.1-69.5l100.2-374.3zm166.5-182.8c-8.1 30.3-39.2 48.3-69.5 40.2-30.2-8.1-48.2-39.2-40.1-69.5l1.2-4.5c8.1-30.3 39.2-48.3 69.5-40.2 30.2 8.1 48.2 39.2 40.1 69.5l-1.2 4.5z"/>
</svg>
<svg class="letter letter-d" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="80" height="80" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd" viewBox="0 0 625 625"><path d="M227.7 625h-.3c-16.5 0-32.2-2.1-46.9-6-34.2-9.2-62.2-28.4-81.8-54.6-19.5-26-30.3-58.4-30.3-94.2 0-16.1 2.2-33.1 6.9-50.6 13.8-51.5 46.8-97.8 89-131.1 42.4-33.4 94.7-54.1 146.8-54.1 16.5 0 32.2 2.1 46.9 6 26.6 7.1 49.5 20.4 67.6 38.2l54.3-202.7c5.6-20.9 27-33.2 47.8-27.7 20.8 5.6 33.1 27 27.6 47.8l-89.9 335.6c-.2.8-.5 1.6-.7 2.4-.5 1.8-1 3.7-1.5 5.6v.2c-13.8 51.5-46.8 97.8-89 131-42.3 33.4-94.5 54.1-146.5 54.2zm160.1-205.3v-.1c2.8-10.5 4.2-20.8 4.2-30.5 0-18.7-5.2-35-14.5-47.4-9.1-12.3-22.7-21.4-39.7-25.9-8-2.2-16.9-3.3-26.7-3.3-34.2 0-69.4 14.3-98.6 37.4-29.6 23.3-52.5 55.1-61.8 89.9-2.8 10.5-4.2 20.7-4.2 30.4 0 18.8 5.2 35.1 14.4 47.5 9.2 12.2 22.8 21.3 39.8 25.9 7.9 2.1 16.8 3.3 26.5 3.3h.2c34.1 0 69.3-14.3 98.6-37.4 29.5-23.3 52.4-55.1 61.8-89.8z" style="fill:#2b2a29;fill-rule:nonzero"/></svg>
<svg class="letter letter-e" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="80" height="80" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd" viewBox="0 0 625 625"><path d="M354.4 312.5c-34.2 0-69.4 14.2-98.7 37.3-14.8 11.7-27.9 25.5-38.5 40.8h218v-1.5c0-18.8-5.1-35.1-14.4-47.5-9.2-12.2-22.7-21.3-39.7-25.9-8-2.1-17-3.2-26.7-3.2zm19.5 234.3c21.6 0 39.1 17.5 39.1 39.1S395.5 625 373.9 625h-94.8c-1.4 0-2.8-.1-4.2-.3-1.4.2-2.8.3-4.3.3-16.4 0-32.1-2.1-46.8-6.1-34.2-9.1-62.2-28.3-81.9-54.5-19.5-26.1-30.3-58.4-30.3-94.2 0-15.5 2.1-31.7 6.4-48.4.3-1.5.7-3 1.2-4.5 14.1-50.6 46.8-96 88.3-128.8 42.4-33.5 94.7-54.2 146.9-54.2 16.4 0 32.1 2.1 46.8 6.1 34.2 9.1 62.2 28.3 81.9 54.5 19.4 26.1 30.3 58.4 30.3 94.2 0 15.5-2.1 31.7-6.4 48.3-3.6 17.9-19.3 31.3-38.2 31.3h-279v1.5c0 18.8 5.1 35.1 14.4 47.5 9.2 12.2 22.7 21.3 39.7 25.9 8 2.1 17 3.2 26.7 3.2 1.5 0 2.9.1 4.3.3 1.4-.2 2.8-.3 4.2-.3h94.8z" style="fill:#2b2a29;fill-rule:nonzero"/>
</svg>
</div>
<h2 class="part-1">Viite facturé, <span class="part-2">biien piloté.</span></h2>
</div>
<style>
.siide.animation-container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 70vw;
background-color: #FBFAF4;
}
.siide.dark{
background-color: #191020;
}
.logotype-letters{
display: flex;
justify-content: center;
width: 100%;
}
.siide h2{
font-family: "Quicksand", sans-serif;
font-style: italic;
font-weight: 600;
margin: 2vw 0;
font-size: 2.7vw;
position: relative;
animation: ftl 0.5s 1.75s backwards;
}
.letter{
position: relative;
width: calc( 100% / 5);
height: auto;
opacity: 1;
animation-fill-mode: backwards!important;
}
.dark .logotype-letters .letter-s path,
.dark .logotype-letters .letter-d path,
.dark .logotype-letters .letter-e path,
.siide.dark h2{
fill: #FBFAF4!important;
color: #FBFAF4!important;
}
.logotype-letters .letter-s path,
.logotype-letters .letter-d path,
.logotype-letters .letter-e path,
.siide h2{
fill: #191020!important;
color: #191020!important;
font-family: "Quicksand", sans-serif;
}
.dark .logotype-letters
.letter-s{
left:-2%;
margin-left: 27.5%;
animation: appear-simple, grow-in;
animation-duration: 0.25s;
}
.dark .logotype-letters
.letter-i-1{
left: -12%;
top: 0;
animation:
appear-simple 0.25s 0.1s, grow-in,
slide-i1 1s 0.5s backwards;
}
.dark .logotype-letters
.letter-i-2{
margin-left: calc(-100% / 5 + 1.75%);
left: -8%;
top: 0;
animation:
appear-simple 0.25s 0.1s, grow-in,
slide-i2 1s 0.5s backwards;
}
.dark .logotype-letters .letter-d{
left: -17%;
animation: appear-simple, grow-in;
animation-duration:0.25s;
animation-delay: 0.2s;
}
.dark .logotype-letters .letter-e{
left: -23.5%;
animation: appear-simple, grow-in;
animation-duration: 0.25s;
animation-delay: 0.3s;
}
@keyframes appear-simple{
from{opacity: 0;}
to{opacity: 1;}
}
@keyframes grow-in{
from{transform: scale(0.5);}
to{transform: scale(1)}
}
@keyframes ftl{
from{bottom: -8px; opacity: 0;filter: blur(10px)}
to{bottom: -0px; opacity: 100;filter: blur(0px)}
}
@keyframes slide-i1{
0%{
left: -9.5%;
}
50%{
left: -9.5%;
}
100%{
left: -12%;
}
}
@keyframes slide-i2{
0%{
left: -9.5%;
opacity: 0% ;
}
50%{
left: -9.5%;
opacity: 100%;
}
100%{
left: -8%;
opacity: 100%;
}
}
</style>