animated background

web/themes/custom/colloque2024/css-compiled/index.css

@@ -338,171 +338,110 @@ footer h2 {
   font-size: 1rem;
   line-height: 1.5rem; }
 
-@keyframes animateCircle_pop_trans {
-  0% {
-    stroke: #000000;
-    /* Initial stroke color */ }
-  100% {
-    stroke: #ff0000;
-    /* Final stroke color */ } }
-
-@keyframes animateCircle_pop_trans-2 {
-  0% {
-    fill: #ffffff;
-    /* Initial fill color */ }
-  100% {
-    fill: #00ff00;
-    /* Final fill color */ } }
-
-@keyframes animateCircle_vert_clair_erable {
-  0% {
-    stroke: #000000;
-    /* Initial stroke color */ }
-  100% {
-    stroke: #ff0000;
-    /* Final stroke color */ } }
+/* Link the SVG file */
+body {
+  /* background-image: url('../images/fond-ronds.svg'); */
+  /* Add other background properties as needed */
+  width: 100%;
+  height: 100vh;
+  /* Adjust as needed */
+  background-size: cover;
+  /* Adjust as needed */ }
 
-@keyframes animateCircle_vert_clair_erable-93 {
+@keyframes pulse {
   0% {
-    fill: #ffffff;
-    /* Initial fill color */ }
+    transform: scale(0); }
   100% {
-    fill: #00ff00;
-    /* Final fill color */ } }
+    transform: scale(0.5); } }
 
-@keyframes animateCircle_vert_clair_erable-9 {
-  0% {
-    stroke: #000000;
-    /* Initial stroke color */ }
-  100% {
-    stroke: #ff0000;
-    /* Final stroke color */ } }
+@keyframes slidein {
+  from {
+    transform: translateX(20%); }
+  to {
+    transform: translateX(70%); } }
 
-@keyframes animateCircle_vert_clair_erable-3 {
-  0% {
-    fill: #ffffff;
-    /* Initial fill color */ }
-  100% {
-    fill: #00ff00;
-    /* Final fill color */ } }
+@keyframes dropDown {
+  from {
+    transform: translateY(20%); }
+  to {
+    transform: translateY(70%); } }
 
-@keyframes animateCircle_vert_clair_erable-3-1 {
+@keyframes translateAnimation {
   0% {
-    stroke: #000000;
-    /* Initial stroke color */ }
+    transform: translateX(0);
+    /* Start translation */ }
+  50% {
+    transform: translateX(200); }
   100% {
-    stroke: #ff0000;
-    /* Final stroke color */ } }
+    transform: translateX(500px);
+    /* End translation */ } }
 
-@keyframes animateCircle_vert_clair_erable-3-1-7 {
+@keyframes changeColor {
   0% {
-    fill: #ffffff;
+    fill: #b9ce00;
     /* Initial fill color */ }
   100% {
-    fill: #00ff00;
+    fill: #ff804d;
     /* Final fill color */ } }
 
-@keyframes animateCircle_vert_erable {
+@keyframes changeColor2 {
   0% {
-    stroke: #000000;
-    /* Initial stroke color */ }
-  100% {
-    stroke: #ff0000;
-    /* Final stroke color */ } }
-
-@keyframes animateCircle_vert_erable-4 {
-  0% {
-    fill: #ffffff;
+    fill: #038788;
     /* Initial fill color */ }
   100% {
-    fill: #00ff00;
+    fill: #349a84;
     /* Final fill color */ } }
 
-@keyframes animateCircle_vert_erable-4-6 {
-  0% {
-    stroke: #000000;
-    /* Initial stroke color */ }
-  100% {
-    stroke: #ff0000;
-    /* Final stroke color */ } }
+/* Apply styles to the SVG paths
+#circle_pop_trans,
+#circle_pop_trans-2,
+/* Add other SVG IDs or classes here */
+#circle_orange {
+  /* Add styles to your SVG paths */
+  /* Example animation */
+  /* animation: pulse 2s infinite alternate; */
+  /* animation: dropDown 2s infinite alternate; */
+  /* animation: pulse 2s infinite alternate; */ }
 
-@keyframes animateCircle_vert_erable-4-3 {
-  0% {
-    fill: #ffffff;
-    /* Initial fill color */ }
-  100% {
-    fill: #00ff00;
-    /* Final fill color */ } }
+#cercle_vert_erable-4-3 {
+  animation: changeColor2 2s forwards; }
 
-@keyframes animateCircle_vert_erable-2 {
-  0% {
-    stroke: #000000;
-    /* Initial stroke color */ }
-  100% {
-    stroke: #ff0000;
-    /* Final stroke color */ } }
+/* Apply styles to the SVG paths */
+#circle_vert_clair_erable-3-1 {
+  animation: changeColor 2s forwards;
+  /* animation: slidein 2s infinite alternate; */ }
 
