bachir
/
drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

formes sur home

This commit is contained in:
ouidade 2024-09-24 23:30:33 +02:00
parent e0fadca980
commit dc5f2cc1c9
7 changed files with 157 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -1552,8 +1552,8 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home #background-animated { #home #background-animated {
position: absolute; position: absolute;
top: -150px; top: 2200px;
left: 0; left: 300px;
width: 100%; width: 100%;
pointer-events: none; /* Permet de cliquer à travers l'élément */ pointer-events: none; /* Permet de cliquer à travers l'élément */
z-index: 2; /* S'assure que l'élément soit au-dessus */ z-index: 2; /* S'assure que l'élément soit au-dessus */

BIN
web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 897 KiB

52
web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg vendored
View File

@ -4,9 +4,9 @@
<svg <svg
version="1.1" version="1.1"
id="svg1" id="svg1"
width="100%" width="1440.5675"
height="100%" height="6329.9683"
viewBox="0 0 2560.2766 11997.26" viewBox="0 0 1440.5675 6329.9684"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<defs <defs
@ -44,59 +44,55 @@
id="path303" /> id="path303" />
</clipPath> </clipPath>
</defs> </defs>
<g
id="g3"
transform="translate(-509.36304,-2445.5661)">
<g
id="g2">
<g <g
id="g1" id="g1"
transform="translate(0.17944336,-2.9196463)"> transform="translate(0.17944336,-2.9196463)">
<path <path
id="path148" id="path148"
d="M 0,0 211.55,177.512" d="m 1544.4558,7857.9597 194.3574,-163.0856"
style="fill:none;stroke:#0833c2;stroke-width:70;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
transform="matrix(1.3333333,0,0,-1.3333333,1686.6035, 8750)" />
<path <path
id="path151" id="path151"
d="M 0,0 V -174.775" d="m 1818.0282,2628.0978 v 160.571"
style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#0833c2;stroke-width:78.092;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
transform="matrix(1.3333333,0,0,-1.3333333,2083.6333,1370.6667)" />
<path <path
id="path254" id="path254"
d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6" d="M 0,0 C 0,205.098 -166.265,371.361 -371.362,371.361"
style="fill:none;stroke:#000000;stroke-width:100.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#000000;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1838.3405,9800)" transform="matrix(0.91872984,0,0,-0.91872984,1649.0098,8778.4538)"
clip-path="url(#clipPath255)" /> clip-path="url(#clipPath255)" />
<path <path
id="path256" id="path256"
d="M 0,0 177.512,-211.551" d="m 533.81621,3347.9845 163.08557,194.3583"
style="fill:none;stroke:#0833c2;stroke-width:70;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
transform="matrix(1.3333333,0,0,-1.3333333,219.88347,2300)" />
<path <path
id="path257" id="path257"
d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362" d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362"
style="fill:none;stroke:#f7002b;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#f7002b;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1460.9323,1201.6543)" transform="matrix(0.91872984,0,0,-0.91872984,1388.9577,2511.6402)"
clip-path="url(#clipPath258)" /> clip-path="url(#clipPath258)" />
<path <path
id="path300" id="path300"
d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6" d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6"
style="fill:none;stroke:#f7002b;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#f7002b;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1968.6667,3850)" transform="matrix(0.91872984,0,0,-0.91872984,1738.8107,4535.9014)"
clip-path="url(#clipPath301)" /> clip-path="url(#clipPath301)" />
<path <path
id="path302" id="path302"
d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6" d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,2165.1349,5700)" transform="matrix(0.91872984,0,0,-0.91872984,1874.1866,6026.5711)"
clip-path="url(#clipPath303)" /> clip-path="url(#clipPath303)" />
<path <path
id="path311" id="path311"
d="M 0,0 V 283" d="M 552.65311,5827.771 V 5567.7705"
style="fill:none;stroke:#000000;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#000000;stroke-width:78.092;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
transform="matrix(1.3333333,0,0,-1.3333333,247.22107,5500)" /> </g>
<rect </g>
style="fill:none;stroke:none;stroke-width:0.872103;paint-order:fill markers stroke"
id="rect717"
width="2559.4043"
height="11996.388"
x="0.25652406"
y="3.3556976" />
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees1.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

100
web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees1.svg vendored Normal file
View File

@ -0,0 +1,100 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg1"
width="6555016.5"
height="143934240"
viewBox="0 0 6555016.5 1.4393424e+08"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath255">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-1378.7554,-1136.295)"
id="path255" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath258">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-1095.6993,-8098.7595)"
id="path258" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath301">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-1476.5001,-5895.4337)"
id="path301" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath303">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-1623.8512,-4272.9005)"
id="path303" />
</clipPath>
</defs>
<path
id="path151"
d="m 2083.8127,1367.7471 v 233.0333"
style="fill:none;stroke:#0833c2;stroke-width:113.333;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path256"
d="m 220.06291,2297.0804 236.68266,282.068"
style="fill:none;stroke:#0833c2;stroke-width:93.3333;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path257"
d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362"
style="fill:none;stroke:#f7002b;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1461.1117,1198.7347)"
clip-path="url(#clipPath258)" />
<path
id="path300"
d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6"
style="fill:none;stroke:#f7002b;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1968.8461,3847.0804)"
clip-path="url(#clipPath301)" />
<path
id="path302"
d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,2165.3143,5697.0804)"
clip-path="url(#clipPath303)" />
<path
id="path311"
d="M 247.40051,5497.0804 V 5119.7471"
style="fill:none;stroke:#000000;stroke-width:113.333;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<g
id="g2">
<g
id="g1">
<path
id="path148"
d="m 1686.7829,8157.0804 282.0667,-236.6827"
style="fill:none;stroke:#0833c2;stroke-width:93.3333;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path254"
d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
style="fill:none;stroke:#000000;stroke-width:100.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1838.5199,9207.0804)"
clip-path="url(#clipPath255)" />
<rect
style="fill:none;stroke:none;stroke-width:0.872103;paint-order:fill markers stroke"
id="rect717"
width="2559.4043"
height="11996.388"
x="0.43596742"
y="0.43605134" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

4
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss
View File

@ -3,8 +3,8 @@
#background-animated { #background-animated {
// display: none; // display: none;
position: absolute; position: absolute;
top: -150px; top: 2200px;
left: 0; left: 300px;
width: 100%; width: 100%;
// height: 100%; // height: 100%;
pointer-events: none; /* Permet de cliquer à travers l'élément */ pointer-events: none; /* Permet de cliquer à travers l'élément */

2
web/themes/custom/quartiers_de_demain/templates/page--front.html.twig
View File

@ -82,7 +82,7 @@
{{ page.content }} {{ page.content }}
</div>{# /.layout-content #} </div>{# /.layout-content #}
<div id="background-animated" > <div id="background-animated" >
{# {% include active_theme_path() ~ '/dist/assets/img/formes-animees.svg' %} #} {% include active_theme_path() ~ '/dist/assets/img/formes-animees.svg' %}
<img src="/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg" id="formes-animees"/> <img src="/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg" id="formes-animees"/>
</div> </div>