From bfdbd316203286f5d162313f61766587bc48125c Mon Sep 17 00:00:00 2001
From: frperalde <francois.peralde@gmail.com>
Date: Fri, 6 Nov 2020 19:46:51 +0100
Subject: [PATCH] src/

---
 src/css/style.css | 251 +++++++++++++++++++++++-----------------------
 src/index.html    |  45 +++++----
 2 files changed, 151 insertions(+), 145 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index 47eff13..0332e43 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -18,6 +18,7 @@ a {
 
 body{
 	background-color: var(--lightprima);
+	height: 100%;
 	overflow-x: hidden;
 	overflow-y: hidden;
 	/*Desactiver la selection*/
@@ -88,7 +89,7 @@ body{
 
 	#ContainBottom {
 	position: absolute;
-	margin-left: 25vw;
+	margin-left: 18vw;
 	height: 25vw;
 	width: auto;
 	bottom: 0;
@@ -350,10 +351,11 @@ body{
 
 /* PARTIE ANNEAU / ROND */
 .anneau{
+	box-sizing: border-box;
 	background-color: #DE3030;
 	border-radius: 3vw;
-	height: 5vw;
-	width: 5vw;
+	height: inherit;
+	width: inherit;
 	display: table-cell;
     vertical-align: middle;
 }
@@ -368,9 +370,9 @@ body{
 }
 
 .containform{
-	border-radius: 3vw;
-	height: 5vw;
-	width: 5vw;
+	box-sizing: content-box;	
+	height: 6vw;
+	width: 6vw;
 	display: table-cell;
     vertical-align: middle;
 }
@@ -387,8 +389,8 @@ body{
 /* PARTIE CARRE */
 .carre{
 	background-color: #30C0DE;
-	height: 5vw;
-	width: 5vw;
+	height: inherit;
+	width: inherit;
 	display: table-cell;
     vertical-align: middle
 }
@@ -411,17 +413,17 @@ body{
 
 /* PARTIE TRIANGLE */
 .triangle{
+	display: table;
+	margin: 0 auto;
 	border-left: 2.5vw solid transparent;
 	border-right: 2.5vw solid transparent;
 	border-bottom: 5vw solid #DEA430;
-	display: table-cell;
-    vertical-align: middle
 }
 
 .trianglerinterieur{
 	position: absolute;
-	left: 21.1vw;
-	bottom: 7.75vw;
+	margin-left:-1.5vw; 
+	margin-top: 1.25vw;	
 	border-left: 1.5vw solid transparent;
 	border-right: 1.5vw solid transparent;
 	border-bottom: 3vw solid var(--lightsedonca);
@@ -430,130 +432,125 @@ body{
 .ptriangle{
 	display: table;
 	margin: 0 auto;
+	margin-top: 0.75vw;	
 	border-left: 1.5vw solid transparent;
 	border-right: 1.5vw solid transparent;
 	border-bottom: 3vw solid #DEA430;
 }
 
-/* PARTIE PENTA*/
-.pentagone{
+/* TRAPEZE */
+.trapeze{
+	bottom: 0px;
+    height: 0;
+    margin-top: 2.58vw;
+    border-left: 1.5vw solid transparent;
+    border-right: 1.5vw solid transparent;
+    border-top: 3vw solid #6FDE30;
+}
+
+.triangletrapeze{
+	padding-top: 0.1vw;
+	position: absolute;	
+	border-left: 3vw solid transparent;
+	border-right: 3vw solid transparent;
+	border-bottom: 2.5vw solid #6FDE30;
+}
+
+.trapezeinte{
 	position: absolute;
-	width: 3vw;
-    box-sizing: content-box;
-    border-width: 3.15vw 1.2vw 0;
-    border-style: solid;
-    border-color: #6FDE30 transparent;
-}
-.pentagone:before{
-	content: "";
-    position: absolute;
-    top: -5.3vw;
-    left: -1.15vw;
-    border-width: 0 2.68vw 2.2vw;
-    border-style: solid;
-    border-color: transparent transparent #6FDE30;
-}
-
-.pentagoneinterieur{
+	margin-top: 3vw;
+	margin-left: 1.25vw;
+    width: 	2vw;
+    border-left: 0.75vw solid transparent;
+    border-right: 0.75vw solid transparent;
+    border-top: 1.5vw solid var(--lightsedonca);
+    z-index: 15;
+}
+
+.triangletrapezeinte{
+	position: absolute;	
+	margin-top: 1.45vw;
+	margin-left: 1.25vw;
+	padding-top: 0.1vw;
+	border-left: 1.75vw solid transparent;
+	border-right: 1.75vw solid transparent;
+	border-bottom: 1.5vw solid var(--lightsedonca);
+	z-index: 15;
+}
+
+.trapezep{
+	display: table;
+	margin: 0 auto;
+	margin-top: 2vw;
+    width: 	2vw;
+    border-left: 0.75vw solid transparent;
+    border-right: 0.75vw solid transparent;
+    border-top: 1.5vw solid #6FDE30;
+    z-index: 15;
+}
+
+.triangletrapezep{
+	position: absolute;	
+	margin-top: 0.55vw;
+	margin-left: 1.25vw;
+	border-left: 1.75vw solid transparent;
+	border-right: 1.75vw solid transparent;
+	border-bottom: 1.5vw solid #6FDE30;
+	z-index: 15;
+
+}
+
+.losangephaut{
+	display: table;
+	margin: 0 auto;
+	margin-top: -6vh;
+	border-left: 3vw solid transparent;
+	border-right: 3vw solid transparent;
+	border-bottom: 6vh solid #B130DE;
+}
+
+.losangepbas{
+	position: absolute;
+	border-left: 3vw solid transparent;
+	border-right: 3vw solid transparent;
+	border-top: 6vh solid #B130DE;
+}
+
+.losangephauti{
+	display: table;
+	margin: 0 auto;
+	margin-top: -3vh;
+	border-left: 1.5vw solid transparent;
+	border-right: 1.5vw solid transparent;
+	border-bottom: 3vh solid var(--lightsedonca);
+}
+
+.losangepbasi{
+	position: absolute;
+	margin-left: 1.5vw;
+	border-left: 1.5vw solid transparent;
+	border-right: 1.5vw solid transparent;
+	border-top: 3vh solid var(--lightsedonca);
+}
+
+.losangephautc{
+	display: table;
+	margin: 0 auto;
+	margin-top: -3vh;
+	border-left: 1.5vw solid transparent;
+	border-right: 1.5vw solid transparent;
+	border-bottom: 3vh solid #B130DE;
+}
+
+.losangepbasc{
 	position: absolute;
-	width: 1.5vw;
-    box-sizing: content-box;
-    top: -2.75vw;
-    left: 0.25vw;
-    border-width: 1.5vw 0.5vw 0;
-    border-style: solid;
-    border-color: var(--lightsedonca) transparent;
-}
-
-.pentagoneinterieur:before{
-	content: "";
-    position: absolute;
-    top: -2.4vw;
-    left: -0.486vw;
-    border-width: 0 1.3vw 1vw;
-    border-style: solid;
-    border-color: transparent transparent var(--lightsedonca);
-}
-
-.ppentagone{
-	position: relative;
-	width: 1.5vw;
-    box-sizing: content-box;
-    top: 1vw;
-    left: 1vw;
-    border-width: 1.5vw 0.5vw 0;
-    border-style: solid;
-    border-color: #6FDE30 transparent;
-}
-
-.ppentagone:before{
-	content: "";
-    position: absolute;
-    top: -2.45vw;
-    left: -0.5vw;
-    border-width: 0 1.3vw 1vw;
-    border-style: solid;
-    border-color: transparent transparent #6FDE30;
-}
-
-/* PARTIE LOSANGE */
-.losange {
-  width  : 0;
-  height : 0;
-  border : 1.5vw solid transparent;
-  border-bottom : 2.25vw solid #B130DE;
-  position : relative;
-  top : -1.5vw;
-}
-.losange:after {
-  content : '';
-  position : absolute;
-  left : -1.53vw;
-  top  : 2.2vw;
-  border : 1.5vw solid transparent;
-  border-top : 2.25vw solid #B130DE;
-}
-
-.losangeinterieur {
-  width  : 0;
-  height : 0;
-  border : 0.75vw solid transparent;
-  border-bottom : 1.125vw solid var(--lightsedonca);
-  position : relative;
-  top : 0.45vw;
-  left: -0.74vw;
-  z-index: 	2;
-}
-.losangeinterieur:after {
-  content : '';
-  position : absolute;
-  left : -0.75vw;
-  top  : 1.1vw;
-  border : 0.75vw solid transparent;
-  border-top : 1.125vw solid var(--lightsedonca);
-  z-index: 	2;
-}
-
-.plosange {
-  width  : 0;
-  height : 0;
-  border : 0.75vw solid transparent;
-  border-bottom : 1.125vw solid #B130DE;
-  position : relative;
-  top : -0.5vw;
-  left: -0.74vw;
-  z-index: 	2;
-}
-.plosange:after {
-  content : '';
-  position : absolute;
-  left : -0.75vw;
-  top  : 1.1vw;
-  border : 0.75vw solid transparent;
-  border-top : 1.125vw solid #B130DE;
-  z-index: 	2;
+	margin-left: 1.5vw;
+	border-left: 1.5vw solid transparent;
+	border-right: 1.5vw solid transparent;
+	border-top: 3vh solid #B130DE;
 }
 
+
 .retourstp{
 	position: absolute;
 }
diff --git a/src/index.html b/src/index.html
index 3378ebb..5e4b885 100644
--- a/src/index.html
+++ b/src/index.html
@@ -57,52 +57,61 @@
 
 		<div id="ContainBottom">
 			<!-- Forme : rond-->
-			<div class="anneau">
-				<div class="rondinterieur inté"></div>
+			<div class="containform">
+				<div class="anneau">
+					<div class="rondinterieur inté"></div>
+				</div>
 			</div>
 			<div class="containform">
 				<div class="rond"></div>
 			</div>
 
 			<!-- Forme : carré-->
-			<div class="carre">
-				<div class="carreinterieur inté"></div>
-			</div>
+			<div class="containform">
+				<div class="carre">
+					<div class="carreinterieur inté"></div>
+				</div>
+			</div>			
 			<div class="containform">
 				<div class="pcarre"></div>
 			</div>
 
 			<!-- Forme : triangle-->
-			<div class="triangle">
-				<div class="trianglerinterieur"></div>
-			</div>
+			<div class="containform">
+				<div class="triangle">
+					<div class="trianglerinterieur"></div>
+				</div>
+			</div>			
 			<div class="containform">
 				<div class="ptriangle"></div>
 			</div>
 
 			<!-- Forme : pentagone-->
 			<div class="containform">
-				<div class="pentagone">
-					<div class="pentagoneinterieur"></div>
-				</div>
+				<div class="triangletrapezeinte"></div>
+				<div class="trapezeinte"></div>
+				<div class="triangletrapeze"></div>
+				<div class="trapeze"></div>
 			</div>
 			
 			<div class="containform">
-				<div class="ppentagone"></div>
+				<div class="triangletrapezep"></div>
+				<div class="trapezep"></div>
 			</div>
 
 			<!-- Forme : losange -->
 			<div class="containform">
-				<div class="losange">
-					<div class="losangeinterieur"></div>
-				</div>
+				<div class="losangephaut"></div>
+				<div class="losangepbas"></div>
+				<div class="losangephauti"></div>
+				<div class="losangepbasi"></div>
+
 			</div>
-			
 			<div class="containform">
-				<div class="plosange"></div>
+				<div class="losangephautc"></div>
+				<div class="losangepbasc"></div>
 			</div>
 
-
 			
 		</div>