-@keyframes translateAnimation {
-  0% {
-    transform: translateX(0);
-    /* Start translation */ }
-  50% {
-    transform: translateX(200); }
-  100% {
-    transform: translateX(500px);
-    /* End translation */ } }
+#circle_orange-7 {
+  /* animation: changeColor 2s infinite alternate; */ }
 
-@keyframes animateCircle_orange-7 {
-  0% {
-    stroke: #000000;
-    /* Initial stroke color */ }
-  100% {
-    stroke: #ff0000;
-    /* Final stroke color */ } }
+#circle_orange-6 {
+  /* Main animation for the football */
+  /* animation: football-motion 2s linear infinite; */ }
 
-@keyframes animateCircle_orange-2 {
-  0% {
-    fill: #ffffff;
-    /* Initial fill color */ }
-  100% {
-    fill: #00ff00;
-    /* Final fill color */ } }
+#circle_orange-6-bis {
+  /* Trailing effect animation */
+  /* animation: trace-motion 2s linear infinite; */ }
 
-@keyframes animateCircle_orange-9 {
+@keyframes football-motion {
   0% {
-    stroke: #000000;
-    /* Initial stroke color */ }
+    transform: translateX(0) translateY(0); }
   100% {
-    stroke: #ff0000;
-    /* Final stroke color */ } }
+    transform: translateX(100px); } }
 
-@keyframes animateCircle_orange {
+@keyframes trace-motion {
   0% {
-    fill: #ffffff;
-    /* Initial fill color */ }
+    opacity: 0.5;
+    /* Adjust the opacity to control the visibility of the trace */
+    /* Additional properties for the trailing effect */
+    transform: translateX(0px) translateY(0);
+    /* Adjust as needed */ }
   100% {
-    fill: #00ff00;
-    /* Final fill color */ } }
-
-@keyframes slidein {
-  from {
-    transform: translateX(0%); }
-  to {
-    transform: translateX(100%); } }
+    opacity: 0.3;
+    /* Make the trace disappear at the end */
+    /* Additional properties for the trailing effect */
+    transform: translateX(100px);
+    /* Adjust as needed */ } }
 
