divers

head.php

@@ -105,7 +105,6 @@
 				<li class="peak1"></li>
 				<li class="peak2"></li>
 				<li class="peak3"></li>
-				<li class="peak4"></li>
 			</ul>
 		</div>
 	</div>

layout.css

@@ -505,16 +505,6 @@ header {
   animation-duration: 2s;
 }
 
-.peak4 {
-	border-left: 150px solid transparent;
-	border-right: 175px solid transparent;
-	border-bottom: 150px solid darkcyan;
-  margin-left: -100px;
-  margin-top: -150px;
-  animation-name: transimountains;
-  animation-duration: 3s;
-  }
-
 .logo img {
     width: 55%;
     height: auto;
@@ -531,11 +521,9 @@ header {
 
  #active_menu {
    position: fixed;
-    padding: 20px;
+    padding: 2vw;
 		display: inline-block;
-		vertical-align: middle;
     z-index: 27;
-    margin: 10px;
   }
 
  #active_menu span  {

script.js

@@ -139,29 +139,35 @@ function changePage(param_url, param_load=null){
 }
 function displayContentHeader(elem) {
   var screenWidth = window.innerWidth;
+  var contentHeaderLogo = document.querySelector(".logo");
   var contentHeader = document.querySelector('.content_header');
   var moon = document.querySelector('.moon');
   var cloudsWrapper = document.querySelector('.clouds-wrapper');
   var contentMountains = document.querySelector('.content_mountains');
   if (screenWidth <= 760) {
   contentHeader.style.display = "none";
+  contentHeaderLogo.style.display = "none";
   } else {
   if (elem === "accueil" || elem === "annexe") {
   contentHeader.style.display = "none";
+  contentHeaderLogo.style.display = "block";
+
   }
   if (elem === "atelier") {
+      contentHeaderLogo.style.display = "none";
       contentHeader.style.display = "block";
       moon.style.display = "block";
       contentMountains.style.display = "block";
       cloudsWrapper.style.display = "block";
   }
   if (elem === "animation") {
+    contentHeaderLogo.style.display = "none";
     contentHeader.style.display = "block";
     contentHeader.style.height = "20vh";
     moon.style.display = "block";
-    // contentMountains.style.display = "none";
   }
   if (elem === "transition") {
+    contentHeaderLogo.style.display = "none";
     contentHeader.style.display = "block";
     moon.style.display = "none";
     contentMountains.style.display = "block";

src/animation/index.php

@@ -468,4 +468,14 @@
   </div>
 
 </div>
+  <div class="row">
+    <div class="col-md-12 text-center">
+    <div class="firstsite">
+
+    </div>
+    <div class="secondsite">
+
+    </div>
+  </div>
+  </div>
 </div><!-- END PAGE -->

src/annexe/style.css

@@ -23,8 +23,8 @@ body {
 
 .page {
 	margin: auto;
+  width: 100%;
 	padding: 30px 15px;
-	max-width: 700px;
 }
 .page h1{
 	color : #00998B;

src/transition/index.php

@@ -10,7 +10,6 @@
         <div id="title3" class="title-space">
             <h1>EN CSS</h1></div>
     </div>
-
     <div id="regroupe">
         <div class="content">
             <div class="nom_transition">
@@ -410,4 +409,4 @@
 </code></pre> -->
 
     <script type="text/javascript" src="./lib/prism/prism.js"></script>
-    <script type="text/javascript" src="./src/transition/popup_transitions.js"></script>
+    <script type="text/javascript" src="./src/transition/popup_transitions.js"></script>

src/transition/style_transitions.css

@@ -9,7 +9,8 @@ body {
     display: inline-block;
     height: 50%;
     width: 100%;
-    margin-bottom: 70px;
+    margin-top: 3vh;
+    margin-bottom: 3vh;
     font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     text-align: center;
 }

style.css

@@ -21,7 +21,7 @@ body {
 }
 
 .row_circle {
-    padding-top: 36px;
+    padding: 2vw;
     background-image:
     repeating-linear-gradient(0deg,
     rgba(0,0,0,0.1) 0px,
@@ -38,13 +38,15 @@ body {
 .box_circle {
     margin: auto;
     position: relative;
+    width: 200px;
+    height: 200px;
+    border-radius: 100%;
 }
 
 .circle  {
     width: 200px;
     height: 200px;
     border-radius: 100%;
-    /*background-color: none;*/
     border-style: solid;
     border-width: 100px;
     border-color: #005F6B;
@@ -212,7 +214,6 @@ body {
 }
 
 .tutoriel a {
-    /*display: flex;*/
     height: 100%;
 }
 .tutoriel h2 {
@@ -342,11 +343,11 @@ footer {
         padding: 1em;
         width: 100%;
         background-image:
-                repeating-linear-gradient(0deg,
-                rgba(0,0,0,0.1) 0px,
-                rgba(0,0,0,0.1) 5px,
-                transparent 5px,
-                transparent 10px);
+        repeating-linear-gradient(0deg,
+        rgba(0,0,0,0.1) 0px,
+        rgba(0,0,0,0.1) 5px,
+        transparent 5px,
+        transparent 10px);
     }
 
     .circle  {
@@ -406,11 +407,12 @@ footer {
 
 }
 @media (max-width: 1100px){
-  .box_circle {
-  width: 150px;
-  border-radius: 100%;
-  height: 150px;
-}
+        .box_circle
+        {
+        width: 150px;
+        border-radius: 100%;
+        height: 150px;
+        }
 }
 @media (max-width: 760px) {