formes géometriques

web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js

@@ -0,0 +1,11 @@
+// document.addEventListener("DOMContentLoaded", function() {
+//     const pathToRotate = document.getElementById('path257');
+//     let rotationAngle = 0;
+
+//     // function rotatePath() {
+//     //     rotationAngle += 1; // Augmente l'angle de rotation
+//     //     pathToRotate.setAttribute('transform', `translate(1460.9323, 1201.6543) rotate(${rotationAngle}, 5, -10)`); // Applique la transformation de rotation
+//     // }
+
+//     // setInterval(rotatePath, 10); // Appelle la fonction rotatePath toutes les 10 millisecondes (ajustez selon vos besoins)
+// });

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss

@@ -3,19 +3,17 @@
    
     .config_pages--type--diaporama-home{
         position: relative;
-        &::after{
-            content: url('../img/formes-animees-1.svg');
-            display: block;
-            width: 50%;
+        #svg1{
             position: absolute;
             z-index: 5;
             right: 11rem;
-            bottom: -6rem;
+            bottom: -8rem;
+            width: 50%;
             @media(max-width: 810px){
-                bottom: -5rem;
-            }
-            @media(max-width: 810px){
-                bottom: -5rem;
+                display: none;
+                // bottom: -4rem;
+                // right: 4rem;
+                // width: 72%;
             }
         }
         .field_field_images{
@@ -36,6 +34,9 @@
     }
     article.node-type-static{
         padding-top: 6rem;
+        @media(max-width: 810px){
+            padding-top: 4rem;
+        }
 
         .field_title{
             display: none;
@@ -54,12 +55,9 @@
                 z-index: 5;
                 left: 1rem;
                 bottom: 0;
-                // @media(max-width: 810px){
-                //     bottom: -5rem;
-                // }
-                // @media(max-width: 810px){
-                //     bottom: -5rem;
-                // }
+                @media(max-width: 810px){
+                    display: none;
+                }
             }
             @media(max-width: 1090px){
                 flex-direction: column;
@@ -112,6 +110,9 @@
                 z-index: 5;
                 right: 15%;
                 bottom: 45%;
+                @media(max-width: 810px){
+                    display: none;
+                }
             }
             .field_field_title{
                 font-family: 'gilroy-bold';
@@ -329,6 +330,10 @@
                 z-index: 5;
                 left: 10%;
                 top: -6rem;
+                @media(max-width: 810px){
+                    display: none;
+                    
+                }
             }
             &::after{
                 content: url('../img/formes-animees-5.svg');
@@ -337,6 +342,9 @@
                 z-index: 5;
                 right: 15%;
                 top: 3rem;
+                @media(max-width: 810px){
+                    display: none;
+                }
             }
             @media(max-width: 500px){
                 width: 90%;

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss

@@ -21,6 +21,9 @@
             z-index: 5;
             right: 20%;
             top: 2rem;
+            @media(max-width: 810px){
+                display: none;
+            }
         }
         &::after{
             content: url('../img/formes-animees-7.svg');
@@ -29,6 +32,9 @@
             z-index: 5;
             right: 26%;
             bottom: -9rem;
+            @media(max-width: 810px){
+                display: none;
+            }
         }
     h2{
         width: fit-content;