animate contact

user/themes/gilles_acezat/scss/theme/_animation.scss

@@ -29,3 +29,40 @@
     visibility: hidden;
   }
 }
+
+@keyframes translateright{
+  0%{
+    right: -50px;
+    color: transparent;
+    display: none;
+  }
+
+  30%{
+    right: 150px;
+    color: transparent;
+    display: block;
+  }
+
+  100%{
+    right: 200px;
+    color: white;
+  }
+}
+
+@keyframes translateleft{
+  0%{
+    right: 200px;
+    color: white;
+    display: block;
+  }
+  30%{
+    right: 150px;
+    color: transparent;
+  }
+
+  100%{
+    right: -200px;
+    color: transparent;
+    display: none;
+  }
+}

user/themes/gilles_acezat/scss/theme/_typography.scss

@@ -36,8 +36,6 @@ header{
     h3{
       text-transform: lowercase;
       color:white;
-      margin-top:-52px;
-      margin-left: 18px;
     }
   }
 }

user/themes/gilles_acezat/scss/theme/all.scss

@@ -7,7 +7,7 @@ header{
     z-index: 9999;
     position: fixed;
     top: 20px;
-    right: 40px;
+    right: 2%;
     transform: scale(1);
     transition: transform 0.5s ease;
     cursor: pointer;
@@ -15,16 +15,59 @@ header{
       transition: transform 0.5s ease;
       transform: scale(0.9);
     }
-    svg{
+    &.open{
+      transform: scale(15);
+      transition: transform 0.5s ease;
+      h3{
+        color: transparent;
+        transition: visibility 0.5 ease;
+      }
+      img{
+        animation: rotation 12s infinite linear;
+      }
+      & + .txt{
+          position: fixed;
+          top: 190px;
+          text-align: center;
+          line-height: 1.5rem;
+          z-index: 9999;
+          animation: translateright 1s ease forwards;
+      }
+    }
+    &.close{
+      transform: scale(1);
+      transition: transform 0.5s 0.1s ease;
+      & + .txt{
+          position: fixed;
+          top: 190px;
+          text-align: center;
+          line-height: 1.5rem;
+          z-index: 9999;
+          animation: translateleft 1s ease forwards;
+      }
+      h3{
+        color: white;
+        transition: color 0.5s 0.4s ease;
+      }
+      &:hover{
+        transition: transform 0.5s ease!important;
+        transform: scale(0.9)!important;
+      }
+    }
+    img{
       animation: rotation 6s infinite linear;
-      width: 90.4px;
-      height: 87.45px;
     }
     h3{
       transform: rotate(35deg);
+      position: absolute;
+      top: 33px;
+      left: 20px;
     }
-    p{
-      display: none;
+    & + .txt{
+        position: fixed;
+        right: -200px;
+        p{
+      }
     }
   }
   h2{

user/themes/gilles_acezat/scss/theme/item.scss

@@ -4,13 +4,8 @@ body{
       border-top: 1px solid black;
       padding-top: 20px;
       .img-card{
-        width: 50%;
-        &:nth-child(odd){
-          padding-right: 10px;
-        }
-        &:nth-child(even){
-          padding-left: 10px;
-        }
+        width: 49%;
+        margin-bottom: 20px;
       }
       .header-item{
         position: relative;
@@ -28,11 +23,8 @@ body{
           }
         }
         .content{
-          width: calc((100% / 3) * 2);
+          width: calc(100% / 3);
           margin: 20px  0;
-          .txt{
-            column-count: 2;
-          }
         }
         .prev-next{
           width: calc(100% / 3);