-/* Add more keyframes for other paths as needed */
-#circle_pop_trans {
-  animation-name: translateAnimation;
-  animation-duration: 13s;
-  animation-repeat: infinite;
-  animation-delay: 1s;
-  animation-fill-mode: none; }
-
-#circle_orange-6 {
-  animation: slidein 2s infinite alternate;
-  /* Animate fill color */ }
-
-/* Apply animations to other paths similarly */
 /*!
  * Hamburgers
  * @description Tasty CSS-animated hamburgers
@@ -626,12 +565,19 @@ footer h2 {
 
 body {
   position: relative; }
+  body #content-ontop {
+    z-index: 3000;
+    position: relative;
+    top: -1200px; }
+  body #background-animated {
+    z-index: 2000;
+    position: relative;
+    left: -350px; }
   body::before {
     z-index: -1;
     content: " ";
     width: 100%;
     height: 100%;
-    background-image: url("../images/fond-ronds.svg");
     background-repeat: no-repeat;
     background-size: content;
     display: block;
@@ -1101,14 +1047,13 @@ header {
               width: min-content;
               margin-bottom: 0; }
     header .row #block-colloque2024-mainnavigation {
-      width: max-content;
-      display: none; }
+      width: max-content; }
       header .row #block-colloque2024-mainnavigation .burger {
         padding-top: 0.25rem;
         z-index: 9999; }
       @media screen and (min-width: 1200px) {
         header .row #block-colloque2024-mainnavigation {
-          display: block; }
+          display: flex; }
           header .row #block-colloque2024-mainnavigation ul {
             margin-bottom: 0;
             flex-wrap: wrap; }
@@ -1192,9 +1137,6 @@ header.front #block-colloque2024-branding {
     header.front #block-colloque2024-branding.is-active > div {
       max-height: 115px; }
 
-header.front #block-colloque2024-renderedsitesettingsblock-2 {
-  display: none; }
-
 #block-colloque2024-submenu {
   margin: 1rem auto; }
   #block-colloque2024-submenu ul {

web/themes/custom/colloque2024/css-compiled/pages/layout.css

@@ -8,12 +8,19 @@
 
 body {
   position: relative; }
+  body #content-ontop {
+    z-index: 3000;
+    position: relative;
+    top: -1200px; }
+  body #background-animated {
+    z-index: 2000;
+    position: relative;
+    left: -350px; }
   body::before {
     z-index: -1;
     content: " ";
     width: 100%;
     height: 100%;
-    background-image: url("../images/fond-ronds.svg");
     background-repeat: no-repeat;
     background-size: content;
     display: block;

web/themes/custom/colloque2024/css/components/header/header.scss

@@ -88,9 +88,8 @@ header{
         z-index: 9999;
       }
       // .nav-main{
-        display: none;
         @media screen and (min-width: 1200px) {
-        display: block;
+        display: flex;
           ul{
             margin-bottom: 0;
             flex-wrap: wrap;
@@ -201,6 +200,6 @@ header.front{
     }
   }
   #block-colloque2024-renderedsitesettingsblock-2{
-    display: none;
+    // display: none;
   }
 }

web/themes/custom/colloque2024/css/configs/animation.scss

@@ -1,123 +1,108 @@
-@keyframes animateCircle_pop_trans {
-    0% {stroke: #000000; /* Initial stroke color */}
-    100% {stroke: #ff0000; /* Final stroke color */}
-  }
-  
-  @keyframes animateCircle_pop_trans-2 {
-    0% {fill: #ffffff; /* Initial fill color */}
-    100% {fill: #00ff00; /* Final fill color */}
-  }
+/* Link the SVG file */
+body {
+  /* background-image: url('../images/fond-ronds.svg'); */
+  /* Add other background properties as needed */
+  width: 100%;
+  height: 100vh; /* Adjust as needed */
+  background-size: cover; /* Adjust as needed */
+}
 
-  @keyframes animateCircle_vert_clair_erable {
-    0% {stroke: #000000; /* Initial stroke color */}
-    100% {stroke: #ff0000; /* Final stroke color */}
-  }
-  
-  @keyframes animateCircle_vert_clair_erable-93 {
-    0% {fill: #ffffff; /* Initial fill color */}
-    100% {fill: #00ff00; /* Final fill color */}
-  }
-  
-  @keyframes animateCircle_vert_clair_erable-9 {
-    0% {stroke: #000000; /* Initial stroke color */}
-    100% {stroke: #ff0000; /* Final stroke color */}
-  }
-  
-  @keyframes animateCircle_vert_clair_erable-3 {
-    0% {fill: #ffffff; /* Initial fill color */}
-    100% {fill: #00ff00; /* Final fill color */}
-  }
 
-  @keyframes animateCircle_vert_clair_erable-3-1 {
-    0% {stroke: #000000; /* Initial stroke color */}
-    100% {stroke: #ff0000; /* Final stroke color */}
-  }
-  
-  @keyframes animateCircle_vert_clair_erable-3-1-7 {
-    0% {fill: #ffffff; /* Initial fill color */}
-    100% {fill: #00ff00; /* Final fill color */}
-  }
+@keyframes pulse {
+  0% {transform: scale(0);}
+  100% {transform: scale(.5);}
+}
 
-  @keyframes animateCircle_vert_erable {
-    0% {stroke: #000000; /* Initial stroke color */}
-    100% {stroke: #ff0000; /* Final stroke color */}
-  }
-  
-  @keyframes animateCircle_vert_erable-4 {
-    0% {fill: #ffffff; /* Initial fill color */}
-    100% {fill: #00ff00; /* Final fill color */}
-  }
 
-  @keyframes animateCircle_vert_erable-4-6 {
-    0% {stroke: #000000; /* Initial stroke color */}
-    100% {stroke: #ff0000; /* Final stroke color */}
-  }
-  
-  @keyframes animateCircle_vert_erable-4-3 {
-    0% {fill: #ffffff; /* Initial fill color */}
-    100% {fill: #00ff00; /* Final fill color */}
-  }
-  
-  @keyframes animateCircle_vert_erable-2 {
-    0% {stroke: #000000; /* Initial stroke color */}
-    100% {stroke: #ff0000; /* Final stroke color */}
-  }
-  
-  @keyframes translateAnimation {
-    0% {
-        transform: translateX(0); /* Start translation */
-      }
-    50% {
-      transform: translateX(200);
-    }
-      100% {
-        transform: translateX(500px); /* End translation */
-      }
-  }
+@keyframes slidein {
+  from {transform: translateX(20%);}
+  to {transform: translateX(70%);}
+}
 
-  @keyframes animateCircle_orange-7 {
-    0% {stroke: #000000; /* Initial stroke color */}
-    100% {stroke: #ff0000; /* Final stroke color */}
-  }
-  
-  @keyframes animateCircle_orange-2 {
-    0% {fill: #ffffff; /* Initial fill color */}
-    100% {fill: #00ff00; /* Final fill color */}
-  }
+@keyframes dropDown {
+  from {transform: translateY(20%);}
+  to {transform: translateY(70%);}
+}
 
-  @keyframes animateCircle_orange-9 {
-    0% {stroke: #000000; /* Initial stroke color */}
-    100% {stroke: #ff0000; /* Final stroke color */}
-  }
-  
-  @keyframes animateCircle_orange {
-    0% {fill: #ffffff; /* Initial fill color */}
-    100% {fill: #00ff00; /* Final fill color */}
-  }
+@keyframes translateAnimation {
+  0% {transform: translateX(0); /* Start translation */}
+  50% {transform: translateX(200);}
+  100% {transform: translateX(500px); /* End translation */}
+}
+
+@keyframes changeColor {
+  0% {fill: #b9ce00; /* Initial fill color */}
+  100% {fill: #ff804d; /* Final fill color */}
+}
+
+@keyframes changeColor2 {
+  0% {fill: #038788; /* Initial fill color */}
+  100% {fill: #349a84; /* Final fill color */}
+}
 
-  @keyframes slidein {
-    from {
-      transform: translateX(0%);
-    }
   
-    to {
-      transform: translateX(100%);
-    }
-    
+/* Apply styles to the SVG paths
+#circle_pop_trans,
+#circle_pop_trans-2,
+/* Add other SVG IDs or classes here */
+#circle_orange{
+  /* Add styles to your SVG paths */
+  /* Example animation */
+  /* animation: pulse 2s infinite alternate; */
+  /* animation: dropDown 2s infinite alternate; */
+  /* animation: pulse 2s infinite alternate; */
+
+
+}
+
+#cercle_vert_erable-4-3{
+  animation: changeColor2 2s forwards;
+}
+  
+/* Apply styles to the SVG paths */
+#circle_vert_clair_erable-3-1
+{
+  animation: changeColor 2s forwards;
+  /* animation: slidein 2s infinite alternate; */
+
+}
+
+#circle_orange-7{
+  /* animation: changeColor 2s infinite alternate; */
+} 
+
+
+
+
+
+#circle_orange-6 {
+  /* Main animation for the football */
+  /* animation: football-motion 2s linear infinite; */
+}
+
+#circle_orange-6-bis {
+  /* Trailing effect animation */
+  /* animation: trace-motion 2s linear infinite; */
+}
+
+@keyframes football-motion {
+  0% {
+    transform: translateX(0) translateY(0);
   }
-  
-  /* Add more keyframes for other paths as needed */
-  
-  #circle_pop_trans {
-    animation-name: translateAnimation;
-    animation-duration:13s; 
-    animation-repeat:infinite;
-    animation-delay: 1s; 
-    animation-fill-mode: none;  }
-  
-  #circle_orange-6 {
-    animation: slidein 2s infinite alternate; /* Animate fill color */
+  100% {
+    transform: translateX(100px) ;
   }
-  
-  /* Apply animations to other paths similarly */
-  
+}
+
+@keyframes trace-motion {
+  0% {
+    opacity: 0.5; /* Adjust the opacity to control the visibility of the trace */
+    /* Additional properties for the trailing effect */
+    transform: translateX(0px) translateY(0); /* Adjust as needed */
+  }
+  100% {
+    opacity: 0.3; /* Make the trace disappear at the end */
+    /* Additional properties for the trailing effect */
+    transform: translateX(100px) ; /* Adjust as needed */
+  }
+}

web/themes/custom/colloque2024/css/pages/layout.scss

@@ -9,13 +9,26 @@ main:not(.home) {
 
 //
 body {
+ #content-ontop{
+ z-index: 3000;
+ position: relative;
+ top: -1200px;
+ }
+ 
+
+ #background-animated{
+ z-index: 2000;
+ position: relative;
+  left: -350px;
+ 
+ }
   position: relative;
   &::before {
     z-index: -1;
     content: " ";
     width: 100%;
     height: 100%;
-    background-image: url("../images/fond-ronds.svg");
+    // background-image: url("../images/fond-ronds.svg");
     background-repeat: no-repeat;
     background-size: content;
     display: block;
@@ -23,6 +36,10 @@ body {
     top: 0;
     left: 0;
   }
+
+
+
+
   // &::after {
   //   z-index: -1;
   //   content: " ";
@@ -63,3 +80,4 @@ article {
 h4 {
   // @include croix_or;
 }
+

web/themes/custom/colloque2024/images/fond-rond.svg

@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1900"
+   height="1500"
+   viewBox="0 0 502.70834 396.875"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="fond-rond.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.25575084"
+     inkscape:cx="643.20414"
+     inkscape:cy="-11.730167"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="36"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs1" /><g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-51.525162,-32.699875)"><circle
+       style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0315418;paint-order:fill markers stroke"
+       id="circle_pop_trans"
+       cx="92.695091"
+       cy="69.974625"
+       r="21.581236" /><circle
+       style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0315418;paint-order:fill markers stroke"
+       id="circle_pop_trans-2"
+       cx="88.803978"
+       cy="180.71878"
+       r="21.581236" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable"
+       cx="90.108749"
+       cy="265.0322"
+       r="23.131907" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable-93"
+       cx="89.875549"
+       cy="165.00394"
+       r="23.131907" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable-9"
+       cx="267.71634"
+       cy="72.928932"
+       r="23.131907" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable-3"
+       cx="466.42831"
+       cy="73.960678"
+       r="23.131907" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable-3-1"
+       cx="402.3569"
+       cy="170.33492"
+       r="23.131907" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable-3-1-7"
+       cx="239.84669"
+       cy="131.55588"
+       r="23.131907" /><circle
+       style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+       id="cercle_vert_erable"
+       cx="352.88077"
+       cy="74.67765"
+       r="22.098125" /><circle
+       style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+       id="cercle_vert_erable-4"
+       cx="509.92899"
+       cy="126.76264"
+       r="22.098125" /><circle
+       style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+       id="cercle_vert_erable-4-6"
+       cx="303.03726"
+       cy="220.98933"
+       r="22.098125" /><circle
+       style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+       id="cercle_vert_erable-4-3"
+       cx="217.18208"
+       cy="130.37013"
+       r="22.098125" /><circle
+       style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+       id="cercle_vert_erable-2"
+       cx="169.43532"
+       cy="89.477364"
+       r="22.098125" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
+       id="circle_orange"
+       cx="465.94473"
+       cy="167.39673"
+       r="22.098158" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
+       id="circle_orange-7"
+       cx="375.21536"
+       cy="170.19913"
+       r="22.098158" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
+       id="circle_orange-2"
+       cx="139.51772"
+       cy="206.53943"
+       r="22.098158" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
+       id="circle_orange-9"
+       cx="271.93399"
+       cy="219.95616"
+       r="22.098158" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0315419;paint-order:fill markers stroke"
+       id="circle_orange-6"
+       cx="169.97908"
+       cy="70.481293"
+       r="21.581268" /></g></svg>

web/themes/custom/colloque2024/images/fond-ronds.svg

@@ -2,130 +2,143 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="1900"
-   height="1500"
-   viewBox="0 0 502.70834 396.875"
-   version="1.1"
-   id="svg1"
-   xml:space="preserve"
-   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
-   sodipodi:docname="fond-rond.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
-     id="namedview1"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="mm"
-     inkscape:zoom="0.25575084"
-     inkscape:cx="643.20414"
-     inkscape:cy="-11.730167"
-     inkscape:window-width="1920"
-     inkscape:window-height="1016"
-     inkscape:window-x="0"
-     inkscape:window-y="36"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" /><defs
-     id="defs1" /><g
-     inkscape:label="Calque 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-51.525162,-32.699875)"><circle
-       style="fill:#349a84;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0315418;paint-order:fill markers stroke"
-       id="circle_pop_trans"
-       cx="91.660561"
-       cy="84.505714"
-       r="15" /><circle
-       style="fill:#349a84;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0315418;paint-order:fill markers stroke"
-       id="circle_pop_trans-2"
-       cx="91.907585"
-       cy="302.79398"
-       r="15" /><circle
-       style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
-       id="circle_vert_clair_erable"
-       cx="135.62831"
-       cy="280.55023"
-       r="15" /><circle
-       style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
-       id="circle_vert_clair_erable-93"
-       cx="91.944618"
-       cy="357.42755"
-       r="15" /><circle
-       style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
-       id="circle_vert_clair_erable-9"
-       cx="268.75085"
-       cy="89.481499"
-       r="15" /><circle
-       style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
-       id="circle_vert_clair_erable-3"
-       cx="465.39377"
-       cy="90.513245"
-       r="15" /><circle
-       style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
-       id="circle_vert_clair_erable-3-1"
-       cx="396.14969"
-       cy="194.12924"
-       r="15" /><circle
-       style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
-       id="circle_vert_clair_erable-3-1-7"
-       cx="265.71008"
-       cy="196.22624"
-       r="15" /><circle
-       style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
-       id="circle_vert_erable"
-       cx="343.56995"
-       cy="91.230217"
-       r="15" /><circle
-       style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
-       id="circle_vert_erable-4"
-       cx="509.92899"
-       cy="147.45335"
-       r="15" /><circle
-       style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
-       id="circle_vert_erable-4-6"
-       cx="311.31354"
-       cy="276.85425"
-       r="15" /><circle
-       style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
-       id="circle_vert_erable-4-3"
-       cx="209.94034"
-       cy="196.07504"
-       r="15" /><circle
-       style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
-       id="circle_vert_erable-2"
-       cx="173.57346"
-       cy="113.27168"
-       r="15" /><circle
-       style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke"
-       id="circle_orange"
-       cx="465.94473"
-       cy="195.32918"
-       r="15" /><circle
-       style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke"
-       id="circle_orange-7"
-       cx="345.21384"
-       cy="197.09705"
-       r="15" /><circle
-       style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke"
-       id="circle_orange-2"
-       cx="477.81082"
-       cy="322.40741"
-       r="15" /><circle
-       style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke"
-       id="circle_orange-9"
-       cx="267.79587"
-       cy="276.85562"
-       r="15" /><circle
-       style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0315419;paint-order:fill markers stroke"
-       id="circle_orange-6"
-       cx="173.08269"
-       cy="80.826645"
-       r="15" /></g>
-      
-      </svg>
+width="1900"
+height="1500"
+viewBox="0 0 502.70834 396.875"
+version="1.1"
+id="svg1"
+xml:space="preserve"
+inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+sodipodi:docname="fond-ronds.svg"
+xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+xmlns="http://www.w3.org/2000/svg"
+xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+  id="namedview1"
+  pagecolor="#ffffff"
+  bordercolor="#666666"
+  borderopacity="1.0"
+  inkscape:showpageshadow="2"
+  inkscape:pageopacity="0.0"
+  inkscape:pagecheckerboard="0"
+  inkscape:deskcolor="#d1d1d1"
+  inkscape:document-units="mm"
+  inkscape:zoom="0.25575084"
+  inkscape:cx="643.20414"
+  inkscape:cy="-11.730167"
+  inkscape:window-width="1920"
+  inkscape:window-height="1016"
+  inkscape:window-x="0"
+  inkscape:window-y="36"
+  inkscape:window-maximized="1"
+  inkscape:current-layer="layer1" /><defs
+  id="defs1" /><g
+  inkscape:label="Calque 1"
+  inkscape:groupmode="layer"
+  id="layer1"
+  transform="translate(-51.525162,-32.699875)"><circle
+    style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0315418;paint-order:fill markers stroke"
+    id="circle_pop_trans"
+    class="dropdown"
+    cx="92.695091"
+    cy="69.974625"
+    r="15" /><circle
+    style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0315418;paint-order:fill markers stroke"
+    id="circle_pop_trans-2"
+    class="moveup"
+
+    cx="88.803978"
+    cy="180.71878"
+    r="15" /><circle
+    style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+    id="circle_vert_clair_erable"
+    class="moveup"
+
+    cx="90.108749"
+    cy="265.0322"
+    r="15" /><circle
+    style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+    id="circle_vert_clair_erable-93"
+    class="dropdown"
+    cx="89.875549"
+    cy="165.00394"
+    r="15" /><circle
+    style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+    id="circle_vert_clair_erable-9"
+    cx="267.71634"
+    cy="72.928932"
+    r="15" /><circle
+    style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+    id="circle_vert_clair_erable-3"
+    cx="466.42831"
+    cy="73.960678"
+    r="15" /><circle
+    style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+    id="circle_vert_clair_erable-3-1"
+    class="moveup changecolor"
+    cx="402.3569"
+    cy="170.33492"
+    r="15" /><circle
+    style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+    id="circle_vert_clair_erable-3-1-7"
+    class="toleft"
+    cx="239.84669"
+    cy="131.55588"
+    r="15" /><circle
+    style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+    id="cercle_vert_erable"
+    class="moveup"
+    cx="352.88077"
+    cy="74.67765"
+    r="15" /><circle
+    style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+    id="cercle_vert_erable-4"
+    cx="509.92899"
+    cy="126.76264"
+    r="15" /><circle
+    style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+    id="cercle_vert_erable-4-6"
+    cx="303.03726"
+    cy="220.98933"
+    r="15" /><circle
+    style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+    id="cercle_vert_erable-4-3"
+    class="torightslow"
+    cx="217.18208"
+    cy="130.37013"
+    r="15" /><circle
+    style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+    id="cercle_vert_erable-2"
+    class="toright"
+    cx="169.43532"
+    cy="89.477364"
+    r="15" /><circle
+    style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
+    id="circle_orange"
+    class="dropdown"
+    cx="465.94473"
+    cy="167.39673"
+    r="15" /><circle
+    style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
+    id="circle_orange-7"
+    cx="375.21536"
+    cy="170.19913"
+    r="15" /><circle
+    style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
+    id="circle_orange-2"
+    cx="139.51772"
+    cy="206.53943"
+    r="15" /><circle
+    style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
+    id="circle_orange-9"
+    class="moveup"
+
+    cx="271.93399"
+    cy="219.95616"
+    r="15" /><circle
+    style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0315419;paint-order:fill markers stroke"
+    id="circle_orange-6"
+    class="toleft"
+    cx="169.97908"
+    cy="70.481293"
+    r="15" /></g></svg>

web/themes/custom/colloque2024/js/animation_home.js

@@ -1,14 +1,21 @@
+
+
 // Récupérer la forme SVG
-const circle = document.getElementById('circle_orange');
-console.log(circle);
 
-// Fonction pour animer la forme
-function slideIn() {
+
+let dropdowns = document.getElementsByClassName('dropdown');
+console.log(dropdowns);
+
+// Parcourir tous les éléments sélectionnés
+Array.from(dropdowns).forEach(dropdown => {
+ function slideDown() {
   let translateY = -50; // Position de départ (en bas)
 
   function animate() {
     translateY += 1; // Déplacement d'un pixel vers le haut à chaque itération
-    circle.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation
+    dropdown.style.transform = `translateY(${translateY}px)`; // Appliquer la transformation
+          
+    // dropdown.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation
 
     if (translateY < 200) { // Limite la hauteur à laquelle la forme doit être animée
       requestAnimationFrame(animate); // Appel récursif de la fonction animate
@@ -18,4 +25,132 @@ function slideIn() {
   animate(); // Lancer l'animation
 }
 
-slideIn(); // Lancer l'animation lorsque la page est chargée
+slideDown(); // Lancer l'animation lorsque la page est chargée
+});
+
+
+let moveups = document.getElementsByClassName('moveup');
+console.log(moveups);
+
+// Parcourir tous les éléments sélectionnés
+Array.from(moveups).forEach(moveup => {
+ function slideUp() {
+  let translateY = 0; // Position de départ (en bas)
+
+  function animate() {
+    translateY -= 0.5; // Déplacement d'un pixel vers le haut à chaque itération
+    moveup.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    
+    if (translateY > -25) { // Limite la hauteur à laquelle la forme doit être animée
+      requestAnimationFrame(animate); // Appel récursif de la fonction animate
+    }
+  }
+
+  animate(); // Lancer l'animation
+}
+
+slideUp(); // Lancer l'animation lorsque la page est chargée
+});
+
+let torights = document.getElementsByClassName('toright');
+console.log(torights);
+
+// Parcourir tous les éléments sélectionnés
+Array.from(torights).forEach(toright => {
+ function slideRight() {
+  let translateX = 0; // Position de départ (en bas)
+
+  function animate() {
+    translateX += 0.5; // Déplacement d'un pixel vers le haut à chaque itération
+    toright.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
+    
+    if (translateX > -25) { // Limite la hauteur à laquelle la forme doit être animée
+      requestAnimationFrame(animate); // Appel récursif de la fonction animate
+    }
+  }
+
+  animate(); // Lancer l'animation
+}
+
+slideRight(); // Lancer l'animation lorsque la page est chargée
+});
+
+let torightslows = document.getElementsByClassName('torightslow');
+console.log(torightslows);
+
+// Parcourir tous les éléments sélectionnés
+Array.from(torightslows).forEach(torightslow => {
+ function slideRightSlow() {
+  let translateX = 0; // Position de départ (en bas)
+  let duration = 8000; // Durée de l'animation en millisecondes
+  let startTime = null; // Temps de départ de l'animation
+
+  function animate(timestamp) {
+
+    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
+    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
+    progress = Math.min(progress, 0.8); // Limite la progression à 1 (pour éviter un dépassement)
+
+    // Utilise une fonction d'interpolation (ease-in-out) pour ajuster la progression
+    progress = easeInOut(progress);
+
+    translateX = 60 * progress; // Déplacement d'un pixel vers le haut à chaque itération
+    torightslow.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
+    
+    if (progress < 0.8) {
+      requestAnimationFrame(animate);
+    }
+  }
+
+  function easeInOut(t) {
+    return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
+}
+
+// Lance l'animation
+requestAnimationFrame(animate);
+}
+
+slideRightSlow(); // Lancer l'animation lorsque la page est chargée
+});
+
+let tolefts = document.getElementsByClassName('toleft');
+console.log(tolefts);
+
+// Parcourir tous les éléments sélectionnés
+Array.from(tolefts).forEach(toleft => {
+    function slideLeft() {
+        let translateX = 0; // Position de départ (en bas)
+        let duration = 4000; // Durée de l'animation en millisecondes
+        let startTime = null; // Temps de départ de l'animation
+
+        function animate(timestamp) {
+            if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
+            let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
+            progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
+
+            // Utilise une fonction d'interpolation (ease-in-out) pour ajuster la progression
+            progress = easeInOut(progress);
+
+            // Calcule la translation en fonction de la progression
+            translateX = -20 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
+
+            // Applique la transformation à l'élément
+            toleft.style.transform = `translateX(${translateX}%)`;
+
+            // Continue l'animation si la progression n'a pas atteint 1
+            if (progress < 0.8) {
+                requestAnimationFrame(animate);
+            }
+        }
+
+        // Fonction d'interpolation (ease-in-out)
+        function easeInOut(t) {
+            return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t;
+        }
+
+        // Lance l'animation
+        requestAnimationFrame(animate);
+    }
+
+    slideLeft(); // Lancer l'animation lorsque la page est chargée
+});

web/themes/custom/colloque2024/template/html.html.twig

@@ -42,6 +42,7 @@
       Keyboard navigation/accessibility link to main content section in
       page.html.twig.
     #}
+    
     <a href="#main-content" class="visually-hidden focusable">
       {{ 'Skip to main content'|t }}
     </a>

web/themes/custom/colloque2024/template/page--front.html.twig

@@ -63,7 +63,155 @@
     <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
 
     <div class="layout-content">
-      {{ page.content }}
+      <div id="background-animated" >
+        <svg width="1900" height="1500"
+              viewBox="0 0 502.70834 396.875"
+              version="1.1"
+              id="svg1"
+              xml:space="preserve"
+              inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+              sodipodi:docname="fond-ronds.svg"
+              xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+              xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+                id="namedview1"
+                pagecolor="#ffffff"
+                bordercolor="#666666"
+                borderopacity="1.0"
+                inkscape:showpageshadow="2"
+                inkscape:pageopacity="0.0"
+                inkscape:pagecheckerboard="0"
+                inkscape:deskcolor="#d1d1d1"
+                inkscape:document-units="mm"
+                inkscape:zoom="0.25575084"
+                inkscape:cx="643.20414"
+                inkscape:cy="-11.730167"
+                inkscape:window-width="1920"
+                inkscape:window-height="1016"
+                inkscape:window-x="0"
+                inkscape:window-y="36"
+                inkscape:window-maximized="1"
+                inkscape:current-layer="layer1" /><defs
+                id="defs1" /><g
+                inkscape:label="Calque 1"
+                inkscape:groupmode="layer"
+                id="layer1"
+                transform="translate(-51.525162,-32.699875)"><circle
+                  style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0315418;paint-order:fill markers stroke"
+                  id="circle_pop_trans"
+                  class="dropdown"
+                  cx="92.695091"
+                  cy="69.974625"
+                  r="15" /><circle
+                  style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0315418;paint-order:fill markers stroke"
+                  id="circle_pop_trans-2"
+                  class="moveup"
+
+                  cx="88.803978"
+                  cy="180.71878"
+                  r="15" /><circle
+                  style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+                  id="circle_vert_clair_erable"
+                  class="moveup"
+
+                  cx="90.108749"
+                  cy="265.0322"
+                  r="15" /><circle
+                  style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+                  id="circle_vert_clair_erable-93"
+                  class="dropdown"
+                  cx="89.875549"
+                  cy="165.00394"
+                  r="15" /><circle
+                  style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+                  id="circle_vert_clair_erable-9"
+                  cx="267.71634"
+                  cy="72.928932"
+                  r="15" /><circle
+                  style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+                  id="circle_vert_clair_erable-3"
+                  cx="466.42831"
+                  cy="73.960678"
+                  r="15" /><circle
+                  style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+                  id="circle_vert_clair_erable-3-1"
+                  class="moveup"
+                  class="changecolor"
+
+                  cx="402.3569"
+                  cy="170.33492"
+                  r="15" /><circle
+                  style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
+                  id="circle_vert_clair_erable-3-1-7"
+                  class="toleft"
+                  cx="239.84669"
+                  cy="131.55588"
+                  r="15" /><circle
+                  style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+                  id="cercle_vert_erable"
+                  class="moveup"
+                  cx="352.88077"
+                  cy="74.67765"
+                  r="15" /><circle
+                  style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+                  id="cercle_vert_erable-4"
+                  cx="509.92899"
+                  cy="126.76264"
+                  r="15" /><circle
+                  style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+                  id="cercle_vert_erable-4-6"
+                  cx="303.03726"
+                  cy="220.98933"
+                  r="15" /><circle
+                  style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+                  id="cercle_vert_erable-4-3"
+                  class="torightslow"
+                  cx="217.18208"
+                  cy="130.37013"
+                  r="15" /><circle
+                  style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+                  id="cercle_vert_erable-2"
+                  class="toright"
+                  cx="169.43532"
+                  cy="89.477364"
+                  r="15" /><circle
+                  style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
+                  id="circle_orange"
+                  class="dropdown"
+                  cx="465.94473"
+                  cy="167.39673"
+                  r="15" /><circle
+                  style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
+                  id="circle_orange-7"
+                  cx="375.21536"
+                  cy="170.19913"
+                  r="15" /><circle
+                  style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
+                  id="circle_orange-2"
+                  cx="139.51772"
+                  cy="206.53943"
+                  r="15" /><circle
+                  style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
+                  id="circle_orange-9"
+                  class="moveup"
+
+                  cx="271.93399"
+                  cy="219.95616"
+                  r="15" /><circle
+                  style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0315419;paint-order:fill markers stroke"
+                  id="circle_orange-6"
+                  class="toleft"
+                  cx="169.97908"
+                  cy="70.481293"
+                  r="15" /></g>
+        </svg>
+      </div>
+      <div id="content-ontop">
+        <div>
+        {{ page.content }}
+        </div>
+      </div>    
     </div>{# /.layout-content #}
 
     {% if page.sidebar_second %}